Scopul acestui tutorial este de a construi o listă de contacte care se încarcă dinamic dintr-un fișier XML extern. Când utilizatorul selectează un contact diferit, datele vor fi actualizate automat pentru a fi afișate corect. Vom aplica, de asemenea, câteva modificări ale foilor de stil de bază ale rezultatelor și vom oferi proiectului o atingere mai personalizată.
Rezultatul final al rezultatelor
Să aruncăm o privire la o captură de ecran a rezultatului final la care vom lucra:
Notă: Pe măsură ce veți realiza rapid, nu folosesc SDK-ul pentru a construi fișiere Flex 3. În timp ce acest tutorial este predat din perspectiva Flex 3 Builder, codul de bază este același. Utilizatorii SDK, pur și simplu trebuie să înlocuiți pașii după cum este necesar. Nu voi folosi vizualizarea de design din acest tutorial, deci ai noroc.
Pasul 1 - gratuit pentru educație
Flex este o platformă de dezvoltare excelentă. Este mai bine atunci când aveți Flex 3 Builder complet. Lucky pentru elevii eligibili și pentru facultate, Adobe oferă gratuit o licență completă pentru Educație Flex 3 Builder
Luați în considerare acest lucru un memento prietenos. Dacă cineva cu legături educaționale încă nu a profitat de contractul "Flex Flex 3 pentru Educație", continuați și faceți acest lucru acum. Te va ajuta enorm.
Acum că am terminat cu evanghelizarea produsului "liber Adobe", să construim o aplicație Flex!
Pasul 2 - Configurați fișierele de proiect
Începeți prin crearea unui nou proiect Flex pentru web. Denumiți-le ceea ce doriți, acest pas nu va avea un impact asupra rezultatelor.
În cadrul proiectului, începeți o nouă aplicație MXML (Fișier> Nou> Cerere MXML). Denumiți fișierul "contactManager".
Pentru scopuri de aspect, vă recomandăm să modificați aspectul implicit la "vertical". Acest lucru va centraliza toate componentele copilului imediat pe pagină, lucru care va funcționa mult mai bine cu obiectivul nostru final.
Pasul 3 - Descărcați imagini
Fiecare persoană de contact va afișa o imagine de profil atunci când este selectată. Pentru acest exemplu, vom folosi drept contacte Bill Gates și Barack Obama. Fotografia lui Steve Jobs a fost prea teribilă
Mi-am tăiat fotografiile de presă (recuperate aici și aici) la dimensiuni mai mici pentru acest tutorial. Prindeți versiunile editate aici și vom trece pe fișierul XML.
Pasul 4 - Introducerea fișierului XML
Toate informațiile afișate vor fi extrase dintr-un fișier XML extern. Structura de bază este după cum urmează:
După cum puteți vedea, există patru câmpuri principale pentru fiecare intrare. Numele de contact, poziția, adresa de e-mail și url la o imagine de profil.
Descărcați fișierul și vom fi gata să aranjăm toate fișierele descărcate în foldere de materiale pentru Flex.
Asigurați-vă că fișierele de proiect sunt aranjate ca în imaginea de mai jos. Va trebui să faceți folderul "assets" pentru user-data.xml și un folder "images" pentru fișierele de profil (File> New> Folder cu folderul "src" selectat).
Importați fișierele descărcate în etapele 4 și 5 în dosarele corespunzătoare. Cu folderul destinație selectat, selectați Fișier> Import> Altele și utilizați solicitarea pentru a selecta un fișier. Clătiți și repetați pentru fiecare până când veți avea toate cele trei în loc.
Pasul 6 - Faceți cerere pentru fișier XML
În Flex MXML, fișierele externe sunt încărcate cel mai frecvent cu eticheta HTTPService. Gândește-te cum se pregătește un plic pentru a trimite prin poștă. Acesta conține o destinație țintă și include instrucțiuni pentru ce să facă cu conținutul.
Creați o etichetă HTTPService pentru a solicita fișierul XML introducând următoarea etichetă imediat sub eticheta aplicației de deschidere.
Acest serviciu HTTPService are un ID de "userData" și încarcă fișierul xml pentru utilizatori. Datele rezultate sunt formatate ca E4X și transmise funcției contentHandler pe care o vom face în curând pentru procesare.
Luați notă, totuși, pentru că efectuarea unei etichete HTTPService nu trimite cererea. La fel cum un plic are nevoie de o căsuță poștală pentru a călători, cererea HTTPService trebuie trimisă efectiv.
Pasul 7 - Trimiteți o cerere pe CreationComplete
Pentru ca această solicitare să fie trimisă, trebuie să o activați după încărcarea cu succes a proiectului. Facem acest lucru folosind evenimentul createComplete în eticheta aplicației.
În timp ce am putea introduce direct metoda userData.send () aici, vom folosi o funcție init () mai extinsă pentru a trimite cererea în schimb. Această funcție va fi responsabilă pentru acțiunile declanșate după încărcarea proiectului Flex și va deschide posibilitatea unor evenimente de încărcare multiple. Vom completa conținutul acestei funcții într-o etapă ulterioară.
Pasul 8 - Configurați pentru Actionscript
ActionScript-ul acestui proiect va fi responsabil pentru manipularea fișierului XML încărcat, stocarea filtrelor și actualizarea componentelor după cum este necesar. Aceasta se va realiza cu trei funcții separate.
Sa nu uiti asta Flex este un cadru pentru acțiuni, la fel ca jQuery este JavaScript. Aceasta înseamnă că, deși etichetele Flex sunt proiectate pentru a raționaliza utilizările comune ale acțiunilor, se pot ocupa, de asemenea, și de scripting direct. Pentru aceasta, va trebui să desemnați o zonă pentru scrierea scriptului.
Și aici intră în joc eticheta Script. Introduceți eticheta direct sub eticheta aplicației de deschidere. Aici vor fi scrise toate acțiunile; păstrat separat de MXML de mai jos. Dacă sunteți în Builder, eticheta va adăuga automat marcajul CDATA:
Vom începe prin importarea pachetului ResultEvent necesar pentru eticheta HTTPService. (Rețineți că tot codul din această secțiune se află între etichetele de script menționate mai sus)
import mx.rpc.events.ResultEvent;
Pasul 9 - Declarați variabilele
Pentru a construi filtre XML, va trebui să definim câteva variabile. Ambele pot fi definite ca bindabile, ceea ce ne permite să conectăm direct conținutul la o componentă Flex (de exemplu, Label).
// Suportă conținutul complet al fișierelor XML binare [Bindable] private var userList: XMLList; // Modificări ale datelor XML ale contactului selectat [Bindable] private var selectedData: XML;
Lista de utilizatori Lista de utilizatori va conține rezultatele formatate E4X din fișierul XML încărcat. Îl vom folosi pentru a popula componenta grid de date într-un pas mai târziu.
Variabila XML selectată Dată va menține rezultatul selectat în prezent în componenta grilă de date. Acesta va fi responsabil pentru popularea câmpurilor de informații și a imaginii profilului.
Pasul 10 - Construiți funcția inițială
Funcția init () pe care am menționat-o în ultimul pas va face două lucruri.
Trimiteți cererea pentru fișierul XML de date utilizator.
Setați eticheta de nume (care urmează să fie creată) la un text prestabilit "Nu există opțiune selectată"
Codul de mai jos va realiza ambele. Ignorați toate avertismentele despre componente inexistente pentru moment, vom crea eticheta menționată în pasul următor.
Următoarea funcție este contentHandler apelată de evenimentul rezultat al etichetei HTTPService. Această funcție are loc evenimentul trecut și apoi atribuie variabilei listă XML Lista utilizatorului datele XML rezultate ca fiind filtrate la nivelul "utilizator".
funcția privată contentHandler (evt: ResultEvent): void userList = evt.result.user;
Pasul 12 - Construiți funcția showProfile
Ultima funcție (showProfile) este activată când este selectat un nume din lista de contacte. Acesta atribuie pur și simplu conținutul intrării XML selectate în mod curent la variabila selectedData. Aceasta este variabila care va fi legata de etichete si containere de imagini pentru actualizari live.
funcția privată showProfile (evt: Event): void // Atribuirea datelor către elementul selectat selectatData = contactList.selectedItem ca XML;
Acum că acțiunea este disponibilă, suntem gata să realizăm designul.
Pasul 13 - Blocați aspectul
Structura listei de contacte va consta dintr-o serie de containere HBox și VBox (respectiv orizontală și verticală). Blocul de mai jos ilustrează structura proiectului final.
Pasul 14 - Creați componente de aspect
Tot acest conținut pe care l-am încărcat va avea nevoie de o casă. Aici intră componentele layoutului. Instalați următoarea structură sub eticheta HTTPService.
MXML are un avantaj frumos de a fi relativ ușor de citit. Singura componentă care ar putea arunca pe cineva nou pe Flex off este Gridul de date. În esență, grila de date este un tabel. Eticheta coloanelor dintre eticheta DataGrid specifică textul antetului și câmpurile pentru coloanele individuale.
Acestea sunt componentele care vor fi folosite pentru a încărca date din fișierul XML. În pasul următor vom popula fiecare cu datele relevante.
Pasul 15 - Completați componentele
Patching în datele din intrările XML este surprinzător de simplu. Copiați următoarele modificări ale codului și întâlniți-vă mai jos pentru un rezumat.
Iată o descriere a ceea ce se întâmplă:
Gridul de date este populat prin legarea listei de utilizatori XML. Coloana încarcă câmpul de date "name" din fiecare intrare.
Atunci când elementul selectat din grila de date se modifică, acesta apelează funcția showProfile pentru a actualiza XML selectatData.
Fiecare etichetă este setată să afișeze un câmp al intrării selectate.
În coloana din dreapta, sursa de contacte imagine este încărcată din url în fișierul XML.
Pasul 16 - Modificați culorile de fundal
Dacă lucrați cu Flex pentru o vreme, este ușor să vă îmbolnăviți de schema implicită de culoare. Hai să facem câteva reparații rapide pentru a face lucrurile în ordine.
Vom începe prin schimbarea fundalului la un gradient în negru. Actualizați eticheta aplicației de deschidere pentru a include proprietățile de gradient de mai jos:
Dezavantajul unui fundal negru este că nici unul din textul implicit nu va fi vizibil. Vom remedia acest lucru folosind CSS-ul Flex pentru a schimba culorile fontului.
Pasul 17 - Stilul rezultatelor
Știați că Flash și Flex suportă propria lor marcă de CSS? Vom folosi câteva formate de bază pentru a îmbunătăți lizibilitatea acestei aplicații. Începeți prin introducerea unei etichete de stil direct sub eticheta de deschidere a aplicației.
/ * CSS merge aici * /
CSS oferit în Flex este limitat, dar putem totuși face schimbări vizuale efective. În CSS de mai jos, am schimbat toate etichetele într-un font alb pentru lizibilitate. HBox-ul care conținea totul a primit un fundal negru și umplutură de 20px pe fiecare parte pentru spațiere.
* Rețineți că trebuie să capitalizați numele componentelor în CSS pentru ca aceasta să se refere corect.
Pasul 18 - Cod sursă pentru proiect
Dacă nu te-ai îndrăgostit încă de Flex, această caracteristică următoare te poate împinge peste margine. Flex face ca partajarea unui cod sursă să nu fie doar ușoară, ci chiar foarte bună. Aruncați o privire asupra rezultatelor, într-un design surprinzător de browser-friendly.
Pasul 19 - Concluzii și alte aplicații
Ceea ce ar trebui să aveți acum este o listă de contacte bazată pe XML în Flex. Dați-i o încercare și asigurați-vă că totul este în stare de funcționare.
Flex, așa cum sugerează și numele, este incredibil de flexibil. Aceasta înseamnă că puteți lua cadrul din tutorialul de mai sus și continuați să adăugați. Componenta rețelei de date se va extinde după cum este necesar.
Flex are o mare varietate de efecte de tranziție, cum ar fi blur și redimensionare, care pot fi aplicate la fiecare schimbare. Rezultatele acestui tutorial ar putea fi un loc minunat pentru a începe experimentarea cu mai multe opțiuni vizuale, cum ar fi acestea.
Continuați și experimentați! Dacă veniți cu orice adăugiri interesante, asigurați-vă că le împărtășiți cu noi în comentarii.
Share
Accentsconagua
