Forstå PureMVC Open Source Framework

Understanding den PureMVC Open Source Work
to
Del
3
Del

Dette Cyber ​​mandag Envato Tuts + Kursene vil bli redusert til bare $ 3. Ikke gå glipp av.

To ganger i måneden, vi besøker noen av våre lesere favoritt innlegg fra hele historien Activetuts +. Denne opplæringen ble først publisert i mai 2009.

Av og til kan du bli bedt om å arbeide med et prosjekt som krever mye koding og /eller samarbeid med kolleger. Det er trygt å si at rammer er ofte det beste valget om struktur, semantikk og produktivitet.


Forstå et rammeverk kan ta mye tid, men når du er fornøyd med din kunnskap, du kan bokstavelig talt kode på hastigheten på tanken. PureMVC er en flott ramme for AS3; noen kan si det er litt vanskelig å få hodet rundt, men vil du være glad du gjorde.

Som du kan se av demo, hva vi jobber mot er ganske enkel, men det er nok til å gi deg en forståelse av hvordan PureMVC fungerer.



Før vi begynner ...

Før vi begynner jeg ønsker å sørge for at følgende baser er dekket. Dette er en tutorial for middels til avanserte Actionscripters, men ikke bli skremt hvis du er verken, er det ingen tid som i dag for å begynne å lære!


    Dette eksempelet er bygget ved hjelp av Flex Builder. Du kan gå til Adobes nettsted og laste ned selv en kopi (60 dagers gratis prøveversjon!). Men det vil gjerne jobbe i en IDE etter eget valg, enten det er FlashDevelop, FDT, eller god ol 'Textmate.

    Som jeg har sagt, er denne opplæringen for middels til avanserte Actionscripters, så jeg kommer til å hoppe over de dagligdagse deler som setter opp prosjektet i din valgte IDE, osv ...
    < li> Det er verdt å merke seg at neste gang du går til å gjøre virksomheten din, er det lurt å først skrive ut en kopi av PureMVC beste praksis. Det er ganske tung, men vil du være glad du leser den.


    Trinn 1: Konfigurer

    Det ville være klokt å ta deg en kopi av prosjektet .zip filen. Innenfor det, vil du se den grunnleggende satt opp for denne opplæringen. Fyr opp din IDE (mine er Flex Builder) og opprette et nytt prosjekt. Det neste du må gjøre er å sette opp Flex kompilatoren å bruke "src" -mappen for kildebanen, den "debug" -mappen for debug bin og "distribuere" -mappen for utgivelsen bin. Enkelt

    For det andre, har jeg tatt med to ekstra biblioteker innenfor "src" mappen:. Greensock sin TweenLite ("src /GS") og PureMVC ("src /eiendeler /SWC"). Du vil merke at jeg har brukt en .swc for PureMVC biblioteket i stedet for kildemappen, er det fordi jeg foretrekker å bruke .swc filer. Sørg for at begge disse bibliotekene er satt til å kompilere når du feilsøke og til slutt distribuere. Nedenfor er et skjermbilde av målet layout for prosjektet. Selv om du er mer enn velkommen til å importere prosjektet og gå gjennom det fil ved fil, skal jeg fortelle deg hvordan du skal skrive hver fil slik at du ender opp med et prosjekt som ligner på eksempelet.


    < h2> Trinn 2: Grunnleggende

    Begrepet PureMVC kan gjøre det beste ut av oss viker unna, men når du har fått hodet rundt nakne grunnleggende, vil du snart være flyr din vei rundt det. PureMVC struktur betyr at meldinger er vant til å kjøre enkelte kommandoer enten de er innenfor modeller, synspunkter eller kontrollere. Disse meldingene består av navn og en valgfri kroppen. Kroppen parameter lar deg sende data fra visningen (for eksempel som knappen ble klikket på) til en kontroller som kan deretter sende den til modellen som deretter returnerer den relative data.

    Denne oppfatningen av meldinger betyr at PureMVC har en veldig klar struktur for hvordan kildefilene er satt opp:

    Proxy (modell) Bilde:
    En proxy er rett og slett en modell. En modell, til de som kanskje ikke vet, er en klasse som håndterer alle data transaksjoner som lasting XML-data, lagre den og hente den. I motsetning til meklere eller kommandoer, fullmakter aldri høre på eller håndtere varslinger; de kun har ekspedere dem. Dette betyr at for at en kommando eller en mediator for å få tak i noen data, vil dataene må enten føres tilbake til den anropte via en melding kropp eller ved å hente forekomsten av proxyen fra fasaden. Fullmakter lagre sine data innen offentlige klasser kalt VO (verdigjenstander). De er bare enkle klasser som har offentlige variabler der vi kan holde våre data for å hente og oppdatere via våre fullmakter.

    Meklere og deres synspunkter (vis) Bilde:
    En megler er en klasse som opptrer på vegne av en visning. Innenfor programmet kan du ha flere visninger og alle disse synspunktene vil være å utvide en Displayobject klasse (ellers ville de ikke være visninger). En megler vil være den klassen som legger visningen til basen din (den "viewComponent", det er det første argumentet som er gått til en mellommann), og det vil også håndtere alle innkommende og utgående meldinger relatert til denne visningen. Dette betyr at mekleren er ansvarlig for å varsle din søknad hvis brukeren har utløst en hendelse i visningen (for eksempel ved å klikke på en knapp), og vil også ha ansvar for å føre data fra en proxy til visningen for å oppdatere den . En mekler lytter og håndterer meldinger selv og er i stand til å registrere nye meklere i fasaden når de trengs i stedet for å legge dem alle på en gang.

    Kommandoer (controller) Bilde:
    En kommando er rett og slett en kontroller. Selv om det ikke lytte til meldinger selv, det har varslinger i rørledning til det fra fasaden. Dette betyr at en kommando har til å kjøre et betinget utsagn for å tillate det å finne ut hvilke varslings den er mottatt og hva de skal gjøre videre. Så vel som å motta varsler, er kommandoer lov til å sende dem ut for. De er også i stand til å registrere proxyer, meklere og flere kommandoer.

    Forhåpentligvis som skulle gitt deg en enkel forståelse av hvordan PureMVC er satt ut. For en visuell representasjon av hvordan meldinger kan "fly" rundt søknaden din, sjekk ut PureMVC konseptuelle diagram:

    Du vil bli tilgitt hvis du tror det er alt veldig skremmende, men når du setter deg ned og planlegge ut hva din Søknaden kommer til å se ut, vil du snart forstå hva vi går for:


      vil Vår base klasse fyre opp fasaden

      Fasaden vil deretter ringe starte opp kommandoen

      Den starter opp kommandoen vil registrere vår proxy og søknad mekler

      Proxy vil da referere sin verdi objekt og vente på videre varslinger

      Søknaden megler vil registrere fremdriften Mekleren

      Fremdriften mekler vil skape fremdrift visning og deretter sende en melding om å laste inn data

      Fasaden vil motta denne meldingen og sende den til data kommandoen

      data kommandoen vil deretter filtrere varsling og fortelle fullmakt til å laste dataene

      Proxy vil varsle fremdriften oppfatning at det er lasting av data (det vil bli vist), fremdriften (det vil bli oppdatert) og når den er ferdig (det vil være skjult); mekleren vil håndtere alt dette

      Proxy vil da sende en melding for søknaden mellommann til å håndtere

      Søknaden megler vil registrere nettadresser vise hvor vi skal lage knapper for brukeren å klikk

      webadresser utsikt megler vil passere data fra proxy til webadresser visning og legge webadresser vise til scenen

      Brukeren vil klikke på en knapp, dette vil da bli håndtert av megler og en melding vil bli sendt til proxy

      Proxy vil da igjen laste dataene, alltid videresending staten til fremdriften visning

      Proxy vil så igjen sende et varsel for søknad mellommann til å håndtere

      Søknaden Mekleren vil da fortelle webadresser visning megler for å skjule webadresser visning og deretter registrere bildene vise

      Bildene viser mekler vil skape de bildene vise fra proxy data

      Det høres kanskje komplisert, men det er bare snakk om å bremse ned programmets funksjon i små bit-størrelse biter



      Trinn 3:. Alt starter med Facade

      Når du arbeider med PureMVC, du må forstå at koding starter alltid med fasaden. Fasaden er et lag som knytter PureMVC rammeverket, din MVC kode og din base Actionscript-fil; i dette tilfellet min heter "App.as". Under kjøring vil App.as gjøre sin virksomhet, enten det er å sette opp skalering av scenen, bildefrekvens og whatnot; og når den er klar, vil det påkalle fasaden til å starte opp programmet.

      La oss lage vår base Actionscript-fil. Ved hjelp av din favoritt IDE opprette en ny fil, you name it "App.as" innenfor "src" og være sikker på at den utvider Sprite klassen slik:
      pakke {import flash.display.Sprite; public class App strekker Sprite {offentlig funksjon App () {}}}



      Trinn 4: Sette opp Base

      Nå som vi har laget vår base klasse, gjerne legge ting slik som å sette bredde, høyde, bakgrunnsfarger og så videre. Det er også praktisk å importere noen eiendeler du måtte trenge, for eksempel skrifter eller bilder. Når du er fornøyd med baseklassen, kan vi deretter gå videre til å skape fasaden. Nedenfor er en forhåndsvisning av min base klasse:
      pakke {import flash.display.GradientType; import flash.display.Sprite; import flash.geom.Matrix; import flash.text.Font; [SWF (width = "600", height = "400", framerate = '30 ', bakgrunnsfarge =' # 000000 ')] public class App strekker Sprite {[Bygg (systemFont =' Arial ', skriftnavn =' Arial ', mimetype = 'application /x-font')] private Var arialFont: Klasse; offentlig funksjon App () {init (); } Private funksjon init (): void {var matte: Matrix = new Matrix (); Var bg: Sprite = new Sprite (); mat.createGradientBox (stage.stageWidth, stage.stageHeight, Math.PI * 0,5); bg.graphics.beginGradientFill (GradientType.LINEAR, [0x333333, 0x000000], [1, 1], [0, 255], matte); bg.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); Font.registerFont (arialFont); }}}



      Trinn 5: Sette opp Fasade

      I dette trinnet vi fordype rett inn i verden av PureMVC. Som jeg sa i trinn 2, er fasaden et viktig lag som holder din søknad sammen. Opprett en ny klasse som heter "ApplicationFacade.as" innenfor "src /no /flashtuts", sørg for at den strekker Fasade og implementerer IFacade. Legg merke til at vår fasaden ikke har en konstruktør som det er å utvide Fasade klassen. Innenfor vår fasade skal vi ha 3 funksjoner med en fjerde valg en. I tillegg skal vi ha 2 offentlige konstanter. Nedenfor er det vi skal ta sikte på å få vår fasade klasse ser slik ut:.
      Pakke com.flashtuts {import com.flashtuts.controller *; importere com.flashtuts.model. *; importere com.flashtuts.view. *; import com.flashtuts.view.component.ImagesView; import com.flashtuts.view.component.URLsView; import org.puremvc.as3.interfaces.IFacade; import org.puremvc.as3.patterns.facade.Facade; import org.puremvc.as3.patterns.observer.Notification; public class ApplicationFacade strekker Fasade implementerer IFacade {public static konst NAVN: String = 'ApplicationFacade'; public static konst OPPSTART: String = NAVN + 'Oppstart'; (eksempel eksempel: ny ApplicationFacade ()?) ApplicationFacade {return: public static funksjon getInstance () som ApplicationFacade; } Ride beskyttet funksjon initializeController (): void {super.initializeController (); registerCommand (OPPSTART, StartupCommand); registerCommand (URLsView.DATA_GET, DataCommand); registerCommand (ImagesView.DATA_GET, DataCommand); } Public oppstart funksjon (etappe: Object): void {sendNotification (OPPSTART, scene); } Overstyre offentlig funksjon sendNotification (notificationName: String, kropp: Object = null, type: String = null): void {trace ('Sendte' + notificationName); notifyObservers (ny Notification (notificationName, kropp type)); }}}

      Innen PureMVC, hendelser eller "varsler" brukes til å rute data og utløse funksjoner som skal utføres innenfor våre synspunkter eller kontrollere. Derfor siden vår fasade kommer til å sende en melding til en kommando som forteller den til å starte opp programmet, skaper vi en unik konstant som vil bli brukt av fasaden for å sende kommandoen og starte opp funksjonen lytte til kommandoen:
      public static konst NAVN: String = 'ApplicationFacade'; public static konst OPPSTART: String = NAVN + 'Oppstart';

      Selv om du ikke trenger å ha en konstant kalt NAVN, er det en god idé å alltid lage den i klasser som har varslings konstanter i dem for å holde disse meldingene unikt og mindre utsatt for menneskelige feil (som stavefeil).

      Neste vi kommer til den første av våre nødvendige funksjoner, "getInstance ()". Dette er først og fremst funksjon av fasaden og lar vår base klasse for å hente en forekomst av fasaden, deretter brann oppstart kommando (vi får til det):
      public static funksjon getInstance (): ApplicationFacade { (eksempel eksempel: ny ApplicationFacade ()?) tilbake som ApplicationFacade; }

      Nå er vi kommet til funksjonen som styrer ruting av meldinger til våre kontrollere, eller som PureMVC kaller dem, kommandoer:
      overstyre beskyttet funksjon initializeController (): void {super.initializeController (); registerCommand (OPPSTART, StartupCommand); registerCommand (URLsView.DATA_GET, DataCommand); registerCommand (ImagesView.DATA_GET, DataCommand); }

      Det er ganske viktig å holde "registerCommand (OPPSTART, StartupCommand);" som uten dette, ville søknaden ikke starte. Alt det betyr i utgangspunktet er at fasaden vil passere meldingen heter "Startup" til en kommando som heter "StartupCommand". Som du kan se, har jeg to til. Begge peker på en annen kontroller kalt "DataCommand" og begge meddelelser forespørsler om å få data.

      Vi får nå til vår siste nødvendige funksjon uten vår fasade, "oppstart ()". Alt dette rett og slett gjør er avfyre ​​en melding som er rutet til «StartupCommand" via "registerCommand" handlere:
      offentlig oppstart funksjon (etappe: Object): void {sendNotification (OPPSTART, scene); }

      Til slutt, sist men ikke minst, har vi vår endelige funksjon. Dette er en valgfri funksjon som jeg gjerne legge til når jeg jobber med PureMVC som det tillater meg å se hvilke hendelser som blir sparket og i hvilken rekkefølge. Funksjonen bare overskriver "sendNotification ()" funksjon som du bruker i løpet av PureMVC å sende meldinger. Samt varsle programmets observatører, sporer det hendelsene for deg å se:
      styre offentlig funksjon sendNotification (notificationName: String, kropp: Object = null, type: String = null): void {trace ('Sendte' + notificationName); notifyObservers (ny Notification (notificationName, kropp type)); }

      Så det er vår fasade. Før vi er ferdige, må vi bruke en mer linje til vår base klasse. Denne linjen vil rett og slett få en forekomst av vår fasade og kjør deretter starte opp kommandoen.
      ApplicationFacade.getInstance () oppstart (denne);

      Pass på at du setter denne filen på slutten av hva din base klasse er gjør. For eksempel har jeg satt den under alle ting som setter bakgrunnen gradient for søknaden min:
      pakke {import com.flashtuts.ApplicationFacade; import flash.display.GradientType; import flash.display.Sprite; import flash.geom.Matrix; import flash.text.Font; [SWF (width = "600", height = "400", framerate = '30 ', bakgrunnsfarge =' # 000000 ')] public class App strekker Sprite {[Bygg (systemFont =' Arial ', skriftnavn =' Arial ', mimetype = 'application /x-font')] private Var arialFont: Klasse; offentlig funksjon App () {init (); } Private funksjon init (): void {var matte: Matrix = new Matrix (); Var bg: Sprite = new Sprite (); mat.createGradientBox (stage.stageWidth, stage.stageHeight, Math.PI * 0,5); bg.graphics.beginGradientFill (GradientType.LINEAR, [0x333333, 0x000000], [1, 1], [0, 255], matte); bg.graphics.drawRect (0, 0, stage.stageWidth, stage.stageHeight); bg.graphics.endFill (); addChild (bg); Font.registerFont (arialFont); . ApplicationFacade.getInstance () oppstart (denne); }}}

      Nå er vi klare til å få våre hender skitne



      Trinn 6:. Start Up Command

      Som diskutert i trinn 4, håndterer fasaden all varsling ruting til våre kommandoer (kontrollørene). Den første kommandoen vi har til å skape er "StartupCommand". Så lage en ny fil som heter "StartupCommand.as" innenfor "src /com /flashtuts /controller". Sørg for at den strekker SimpleCommand og implementerer ICommand. Akkurat som vår fasade, vil våre kommandoer ikke har konstruktører, i stedet overstyre en offentlig funksjon fra SimpleCommand klasse kalt "execute ()":
      pakke com.flashtuts.controller {import com.flashtuts.model.DataProxy; import com.flashtuts.view.ApplicationMediator; import org.puremvc.as3.interfaces.ICommand; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.command.SimpleCommand; public class StartupCommand strekker SimpleCommand implementerer ICommand {styre offentlig funksjon utføre (varsling: INotification): void {facade.registerProxy (ny DataProxy ()); facade.registerMediator (ny ApplicationMediator (notification.getBody () som App)); }}}

      Du vil merke at det innenfor vår "execute ()" funksjon, det er ett argument som heter "notification". Vi trenger ikke å bruke det som dette stadiet, men dette vil bli noe som vi bruker i våre andre kommandoer. Ettersom denne kommandoen brukes til å starte opp vår søknad, det første den gjør det registrere en proxy (en modell):
      facade.registerProxy (ny DataProxy ());

      og deretter vår mekler:
      fasade .registerMediator (ny ApplicationMediator (notification.getBody () som App));

      Så nå har vi vår oppstart kommando klar. Hva vi skal gjøre nå er å lage vår proxy og deretter komme videre til vår ApplicationMediator



      Trinn 7:. Opprette en Proxy

      Nå som vi har vår "StartupCommand" registrering vår proxy Vi må sørge for at proxy eksisterer. Så lage en ny fil som heter "DataProxy.as" innenfor "src /com /flashtuts /modell", og sørge for at den strekker Proxy og implementerer IProxy. Til å begynne med var vi bare skal ha to funksjoner i vår proxy: konstruktøren og en "bli" funksjon for å hente VO (verdi objekt):
      pakke com.flashtuts.model {import com.flashtuts.model .vo.DataVO; import org.puremvc.as3.interfaces.IProxy; import org.puremvc.as3.patterns.proxy.Proxy; public class DataProxy strekker Proxy implementerer IProxy {public static konst NAVN: String = 'DataProxy'; offentlig funksjon DataProxy () {super (navn, ny DataVO ()); } Offentlig funksjon får vo (): DataVO {avkastningstall som DataVO; }}}

      Som du kan se, den første funksjonen i vår proxy er vår konstruktør hvor vi "super ()" to variabler: proxy navn (fastsatt av NAME konstant) og VO. Vi trenger å passere navnet på proxy som dette vil tillate oss å hente fasaden er forekomsten av det i stedet for å lage en ny forekomst og miste vår VO data:
      public static konst NAVN: String = 'DataProxy'; offentlig funksjon DataProxy () {super (navn, ny DataVO ()); }

      Den andre funksjonen er en enkel get funksjon som returnerer vår VO. Dette gjør at proxyer, kommandoer og meklere å enkelt få tilgang til VO via proxy:
      offentlig funksjon får vo (): DataVO {avkastningstall som DataVO; }

      Før vi avslutter med vår proxy, må vi opprette vår VO, så lage en ny klasse kalt "DataVO.as" innenfor "src /com /flashtuts /modell /vo". Vi så kommer til å legge tre offentlige variabler: "dataURL: String", "urlsArray: Array" og "urlsDataArray: Array". Vi kommer til å sette "dataURL" å peke på vår XML fil i "src /eiendeler /xml" kalt "data.xml" og for de to andre vi bare kommer til å sette dem som tomme arrays:
      Pakken com.flashtuts.model.vo {public class DataVO {public Var dataURL: String = 'eiendeler /xml /data.xml'; offentlig Var urlsArray: Array = []; offentlig Var urlsDataArray: Array = []; }}

      Dette er innholdet av XML-filen:?
      ≪ xml version = "1.0" encoding = "UTF-8" >? < webadresser > <url>http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;tags=london&amp;api_key=YOURAPIKEY</url> <url>http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;tags=paris&amp;api_key=YOURAPIKEY</url> <url>http://api.flickr.com/services/rest/?method=flickr.photos.search&amp;tags=new%20york&amp;api_key=YOURAPIKEY</url> < /webadresser >

      Merk: Du vil se at jeg har fjernet min API-nøkkel. Du kan enkelt søke om man ved å gå til Flickr API dokumentasjon nettstedet.

      Nå som vi har fått vår proxy og VO på plass, må vi sette opp våre meklere og synspunkter.



      Trinn 8: Opprette ApplicationMediator

      "ApplicationMediator" er laget som skal sitte mellom vår "StartupCommand" og visnings meklere. Som søknaden din blir større og større, vil det ikke lenger være fornuftig å registrere alle dine meklere samtidig (for eksempel ved oppstart). Derfor, ved å ha en forelder mekler (den ApplicationMediator) kan du ha det lytte til meldingene som sendes rundt din søknad og registrere meklere når de trengs. Siden meklere opptre på vegne av visningene, noen ganger dataene som kreves for en visning ikke kan ha blitt lastet ennå, derfor virker det dumt å registrere mekleren og skape visningen uten å være i stand til å gi det noen data.

      Til å begynne med, opprette en ny fil som heter "ApplicationMediator.as" innenfor "src /com /flashtuts /view" og sørge for at den strekker Mellommann og implementerer IMediator. Nedenfor er det du bør sikte inn "ApplicationMediator" for å se slik ut:
      pakke com.flashtuts.view {import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ApplicationMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ApplicationMediator'; offentlig funksjon ApplicationMediator (viewComponent: Object = null) {super (NAVN, viewComponent); }}}

      Som du kan se, starter mekler med vår gamle venn "Navn" konstant og sin konstruktør. Tilbake når vi registrert megler i trinn 6, passerte vi en forekomst av scenen, vår base klasse ("App.as") som første argument. Innenfor vår konstruktør vi super navn og det første argumentet, den "viewComponent" som det er den viewComponent som kommer til å la våre meglere for å legge sine synspunkter til scenen, vår base klasse.

      Nå er et godt tidspunkt å begynne å snakke om våre synspunkter. Innenfor mitt eksempel har jeg tre: en fremgang visning, en url utvalg utsikt og en bilder utsikt. For hver visning har vi en mellommann. Siden det første vi ønsker å gjøre er å laste inn data fra vår XML-fil, synes det passende å skape vår fremgang visning, så mekler og deretter registrere mekler med vår "ApplicationMediator".

      Ved å utvide klassen Mellommann, gjør det oss til å overstyre en hendig funksjon som heter "onRegister ()". Denne funksjonen kalles når fasaden registrerer en mellommann, slik som synes det beste stedet å få vår "ApplicationMediator" for å registrere mekler for vår fremgang syn:
      styre offentlig funksjon onRegister (): void {facade.registerMediator (ny ProgressViewMediator (viewComponent)); }

      Som du kan se, er det det samme stil som vi brukte i "StartupCommand" og vi passerer den "viewComponent" til megler slik at det er i stand til å legge fremdriften utsikt til scenen. Din søknad mekler skal se slik ut:
      pakken com.flashtuts.view {import com.flashtuts.view.component.ProgressView; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ApplicationMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ApplicationMediator'; offentlig funksjon ApplicationMediator (viewComponent: Object = null) {super (NAVN, viewComponent); } Overstyre offentlig funksjon onRegister (): void {facade.registerMediator (ny ProgressViewMediator (viewComponent)); }}}



      Trinn 9: Lage vår fremgang Mellommann og Vis

      Nå som vi har satt vår "ApplicationMediator" for å registrere vår "ProgressViewMediator", må vi først og fremst begynne med å skape en " ProgressView.as "class innen" src /no /flashtuts /view /komponenter ". Dette er en klasse som bare utvider Displayobject, i dette tilfellet sprite. Jeg vil ikke gå gjennom koden for visning som det er ganske vanlig for noen Actionscripter men jeg vil snakke om samspillet mellom visning og dens mekler under:
      pakke com.flashtuts.view.component {import flash.display. Sprite; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import gs.TweenLite; public class ProgressView strekker Sprite {public static konst NAVN: String = 'ProgressView'; public static konst SHOW: String = NAVN + 'Show'; public static konst HIDE: String = NAVN + 'Skjul'; public static konst UPDATE: String = NAVN + 'Update'; private Var Textfield: Textfield; offentlig funksjon ProgressView () {init (); } Private funksjon init (): void {var tekstformat: tekstformat = new tekstformat (); textFormat.color = 0xFFFFFF; textFormat.font = 'Arial'; Textfield = new Textfield (); textField.autoSize = TextFieldAutoSize.CENTER; textField.defaultTextFormat = tekstformat; textField.embedFonts = true; textField.text = 'Vennligst vent ...'; textField.x = 300 - (textField.width /2); textField.y = 200 - (textField.height /2); addChild (tekstfeltet); } Offentlig funksjon showet (): void {textField.text = 'Vennligst vent ...'; TweenLite.to (dette, 0,5, {autoAlpha: 1}); } Offentlig funksjon hide (): void {TweenLite.to (dette, 0,5, {autoAlpha: 0}); } Offentlig funksjon oppdateringen (prosent: Number): void {textField.text = 'Loaded' + prosent + '%'; }}}

      Som megler gjør "alle snakker 'for visningen, er det viktig utsikten og mekler kan sende informasjon til hverandre. Mekleren kan sende informasjon til visningen som megler vil ha en forekomst av den oppfatning erklærte i det, men for visningen til pass informasjonen til megler (for eksempel en bruker klikker på en knapp) vi er avhengige av hendelser (for ikke å være blandet opp med meldinger). Vi bare få vårt syn å sende en hendelse og få vår mellommann til å lytte til den hendelsen. Mekleren kan derfor håndtere hendelsen fra visningen, fordøye informasjonen og kjøre noe tilsvarende. Vi erklærte navnet på disse hendelsene ved hjelp av offentlige konstanter, så vårt syn har tre hendelser:. Vise, skjule og UPDATE (mye som vår fasade)

      Merk: plassering av hendelses navnene kan plasseres innenfor fasaden ("ApplicationFacade.as" fil) eller innen de relative utsikt. Jeg synes det er lettere og renere å holde dem innenfor visningene, men det er opp til deg hvilken vei du synes passer bedre for deg.

      Som du kan fortelle, har jeg laget et tekstfelt som skal brukes til å vise hvor mange prosent av dataene lastet gjennom søknaden vår.

      Vi kan nå gå videre til mekleren, så lage en ny fil som heter "ProgressViewMediator.as" i "src /com /flashtuts /view" og være sikker at den strekker Mellommann og implementerer IMediator. Det vil følge samme stil som vår "ApplicationMediator" og derfor har en konstruktør som har ett argument (det "viewComponent"), et offentlig konstant kalt navn og vår venn styres "onRegister ()". Nedenfor er det din megler bør se ut:
      pakke com.flashtuts.view {import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ProgressViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ProgressViewMediator'; offentlig funksjon ProgressViewMediator (viewComponent: Object = null) {super (NAVN, viewComponent); } Overstyre offentlig funksjon onRegister (): void {}}}

      Det første vi trenger å legge til vårt syn som en referanse til vår megler:
      pakke com.flashtuts.view {import com.flashtuts.view. component.ProgressView; import com.flashtuts.view.component.URLsView; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ProgressViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ProgressViewMediator'; private Var progressView: ProgressView; ...

      og nå får vi mekler å legge vårt syn til "viewComponent" så vi har:
      pakke com.flashtuts.view {import com.flashtuts.view.component.ProgressView; import com.flashtuts.view.component.URLsView; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ProgressViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ProgressViewMediator'; private Var progressView: ProgressView; offentlig funksjon ProgressViewMediator (viewComponent: Object = null) {super (NAVN, viewComponent); } Overstyre offentlig funksjon onRegister (): void {progressView = new ProgressView (); viewComponent.addChild (progressView); }}}

      Nå som vi har fått bare-bones av vår mellommann, må vi se på hva vårt syn kommer til å gjøre. Vel, som du kan sikkert fortelle fra konstanter, er vårt syn kommer til å fortelle brukeren hvor mye som har blitt lastet så langt, derfor har de offentlige konstanter vise, skjule og UPDATE. Siden disse kommer til å være noe som vårt syn vil reagere på (som du kan fortelle av "show ()", "hide ()" og "update ()" funksjoner innenfor vårt syn), trenger vi vår mellommann til å håndtere disse varslinger og kjøre disse funksjonene tilsvar

      Vi vil legge til to nye funksjoner til vår megler. "listNotificationInterests ()" og "handleNotification ()". Den første funksjonen returnerer en matrise av alle meddelelser denne megler er interessert i (dette er hvorfor det er så viktig å holde disse meldingene i offentlige konstanter slik at de er enkle å referere). Sistnevnte faktisk gjør noe med dem. Dette mekler er bare interessert i å vise, skjule og UPDATE så det er det vi legger til den første funksjonen og håndteres i den andre:
      pakke com.flashtuts.view {import com.flashtuts.view.component.ProgressView; import com.flashtuts.view.component.URLsView; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ProgressViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ProgressViewMediator'; private Var progressView: ProgressView; offentlig funksjon ProgressViewMediator (viewComponent: Object = null) {super (NAVN, viewComponent); } Overstyre offentlig funksjon onRegister (): void {progressView = new ProgressView (); viewComponent.addChild (progressView); sendNotification (URLsView.DATA_GET); } Overstyre offentlig funksjon listNotificationInterests (): Array {return [ProgressView.SHOW, ProgressView.HIDE, ProgressView.UPDATE]; } Overstyre offentlig funksjon handleNotification (varsling: INotification): void {var navn: String = notification.getName (); Var kroppen: Object = notification.getBody (); bryteren (navn) {case ProgressView.SHOW: progressView.show (); gå i stykker; case ProgressView.HIDE: progressView.hide (); gå i stykker; case ProgressView.UPDATE: progressView.update (body.percent); gå i stykker; }}}}

      Du kan bare se at vår "handleNotification ()" tar argumentet for en INotification, en klasse som inneholder navnet og kroppen av en melding. import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; Textfield = new Textfield (); gå i stykker; gå i stykker; import flash.events.Event; import flash.events.ProgressEvent; import flash.net.URLRequest; gå i stykker; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; import flash.events.Event; gå i stykker; gå i stykker; gå i stykker; gå i stykker; gå i stykker; import flash.events.Event; import flash.events.ProgressEvent; import flash.net.URLRequest;