Share
Într-un tutorial anterior am introdus cadrul Adobe Air care ilustrează modul de creare a unei aplicații simple. Rețineți că Adobe Air este un cadru care permite dezvoltatorilor web, implicați de obicei în programarea html / js / flash, să construiască aplicații desktop. În acest tutorial vom ilustra cum să construim o aplicație Adobe Air cu Flex, un set de tehnologii open source pentru dezvoltarea de aplicații de internet bogate.
Flex este un cadru care permite generarea de fișiere SWF. S-ar putea să întrebați: care este diferența față de Flash? Pe lângă diferențele din spatele scenei, principala diferență față de Flash este prezența unei limbi de marcare numită MXML. Figura de mai jos ilustrează procesul de generare a unui fișier SWF.
Mxml este un limbaj bazat pe xml, care arată mai prietenos cu designerii decât Actionscript, și este asemănător în concept cu HTML (cu etichete și proprietăți). La momentul de compilare, Mxml este transcodat în Actionscript, care este apoi inclus în fișierul SWF final. În această perspectivă, puteți considera Mxml drept o abstractizare a Actionscript, mult mai simplu de rezolvat. Flex SDK se naște ca un set de instrumente de dezvoltare pentru a genera fișiere swf (aceleași fișiere generate cu Flash). După ce unele modificări de la Adobe Flex pot genera acum și aplicații Adobe Air.
SDK Flex este open source și poate fi descărcat de aici. Acesta este conținută într-un fișier zip care, atunci când este extins, arată astfel.
Cele mai importante fișiere, pe care le vom folosi în acest tutorial, sunt situate în cos/ director. Mai specific vom folosi:
Accentsconagua
AMXMLC (compilatorul)ADL (debugger / lansator)ADT (instrumentul dezvoltatorului) SDK trebuie să fie configurat pentru a fi rulat din fiecare folder al computerului. Configurația este foarte asemănătoare cu cea a cadrului Adobe Air, explicată în
tutorialul anterior. O voi raporta aici pentru comoditate. Pe MacOSX urmați acest script.
(/ Aplicații / Utilitare / Terminal)
CD pentru a vă asigura că sunteți în dosarul dvs. de acasă .profil sau .bash_profile. Dacă nu există, creați-o. export PATH = $ PATH: / usr / bin acest: export PATH = $ PATH: / flexsdk / bin
spațiile se înfășoară cu o dublă cotare (de ex. "/ my pathtosdk / air")
linia: / Aplicații / flex_sdk_3 / bin
source.profile În Windows, aceasta este procedura de configurare a setului SDK.
CALE din lista de jos și adăugați calea spre folderul SDK la sfârșit, ca în figura. 
Pentru a testa configurația, deschideți shell-ul și încercați să tastați următoarea comandă:
amxmlc
Dacă rezultatul este după cum urmează, SDK-ul este corect instalat.
Să creăm un dosar care să conțină fișierele proiectului nostru. După cum sa explicat în tutorialul anterior, o aplicație Adobe Air trebuie să includă un fișier descriptiv care descrie caracteristicile aplicației. Să creăm un fișier numit MyApplication-descr.xml cu următorul conținut.
Prima linie este doar declararea formatului de fișier; specificația reală începe de la linia doi până la sfârșitul fișierului id încorporează identificatorul aplicației. Voi include domeniul meu de site pentru a vă asigura că este unic. versiune eticheta indică numărul eliberării. Amintiți-vă să o modificați în mod corespunzător pe măsură ce lansați versiuni noi ale aplicației dvs. Eticheta nume de fișier, al cărui nume poate fi înșelător, conține numele aplicației, care va apărea în fereastra principală a aplicației, în meniuri etc.. Conţinut specifică primul fișier care trebuie încărcat de aplicația Air la pornire. Acest fișier este cunoscut în general ca root file sau punct de intrare. Am setat vizibil proprietate la adevărat, pentru a fi vizualizată
aplicația în timp ce este încărcată. systemChrome indică aspectul și aspectul ferestrei care găzduiește aplicația dvs. Dacă o setați la standard, aplicația va avea o fereastră identică cu cea a sistemului operativ pe care îl utilizați. Dacă l-ați setat nici unul Contracta
va folosi propriul crom care, pe MacOsX, va arăta așa cum urmează.
Pe Windows (XP / Vista) este foarte asemănător. Diferența principală este poziția butoanelor de redimensionare / închidere.
În acest tutorial vom construi o aplicație cu un crom standard. transparent proprietatea indică dacă fereastra principală a aplicației este transparentă, în timp ce liniile 11 și 12 specifică lățimea și înălțimea inițială a ferestrei atunci când sunt afișate pe desktop.
Acum vom începe construirea codului aplicației, care va fi compilat în fișierul SWF.
WindowedApplication eticheta conține toată aplicația dvs., similar cu aplicația tag pentru pagini web. Proprietatea titlu definește șirul care va apărea în partea de sus a aplicației.Flex conține o listă uriașă de componente grafice. Lista completă a componentelor este disponibilă aici. Să punem acum un buton în fereastra noastră.
După cum puteți vedea, într-un mod destul de similar cu html, deschideți o etichetă (Buton) și specificați caracteristicile componentei prin atribute. În acest caz, definim textul care trebuie afișat pe buton prin proprietatea etichetei (linia 3). Acum vom atașa ceva la buton.
După cum puteți vedea, putem încorpora codul ActionScript, care seamănă cu JavaScript, care permite definirea a ceea ce se numește de obicei "logica" programului nostru (linii 3-11). La linia cinci vom importa Alerta
componentă, care este un fel de fereastră pop-up. Apoi definim o funcție (linia 7). Acțiunea asociată este afișarea unei ferestre Alertă care conține mesajul "Salut" (linia 8). Pentru a atașa codul la apăsarea butonului, pur și simplu îl umplem clic atributul butonului cu numele funcției (linia 12).
Pentru a compila aplicația, trebuie să ne mutăm în directorul de proiect și apoi să executați următoarea comandă:
amxmlc MyApplication.mxml
Coajă trebuie să returneze un mesaj ca acesta:
Mesajul conține un avertisment care, spre deosebire de o eroare, nu necesită o remediere. Compilatorul sugerează pur și simplu să verifice codul și să-l "îmbunătățească". Pentru a rula corect aplicația, și pentru domeniul de aplicare al acestui tutorial, nu este nevoie să-l reparați. Acum suntem gata să testați cererea noastră. Din același director introducem următoarea comandă:
adl MyApplication-descr.xml
(Observați că treceți fișierul descriptor xml și nu mxml cu codul real). Ar trebui să vedem următoarea fereastră.
Dacă faceți clic pe buton, alerta este vizualizată corect.
Este posibil să nu vă bucurați de culoarea / aspectul implicit al Flex SDK. Puteți să vă stylizați aplicația Air prin CSS, la fel ca și cu paginile html. Desigur, există diferențe în ceea ce privește standardul W3C CSS, însă ideea și sintaxa sunt aproape identice. Să schimbați de exemplu eticheta albă a tuturor butoanelor din aplicația noastră. Introducem un fragment de CSS în fișierul nostru mxml ca în figură
de mai jos (liniile 3-7).
Pentru a avea o idee despre capacitățile de styling ale Flex, uitați-vă la acest link.
Ultimul pas pentru a crea prima noastră aplicație este să ambalați un fișier distribuabil, care să fie instalat pe alte mașini. Mai întâi avem nevoie de un certificat. Pentru mai multe detalii despre necesitatea unui certificat, consultați
tutorialul anterior (pasul 7). Vom raporta aici doar comanda pentru a crea un certificat auto-semnat necesar pentru a construi pachetul distribuabil.
adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 parola mea
Cererea finală va fi distribuită ca fișier .air, care poate fi construit folosind următoarea comandă.
adt -package -storetype pkcs12 -keystore mycertificate.p12 MyApplication.air MyApplication-descr.xml MyApplication.swf
keystore parametrul indică fișierul care conține certificatul generat mai sus.
După aceasta, trebuie să specificăm numele fișierului .air pe care dorim să-l generăm, descrierea acestuia
(conținută în MyApplication-descr.xml) și fișierul rădăcină generat anterior (MyApplication.swf). Această comandă vă va cere parola pe care ați specificat-o la crearea certificatului. Acum puteți redistribui fișierul MyApplication.air rezultat utilizatorilor dvs. Amintiți-le că au nevoie pentru a instala Air Installer.
