Share
În timpul acestui tutorial vă voi îndruma prin modalitățile prin care Flex personalizează controalele de interfață. Mai exact, vom analiza elementul TileList, stilizându-l cu setul de instrumente GUI al Flex.
Pentru a trage toate acestea, vom face uz de API-ul Panoramio și vom construi un vizualizator dinamic de imagini miniatură.
Iată vizualizatorul de miniaturi cu care lucrăm:
De la începutul sistemelor de operare grafice au existat o serie de controale standard ale interfeței utilizator, cum ar fi butoane, etichete, casete de text și liste cu casete combo. Aceste controale și-au servit bine, dar în timp ce Vista, Windows 7, MacOS, KDE și Gnome ne aduc noi modele de design proaspăt, dezvoltatorii sunt deseori blocați proiectând propriile aplicații cu controale care nu și-au schimbat funcția de bază în 20 de ani.
Nu contează dacă faceți o pagină web, programând o aplicație Windows cu VB.Net sau creând o RIA cu Flex; când ajungi la ea, o listă este încă o listă și un buton este încă un buton.
Din fericire, Flex oferă dezvoltatorilor o modalitate convenabilă de a personaliza lista umilă, permițând modele mult mai interesante decât liniile standard de text. Vom folosi această funcție pentru a crea un vizualizator de imagini Panoramio.
Creați un nou proiect Flex. Pentru că vom trage fotografii din Panoramio (care returnează un obiect JSON) trebuie să facem referire la biblioteca AS3CoreLib (care poate converti textul JSON într-un obiect ActionScript), pe care îl puteți descărca de aici. Extrageți arhiva și apoi adăugați o referință la ea în "Flex Build Path".
Spre deosebire de aplicațiile desktop, aplicațiile Flex pot avea doar o singură fereastră. Statele sunt utilizate pentru a schimba cu ușurință comenzile de pe ecran atunci când sunt necesare mai multe afișări, cum ar fi o vizualizare miniatură și o vizualizare detaliată.
Stări noi pot fi adăugate utilizând butonul "Statul nou" din caseta de instrumente State.
Vrem să adăugăm două state. Primul va fi numit "Thumbnails". Dați clic pe butonul "Statul nou" și completați dialogul ca în imaginea de mai jos. Observați că bifăm "Setare ca stare de pornire", care spune Flex că aceasta este starea care va fi afișată pentru prima oară.
De asemenea, avem nevoie de o stare numită "Detaliu". Din nou, dați clic pe butonul "Statul nou" și completați dialogul ca în imaginea de mai jos.
Selectați starea "Thumbnails" din caseta de instrumente State.
Acum picteaza o noua componenta TileList pe GUI. Această componentă va fi utilizată pentru afișarea miniaturilor de fotografii.
Atribuiți TileList un ID de "miniaturi" și setați "Data Provider" la imagini. Flex vă permite să scrieți codul ActionScript în atributele elementului MXML prin includerea codului în bretele curse și folosim această funcție pentru a seta colecția de imagini (pe care o vom crea ulterior) ca sursă a datelor pentru TileList.
Selectați starea "Detail" din caseta de instrumente State.
Vopsește un control de imagine, cu un id de "fotografie", care ocupă cea mai mare parte a spațiului de pe ecran. Apoi, în partea de jos, adăugați două etichete, cu codurile "photoTitle" și "photoLocation", și un buton cu eticheta "Back".
De asemenea, trebuie să setăm proprietatea "La apăsare" a butonului pentru a this.currentState = 'Miniaturi'. Schimbarea valorii atribuite proprietății "currentState" este modul în care ne schimbăm între stările din Flex și, la fel ca și proprietatea "Data Provider" a TileList în pasul 3, vom încorpora un anumit cod ActionScript în atributul prin includerea lui în bare cotit . Prin atribuirea șirului "Thumbnails" proprietății "currentState", instruim Flex să renunțe la starea Thumbnails.
Interfața dvs. finală pentru starea Detaliu ar trebui să arate ca imaginea de mai jos.
Componentele MXML pot fi utilizate pentru a defini modul în care sunt afișate plăcile individuale în cadrul componentei TileList. Faceți clic pe File> New> Componentă MXML.
Veți vedea acum un dialog care vă permite să specificați detaliile pentru Componenta MXML. Completați-l ca în imaginea de mai jos.
După ce ați terminat, veți fi dus la un ecran de design unde puteți picta componentele la fel ca în cazul aplicației principale Flex.
Această componentă MXML va fi utilizată pentru a desena fotografiile individuale din TileList. După cum puteți vedea, aveți libertate aproape nelimitată în modul în care sunt proiectate plăcile. Fiecare placă poate fi proiectată cu orice control Flex în orice aspect care vă place.
Libertatea de a proiecta fiecare placă în mod individual este ceea ce face TileList și alte controale precum "DataGrid", "HorizontalList", "List", "Menu" și "Tree" atât de puternice. De fapt, nu am văzut niciodată alt set de instrumente GUI care să ofere dezvoltatorilor acest nivel de personalizare fără a trebui să dezvolte un nou control de la capăt.
Pentru aplicația noastră vom afișa două componente pe fiecare țiglă: o imagine și o etichetă. Modulul final ar trebui să arate cam ca imaginea de mai jos.
Setați proprietatea Text pentru etichetă la data.photo_title.length> 30? date.photo_title.substr (0, 27) + '...': date.photo_title. Aici vom afișa proprietatea "photo_title" a obiectului care este legat de componentă (vom vedea cum se va lega aceasta mai târziu) folosind un operator ternar (în esență, o mențiune constrângătoare dacă ... else).
Dacă este vorba de 30 de caractere sau mai puțin, va fi afișat șirul complet. În caz contrar, afișăm primele 27 de caractere urmate de 3 perioade pentru a indica faptul că titlul a fost scurtat.
Setați proprietatea "Sursă" a imaginii la Data.photo_file_url. Din nou, folosim ActionScript pentru a scoate proprietatea "photo_file_url" a obiectului care este legat de component.
Reveniți la fișierul principal MXML și comutați editorul la vizualizarea Sursă.
Ar trebui să vedeți un element de stare adăugat la elementul Application. Acesta este marcajul care reprezintă stările definite în pasul 2.
Sub elementul de stat ar trebui să existe două elemente de stat, iar sub fiecare dintre ele vor exista elementele AddChild. Acestea se referă la componentele pe care le-am adăugat fiecărui stat.
Sub elementul de stat cu "numele" de "Thumbnails" ar trebui să vedeți un element AddChild care conține un element TileList. Acesta este TileList pe care l-am adăugat la pasul 3. Va trebui să adăugăm câteva atribute adiționale de mai jos pentru ca TileList să afișeze componenta personalizată MXML.
itemRenderer = "ImageThumbnail" itemDoubleClick = "photoSelected ()" doubleClickEnabled = "true"
Deci, întregul element TileList ar trebui să citească:
Atributul "itemRenderer" este numele componentei MXML pe care am creat-o la pasul 5.
Atributul "itemDoubleClick" stabilește funcția "photoSelected" care trebuie apelată atunci când un element este dublu-clic.
Atributul "doubleClickEnabled" indică componentei să trateze două clicuri de mouse ca un singur dublu-clic. Fără acest atribut, componenta ar trata un dublu clic ca două clicuri unice și evenimentul "itemDoubleClick" nu ar fi declanșat niciodată.
Flex vă permite să aplicați un efect atunci când treceți de la o stare la alta. Vom folosi această funcție pentru a bloca inițial ecranul când schimbăm între stările Miniatură și Detalii, apoi readuce ecranul înapoi.
Pentru a defini tranziția de stat trebuie să adăugăm un element "tranziții" ca un element al elementului "Aplicație" MXML.
Accentsconagua
