Målet i denne opplæringen er å bygge en kontaktliste som laster dynamisk fra en ekstern XML-fil. Når brukeren velger en annen kontakt, oppdateres dataene automatisk for å vises riktig. Vi vil også bruke noen grunnleggende stilark endringer i resultatene og gi prosjektet et mer tilpasset preg.
Endelig resultatforhåndsvisning
La oss ta en titt på et skjermbilde av det endelige resultatet vi vil arbeide for:
Merk: Som du raskt skjønner, bruker jeg ikke SDK til å bygge Flex 3-filer. Mens denne opplæringen læres ut fra Flex 3 Builder, er den underliggende koden den samme. SDK-brukere, må du bare erstatte trinnene etter behov. Jeg vil ikke bruke designvisningen i denne opplæringen, så du har lykke.
Trinn 1 - Gratis for utdanning
Flex er en flott utviklingsplattform. Det er bedre når du har full Flex 3 Builder. Heldig for kvalifiserte studenter og fakultet, tilbyr Adobe gratis en fullstendig Education Flex 3 Builder lisens til deg
Vurder dette som en vennlig påminnelse. Hvis noen med pedagogiske bånd har ennå å dra nytte av "Free Flex 3 for Education" -avtalen ennå, gå videre og gjør det nå. Det hjelper deg enormt.
Nå som vi er ferdig med "gratis Adobe-produkt" -evangelismen, la oss bygge et Flex-program!
Trinn 2 - Konfigurer prosjektfiler
Start med å lage et nytt Flex-prosjekt for Internett. Gi det navnet du vil, dette trinnet har ingen innvirkning på resultatene.
Innenfor prosjektet, start en ny MXML-applikasjon (File> New> MXML Application). Navn filen "contactManager".
For layoutformål anbefaler jeg at du endrer layoutinnstillingen til "vertikal". Dette vil sentrere alle umiddelbare barnekomponenter på siden, noe som vil fungere mye bedre med sluttmålet.
Trinn 3 - Last ned bilder
Hver kontakt vil vise et profilbilde når det er valgt. For dette eksempelet bruker vi Bill Gates og Barack Obama som kontakter. Steve Jobs pressfoto var bare forferdelig
Jeg har klippet sine pressefotografier (hentet her og her) til mindre dimensjoner for denne opplæringen. Ta tak i de redigerte versjonene her, og vi flytter inn på XML-filen.
Trinn 4 - Introduksjon av XML-filen
All informasjon som vises vil bli trukket fra en ekstern XML-fil. Grunnstrukturen er som følger:
Som du ser, er det fire hovedfelter for hver oppføring. Kontaktnavnet, deres posisjon, e-post og URL til et profilbilde.
Last ned filen, og vi vil være klare til å ordne alle filene du har lastet ned i ressursmapper for Flex.
Trinn 5 - Ordne prosjektfilstruktur
Kontroller at prosjektfilene dine er ordnet som i bildet nedenfor. Du må lage mappen "assets" for user-data.xml og en "bilder" -mappe for profilbildene (Fil> Ny> Mappe med "src" -mappe valgt).
Importer filene lastet ned i trinn 4 og 5 i de tilhørende mappene. Når du har valgt målmappen, velger du Arkiv> Importer> Annet og bruker spørringen til å velge en fil. Skyll og gjenta for hver gang du har alle tre på plass.
Trinn 6 - Gjør forespørsel om XML-fil
I Flex MXML blir eksterne filer vanligvis lastet inn med HTTPService-taggen. Tenk på det som å forberede en konvolutt til post. Den inneholder et målmål og inneholder instruksjoner for hva du skal gjøre med innholdet.
Opprett en HTTPService-tag for å be om vår XML-fil ved å skrive inn følgende tag umiddelbart under åpningsprogrammet.
Denne HTTPS-tjenesten har en ID av "userData" og laster inn vår brukerdata xml-fil. De resulterende dataene er formatert som E4X og overført til contentHandler-funksjonen som vi skal gjøre snart for behandling.
Vær imidlertid oppmerksom på, fordi bare å lage en HTTPService-tag sender ikke forespørselen. Akkurat som en konvolutt trenger en postboks for å reise, må HTTPService-forespørselen faktisk sendes.
Trinn 7 - Send forespørsel om CreationComplete
For at denne forespørselen skal sendes, må vi aktivere den når prosjektet har lastet inn. Vi gjør dette ved hjelp av creationComplete-hendelsen i programmerket.
Selv om vi bare kunne sette inn userData.send () -metoden her, vil vi bruke en utvidbar funksjon init () for å sende forespørselen i stedet. Denne funksjonen vil være ansvarlig for handlinger sparket når Flex-prosjektet laster, og åpner muligheten for flere belastningsarrangementer. Vi fyller ut innholdet i denne funksjonen under et senere trinn.
Trinn 8 - Oppsett for Actionscript
Handlingsskriptet for dette prosjektet vil være ansvarlig for håndtering av den lastede XML-filen, lagring av filtre og oppdatering av komponenter etter behov. Dette vil bli oppnådd med tre separate funksjoner.
Husk at Flex er et rammeverk for actionscript, mye som jQuery er å JavaScript. Dette betyr at selv om Flex-koder er utformet for å strømlinjeforme vanlige aksesshandlinger, kan det også håndtere direkte skripting. For dette må vi angi et område for scripting å gå.
Og dette er hvor Script-taggen kommer inn i spill. Sett inn taggen rett under åpningsprogrammet. Dette er hvor alle actionscript vil bli skrevet; holdes skilt fra MXML nedenfor. Hvis du er i Builder, vil taggen automatisk legge til CDATA-markeringen:
Vi starter med å importere ResultEvent-pakken som kreves for HTTPService-taggen. (Husk at all koden i denne delen går mellom skriptkodene nevnt ovenfor)
importere mx.rpc.events.ResultEvent;
Trinn 9 - Erklære variabler
For å kunne bygge XML-filtre må vi definere noen variabler. Begge med å bli definert som bindbar, noe som gjør at vi kan direkte knytte innholdet til en Flex-komponent (f.eks. Etikett).
// Holder komplett XML raw filinnhold [Bindable] private var userList: XMLList; // Endringer i valgt kontaktens XML-data [Bindable] private var selectedData: XML;
UserList XML List inneholder E4X formaterte resultater fra den lastede XML-filen. Vi vil bruke den til å fylle data grid komponenten i et senere trinn.
Den valgteData XML-variabelen vil holde det valgte resultatet i data grid-komponenten. Det vil være ansvarlig for å fylle informasjonsfeltene og profilbildet.
Trinn 10 - Bygg init-funksjonen
Den init () -funksjonen som vi refererte i det siste trinnet, vil gjøre to ting.
Send forespørselen til XML-filen for brukerdata.
Angi navnetiketten (ennå ikke opprettet) til en standard "Ingen kontakt valgt" -tekst
Koden nedenfor vil oppnå begge deler. Ignorer eventuelle advarsler om ikke-eksisterende komponenter for nå, vi lager den refererte etiketten i neste trinn.
Den neste funksjonen er innholdshandleren kalt av resultathendelsen til HTTPService-taggen. Denne funksjonen tar den overførte hendelsen, og tilordner deretter XMLListervariabelen til brukerlisten de resulterende XML-dataene som filtrert til "bruker" -nivået.
Den siste funksjonen (showProfile) aktiveres når et navn er valgt fra kontaktlisten. Den tildeler bare innholdet til den valgte XML-oppføringen til variabelen valgtData. Dette er variabelen som vil være bundet til etikettene og bildebeholdere for live oppdateringer.
privat funksjon showProfile (evt: Event): void // Tildel data til det valgte elementet valgtData = contactList.selectedItem som XML;
Nå som actionscript er på plass, er vi klare til å sette sammen designen.
Trinn 13 - Blokker ut oppsettet
Kontaktlisteoppsettet vil bestå av en serie HBox- og VBox-beholdere (henholdsvis horisontal og vertikal). Blokken ut nedenfor illustrerer strukturen til den endelige utformingen.
Trinn 14 - Opprett layoutkomponenter
Alt dette innholdet vi har lastet inn, trenger et hjem. Det er der layoutets komponenter kommer inn. Lim inn i følgende struktur under HTTPService-taggen.
MXML har en god fordel å være relativt enkel å lese. Den eneste komponenten som kan kaste noen som er ny til Flex, er Data Grid. I hovedsak er datanettet et bord. Kolonnekoden mellom DataGrid-taggen angir topptekst og -felt for individuelle kolonner.
Dette er komponentene som vil bli brukt til å laste data fra XML-filen. I neste trinn fyller vi hver med de relevante dataene.
Trinn 15 - Befolk komponentene
Patching i dataene fra XML-oppføringene er overraskende enkelt. Kopier i følgende kodendringer, og møt tilbake nedenfor for et sammendrag.
Her er en oversikt over hva som skjer:
Dataruten er befolket ved å binde brukerlisten XML-listen til den. Kolonnen laster datafeltet "navn" fra hver oppføring.
Når det valgte elementet i datanettet endres, kalles det showProfile-funksjonen for å oppdatere valgtData XML.
Etikettene er satt til å vise et felt av den valgte oppføringen.
I den høyre kolonnen er bildebeholderkilden lastet fra url i XML-filen.
Trinn 16 - Endre bakgrunnsfarger
Hvis du jobber med Flex en stund, er det lett å bli syk av standard fargevalg. La oss gjøre noen raske løsninger for å spice opp ting.
Vi begynner med å endre bakgrunnen til en gradient i svarte. Oppdater åpningsprogrammet ditt for å inkludere gradientegenskapene nedenfor:
Ulempen med en svart bakgrunn er at ingen av standardteksten blir synlig. Vi løser dette ved å bruke Flexs CSS for å endre skriftfarger.
Trinn 17 - Stil resultatene
Visste du at Flash og Flex støtter sitt eget merke av CSS? Vi bruker noen grunnleggende formatering for å forbedre lesbarheten til dette programmet. Begynn med å sette inn en stilmerke rett under åpningsprogrammet.
/ * CSS går her * /
CSS som 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 som inneholder alt har blitt gitt en svart bakgrunn og polstring på 20 px på hver side for avstand.
* Merk at du må kapitalisere komponentnavnene i CSS for at den skal referere riktig.
Trinn 18 - Kildekode for prosjekt
Hvis du ikke har forelsket seg i Flex ennå, kan denne neste funksjonen presse deg over kanten. Flex gjør deling av prosjektets kildekode ikke bare enkelt, men veldig bra. Ta en titt på resultatene, i en overraskende nettleservennlig design.
Trinn 19 - Konklusjon og videre applikasjoner
Hva du burde ha nå er en XML-drevet kontaktliste i Flex. Gi det en prøvekjøring og sørg for at alt er i orden.
Flex, som navnet antyder, er utrolig fleksibelt. Dette betyr at du kan ta rammen fra opplæringen ovenfor, og fortsett å legge til. Datagruten komponenten vil utvide etter behov.
Flex har et stort utvalg av overgangseffekter, for eksempel uskarphet og resize, som kan brukes på hver endring. Resultatene av denne opplæringen kan være et flott sted å begynne å eksperimentere med flere visuelle alternativer som disse.
Gå videre og eksperimentere! Hvis du kommer med noen kule tillegg, må du dele dem med oss i kommentarene.
Share
Accentsconagua
