Design en Panoramio Thumbnail Viewer i Flex
Del
Del
Del
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
I denne opplæringen vil jeg ta deg gjennom de måtene som Flex Tilpasser grensesnittkontroller. Spesielt vil vi se på TileList element, styling det med Flex sin GUI toolkit.
For å trekke dette alle sammen, vi vil gjøre bruk av Panoramio API og bygge en dynamisk miniatyrbildevisningen.
Quick Preview
Her er oversikt betrakteren vi jobber mot:
Innledning
Siden begynnelsen av grafisk drifts systemer har det vært en håndfull av standard brukergrensesnitt kontroller som knapper, etiketter, tekstbokser og lister kombinasjonsbokser. Disse kontrollene har tjent jobben sin godt, men mens Vista, Windows 7, MacOS, KDE og Gnome bringe oss friske nye visuelle design, er utviklere ganske ofte stakk designe sine egne applikasjoner med kontroller som ikke har endret sin grunnleggende funksjon i 20 år .
Det spiller ingen rolle om du gjør en web-side, programmerer et Windows-program med VB.Net eller lage en RIA med Flex; når du kommer ned til det en liste er fortsatt en liste, og en knapp er fortsatt en knapp.
Heldigvis Flex tilbyr utviklere en praktisk måte å tilpasse ydmyke listen, noe som åpner for mye mer spennende design enn de vanlige linjene av teksten. Vi vil bruke denne funksjonaliteten til å skape en Panoramio bildeviser
Trinn 1:. Opprett et nytt Flex Prosjekt
Opprett en ny Flex prosjekt. Fordi vi vil trekke bildene fra Panoramio (som returnerer en JSON objekt) trenger vi å referere til AS3CoreLib bibliotek (som kan konvertere JSON tekst til en Action objekt), som du kan laste ned herfra. Pakk ut arkivet og deretter legge en referanse til det i "Flex Bygg Path"
Trinn 2:. Definer States
I motsetning til desktop-applikasjoner, kan Flex applikasjoner bare har ett vindu. States brukes til å enkelt endre kontrollene på skjermen når mer enn én skjerm, som en miniatyrvisning og en detaljvisning, er nødvendig.
Nye stater kan legges ved hjelp av "Den nye staten" -knappen i USA verktøykasse.
Vi ønsker å legge til to stater. Den første vil bli kalt "Thumbnails". Klikk på "New State" knappen og fylle ut dialogen som skjermbildet nedenfor. Legg merke til at vi tick "Sett som startside staten", som forteller Flex at dette er staten som skal først vises.
Vi trenger også en tilstand som kalles "detaljer". Igjen, klikker du på "New State" knappen og fylle ut dialogen som skjermbildet under
Trinn 3:.. Design Thumbnail State
Velg "Thumbnails" state fra USA verktøykasse
Nå kan du tegne en ny TileList komponent på GUI. Denne komponenten vil bli brukt til å vise miniatyrbilder.
Tilordne TileList en ID "thumbnails" og sette "Data Provider" til {bilder}. Flex kan du skrive Actionscript-kode innen MXML element attributter ved å kapsle inn koden i klammeparentes, og vi bruker den funksjonaliteten her for å sette bildene samlingen (som vi vil skape senere) som kilde til dataene for TileList.
Trinn 4:. Design Detail State
Velg "Detail" state fra USA toolbox
Paint en bildekontroll, med en id av "bilde", som tar opp mest av plass på skjermen. Deretter ned på bunnen legge to etiketter, med ID-ene for "photoTitle" og "photoLocation", og en knapp med en merkelapp med "Back".
Vi trenger også å sette "On klikk" eiendom av Button til {this.currentState = 'Thumbnails'}. Endre verdien tilordnet "currentState" eiendom er hvordan vi endrer mellom stater i Flex, og akkurat som med "Data Provider" eiendom av TileList i trinn 3, legge vi noen Actionscript-kode i egenskap ved å kapsle den i klammeparentes . Ved å tildele strengen "Thumbnails" til "currentState" eiendom, er vi instruere Flex å slippe tilbake til miniatyr staten.
Din siste grensesnitt for detalj staten bør se ut skjermbildet nedenfor.
< h2> Trinn 5: Opprette en ny MXML Component
MXML komponenter kan brukes til å definere hvordan enkelte fliser vises i TileList komponent. Klikk Fil > New > MXML Component.
Du vil nå se en dialogboks som lar deg spesifisere detaljene for MXML Component. Fyll det ut som skjermbildet under
Når du er ferdig vil du bli ført til et designpanel hvor du kan male komponenter akkurat som du ville gjort med hoved Flex-program
Trinn 6..: Tile Layout
Dette MXML Component vil bli brukt til å vise enkeltbilder innenfor TileList. Som du ser har du nesten ubegrenset frihet i hvordan flisene er utformet. Hver flis kan være utformet med noen Flex kontroll i enhver oppsettet du vil.
frihet til å utforme hver flis individuelt er det som gjør TileList, og andre kontroller som "Datagrid", "HorizontalList", "List", "Meny" og "Tree" så kraftig. Faktisk har jeg aldri sett noen andre GUI toolkit gi utviklere dette nivået av tilpasning uten å måtte utvikle en ny kontroll fra grunnen
For vår søknad vil vi vise to komponenter på hver flis:. Et bilde og en Merkelapp. Den endelige utformingen skal se omtrent slik skjermbildet nedenfor
Trinn 7:. Etikett
Sett Tekst eiendom for etiketten til {data.photo_title.length > 30? data.photo_title.substr (0, 27) + '...': data.photo_title}. Her viser vi "photo_title" eiendom av objektet som er bundet til komponenten (vi vil se hvordan denne bindingen er gjort senere) med en trefoldig operatør (i utgangspunktet en forkortelse if..else statement).
Hvis det er 30 tegn eller mindre full strengen skal vises. Ellers viser vi de første 27 tegnene etterfulgt av 3 perioder for å indikere at tittelen har blitt forkortet
Trinn 8:. Bilde
Sett "Source" eiendom på bildet for å {data.photo_file_url }. Igjen vi bruker Action å trekke ut "photo_file_url" eiendom av objektet som er bundet til komponenten
Trinn 9:. Manuelt angi MXML attributter
Gå tilbake til hoved MXML filen og slå redaktøren til Kilden visning.
Du skal se en statene element lagt til Application element. Dette er markering som representerer statene vi definerte i trinn 2.
Under statene element det bør være to statlige elementer, og under hver av dem vil det bli AddChild elementer. Disse er knyttet til de komponentene som er lagt til hver stat.
Under State element med "navn" "Thumbnails" bør du se en AddChild element som inneholder en TileList element. Dette er TileList at vi har lagt i trinn 3. Vi er nødt til å legge til noen ekstra attributter nedenfor for at TileList å vise vår skikk MXML Component.
ItemRenderer = "ImageThumbnail" itemDoubleClick = "photoSelected ()" doubleClickEnabled = "true"
Så hele TileList element skal lyde:
< mx: TileList itemRenderer = "ImageThumbnail" itemDoubleClick = "photoSelected ()" doubleClickEnabled = "true" dataprovider = "{bilder}" id = "miniatyrbilder" bottom = "0" top = "0" igjen = "0" rett = "0" />
"itemRenderer" attributt er navnet på MXML Component vi opprettet i trinn 5.
"itemDoubleClick" attributt setter "photoSelected" -funksjonen til å bli kalt når en vare er dobbelt-klikket.
"doubleClickEnabled" attributtet forteller komponent for å behandle to museklikk som en enkelt dobbeltklikk . Uten dette attributtet komponenten ville behandle et dobbeltklikk som to enkeltklikk, og "itemDoubleClick" hendelse ville aldri bli utløst
Trinn 10:. Legg en stat Transition Effect
Flex lar deg bruke en effekt når overgangen mellom en stat og den neste. Vi vil bruke denne funksjonaliteten til utgangspunktet dimme skjermen når du skifter mellom Miniatyr og Detaljer tilstander, så bringe skjermen tilbake i fokus.
For å definere tilstanden transistion vi må legge til en "overganger" element som et barn av MXML "Søknad" element
< mx:.! overganger > < - Individuelle overganger gå her - > < /MX: overganger >
Inne i overganger element vil vi legge til en overgang element.
< mx: Transition fromState = "*" tostate = "*" > < - Overgangseffekter gå her - > < /mx: Transition >
"fromState" og "tostate "attributter definerer statene som overgangen vil gjelde. Her har vi brukt stjernen som wildcard, som matcher alle stater, noe som betyr at overgangen effekten vil bli brukt når du flytter fra noen gamle stat til noen nye staten.
Inne i Transition element vi definerer effekten istelf .
< mx: Blur target = "{denne}" varighet = "500" blurYFrom = "20,0" blurYTo = "1.0" blurXFrom = "20,0" blurXTo = "1.0" />
"target "attributtet definerer hvilken komponent (og sine barn) vil ha blur effekt påføres. I dette tilfellet ønsker vi alle elementene for å bli uskarpt, så vi satt målet å peke på "dette".
"varighet" attributtet definerer hvor lenge å bruke blur effekt for i millisekunder. Vi har brukt 500 her, som er et halvt sekund.
De "blurYFrom" og "blurXFrom" attributter definere hvordan uklare effekten vil vises i utgangspunktet. Større verdier her foreta den første effekten mer uskarpt.
De "blurYTo" og "blurXTo" attributter definere hvordan uklare effekten vil være på slutten av varigheten. Vi ønsker å bringe skjermen tilbake i skarpt fokus, så vi tilordner verdier av en til hver av de attributtene
Trinn 11:. Hente Bildene fra Panoramio
På dette punktet vi har definert vår brukergrensesnitt. Nå må vi få noen bilder å vise
Legg følgende attributt til Application element.
ApplicationComplete = "appComplete ()"
Dette setter "appComplete" -funksjonen til å bli kalt når Søknaden har initialisert.
Legg en "Script" element til MXML Application element. Dette gir oss et sted å skrive Actionscript-kode
< mx:.! Script > < [CDATA [//Kode går her]] > < /mx: Script >
I Script element import følgende pakker
import mx.collections.ArrayCollection, importere mx.controls.Alert, importere com.adobe.serialization.json.JSON;
Trinn 12:. Cross domenepolicy
Som standard Flex vil ikke tillate deg å laste ressurser fra et eksternt domene. Imidlertid kan denne oppførselen overstyres hvis fjern domenet har et kors domenesikkerhetspolitikk filen (vanligvis crossdomain.XML). Heldigvis Panoramio har nettopp en slik politikk fil, som vi laster med følgende kode:
Security.loadPolicyFile ("http://www.panoramio.com/crossdomain.xml");
I trinn tre satt vi "Data Provider" eiendom av TileList til en samling som heter "bilder". Det er her vi faktisk definerer at samlingen. . Ved å bruke "bind" tag på variabelen vi forteller Flex å se etter eventuelle endringer i samlingen, og for å vise disse endringene automatisk
[bind] private Var bilder: ArrayCollection = null;
Trinn 13: appComplete Funksjon
Legg til en funksjon som heter "appComplete"
privat funksjon appComplete (). void {var panoramioURL: String = "http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=50&minx=-180&miny=-90&maxx=180&maxy=90&size=medium"; Var forespørsel: URLRequest = new URLRequest (panoramioURL); Var loader: URLLoader = new URLLoader (forespørsel); loader.addEventListener (Event.COMPLETE, loaderComplete); loader.addEventListener (IOErrorEvent.IO_ERROR, funksjon (hendelse: Hendelse): void {Alert.show ("Det var en IO feil kontakter Panoramio");}); loader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, funksjon (hendelse: Hendelse): void {Alert.show ("Det var en sikkerhetsfeil kontakter Panoramio");}); }
Å få bilder fra Panoramio er faktisk veldig enkelt. I motsetning til andre image-bare nettsteder som Flickr, betyr Panoramio krever utbygger å få en API eller eller for å bruke en spesiell API. Du bare gjøre en HTTP-forespørsel til en spesielt formatert URL (Panoramio API side har alle detaljene) og bruke den returnerte JSON å få tilgang til bildene.
I Flex dette betyr å skape en "URLRequest" objekt med Panoramio URL, deretter opprette en ny "URLLoader", forbifarten at forespørsel i konstruktøren. Vi trenger å se etter 3 hendelser fra URLLoader: Event.COMPLETE, IOErrorEvent.IO_ERROR og SecurityErrorEvent.SECURITY_ERROR.
Event.COMPLETE hendelsen viser at alt gikk bra, og at Panoramio serveren har returnert den informasjonen vi trenger. I dette tilfelle kaller vi "loaderComplete" -funksjon.
Den IOErrorEvent.IO_ERROR og SecurityErrorEvent.SECURITY_ERROR hendelser tyder på at noe gikk galt. I så fall varsle vi brukeren om at vi ikke kunne kontakte Panoramio server og ikke gå lenger
Trinn 14:. LoaderComplete Funksjon
Nå kan du legge en ny funksjon kalt "loaderComplete".
privat funksjon loaderComplete (hendelse: Hendelse): void {var svaret: URLLoader = URLLoader (event.target); Var responseData: Object = JSON.decode (response.data); this.images = new ArrayCollection (); for hver (var bilde: Object i responseData.photos) {this.images.addItem (image); }}
Her tar vi JSON returnert av Panoramio og konvertere den til en Action objekt med AS3CoreLib biblioteket fra trinn 1.
Ett av triksene når du arbeider med web-tjenester i å vite hvilke data som faktisk har vært faktisk tilbake. Hvis du bruker Firefox er det en stor add-on som heter JSONovich som vil formatere JSON kode i nettleseren. I skjermbildet nedenfor kan du se formatert JSON som ble returnert fra Panoramio webtjeneste. Legg merke til at JSON objekt har en egenskap kalt "teller" og en rekke kalt "bilder" som inneholder objektene som igjen inneholder detaljer om de enkelte bildene.
Så, hva vi trenger å gjøre er å ta hver av objektene i denne bilder matrise og plassere dem i våre bilder samlingen. Dette er bare et spørsmål om looping gjennom hvert av objektene i bildene innsamling og deretter ringer "AddItem" på bildene samlingen.
Fordi bildene samling hadde "bind" tag, og legger disse objektene i samlingen vil føre dem til å bli vist. Hvis du ser tilbake til trinn 5 vil du legge merke til at verdiene for Label og Image ble satt til eiendommer fra et objekt som heter "data". Dette dataobjekt faktisk refererer et element i bildene samlingen, og hvis du ser på skjermbildet ovenfor kan du se hvor photo_file_url og photo_title egenskaper kom fra
Trinn 15:. PhotoSelected Funksjon
. endelige funksjonen kalles "photoSelected"
privat funksjon photoSelected (): void {this.currentState = "Detail"; Var selectedPhoto: Object = this.thumbnails.selectedItem; this.photo.source = selectedPhoto.photo_file_url; this.photoTitle.text = selectedPhoto.photo_title; this.photoLocation.text = "Lat:" + selectedPhoto.latitude + "Long:" + selectedPhoto.longitude;}
Denne funksjonen kalles når brukeren dobbeltklikker på et element i TileList. Her setter vi den nåværende tilstanden til "detaljer", og angi egenskapene for bildet og etiketter ved hjelp av egenskapene til den valgte TileList elementet.
Konklusjon
Vi har bare riper i overflaten av hva som er mulig med MXML Components, men forhåpentligvis kan du se sitt potensial. Å kunne tilpasse hvordan en flis er trukket, uten å måtte skrive kode, er bare ett av de mange funksjonene som setter Flex fra andre utviklingsplattformer. Anmeldelser