Build en XML Driven kontaktliste ved Flex 3
Del
Del
Del
Del
Denne Cyber Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.
Målet i denne opplæringen er å bygget en kontaktliste som laster dynamisk fra en ekstern XML-fil. Når brukeren velger en annen kontakt, vil dataene automatisk oppdatere skal vises riktig. Vi vil også være å bruke noen grunnleggende stilark endringer i resultatene og gi prosjektet en mer tilpasset touch.
Endelig resultat Forhåndsvisning
< p> La oss ta en titt på et skjermbilde av det endelige resultatet vi skal jobbe mot:
Merk: Som du vil raskt innse, vet jeg ikke bruke SDK til å bygge Flex 3 filer. Mens denne opplæringen blir undervist fra perspektivet av Flex 3 Builder, er den underliggende koden den samme. SDK brukere, vil du rett og slett nødt til å erstatte trinn etter behov. Jeg vil ikke være med utformingen syn i denne opplæringen, så du er på hell Flex er en flott utviklingsplattform. Det er bedre når du har full Flex 3 Builder. Heldig for kvalifiserte studenter og lærere, er Adobe tilbyr en komplett utdanning Flex 3 Builder lisens til deg gratis Tenk på dette en vennlig påminnelse. Hvis noen med pedagogiske bånd har ennå til å dra nytte av "Free Flex 3 for Education" deal ennå, gå videre og gjøre det nå. Det vil hjelpe deg ut enormt Nå som vi er ferdig med "gratis Adobe-produkt" evangelisering, la oss bygge en Flex-program Start med å lage en ny Flex prosjekt for web. Name it hva du ønsker, vil dette trinnet ikke ha innvirkning på resultatene I prosjektet starte et nytt MXML Application. (Fil > New > MXML Application). Filen navnet "contactManager". For layoutmessig, anbefaler jeg å endre oppsettet standard til "vertikal". Dette vil sentrere alle umiddelbare barne komponentene på siden, som vil fungere mye bedre med vår ende mål Hver kontakt vil vise en profilbildet når de blir valgt. For dette eksempelet, vil vi ved hjelp av Bill Gates og Barack Obama som kontakter. Steve Jobs 'pressefoto var altfor forferdelig Jeg har beskåret sine pressebilder (hentet her og her) til mindre dimensjoner for denne opplæringen. Grab redigerte versjoner her, og vi vil flytte til XML-filen All informasjonen som vises vil bli trukket fra en ekstern XML-fil. Den grunnleggende struktur er som følger: Som du ser, er det fire hovedfelt for hver oppføring. Kontaktnavnet, deres posisjon, e-post, og url til et profilbilde. Last ned filen, og vi vil være klar til å arrangere alle de filene du har lastet inn i aktiva mapper for Flex. Sørg for at prosjektfiler er arrangert som på bildet nedenfor. Du må lage mappen "eiendeler" for bruker data.xml, og en "bilder" mappe for profilbilder (Fil > New > mappe med "src" -mappen valgt) Import. filene lastet ned i trinn 4 og 5 i sine respektive mapper. Med målmappen valgt, velger du Fil > Import > Annet og bruke bedt om å velge en fil. Skyll og gjenta for hvert til du har fått alle tre på plass I Flex MXML, eksterne filer er mest lastet inn med HTTPService tag . Tenk på det som å forberede en konvolutt til e-post. Den inneholder et mål destinasjon og inneholder instruksjoner for hva de skal gjøre med innholdet Lag en HTTPService tag til å be om vår XML-fil ved å skrive inn følgende kode umiddelbart under åpningen søknaden tag Dette HTTPService har en ID på "brukerdata" og laster vår brukerdata xml fil. Den resulterende data er formatert som E4X og sendes til Content funksjonen vi skal gjøre om kort tid for behandling. Ta imidlertid oppmerksom på, fordi bare å lage en HTTPService tag ikke sende forespørselen For at denne forespørselen skal sendes, må vi aktivere det når prosjektet vellykket laster. Vi gjør dette ved å bruke creationComplete hendelsen i søknaden tag Mens vi kunne bare direkte setter userData.send () metode her, kommer vi til å bruke en mer utvid funksjon init () for å sende forespørselen stedet. Denne funksjonen vil være ansvarlig for handlinger sparken når Flex prosjektlaster, og åpner opp muligheten for flere last hendelser. Vi vil fylle inn innholdet i denne funksjonen under et senere trinn Action av dette prosjektet vil være ansvarlig for å håndtere den belastede XML-fil, oppbevaring filtre og oppdatere komponenter som trengs. Dette skal skje med tre separate funksjoner. Husk at Flex er et rammeverk for action Og det er her Script tag kommer inn i bildet. Sett inn koden rett under åpningen Application tag. Det er der alle action vil bli skrevet; holdes atskilt fra MXML nedenfor. Hvis du er i Builder, vil tag automatisk legge CDATA markup: Vi vil begynne med å importere ResultEvent pakke som er nødvendig for HTTPService tag. (Husk at all koden i dette avsnittet går mellom skriptkodene nevnt ovenfor) For å bygge XML filtre, vi må definere noen variabler. Begge med defineres som bind, som tillater oss å lenke direkte innholdet til en Flex komponent (f.eks Label) Liste over brukere XML Listen vil inneholde E4X formaterte resultater fra den belastede XML-filen. Vi vil bruke den til å befolke data grid komponent i et senere trinn. selectedData XML variabel vil holde gjeldende valgte resultatet i data grid komponent. Det vil være ansvarlig for å fylle ut informasjonsfeltene og profilbilde init () funksjon som vi refererte i det siste trinnet vil gjøre to ting Den neste funksjonen er Content kalt av resultatet tilfelle av HTTPService tag. Denne funksjonen gjør passert hendelsen, og deretter tildeler aksessliste XML List variabel de resulterende XML-data som er filtrert til "bruker" nivå Den siste funksjonen (showProfile) aktiveres når et navn er valgt fra kontaktlisten. Det tildeler bare innholdet i den gjeldende valgte XML innreise til variabelen selectedData. Dette er den variabelen som vil være bundet til etikettene og bilde beholdere for live oppdateringer Nå som actionscript er på plass, er vi klare til å sette sammen design Kontaktlisten layout vil bestå av en serie av HBox og VBox beholdere (horisontale og vertikale henholdsvis). Blokken nedenfor viser oppbyggingen av den endelige utformingen Alt dette innholdet vi har lagt i trenger et hjem. Det er der layout komponenter kommer i Lim inn følgende struktur under HTTPService tag MXML har en fin fordel av å være relativt enkle å lese. Den eneste komponenten som kan kaste noen nye til Flex off er Data Grid. Hovedsak dataene rutenettet er en tabell. Den kolonner tag mellom Datagrid tag spesifisere header tekst og felt for individuelle kolonner. Dette er komponenter som skal brukes til å laste inn data fra XML-filen. I neste trinn, vil vi fylle hver med relevante data Patching i dataene fra XML-oppføringer er overraskende enkelt. Kopier i følgende kode endringer, og møte tilbake nedenfor for en oppsummering Her er en oversikt over hva som skjer: Hvis du jobber med Flex for en stund, er det lett å bli lei av den standard fargevalg. La oss gjøre noen raske løsninger for å krydre ting opp. Vi starter ved å endre bakgrunnen til en gradient i svarte. Oppdater åpning søknad tag å inkludere graderingsegenskaper under: Ulempen med en svart bakgrunn er at ingen av standardteksten vil være synlig. Vi skal fikse dette ved hjelp av Flex CSS for å endre font farger Visste du at Flash og Flex støtte sin egen merkevare av CSS? Vi skal bruke noen grunnleggende formatering for å bedre lesbarheten av dette programmet. Start med å sette inn en stil tag rett under åpningen Application tag CSS tilbys i Flex er begrenset, men vi kan fortsatt gjøre effektive visuelle endringer. I CSS nedenfor, har jeg endret alle etikettene til en hvit skrift for lesbarhet. Den HBox inneholder alt har fått en svart bakgrunn og polstring av 20px på hver side for avstand * Vær oppmerksom på at du må kapitalisere komponent navnene i CSS for at det å referere riktig Hvis du ikke har falt i kjærlighet med Flex ennå, kan dette neste funksjonen presse deg over kanten. Flex gjør deling et prosjekt kildekoden ikke bare lett, men virkelig god jakt. Ta en titt på resultatene, i en overraskende nettleser-vennlig design Hva du skal ha nå er en XML drevet kontaktliste i Flex. Gi det en testkjøring og sørge for at alt er i orden. Flex, som navnet tilsier, er utrolig fleksibel. Dette betyr at du kan ta rammeverket fra opplæringen ovenfor, og fortsette å legge på. Dataene grid komponent vil utvide etter behov. Flex har et stort utvalg av overgangseffekter, for eksempel uskarphet og endre størrelse, som kan brukes på hver endring. Resultatene av denne opplæringen kan være et flott sted å begynne å eksperimentere med flere visuelle muligheter som disse. Gå videre og eksperimentere! Hvis du kommer opp med noen kule tillegg, sørg for å dele dem med oss i kommentarfeltet. Anmeldelser
Trinn 1 -. Gratis for Education
Trinn 2.! - Sett opp prosjektfiler
Trinn 3 -. Last ned Images
Trinn 4 -. Vi presenterer XML File
< aksessliste > < bruker > < navn > Bill Gates < /navn > < posisjon > Leder Nerd < /stilling > < e > [email protected]< /e > < bilde > images /gates.jpg < /bilde > < /bruker > < /aksessliste >
Trinn 5 - Ordne Prosjekt filstruktur
Trinn 6 -. Gjør Request for XML File
< mx..: HTTPService url = "assets /bruker data.xml" id = "Userdata" resultat = "Content (event)" resultFormat = "E4X" />
. Akkurat som en konvolutt trenger en postkasse for å reise, må HTTPService forespørselen bli faktisk sendt
Trinn 7 -. Send forespørsel på CreationComplete
< mx.: Søknad xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "vertikal" creationComplete = "init () ">
Trinn 8 -. Oppsett for Action
, mye som jQuery er å Javascript. Dette betyr at selv om Flex-koder er utviklet for å effektivisere felles Action bruksområder, det kan også håndtere direkte scripting også. Til dette trenger vi å utpeke et område for skripting å gå.
< mx: Script > <! [CDATA [//action går her. ]] > < /mx: Script >
import mx.rpc.events.ResultEvent;
Trinn 9 - Erklærer Variabler
//Holder komplett XML rå filinnholdet [bind] private Var Liste over brukere. XMLList; //Endringer i Selected Contact XML Data [bind] private Var selectedData: XML;
Trinn 10 -.. Bygg init Function
Send forespørsel om brukerdata XML-fil.
Angi navnet etiketten (som ennå ikke er opprettet) til en standard "No Kontakt Selected" tekst
< p> Den koden under vil oppnå begge deler. Ignorer eventuelle advarsler om ikke-eksisterende komponenter for nå, vi skal opprette den refererte etiketten i neste trinn
//Creation Komplett Hendelser privat funksjon init (): void {userData.send ();. profileName.text = "No Kontakt Selected"; }
Trinn 11 - Bygg Content Function
privat funksjon Content (evt: ResultEvent):. Void {Liste over brukere = evt.result.user; }
Trinn 12 - Bygg showProfile Function
privat funksjon showProfile (evt: Hendelses): void {//Gi data til elementet som er valgt selectedData = contactList.selectedItem som XML;. }
Trinn 13 -. Stenge ute Layout
Trinn 14 -. Lag Layout Komponenter
< mx:.. HBox > < mx: VBox height = "490" > < mx: Datagrid id = "Contact" width = "400" > < mx: kolonner > < mx: DataGridColumn headerText = "Navn" /> < /mx: kolonner > < /mx: Datagrid > < mx: Etikett skrift = "24" id = "Profil" /> < mx: Etikett id = "profileJob" /> < mx: Etikett id = "profileEmail" /> < /mx: VBox > < mx: VBox width = "360" > < mx: Bilde id = "profilepic" /> < /mx: VBox > < /mx: HBox >
Trinn 15 -. Befolker Komponenter
< mx. HBox > < mx: VBox height = "490" > < mx: Datagrid id = "Contact" width = "400" change = "showProfile (event)" dataprovider = "{userlist}" > < mx: kolonner > < mx: DataGridColumn datafeltet = "navn" headerText = "Navn" /> < /mx: kolonner > < /mx: Datagrid > < mx: Etikett skrift = "24" id = "Profil" text = "{selectedData.name}" /> < mx: Etikett id = "profileJob" text = "Position: {selectedData.position}" /> < mx: Etikett id = "profileEmail" text = "E-post: {selectedData.email}" /> < /mx: VBox > < mx: VBox width = "360" > < mx: Bilde id = "profilepic" source = "{selectedData.image}" /> < /mx: VBox > < /mx: HBox >
Dataene grid er befolket av binde aksessliste XML listen til det. Kolonnen laster datafeltet "navn" fra hver oppføring.
I høyre kolonne, blir bilde containere kilde lastet fra url i XML-filen
Trinn 16 -. Endre Bakgrunn Farger
< mx: Søknad xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "vertikal" creationComplete = "init () "backgroundGradientAlphas =" [1.0, 1.0] "backgroundGradientColors =" [# 212121, # 010101] ">
Trinn 17 -. Stil resultatene
< mx. Stil > /* CSS går her * /< /mx: Stil >
< mx. Stil > Label {color: #FFF; } HBox {bakgrunnsfarge: # 010101; paddingTop: 20; paddingLeft: 20; paddingRight: 20; paddingBottom: 20; } ≪ /mx: Stil >
Trinn 18 -. Kildekode for Project
Trinn 19 - Konklusjon &.; Ytterligere Applications