Het doel van deze zelfstudie is om een lijst met contactpersonen te maken die dynamisch vanuit een extern XML-bestand wordt geladen. Wanneer de gebruiker een ander contact selecteert, worden de gegevens automatisch bijgewerkt om correct weer te geven. We zullen ook enkele basisstijlbladwijzigingen toepassen op de resultaten en het project een meer op maat gemaakte toets geven.
Eindresultaat voorbeeld
Laten we een kijkje nemen naar een screenshot van het uiteindelijke resultaat waar we naartoe zullen werken:
Opmerking: Zoals u snel zult merken, gebruik ik de SDK niet om Flex 3-bestanden te maken. Hoewel deze zelfstudie wordt gegeven vanuit het perspectief van de Flex 3 Builder, is de onderliggende code hetzelfde. SDK-gebruikers, je hoeft alleen maar stappen te vervangen als dat nodig is. Ik gebruik de ontwerpweergave niet in deze zelfstudie, dus je hebt geluk.
Stap 1 - Gratis voor onderwijs
Flex is een geweldig ontwikkelingsplatform. Het is beter als u de volledige Flex 3 Builder heeft. Gelukkig voor in aanmerking komende studenten en faculteitsleden, biedt Adobe je gratis een volledige Education Flex 3 Builder-licentie aan
Beschouw dit als een vriendelijke herinnering. Als iemand met een educatieve band nog gebruik moet maken van de deal "Free Flex 3 for Education", ga je gang en doe dat nu. Het zal je helpen enorm.
Nu we klaar zijn met de "gratis Adobe-product" -evangelisatie, laten we een Flex-toepassing bouwen!
Stap 2 - Projectbestanden instellen
Begin met het maken van een nieuw Flex-project voor het web. Noem het wat je maar wilt, deze stap heeft geen invloed op de resultaten.
Start binnen het project een nieuwe MXML-toepassing (Bestand> Nieuw> MXML-toepassing). Noem het bestand "contactManager".
Voor lay-outdoeleinden raad ik aan de standaardinstelling van de lay-out te wijzigen in "verticaal". Dit zal alle directe onderliggende componenten op de pagina centreren, wat veel beter zal werken met ons einddoel.
Stap 3 - Afbeeldingen downloaden
Elk contact geeft een profielfoto weer als deze is geselecteerd. Voor dit voorbeeld gebruiken we Bill Gates en Barack Obama als contactpersonen. De persfoto van Steve Jobs was gewoon te erg
Ik heb hun persfoto's (hier en hier opgehaald) bijgesneden tot kleinere afmetingen voor deze zelfstudie. Pak de bewerkte versies hier en we gaan verder met het XML-bestand.
Stap 4 - Introductie van het XML-bestand
Alle weergegeven informatie wordt uit een extern XML-bestand gehaald. De basisstructuur is als volgt:
Zoals u kunt zien, zijn er vier hoofdvelden voor elk item. De naam van de contactpersoon, zijn positie, e-mailadres en URL naar een profielafbeelding.
Download het bestand en we zijn klaar om alle bestanden die u hebt gedownload in activamappen voor Flex te regelen.
Stap 5 - Projectbestandstructuur schikken
Zorg ervoor dat uw projectbestanden zijn gerangschikt zoals in de onderstaande afbeelding. U moet de map "assets" maken voor user-data.xml en een "images" -map voor de profielfoto's (Bestand> Nieuw> Map met "src" map geselecteerd).
Importeer de bestanden die in stap 4 en 5 zijn gedownload naar de bijbehorende mappen. Selecteer de doelmap en selecteer Bestand> Importeren> Overig en gebruik de aanwijzing om een bestand te selecteren. Spoel en herhaal voor elk totdat je alle drie op hun plaats hebt.
Stap 6 - Verzoek indienen voor XML-bestand
In Flex MXML worden externe bestanden meestal geladen met de HTTPService-tag. Zie het als het voorbereiden van een envelop om te verzenden. Het bevat een doelbestemming en bevat instructies voor wat te doen met de inhoud.
Maak een HTTPService-tag om ons XML-bestand aan te vragen door de volgende tag onmiddellijk onder de openingstag van de applicatie in te voeren.
Deze HTTPService heeft een ID van "userData" en laadt ons xml-bestand met gebruikersgegevens. De resulterende gegevens zijn geformatteerd als E4X en doorgegeven aan de contentHandler-functie die we binnenkort voor verwerking zullen uitvoeren.
Let echter op, want gewoon een HTTPService-tag maken stuurt het verzoek niet. Net zoals een envelop een postbus nodig heeft om te reizen, moet de HTTPService-aanvraag feitelijk worden verzonden.
Stap 7 - Verzoek verzenden voor creatie voltooid
Om dit verzoek te verzenden, moeten we het activeren zodra het project is geladen. We doen dit met de creationComplete -gebeurtenis in de applicatietag.
Hoewel we hier de methode userData.send () gewoon kunnen invoegen, gaan we een meer uitbreidbare functie init () gebruiken om de aanvraag te verzenden. Deze functie is verantwoordelijk voor acties die worden gestart zodra het Flex-project wordt geladen en opent de mogelijkheid voor meerdere laadbeurtenissen. We vullen de inhoud van deze functie tijdens een latere stap in.
Stap 8 - Instellen voor Actionscript
Het actiescript van dit project is verantwoordelijk voor het verwerken van het geladen XML-bestand, het opslaan van filters en het bijwerken van componenten indien nodig. Dit zal worden bereikt met drie afzonderlijke functies.
Onthoudt dat Flex is een raamwerk voor actiescript, net als jQuery is JavaScript. Dit betekent dat hoewel Flex-tags zijn ontworpen om veelgebruikte actiescript-gebruik te stroomlijnen, het ook directe scripting ook aankan. Hiervoor moeten we een gebied aanwijzen voor de scripts die moeten worden uitgevoerd.
En hier komt de Script-tag om de hoek kijken. Plaats de tag direct onder de openingstag Toepassing. Dit is waar alle actiescript zal worden geschreven; gescheiden gehouden van de MXML hieronder. Als u zich in de Builder bevindt, voegt de tag automatisch de CDATA-markering toe:
We beginnen met het importeren van het ResultEvent-pakket dat vereist is voor de HTTPService-tag. (Houd er rekening mee dat alle code in dit gedeelte tussen de scripttags valt die hierboven zijn genoemd)
import mx.rpc.events.ResultEvent;
Stap 9 - Variabelen declareren
Om XML-filters te bouwen, moeten we enkele variabelen definiëren. Beide kunnen worden gedefinieerd als te koppelen, waardoor we de inhoud direct kunnen koppelen aan een Flex-component (bijvoorbeeld Label).
// Bezit volledige inhoud van XML-onbewerkte bestanden [Bindbaar] private var userList: XMLList; // Wijzigingen in de XML-gegevens van geselecteerde contactpersonen [Bindbaar] privé var selectedData: XML;
De lijst met gebruikerslijsten bevat de E4X-geformatteerde resultaten van het geladen XML-bestand. We zullen het gebruiken om de gegevensrastercomponent in een latere stap te vullen.
De selectedData XML-variabele houdt het momenteel geselecteerde resultaat vast in de gegevensrastercomponent. Het is verantwoordelijk voor het invullen van de informatievelden en de profielafbeelding.
Stap 10 - Bouw de init-functie
De init () -functie waarnaar we in de laatste stap verwezen, doet twee dingen.
Verzend de aanvraag voor het XML-bestand met gebruikersgegevens.
Stel het naamlabel (nog te maken) in op de standaardtekst "Geen contactpersoon geselecteerd"
De onderstaande code volbrengt beide. Negeer nu alle waarschuwingen over niet-bestaande componenten, we zullen het label waarnaar wordt verwezen in de volgende stap maken.
De volgende functie is de contentHandler die wordt aangeroepen door de resultaatgebeurtenis van de HTTPService-tag. Deze functie neemt de gepasseerde gebeurtenis over en wijst vervolgens de XML-lijst van de gebruikerslijst aan de resulterende XML-gegevens toe als gefilterd naar het niveau "gebruiker".
private function contentHandler (evt: ResultEvent): void userList = evt.result.user;
Stap 12 - Bouw de showProfile-functie
De laatste functie (showProfile) wordt geactiveerd wanneer een naam wordt geselecteerd uit de contactenlijst. Het wijst eenvoudig de inhoud van het momenteel geselecteerde XML-item toe aan de variabele selectedData. Dit is de variabele die wordt gebonden aan de labels en afbeeldingscontainers voor live updates.
private function showProfile (evt: Event): void // Gegevens toewijzen aan huidig geselecteerd item selectedData = contactList.selectedItem als XML;
Nu het actiescript aanwezig is, zijn we klaar om het ontwerp samen te stellen.
Stap 13 - Blokkeer de lay-out
De lay-out van de contactlijst zal bestaan uit een reeks HBox- en VBox-containers (respectievelijk horizontaal en verticaal). Het onderstaande blok illustreert de structuur van het definitieve ontwerp.
Stap 14 - Layoutcomponenten maken
Al deze inhoud die we hebben geladen, heeft een huis nodig. Dat is waar de componenten van de lay-out binnenkomen. Plak in de volgende structuur onder de HTTPService-tag.
MXML heeft als voordeel dat het relatief eenvoudig te lezen is. Het enige onderdeel dat iemand een nieuwe kans geeft op Flex-off is het Data Grid. In essentie is het gegevensraster een tabel. De kolomlabels tussen de DataGrid-tag geven de koptekst en velden voor afzonderlijke kolommen aan.
Dit zijn de componenten die zullen worden gebruikt om gegevens uit het XML-bestand te laden. In de volgende stap vullen we elk de relevante gegevens in.
Stap 15 - Vul de componenten in
Patchen in de gegevens van de XML-ingangen is verrassend eenvoudig. Kopieer de volgende codewijzigingen en kom hieronder terug voor een samenvatting.
Hier is een overzicht van wat er gaande is:
Het gegevensraster wordt gevuld door de lijst met gebruikerslijsten te binden. De kolom laadt het gegevensveld "naam" van elke invoer.
Wanneer het geselecteerde item op het gegevensraster verandert, roept het de functie showProfile aan om de geselecteerdeData-XML bij te werken.
De labels zijn elk ingesteld om een veld van het geselecteerde item weer te geven.
In de rechterkolom wordt de bron van afbeeldingcontainers geladen vanuit de url in het XML-bestand.
Stap 16 - Verander de achtergrondkleuren
Als je een tijdje met Flex werkt, ben je gemakkelijk ziek van het standaardkleurenschema. Laten we een paar snelle oplossingen maken om dingen op te fleuren.
We beginnen met het veranderen van de achtergrond naar een verloop in zwarten. Werk de openingstag van de toepassing bij met de verloopeigenschappen hieronder:
Het nadeel van een zwarte achtergrond is dat geen van de standaardtekst zichtbaar zal zijn. We lossen dit op door Flex's CSS te gebruiken om lettertypekleuren te wijzigen.
Stap 17 - Vorm de resultaten
Wist je dat Flash en Flex hun eigen CSS-merk ondersteunen? We zullen enkele basisopmaak gebruiken om de leesbaarheid van deze applicatie te verbeteren. Begin met het invoegen van een stijltag direct onder de openingstag Toepassing.
/ * CSS gaat hier * /
De CSS die wordt aangeboden in Flex is beperkt, maar we kunnen nog steeds effectieve visuele wijzigingen aanbrengen. In de onderstaande CSS heb ik alle labels gewijzigd in een wit lettertype voor leesbaarheid. De HBox die alles bevat heeft een zwarte achtergrond en een opvulling van 20 px aan elke zijde voor afstanden.
* Merk op dat u de componentnamen in de CSS moet kapitaliseren zodat deze naar behoren verwijst.
Stap 18 - Broncode voor project
Als je nog niet verliefd bent geworden op Flex, kan deze volgende functie je over de rand duwen. Flex maakt het delen van de broncode van een project niet alleen gemakkelijk, maar ziet er ook echt goed uit. Bekijk de resultaten in een verrassend browservriendelijk ontwerp.
Stap 19 - Conclusie en verdere toepassingen
Wat u nu moet hebben, is een XML-gestuurde contactenlijst in Flex. Geef het een test en zorg dat alles in goede staat is.
Flex, zoals de naam al aangeeft, is ongelooflijk flexibel. Dit betekent dat u het framework uit de bovenstaande tutorial kunt gebruiken en door kunt gaan met toevoegen. De gegevensrastercomponent wordt indien nodig uitgebreid.
Flex heeft een grote verscheidenheid aan overgangseffecten, zoals onscherpte en resize, die op elke wijziging kan worden toegepast. De resultaten van deze tutorial kunnen een goede plek zijn om te beginnen met het experimenteren met meer visuele opties zoals deze.
Ga je gang en experimenteer! Als je coole toevoegingen verzint, deel deze dan met ons in de comments.
Share
Accentsconagua
