Introducere în Adobe Air

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.

Ce este Adobe Air?

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.

Pasul 1 - Arhitectura unei aplicații Air

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.

Pasul 2 - Funcționalități la nivel de sistem de operare

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:

  • Fișier citiți și scrieți
  • Crearea și gestionarea nativ Windows / meniuri și de gestionare
  • Recuperarea resurselor de internet

Adobe Air include, de asemenea, SQLite, un motor de baze de date pentru stocarea și recuperarea datelor la nivel local.

Pasul 3 - Instalare

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:

Pasul 4 - Configurarea

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ă:

  1. Deschideți Terminalul (/ Applications / Utilities / Terminal)
  2. Tip CD pentru a vă asigura că sunteți în dosarul dvs. de acasă
  3. căutați un fișier numit .profil. Dacă nu există, creați-o
  4. Căutați o linie similară cu aceasta: export PATH = $ PATH: / usr / bin
  5. adăugați o altă linie ca aceasta: export PATH = $ PATH: / airsdk / bin
  6. dacă calea către SDK pentru aer conține spații albe, înfășurați-o cu o dublă cotație (de ex. "/ my pathtosdk / air")
  7. Închideți și redeschideți terminalul. Sau tip sursă .profile

În Windows, urmați acești pași:

  1. Faceți clic dreapta pe Computerul meu, alegeți Proprietăți
  2. Selectați fila Avansat și apoi faceți clic pe butonul Variabile de mediu
  3. Selectaț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ți
ADT 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.

Pasul 5 - Crearea de proiecte

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ă.

Pasul 6 - Rularea aplicației

Î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:

Pasul 7 - Aplicarea aerului

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.

Concluzie

Î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.

  • Abonați-vă la fluxul RSS NETTUTS pentru mai multe tutori și articole zilnice de dezvoltare web.


Cod