Acest tutorial vă va prezenta Adobe Air, un cadru pentru a construi aplicații de internet bogate. Această primă introducere va arăta cum să creați o aplicație simplă folosind tehnologiile Html / Js.
Adobe Air este un cadru care permite crearea de aplicații desktop.
Aplicațiile Adobe Air se bazează pe două tehnologii: Html / Js și Flash.
Dezvoltatorii pot alege să construiască aplicații desktop prin Html / Js, Flash sau Flex. După o scurtă trecere în revistă a arhitecturii, vom construi o aplicație simplă folosind Html / Js.
Aplicația Air este executată cu ajutorul unei componente runtime, care execută codul conținut în fișierul de aer. După cum puteți vedea în figura, Adobe furnizează componenta de rulare pentru sistemele operative de trei primări, Mac OS X, Windows (XP / Vista) și Linux (notă: versiunea Linux este încă în versiune beta). Cifra ar putea duce la gândirea că cele două abordări sunt exclusive, fie că dezvoltați în HTML / JS sau Flash. Deoarece timpul de execuție a aerului permite "îmbinarea" între motoarele Javascript și ActionScript, puteți apela cod javascript dintr-un swf, manipulați HTML / DOM prin ActionScript, etc.
Rularea Adobe Air nu este pur și simplu o integrare a tehnologiilor HTML / JS și Flash. Runtime-ul oferă un set de API care permite aplicațiilor aeriene să interacționeze cu funcționalitățile sistemului de operare, cum ar fi:
Adobe Air include, de asemenea, SQLite, un motor de baze de date pentru stocarea și recuperarea datelor la nivel local.
Pentru a repeta pașii descriși mai jos, trebuie să instalați runtime-ul și kitul de dezvoltare software (SDK), care vă permite să construiți aplicații de aer.
Rulajul poate fi descărcat de la http://www.adobe.com/go/getair. Doar rulați programul de instalare și urmați instrucțiunile.
SDK poate fi descărcat de la: http://www.adobe.com/go/getairsdk
Dezarhivați setul SDK și plasați folderele în locația preferată (utilizatorii macosx vor trebui să monteze o imagine .dmg). Amintiți-vă de locația SDK-ului, vă vom referi la acesta SDKPATH
.
Directorul SDK ar trebui să arate astfel:
SDK trebuie să fie configurat, în caz contrar OS nu va găsi comenzile care urmează să fie executate.
De fapt, dacă deschizi un tip de coajă ADL
, sistemul de operare va spune ceva de genul "comanda nu a fost găsită". Acest lucru va funcționa numai dacă vă mutați în directorul bin al folderului SDK. Deoarece dorim să putem executa comenzi de construire și testare din fiecare folder, trebuie să configurați setul SDK. Este important să tastați corect calea absolută a directorului bin din folderul SDK.
Pe un Mac OS X urmați această procedură:
CD
pentru a vă asigura că sunteți în dosarul dvs. de acasă .profil
. Dacă nu există, creați-o export PATH = $ PATH: / usr / bin
export PATH = $ PATH: / airsdk / bin
sursă .profile
În Windows, urmați acești pași:
CALE
din lista de jos și adăugați calea spre folderul SDK la sfârșit, ca în figura. Pentru a testa dacă configurația are succes, deschideți o coajă și tastațiADT
comanda.
Rezultatul ar trebui să fie următorul:
Acest raspuns tehnic inseamna ca am furnizat un numar greșit de parametri comenzii, dar de asemenea
înseamnă că SDK-ul a fost corect instalat și configurat.
Să creați acum folderul nostru de proiect. Noi numim testul meu și creăm două fișiere: myTest.html și myTest.xml.
Fișierul xml este fișierul de configurare, care permite setarea aplicației pentru aer. Deschideți-l cu editorul dvs. preferat și introduceți următorul cod.
Prima linie este un antet standard pentru fișiere xml. A doua linie începe cu definirea aplicației noastre. id
este identificatorul unic al aplicației dvs. În acest caz am prefixat acest lucru cu numele meu de domeniu. nume de fișier
este numele executabilului pe care îl vom genera. Nume
este numele aplicației, așa cum văd utilizatorul. Descriere
este un fragment care este afișat în timpul instalării pentru a descrie aplicația. Versiune
indică numărul versiunii aplicației dvs., 0,1 în cazul nostru.
După specificarea metadatelor despre aplicație, mergem la definiția graficii, inclusă în
etichetă.
Linia 10 specifică fișierul rădăcină, adică fișierul care trebuie încărcat în aplicația de aer la pornire. În acest caz, myTest.html pe care o vom afișa mai târziu. Titlu
este șirul care va apărea în partea superioară a ferestrei. systemChrome
specifică dacă aplicația dvs. are standardul crom (unul din sistemul de operare gazdă) sau nici unul. Chrome este un set de instrumente standard care permit manipularea unui ferestre într-un mediu desktop, și anume bara de titlu, butoanele de închidere / redimensionare, marginile și zona de prindere pentru redimensionare.
fundal
a unei aplicații Air poate fi setată la o interfață transparentă, dar această opțiune este valabilă numai dacă cromul nu este setat la niciunul. Vizibil permite să decideți dacă aplicația trebuie afișată la lansare. Acest lucru este util când pornirea durează ceva timp și nu doriți să afișați grafica utilizatorilor.
Semnificația etichetelor minimizable
, maximizable
și Redimensionabil
ar trebui să fie intuitivă și nu ar trebui să aibă nevoie de explicații.
Acum să ne uităm la myTest.html care conține de fapt aplicația noastră.
După cum puteți vedea, este o pagină HTML standard, cu cap și corp. Capul conține un titlu, iar corpul are un div simplu, cu text în ordine aliniată.
Înainte de a împacheta aplicația ca fișier .air, o vom testa pentru a verifica dacă produce rezultatul așteptat.
Instrumentul pe care îl vom folosi id ADL
, care permite rularea aplicațiilor noastre Air fără instalare.
Să deschidem un shell și să mergem la directorul care conține fișierele myTest (atât html, cât și xml).
Apoi tastați următoarea comandă:
adl myTest.xml
Aceasta rulează aplicația cu cromul sistemului actual de operare. Pe un MacOs ar trebui să arate așa.
În Windows XP, aplicația va apărea astfel:
S-ar putea să vă îndoiți că această aplicație funcționează doar cu html. Să încercăm javascript.
Schimbăm myTest.html
fișier după cum urmează.
În ceea ce privește versiunea anterioară, am adăugat o etichetă de script care conține definiția unei funcții simple de javascript, myFunction ()
,afișarea unei alerte (liniile 4-8). Am adăugat un buton corpului (linia 12). Acțiunea asociată clicului pe buton este popme ()
funcţie. Să salvăm fișierul și să îl executăm, folosind aceeași comandă din shell, adl myTest.xml
Dacă faceți clic pe buton, ar trebui să vedem ceva de genul:
Odată ce cererea dvs. este pregătită pentru desfășurare, putem crea fișierul .air, care este pachetul de distribuție pentru aplicațiile Adobe Air.
Acest fișier, care se bazează pe compresia prin zip, conține toate lucrurile necesare instalării aplicațiilor de aer.
Aplicația Air trebuie să fie semnată cu un certificat. Pentru aplicațiile distribuite pe scară largă este de preferat să obțineți un certificat de la o autoritate ca Thawte.
Scopul nostru este doar de testare, astfel încât un certificat de auto-semnat este suficient. Crearea unui certificat se poate face prin ADT
comanda. Deschideți un shell, mutați-l în folderul proiectului și tastați această comandă:
adt -certificate -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass
adt -certificate -cn
este pur și simplu sintaxa cerută de comandă. Următorul tabel explică valorile furnizate comenzii.
Valoarea parametrului | Explicaţie |
mycertificate | Numele certificatului |
1024-RSA | Cheia de criptare a certificatului |
mycertificatefile.p12 | Fișierul în care este stocat certificatul |
mysecretpass | Parola care vă protejează certificatul |
Dacă bifați directorul proiectului, veți găsi un nou fișier numit mycertificate.p12
care este certificatul pe care l-am creat corect.
Dosarul proiectului ar trebui să conțină acum trei fișiere ca în figura de mai jos.
Acum avem tot ce avem nevoie pentru a crea dosarul nostru .air. Trebuie să executăm o comandă destul de lungă. Nu vă panicați. O să explic fiecare cuvânt. Mai întâi să vedem asta.
adt -package -storetype pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html
Ca mai sus pachet adt
este sintaxa comenzii, storetype
indică formatul depozitului de chei. Acesta este un parametru destul de tehnic. Pentru a fi de scurtă durată, deoarece am generat un certificat în conformitate cu formatul pkcs12, trebuie să-l spunem compilatorului. Apoi specificăm fișierul de certificat prin intermediul -keystore
parametru. În final, furnizăm numele fișierului .air rezultat, fișierul xml care conține setările aplicației și fișierul punct de intrare .html. Când emitem această comandă, vi se va cere parola introdusă în timpul creării certificatului ("mysecretpass") în cazul nostru.
Acum avem un fișier .air, care este formatul de distribuție a aplicației noastre. Dacă faceți dublu clic pe el, procesul de instalare va începe.
Instalarea trece prin doi pași simpli, după cum se arată mai jos.
Observați că, de vreme ce noi am semnat certificatul, identitatea publicată a aplicației, dacă este necunoscută.
În timpul celui de-al doilea pas, puteți specifica unde să instalați aplicația și dacă să o porniți atunci când instalarea sa terminat.
În acest tutorial am introdus cadrul Adobe Air și am construit prima noastră aplicație Adobe Air utilizând Html / Js.
În următoarele episoade vom vedea cum să construim aceeași aplicație cu Flex și Flash CS3.