Opprette en YouTube-søk og spille Gadget med PureMVC

Creating en YouTube Søk og Spill Gadget med PureMVC
Del
Del
Del
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

Etter mine tutorials på PureMVC og YouTube Player API jeg trodde det ville være en god idé å vise deg hvordan du bruker YouTube GData API for å søke etter og spille av videoer. Så jeg har laget en liten tutorial som kombinerer dine nye PureMVC og YouTube-spiller ferdigheter inn i en fin og enkel søk og spille gadget.



før vi Begynn ...

Dette er en tutorial for middels til avanserte Actionscripters og det ville være nyttig hvis du først lese mine PureMVC og YouTube Player API tutorials

Trinn 1:.? Hvorfor bruke PureMVC

Du lurer kanskje på hvorfor jeg har valgt å bruke PureMVC. Vel, jeg synes det er flott! Og det er et flott verktøy som lar deg bygge noe lite og deretter utvide det til et stort program - det handler om skalerbarhet. Så mens vi lager dette programmet, er det verdt å merke seg at dette kan brukes som en gadget som skal inkluderes i flere steder som iGoogle, blogger og selv gadget-annonser

Trinn 2:. Set Up
< p> Fyr opp din favoritt IDE, enten det er Flex Builder, FDT, FlashDevelop eller Textmate og opprette en ny Action prosjekt. Vi kommer også til å være å skape en SWC så det er praktisk hvis du har en kopi av Flash (du kan laste ned en sti fra Adobes nettsted).

I tillegg skal vi bruke GreenSock s TweenLite klasse og ikke glemme den PureMVC kodebase

Merk:. I de første skritt vi skal være å sette opp et skjelett for PureMVC. En forklaring på de første trinnene er tilgjengelig på min PureMVC tutorial

Trinn 3:. Opprette Base App

Akkurat som med en hvilken som helst PureMVC app, vi trenger å sette opp vår base app. Jeg kommer til å starte med bare å lage en enkel bakgrunn for programmet og deretter kjører oppstart kommando på fasaden, så lage en ny fil som heter "App.as" innenfor "src /":
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); }}}
Trinn 4: Opprette Fasade

Vi har nå rett og slett skape fasaden, ikke noe spesielt, akkurat som fasaden vi opprettet i PureMVC opplæringen, så oppretter en ny fil som heter "ApplicationFacade.as" inne "src /no /flashtuts /":
pakke com.flashtuts {import com.flashtuts.controller.StartupCommand; 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); } 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)); }}}
Trinn 5: Opprette oppstarts Command

Nå skal vi lage vår oppstart kommando, og sørge for at vi registrere vår proxy og søknad megler. Lag en fil som heter "StartupCommand.as" i "src /com /flashtuts /controller /":
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)); }}}
Trinn 6: Opprette Proxy

Vi trenger nå å sette opp vår proxy, så la oss lage en fil som heter "DataProxy.as" i "src /com /flashtuts /modell /":
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 ()); } Nytt Proxy offentlig funksjon får vo (): DataVO {avkastningstall som DataVO; }}}

Vi vil komme tilbake til proxy senere i opplæringen som vi skal bruke den til å laste inn data fra GData og lagre den i VO

Trinn 7:. Opprette VO

Vi kommer til å bruke VO til å lagre data fra vår GData spørring slik at hvis de bruker søker etter et søkeord mer enn en gang, vi må bare laste inn data fra VO stedet for å skape en ny forespørsel til GData API. Lag en fil som heter "DataVO.as" i "src /com /flashtuts /modell /vo /":
pakke com.flashtuts.model.vo {import flash.utils.Dictionary; public class DataVO {public Var gdataURL: String = 'http://gdata.youtube.com/feeds/api/videos?orderby=published&max-results=15&v=2&q='; offentlige Var queryResults: ordbok = new ordbok (); }}

Ha en rask lese av GData API dokumentasjon vil du se at det var "gdataURL" viser at vi kommer til å få 15 resultater, og vi har forlatt URL åpen slik at vi kan sette søkestrengen på baksiden av forespørselen URL

Trinn 8:. Opprette Application Meklingsmannen

Den siste delen av vår PureMVC skjelettet er vår søknad megler. Vi skal lage den og deretter få det vår første visning og mekler, den "ProgressView" og "ProgressViewMediator" for å registrere, så oppretter du en fil som heter "ProgressViewMediator.as" innenfor "src /com /flashtuts /view /":
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); } Overstyre offentlig funksjon onRegister (): void {} overstyre offentlig funksjon listNotificationInterests (): Array {return []; } Overstyre offentlig funksjon handleNotification (varsling: INotification): void {var navn: String = notification.getName (); Var kroppen: Object = notification.getBody (); bryteren (navn) {}}}}
Trinn 9: Lage vår Progress Vis

Vi vil bare starte med en lignende fremgang tanke på det vi har gjort i PureMVC opplæringen, så opprette filen " ProgressView.as "innenfor" src /com /flashtuts /view /komponent /":
pakke com.flashtuts.view.component {import flash.display.Sprite; 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'; private Var ressurs: LoaderAsset; offentlig funksjon ProgressView () {init (); } Private funksjon init (): void {aktivum = new LoaderAsset (); asset.stop (); asset.x = 275; asset.y = 175; addChild (eiendel); } Offentlig funksjon showet (): void {asset.play (); TweenLite.to (dette, 0,5, {autoAlpha: 1}); } Offentlig funksjon hide (): void {asset.stop (); TweenLite.to (dette, 0,5, {autoAlpha: 0}); }}}

Du vil merke at vi bruker en ny klasse som heter "LoaderAsset". Dette, faktisk, er et filmklipp som vi vil skape i Flash IDE og deretter bruke i vår fremgang visning i stedet for bare å dukke prosent

Trinn 10:. Opprette SWC

Fyr opp Flash IDE (hvis du ikke har fått den Flash IDE, du kan laste ned prøveversjon fra Adobes nettsted) og opprette en ny AS3 fil:

Før vi fortsetter, må vi sørge for Flash vet at Vi ønsker å målrette Flash Player 9, og at vi eksporterer en SWC, så velg "Flash Player 9 'fra rullegardin øverst og merk av i boksen ved siden av" Export SWC "under overskriften" SWF Innstillinger ":

Nå skal vi lage en enkel loader. Jeg har valgt å gå for en spinner en, men det er opp til deg hva du gjør. Lag en sirkel og slå et hull i det:

Når du har satt et hull i sirkel, bruke en radial gradient, flytte den til høyre for sirkelen. Deretter kopierer halvparten av sirkelen, lim den på toppen av den aktuelle sirkelen og bruke en solid fyll til det. Ferdig. Nå er neste tingen å gjøre det rotere, så la oss lage en tween:

Jeg har fått min tween kjører for 15 bilder, kan du ha din fort, det samme eller langsommere. Nå er vi bare sette den til å rotere en gang:

Den siste tingen å gjøre er å bryte dette opp i et filmklipp. Når du har gjort det, åpne opp vinduet Egenskaper for at filmklipp og sette den til å eksportere for Action:

Som du ser har jeg kalte det "LoaderAsset", dette navnet kobling vil være klasse navnet du vil bruke i ditt syn, så tilbake til vår "ProgressView". Sørg for at du legger dine aktiva på samme måte som jeg har i klassen:
pakke com.flashtuts.view.component {import flash.display.Sprite; 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'; private Var ressurs: LoaderAsset; offentlig funksjon ProgressView () {init (); } Private funksjon init (): void {aktivum = new LoaderAsset (); asset.stop (); asset.x = 275; asset.y = 175; addChild (eiendel); } Offentlig funksjon showet (): void {asset.play (); TweenLite.to (dette, 0,5, {autoAlpha: 1}); } Offentlig funksjon hide (): void {asset.stop (); TweenLite.to (dette, 0,5, {autoAlpha: 0}); }}}
Trinn 11: Sette opp Fremskritts Vis Meklingsmannen

Vår fremgang syn megler vil være lik den vi opprettet i PureMVC tutorial med unntak av at det ikke er noen oppdatering som vi bare har en spinnende hjulet heller enn en prosent tegn. Opprett filen "ProgressViewMediator.as" i "src /com /flashtuts /view /":
pakke 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 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 (); progressView.hide (); viewComponent.addChild (progressView); } Overstyre offentlig funksjon listNotificationInterests (): Array {return [ProgressView.SHOW, ProgressView.HIDE]; } 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; }}}}

Du er fri til å bruke hva loader du vil, men det er et problem med YouTubes GData. Du ser når Flash Player gjør en samtale, de fleste servere sende innholds lengden på forespørsel til lasteren, og dermed gir Flash Player for å vite hvor mange bytes det kommer til å laste og tillater oss å jobbe ut en prosentandel. Men det betyr YouTube GData synes ikke å sende dette innholdet lengde og når du prøver å regne ut en prosent, finner Flash Player seg dividere 'bytesLoaded "med null. Skam

Trinn 12:. Opprette Søk Vis

Neste ting vi trenger å gjøre er å lage vår søke visning. Dette vil inneholde et søkefelt der brukeren vil oppgi sine spørring og deretter en knapp for dem å presse som går spørringen. I tillegg vil vi bruke en hendelse lytteren på søkeboksen, slik at hvis brukeren skulle treffe 'enter' spørringen vil fortsatt bli kjørt. Lag en fil som heter "SearchView.as" innenfor "src /com /flashtuts /view /komponent /":
pakke com.flashtuts.view.component {import flash.display.Sprite; import flash.events.DataEvent; import flash.events.FocusEvent; import flash.events.KeyboardEvent; import flash.events.MouseEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFieldType; import flash.text.TextFormat; import flash.ui.Keyboard; import mx.utils.StringUtil; public class søk: strekker Sprite {public static konst NAVN: String = 'søk:'; public static konst SHOW: String = NAVN + 'Show'; public static konst HIDE: String = NAVN + 'Skjul'; public static konst SEARCH_RUN: String = NAVN + 'SearchRun'; public static const search_results: String = navn + "Search '; public static konst SEARCH_FIELD_STRING: String = 'nøkkelord ...'; private Var søkefelt: Textfield; offentlig funksjon søk: () {init (); } Private funksjon init (): void {var tekstformat: tekstformat = new tekstformat (); Var boxBg: Sprite = new Sprite (); Var boxCopy: Textfield = new Textfield (); Var boxButton: Sprite = new ButtonAsset (); textFormat.color = 0x000000; textFormat.font = 'Arial'; textFormat.size = 10; boxBg.graphics.beginFill (0xFFFFFF); boxBg.graphics.drawRoundRectComplex (0, 0, 300, 35, 0, 0, 5, 5); boxBg.graphics.endFill (); boxBg.x = 150; addChild (boxBg); boxCopy.autoSize = TextFieldAutoSize.LEFT; boxCopy.defaultTextFormat = tekstformat; boxCopy.embedFonts = true; boxCopy.text = 'Søk etter:'; boxCopy.x = 10; boxCopy.y = (boxBg.height /2) - (boxCopy.height /2); boxBg.addChild (boxCopy); søkefelt = new Textfield (); searchField.border = true; searchField.borderColor = 0x666666; searchField.defaultTextFormat = tekstformat; searchField.embedFonts = true; searchField.multiline = false; searchField.text = SEARCH_FIELD_STRING; searchField.type = TextFieldType.INPUT; searchField.width = 185; searchField.height = 16; searchField.x = boxCopy.x + boxCopy.width + 10; searchField.y = (boxBg.height /2) - (searchField.height /2); searchField.addEventListener (FocusEvent.FOCUS_IN, handleSearchFieldFocusIn); searchField.addEventListener (FocusEvent.FOCUS_OUT, handleSearchFieldFocusOut); searchField.addEventListener (KeyboardEvent.KEY_UP, handleSearchFieldKeyUp); boxBg.addChild (søkefelt); boxButton.buttonMode = true; boxButton.x = boxCopy.x + boxCopy.width + searchField.width + 20; boxButton.y = (boxBg.height /2) - (boxButton.height /2); boxButton.addEventListener (MouseEvent.CLICK, searchRun); boxBg.addChild (boxButton); } Private funksjon handleSearchFieldFocusIn (e: FocusEvent): void {if (searchField.text === SEARCH_FIELD_STRING) {searchField.text = ''; }} Privat funksjon handleSearchFieldFocusOut (e: FocusEvent): void {if (StringUtil.trim (searchField.text) == '') {searchField.text = SEARCH_FIELD_STRING; }} Privat funksjon handleSearchFieldKeyUp (e: KeyboardEvent): void {if (e.keyCode === Keyboard.ENTER) {searchRun (); }} Privat funksjon searchRun (e: * = null): void {var spørsmålet: String = StringUtil.trim (searchField.text); if (query = '' &! & query = SEARCH_FIELD_STRING!) {dispatchEvent (ny DataEvent (SEARCH_RUN, sann, usann spørring)); }}}}

Denne koden skal være noe nytt for en ActionScripter, men her er en rask kjøre gjennom: vi først sette tekstformat, og deretter opprette bakgrunnen boksen (jeg bruker Sprite.drawRoundRectComplex () for å trekke boksen ), jeg da sette opp etiketten, lage tekstfeltet, og deretter importere en eiendel fra SWC for søkeknappen.

Som jeg nevnte tidligere, har jeg lagt en hendelse lytteren til skriving boksen og til på send-knappen. Dette betyr at brukeren er i stand til å trykke enter eller klikk på send-knappen for å kjøre spørringen. The 'handleSearchFieldKeyUp () "-funksjonen sjekker for å være sikker hvis enter-tasten har blitt rammet, hvis den har det så går søket. Dette er også god praksis for brukervennlighet problemer som folk blir ofte brukt til å trykke angi stedet for å måtte klikke på en knapp

Trinn 13:. Opprette Søk Vis Meklingsmannen

vunnet Jakten visning mekler ' t har for mye der som det ikke er å lytte til eventuelle hendelser, snarere det er å sende dem til fasaden. Begynn da med å lage en fil som heter "SearchViewMediator.as" innsiden "src /com /flashtuts /view /":
pakke com.flashtuts.view {import com.flashtuts.view.component.SearchView; import flash.events.DataEvent; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.patterns.mediator.Mediator; public class SearchViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'SearchViewMediator'; private Var søk:: søk:; offentlig funksjon SearchViewMediator (viewComponent: Object = null) {super (NAVN, viewComponent); } Overstyre offentlig funksjon onRegister (): void {søk: = new søk: (); searchView.addEventListener (SearchView.SEARCH_RUN, sendEvent); viewComponent.addChild (søk:); } Private funksjon sendEvent (e: DataEvent): void {sendNotification (SearchView.SEARCH_RUN, {query: e.data}); }}}

Hvis du ser på utsikten, vil du legge merke til at det vil sende et "DataEvent" opp til mekleren. Innenfor vår mellommann lytter vi til det og deretter sende en melding til din fasade. Denne varslingen vil bli plukket opp av en kommando som vil samhandle med proxy og deretter sende en hendelse med resultatene.

Vi har kommet til et stadium da vårt syn vil sende vår forespørsel til fasaden, slik at vi nå trenger for å lage en kommando for å passere denne forespørsel til vår proxy og deretter oppdatere vår proxy kode. Det vil deretter kjøre spørringen, lagre den i VO, gi det tilbake til en mellommann, og deretter visningen

Trinn 14:. Opprette Data Command

Vi kommer til å starte ved å oppdatere fasaden slik at det vil passere meldingen "SearchView.SEARCH_RUN" til vår data kommando. Åpne opp "ApplicationFacade.as" og bare legge til en annen "registerCommand" innenfor fasaden er "initializeController ()" -funksjon:
pakke com.flashtuts {import com.flashtuts.controller.DataCommand; import com.flashtuts.controller.StartupCommand; import com.flashtuts.view.component.SearchView; 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 (SearchView.SEARCH_RUN, DataCommand); //≪ her! } 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)); }}}

Nå må vi skape "DataCommand.as" fil i "src /com /flashtuts /controller /":
pakke com.flashtuts.controller {import com.flashtuts.model.DataProxy; import com.flashtuts.view.component.SearchView; import org.puremvc.as3.interfaces.ICommand; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.command.SimpleCommand; public class DataCommand strekker SimpleCommand implementerer ICommand {styre offentlig funksjon utføre (varsling: INotification): void {var navn: String = notification.getName (); Var kroppen: Object = notification.getBody (); bryteren (navn) {case SearchView.SEARCH_RUN: proxy.searchRun (body.query); gå i stykker; }} Privat funksjon get proxy (): DataProxy {return facade.retrieveProxy (DataProxy.NAME) som DataProxy; }}}

Dette er en ganske enkel kontrolleren, det er lytter på én melding for så bare å sende den fullmakten. Igjen, vi referere til proxy ved hjelp av en får
funksjon, betyr dette at vi bruker fasaden forekomsten snarere enn re-erklære proxy

Trinn 15:. Avslutte Proxy

Nå som vårt syn bobler opp hendelsen til fasaden og fasaden sender den til vår data kommando, trenger vi fullmakt til å gjøre det skitne arbeidet, så la oss legge i XML.

Med mindre du har jobbet med GData før, er det verdt å merke seg at XML den passerer tilbake er i Atom-formatet, og det har mange navnerom i den. I AS2 bruker navnerom var litt av en hack, som var resten av språket, men nå i AS3 er det to måter:


    skikkelig
    måte
    Dette er skikkelig
    måte, men det er en smerte i rumpa som du trenger for å erklære hver navnerom i AS3 før du legger i XML, som så: var rss: kl = new kl ("http: //vrang .org /rss /1,0 /"); Var rdf: kl = new kl ("http://www.w3.org/1999/02/22-rdf-syntax-ns#"); Var dc: kl = new kl ("http://purl.org/dc/elements/1.1/");

    Bare da kan du få tilgang til XML er variabler som så:
    Var element: String = elementer [ ,,,0],i] .dc :: dato;

    Så du ser at du setter erklært navnerom og to kolon (dette :) foran brikkens /attributt navn. Dette kan se smertefulle - og det er, men du kan finne ut mer om Adobes LiveDocs.

    Den enkle måten
    denne måten er mye enklere (og lazier jeg antar), men det får jobben gjort, og er ikke rotete eller en hack. Et navnerom er bare en metode for å knytte tags (eller attributter) til en URL referanse, så for eksempel GData refererer Opensearch, YouTube og Googles egne skjemaer og mer. Den enkle veien rundt er stedet for å erklære navnerom og foran dem til tag s /attributtenes navn, du bare legge en stjerne (denne *) som så: var item: String = elementer [i] * :: dato;

    Easy.!

    Så nå forstår vi hvordan vi skal håndtere XML vi får tilbake, la oss gå om etterbehandling proxy. Launch "DataProxy.as" i "src /com /flashtuts /modell /" og her er koden for det:
    pakke com.flashtuts.model {import com.flashtuts.model.vo.DataVO; import com.flashtuts.view.component.ProgressView; import com.flashtuts.view.component.SearchView; import flash.events.Event; import flash.events.ProgressEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.utils.Dictionary; 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'; private Var queryDic: ordbok = new ordbok (); offentlig funksjon DataProxy () {super (navn, ny DataVO ()); } Offentlig funksjon searchRun (spørring: String): void {if (vo.queryResults [spørring]) {dataReady (spørring); } Else {dataload (spørring); }} Privat funksjon dataload (spørring: String): void {var forespørsel: URLRequest = new URLRequest (vo.gdataURL + spørring); Var loader: URLLoader = new URLLoader (); sendNotification (ProgressView.SHOW); queryDic [loader] = søket; loader.addEventListener (Event.COMPLETE, handleSearchComplete); loader.load (forespørsel); } Private funksjon handleSearchComplete (e: Hendelses): void {var data: XML = new XML (e.target.data); vo.queryResults [queryDic [e.target]] = data .. * :: oppføring; dataReady (queryDic [e.target]); } Private funksjon dataReady (spørring: String): void {sendNotification (SearchView.SEARCH_RESULTS, {oppføringer: vo.queryResults [spørring]}); sendNotification (ProgressView.HIDE); } Offentlig funksjon får vo (): DataVO {avkastningstall som DataVO; }}}

    Vi starter med å skape offentlig funksjon som våre data kommandoen vil utløse "searchRun ()". Som du ser den godtar en parameter, søkestrengen:
    offentlig funksjon searchRun (spørring: String): void {if (vo.queryResults [spørring]) {dataReady (spørring); } Else {dataload (spørring); }}

    Nå for å gjøre programmet kjøre raskere. Jeg bruker prinsippet om at når en spørring er kjørt, blir dataene lagret i VO, og det er ikke behov for at spørring for å løpe igjen. Så bruker AS3 Dictionary klasse, er vi i stand til å sjekke for å se om resultatene er allerede i VO. Hvis de ikke er, vi trenger å få dem, ellers send dem til vår megler. Vi kommer videre til "dataReady ()" fungere litt lenger ned:

    Hvis spørringen ikke har blitt kjørt, trenger vi å laste noen XML:
    privat funksjon dataload (spørring: String): void {var forespørsel: URLRequest = new URLRequest (vo.gdataURL + spørring); Var loader: URLLoader = new URLLoader (); sendNotification (ProgressView.SHOW); queryDic [loader] = søket; loader.addEventListener (Event.COMPLETE, handleSearchComplete); loader.load (forespørsel); } Private funksjon handleSearchComplete (e: Hendelses): void {var data: XML = new XML (e.target.data); vo.queryResults [queryDic [e.target]] = data .. * :: oppføring; dataReady (queryDic [e.target]); }

    Du vil se at vi suffixing søket videre til 'gdataURL' string lagret i vår VO. Vi deretter referere søkestrengen bruker proxy ordliste slik at når data er klar, kan vi lagre den i VO under den søket og trenger ikke å laste det igjen. Så vi legge hendelsen lyttere og ringe. Når vi har fått dataene tilbake, får vi spørringen fra ordboken, lagre den i VO og deretter kjøre "dataReady ()" -funksjon:
    privat funksjon dataReady (spørring: String): void {sendNotification (søk: .SEARCH_RESULTS, {oppføringer: vo.queryResults [spørring]}); sendNotification (ProgressView.HIDE); }

    Denne funksjonen blir bare oppføringene og sender meldingen tilbake til fasaden. Nå kan vi vise våre videoer

    Trinn 16:. Opprette resultater Vis

    Når vi har oppføringene, er det så lett for oss å laste miniatyrbildene for disse oppføringene og vise dem i et rutenett . La oss begynne med å lage en fil som heter "ResultsView.as" inne "src /com /flashtuts /komponent /":
    pakke com.flashtuts.view.component {import flash.display.Loader; import flash.display.Sprite; import flash.events.DataEvent; import flash.events.MouseEvent; import flash.net.URLRequest; import flash.utils.Dictionary; public class ResultsView strekker Sprite {public static konst NAVN: String = 'ResultsView'; public static konst SHOW: String = NAVN + 'Show'; public static konst HIDE: String = NAVN + 'Skjul'; public static konst klikket: String = NAVN + 'klikket'; private Var idsDic: ordbok = new ordbok (); private Var thumbnailHeight: Number = 90; private Var thumbnailSpacing: Number = 10; private Var thumbnailWidth: Nummer = 100; offentlig funksjon buildThumbnails (oppføringer: Object): void {var ix: Antall = 0; Var iy: Antall = 0; Var miniatyr: Sprite = new Sprite (); Var miniatyr: Sprite; if (numChildren > 0) {for (var i: Antall = 0; i < numChildren; i ++) {removeChildAt (i); } BuildThumbnails (oppføringer); } Else {for hver (var entry: XML i oppføringer) {thumbnail = createThumbnail (entry); thumbnail.x = (thumbnailWidth + thumbnailSpacing) * ix; thumbnail.y = (thumbnailHeight + thumbnailSpacing) * iy; if (ix > 3) {ix = 0; iy ++; } Else {ix ++; } Thumbnails.addChild (thumbnail); } Thumbnails.x = 25; thumbnails.y = 70; addChild (thumbnails); }} Privat funksjon createThumbnail (entry: XML): Sprite {var thumbnail: Sprite = new Sprite (); Var maske: Sprite = new Sprite (); Var forespørsel: URLRequest = new URLRequest (. entry .. * :: thumbnail [0] @ url.toString ()); Var loader: Loader = new Loader (); idsDic [thumbnail] = entry .. * :: videoid.toString (); mask.graphics.beginFill (0x000000); mask.graphics.drawRoundRect (0, 0, thumbnailWidth, thumbnailHeight, 5, 5); mask.graphics.endFill (); thumbnail.addChild (maske); loader.load (forespørsel); thumbnail.addChild (loader); loader.mask = maske; thumbnail.buttonMode = true; thumbnail.mouseChildren = false; thumbnail.addEventListener (MouseEvent.CLICK, handleThumbnailClicked); returnere thumbnail; } Private funksjon handleThumbnailClicked (e: MouseEvent): void {dispatchEvent (ny DataEvent (klikket, sann, usann idsDic [e.target])); }}}

    Dette er rett og slett en klasse som bare tar YouTube-video IDer og deretter laster den tilhørende thumbnail. Vi først og fremst begynne med å fjerne alle barn av utsikten, og når det er gjort kjører vi gjennom en løkke som deretter laster thumbnail, masker det (slik at vi har fine avrundede hjørner) og legger til en hendelse lytteren til sprite. Du vil merke at jeg bruker en ordbok igjen her kalt "idsDic". Dette vil bare lagre en referanse av spriten blir lagt til scenen slik at når det er blitt klikket på, vet vi det tilsvarende YouTube video ID for å laste.

    Til slutt vil du se at klassen sender en "DataEvent "inneholder videoen id tilbake til sin megler

    Trinn 17:. Opprette Resultater Vis Meklingsmannen

    Denne mekleren vil ha to enkle jobber:


      for å (re -) bygge miniatyrene når spørringen er kjørt

      For å bestå video id til vår YouTube-spiller

      Så la oss begynne med å lage filen "ResultsViewMediator.as" in "src /com /flashtuts /view /":
      pakke com.flashtuts.view {import com.flashtuts.view.component.PlayerView; import com.flashtuts.view.component.ResultsView; import com.flashtuts.view.component.SearchView; import flash.events.DataEvent; import org.puremvc.as3.interfaces.IMediator; import org.puremvc.as3.interfaces.INotification; import org.puremvc.as3.patterns.mediator.Mediator; public class ResultsViewMediator strekker Mellommann implementerer IMediator {public static konst NAVN: String = 'ResultsViewMediator'; private Var resultsView: ResultsView; offentlig funksjon ResultsViewMediator (viewComponent: Object = null) {super (NAVN, viewComponent); gå i stykker; import flash.display.Sprite; import flash.events.MouseEvent; import flash.filters.GlowFilter; gå i stykker;