În acest tutorial, veți crea o aplicație de încărcare a imaginilor desktop Flickr utilizând AS3 / FlickrAPI și veți exporta aplicația ca aplicație AIR.
Pasul 1: Creați un nou proiect Flex
Începeți prin a deschide Flex Builder și creați un nou proiect prin apăsarea "File> New> Flex Project". Mergeți mai departe și dați proiectului numele și locația. Principalul lucru de care trebuie să vă faceți griji este "Tipul aplicației", asigurați-vă că este setat la "Desktop (rulează în Adobe AIR)".
Pasul 2: Descărcați Bibliotecile Necesare
Înainte de a începe programarea, trebuie să descărcați bibliotecile de care avem nevoie pentru acest proiect. Aceste biblioteci includ corelib de Adobe și, desigur, biblioteca Flickr AS3
Va trebui să obțineți cea mai recentă construcție a API-ului Flickr AS3 prin SVN deoarece există o problemă cu funcția "încărcare" a versiunilor publicate care nu a fost încă rezolvată.
Pasul 3: mutați bibliotecile în folderul de proiect
Cu bibliotecile dvs. descărcate, trebuie să le mutați în dosarul nostru de proiect. Dezarhivați "corelib" și navigați la dosarul "com" din interiorul directorului "src". Acum, deschideți folderul proiectului într-o fereastră nouă și deschideți dosarul "src". Glisați folderul "com" în directorul "src" al proiectului.
În interiorul directorului API Flickr, veți găsi o structură de fișier similară cu dosarul "corelib". Trageți în directorul "src> com> adobe> webapis" și apucați folderul "flickr". Deplasați directorul în folderul proiectului în acest director "src> com> adobe> webapis".
Întoarceți-vă la Flex Builder și reîmprospătați pachetul Explorer. Ar trebui să vedeți acum bibliotecile pe care le-ați descărcat afișează în interiorul folderului proiectului.
Pasul 4: Configurarea interfeței utilizator - Partea 1
Nu numai că încărcăm imagini în contul nostru Flickr, dar și titlul, etichetele și o descriere, deci avem nevoie de câmpurile corespunzătoare.
Setați dimensiunea documentului la 320x400. Faceți clic dreapta pe folderul proiectului Flex și selectați "proprietăți". Derulați în jos până la panoul Flex Compiler și introduceți următorul cod în câmpul "argumente suplimentare pentru compilatoare", "-dimensiunea standard 320 415".
Treceți la vizualizarea Design, deschideți panoul Components și trageți o componentă Imagine. Asigurați-vă că dați componentei imagine un id numit "imagePreview", setați înălțimea la 205 de pixeli și restricționați proporțiile sale la 10 pixeli din stânga, din dreapta și din partea de sus a ecranului în panoul Layout.
Apoi, trageți două componente TextInput pe scenă și le suprapuneți unul pe celălalt, cu o placă de 10 pixeli între ele, limitându-le pe ambii până la 10 pixeli din stânga și din dreapta. Dați primul câmp un ID "imageTitle" și setați valoarea textului la "Image Image". Dați cel de-al doilea câmp un id de "imageTags" și o valoare de text a "Tag-uri".
Pasul 5: Configurarea interfeței utilizator - Partea 2
Până acum avem o zonă de previzualizare pentru imaginea selectată, câmpurile pentru a introduce un titlu și etichete pentru imaginea noastră. Nu mai există o altă parte a datelor, o descriere. Accesați panoul Components și trageți o componentă de zonă text și plasați-o sub câmpul Tags. Setați înălțimea la 70 de pixeli și restricționați lățimea la 10 pixeli din dreapta și din stânga. Dați zonei text un id de "imageDesc" și valoarea de text a "Descrierea imaginii".
Acum, tot ce avem nevoie acum este un buton Selectare, un buton de încărcare și o bara de progres pentru a monitoriza progresul încărcării. Mergeți mai departe și trageți două butoane în zona de afișare și o bară de progres. Plasați primul buton cu 10 pixeli din stânga și fixați-l în acea poziție. Dați-i un id de "selectBtn" și setați eticheta la "Selectați". Așezați al doilea buton cu 10 pixeli din partea dreaptă și o restrângeți și la acea poziție. Setați ID-ul său la "uploadBtn" și etichetați-l "Încărcați". Poziționați bara de progres în mijlocul celor două butoane și mențineți-le la mijlocul aplicației. Să-i dăm un id de "pBar".
Aplicația dvs. ar trebui să arate ca imaginea de mai jos:
Pasul 6: Indicele fila
Treceți la vizualizarea de cod în interiorul Flex Builder și găsiți câmpurile de intrare pe care tocmai le-ați creat. Cele trei câmpuri de care aveți nevoie sunt câmpurile "Titlu", "Etichete" și "Descriere". Faceți clic în interiorul fiecăruia și adăugați acest cod tabindex = "n", înlocuind "n" cu un număr secvențial, după cum urmează:
Pasul 7: Înscrieți-vă pentru o cheie API Flickr
Mai întâi, mergeți peste Flickr și înscrieți-vă pentru o cheie API.
Flickr vă va cere să vă numiți aplicația și să o descrieți.
După ce completați informațiile corecte și sunteți de acord cu termenii și condițiile, faceți clic pe trimiteți, iar apoi Flickr vă va direcționa către un ecran cu cheia API și cu cheia secretă pentru aplicația dvs. Țineți cheia API și secretul la îndemână, veți avea nevoie de ele în curând.
Pasul 8: Creați o clasă pentru a vă conecta la Flickr
Acum, să creăm o nouă clasă ActionScript care va servi drept conexiunea noastră cu Flickr. Reveniți la Flex Builder și creați o nouă clasă ActionScript din meniul Fișier> Nou; numeste FlickrConnect.
Du-te și paste în aceste comenzi "import" și le voi explica scopul lor.
pachet import flash.net.SharedObject; // necesar pentru a seta importul de module cookie flash.net.URLRequest; import flash.net.navigateToURL; // deschide fereastra de autorizare în importul browserului mx.controls.Alert; // vom folosi două ferestre de avertizare în importul nostru de aplicații mx.events.CloseEvent; // Detectează când fereastra de alertă este închis // Importați toate clasele API Flickr pentru a vă asigura că avem tot ceea ce avem nevoie de import com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import com.adobe.webapis.flickr.methodgroups. *;
Cu această clasă, vom transmite Flickr cheia API și cheia secretă a aplicației, iar în schimb vom primi un jeton de autentificare pe care îl vom stoca ca un modul cookie în sistemul utilizatorului. Când aplicația noastră trimite cheia către Flickr, va deschide o fereastră de browser care îi cere utilizatorului să autentifice aplicația cu contul lor Flickr, după ce au ales să "autorizeze" și se vor întoarce la aplicație, vor fi întâmpinați de o fereastră de alertă, cerându-i faceți clic pe "OK" după ce au autorizat aplicația cu Flickr. Acest lucru va fi trimis apoi pentru jetonul de securitate și se va seta un modul cookie care să stocheze acest jeton local, pentru a ocoli procesul de autentificare de fiecare dată când este deschisă aplicația.
Pasul 9: Creați instanța Flickr și inițializați serviciul
clasa publică FlickrConnect public var flickr: FlickrService; privat var frob: String; privat var flickrCookie: SharedObject = SharedObject.getLocal ("FlexFlickrUploader"); // Stochează Flickr Token într-o funcție publică cookie FlickrConnect () flickr = new FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxxxxxx"); // tasta API Flickr flickr.secret = xxxxxxxxxxxxxxxx "; dacă (flickrCookie && flickrCookie.data.auth_token) // dacă există un modul cookie ȘI un autentificator, setați token flickr.token = flickrCookie.data.auth_token; else // dacă nu, obțineți autentificare flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob ();
În codul de mai sus începem prin declararea a trei variabile pe care le vom folosi în această clasă. Variabila "flickr" este setată ca fiind publică deoarece vom referi acest obiect din cadrul aplicației părinte, celelalte două variabile sunt private, deoarece sunt specifice doar pentru această clasă.
În constructorul de clasă, inițializați obiectul flickr setându-l la egal cu "noul FlickrService" și trecând cheia dvs. API Flickr ca șir. Dedesubt, setați cheia secretă a serviciului nostru nou creat la cheia dată de Flickr atunci când ați solicitat o cheie API.
Sub declarațiile noastre, verificăm mai întâi dacă sistemul nostru cookie există și dacă a fost setat un "jeton de autentificare". Dacă ambele dintre aceste argumente sunt egale cu adevărat, vom merge mai departe și vom seta proprietatea "token" a serviciului nostru flickr, egală cu tokenul de autentificare stocat în cookie-ul nostru. Dacă unul dintre aceste argumente nu este adevărat, vom continua procesul de autentificare a aplicației.
Adăugați și ascultător de evenimente la serviciul flickr. Tipul este "FlickrResultEvent" și ascultăm pentru "AUTH_GET_FROB". Introduceți numele funcției "getFrobResponse". Porniți o nouă linie și executați funcția "getFrob ()" a API-ului Flickr.
FROB
Flickr nu definește termenul "frob" în documentația API, însă o scurtă explicație este prezentată mai jos.
Un "frob" este doar un șir hexagonal codificat pe care serverele Flickr le distribuie ca parte a procesului de autorizare; un termen mai convențional pentru acesta ar fi un "nonce".
O definiție mai detaliată poate fi găsită aici.
Pasul 10: Obțineți Frob
Functia getFrob () va trimite cheia API pe Flickr și dacă cheia este validă, Flickr ne va returna un șir. Frob va fi trecut la o altă funcție care va construi o adresă URL de conectare pe care o vom direcționa către utilizator pentru a vă conecta la contul Flickr și pentru a acorda permisiunea aplicației noastre de a încărca fotografii.
funcția privată getFrobResponse (eveniment: FlickrResultEvent): void if (event.success) frob = String (event.data.frob); var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); // generează o adresă URL de navigare navigateToURL (nou URLRequest (auth_url), "_blank"); // deschide browserul și solicită verificarea dvs. Alert.show ("Închideți această fereastră după ce vă conectați la Flickr", "Autorizația Flickr", Alert.OK, null, onCloseAuthWindow);
Odată ce primim un răspuns înapoi de la Flickr cu un frob, verificăm dacă răspunsul a dat un "succes". După ce sa determinat că a fost returnat un frob, vom atribui datele returnate la o variabilă String, vom crea o altă variabilă String care va fi adresa URL de autentificare și apoi vom utiliza unul dintre funcțiile Flickr AS3 built in funcții care vor genera URL-ul de conectare și vor atribui valoare pentru șirul nostru "auth_url".
Următoarea parte trebuie să fie cunoscută oricui a lucrat în Flash pentru o perioadă de timp. Folosiți funcția Flash "built-in" navigați pentru a deschide Flickr în browser și solicitați utilizatorului să se conecteze și să dea permisiunea aplicației noastre de a accesa contul. Ca parte a acestui proces, vom cere Flickr permisiunea "DELETE", care este cel mai înalt nivel de acces pe care îl poate avea o aplicație. Cu acel nivel de acces, vom putea încărca, edita, adăuga și șterge. Acesta este un pic cam suprasolicitat, dar am ales să îl păstrez la acest nivel ca o referință pentru propriile dvs. proiecte.
În același timp, suntem direcționați către pagina de conectare a Flickr, iar aplicația noastră generează o fereastră de alertă. Această fereastră va include mesajul "Închideți această fereastră după ce vă conectați la Flickr". Când utilizatorul sa conectat la Flickr și sa întors în aplicație, va apăsa "OK", care va apela o altă funcție care va prelua un jeton de acces de pe Flickr.
Pasul 11: Obțineți accesul la Token
funcția publică peCloseAuthWindow (eveniment: CloseEvent): void flickr.addEventListener (FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse); flickr.auth.getToken (FROB);
Această funcție doar cere Flickr un jeton de acces, Flickr va vedea că aplicația noastră (identificată de frob) a fost autorizată și va returna simbolul.
Pasul 12: Setați Tokenul de acces și Cookie-ul de sistem
funcția privată getTokenResponse (eveniment: FlickrResultEvent): void if (event.success) var authResult: AuthResult = AuthResult (event.data.auth); flickr.token = authResult.token; flickrCookie.data.auth_token = flickr.token; flickrCookie.flush (); // setați cookie pe calculatorul local
Ultima funcție din clasa noastră FlickrConnect va accepta tokenul trimis de Flickr și îl va stoca într-un modul cookie al sistemului. Începeți din nou verificarea pentru a vă asigura că evenimentul a avut succes. Dacă am reușit să preluăm un token din Flickr, creați o instanță a "AuthResult" și alocați-o unei variabile numite "authResult". Setați valoarea valorii egale la valoarea "auth" a datelor returnate. Setați proprietatea "token" a serviciului nostru FlickrService la proprietatea "token" a variabilei noastre "authResult".
Apoi, atribuiți o proprietate a "auth_token" cookie-ului creat la începutul clasei (flickrCookie) și egal cu "flickr.token". Tot ce este rămas este să setați cookie-ul pe computerul nostru local, procedând astfel utilizând funcția "flush ()" a SharedObject în AS3.
Acum, că avem o clasă pentru a ne conecta la Flickr și a ne fixa autentificarea și permisiunile, putem începe codarea părții principale a aplicației.
Pasul 13: Importuri și variabile
În scriptul nostru principal, vom importa trei clase; clasa pe care tocmai am creat-o, clasa Flex Alert construită și clasa de încărcare a API-ului Flickr AS3.
Dintre cele patru variabile pe care le vom avea nevoie, primul care trebuie să creăm este o instanță a clasei FlickrConnect pe care tocmai am creat-o, denumirea acelei clase "flickrLogin". Creați o variabilă numită "încărcător" cu o instanță de "încărcare" și treceți în instanța flickr din clasa noastră FlickrConnect. Creați încă două variabile, de tipul "Fișier". Una dintre aceste variabile, vom numi "fișier", celălalt "fileToOpen".
import FlickrConnect; import mx.controls.Alert; import com.adobe.webapis.flickr.methodgroups.Upload; privat var flickrLogin: FlickrConnect = nou FlickrConnect (); private var uploader: Upload = Upload nou (flickrLogin.flickr); fișier privat var: Fișier; private var fileToOpen: Fișier = Fișier.documentsDirectory;
Pasul 14: Funcția de inițializare și selectare a imaginii
Acum, când avem importurile și variabilele noastre, trebuie să inițiem cererea noastră. În timpul procesului de inițializare, setați bara de progres (pBar) la invizibilă. Vrem doar ca bara să fie vizibilă când încărcăm o imagine.
Următoarea funcție este să deschideți browserul de fișiere pentru ca utilizatorul să selecteze o imagine.
funcția privată init (): void pBar.visible = false; funcția privată selectImageFile (rădăcină: fișier): void var imgFilter: FileFilter = fișierul FileFilter nou ("Imagini", "* .jpg; *. gif; *. png"); root.browseForOpen ("Deschidere", [imgFilter]); root.addEventListener (eveniment.SELECT, fileSelected);
Pasul 15: citiți câmpurile Informații despre fișier și actualizați câmpurile de introducere
Creați o funcție numită "fileSelected" care se va declanșa când utilizatorul selectează o imagine. Această funcție va citi și numele și urlul fișierului imaginii. Actualizați câmpul de introducere "Titlu" cu numele fișierului selectat și vizați "Previzualizarea imaginilor", setând adresa URL a acestuia la adresa URL a fișierului selectat.
Pasul 16: Încărcați fișierul și urmăriți progresul
Creați alte două funcții, unul pentru a gestiona încărcarea imaginii pe Flickr și celălalt pentru a urmări progresul acesteia prin bara de progres.
Denumiți prima funcție "uploadFile" cu un tip de "MouseEvent". În interiorul acelei funcții, setați variabila pe care am creat-o mai devreme, "file" pentru a tasta "File" și introduceți adresa URL a imaginii selectate de utilizator. Adăugați doi ascultători la acea variabilă. Primul ascultător va fi un "DataEvent" care asculta încărcarea completă și funcția țintă va fi numită "uploadCompleteHandler". Al doilea ascultător va fi un eveniment de progres și obiectivul său va fi funcția "onProgress".
Creați a doua funcție și denumiți-o "onProgress". În interiorul funcției setați bara de progres pentru a fi vizibilă și setați sursa acesteia la cea a "fișierului".
După ce încărcarea este finalizată, Flickr va trimite un răspuns înapoi la aplicația noastră, anunțându-ne că încărcarea a terminat. Răspunsul lui Flickr înapoi la noi va fi sub formă de XML, va trebui să analizăm XML și să determinăm răspunsul dacă este "ok" sau altceva. Tot ce trebuie să știm este dacă răspunsul este "ok", apoi lansați o fereastră de alertă prin care se afirmă că încărcarea a reușit sau dacă răspunsul este altceva, înseamnă că încărcarea a eșuat și trebuie să lăsăm utilizatorul să știe.
funcția privată uploadCompleteHandler (eveniment: DataEvent): void pBar.visible = false; urmărire ("încărcare făcută"); var xData: XML = nou XML (event.data); trace (xdata); dacă xData [0] .attribute ("stat") == "ok") Alert.show ("Încărcare reușită", "Stare încărcare"); altceva Alert.show ("Încărcarea a eșuat", "Starea încărcării");
Pasul 18: Apelați funcțiile și inițiați aplicația
În acest moment, dacă testați cererea dvs. nu se va întâmpla nimic. Asta pentru că nu am adăugat funcții de clic pe butoanele noastre și, mai important, nu am inițiat aplicația noastră.
În interiorul codului aplicației principale, derulați în jos și găsiți codul pentru butoanele create folosind GUI-ul de la începutul acestui tutorial. Va trebui să adăugăm manageri "Faceți clic" pe fiecare buton pentru a le spune ce funcție trebuie să execute atunci când sunt dați clic pe ele.
Butonul de selectare va apela selectImageFile (fileToOpen) cu variabila fileToOpen a intrat în ea.
Butonul de încărcare va suna uploadFile (eveniment) și va trece într-un eveniment în ea.
Acum, tot ce trebuie să facem este să inițiem cererea noastră. Facem acest lucru prin adăugarea unui cod în partea de sus a fișierului nostru sub elementul "WindowedApplication". Tot ce trebuie să faceți este să adăugați apelați funcția init () cu asta applicationComplete. Ar trebui să arate astfel:
Pasul 19: Testați aplicația
După ce ați terminat codarea aplicației dvs., este timpul să o testați pentru a vă asigura că funcționează.
Faceți clic pe "Debug" din Flex Builder pentru a implementa aplicația.
Aplicația vă va avertiza să faceți clic doar pe "OK" după ce vă conectați la Flickr și să acordați permisiunea aplicației să acceseze contul dvs. Flickr.
Pasul 20: Selectați o imagine pentru încărcare
După ce faceți clic pe "OK", veți vedea că cererea dvs. necompletată așteaptă intrarea.
Faceți clic pe "Selectați" și navigați la o imagine de pe computerul dvs. local. Odată selectată, dați clic pe "Deschideți". Ar trebui să vedeți acum o previzualizare a imaginii pe care ați selectat-o. Dă-i un titlu și o descriere. Gândiți-vă la unele etichete care merg împreună cu imaginea și introduceți-le în câmpul "etichete", separate prin virgule. Faceți clic pe "Încărcați".
Dacă ați avut succes, ar trebui să vedeți următorul ecran.
Doar pentru a vă asigura că imaginea a fost încărcată cu succes, accesați contul dvs. Flickr și vizualizați imaginea pe care tocmai ați încărcat-o.
Pasul 21: Exportați ca AIR
Acum, când știm că aplicația noastră funcționează corect, o putem exporta ca o aplicație AIR. Pentru aceasta, faceți clic pe "File> Export> Release Build". Nu există setări pentru prima fereastră pe care trebuie să le schimbăm, deci dați clic pe "Următorul" și mergeți la fereastra următoare.
Creați un certificat prin completarea câmpurilor "Nume editor" și "Parolă". Răsfoiți o locație pentru a salva certificatul și ao numi. Dați clic pe "terminați" și așteptați ca aplicația dvs. AIR să fie construită.
Concluzie
Aplicația dvs. este terminată, funcționează și ați exportat-o pentru AIR. Ce acum? Acum puteți extinde această aplicație cu mai multe funcții API sau puteți implementa așa cum este.
Vă mulțumim că ați avut timp să lucrați prin acest tutorial, sper că v-ați bucurat. Și amintiți-vă ... continuați să învățați!
Share
Accentsconagua
