In questo tutorial, si costruirà un uploader di immagini desktop su Flickr utilizzando AS3 / FlickrAPI ed esportando l'applicazione come un'app AIR.
Passaggio 1: crea un nuovo progetto Flex
Inizia aprendo Flex Builder e creando un nuovo progetto premendo "File> Nuovo> Progetto Flex". Vai avanti e dai al tuo progetto un nome e una posizione. La cosa principale di cui devi preoccuparti è "Application Type", assicurati che sia impostato su "Desktop (eseguito in Adobe AIR)".
Passaggio 2: scarica le librerie necessarie
Prima di iniziare a programmare, dobbiamo scaricare le librerie di cui avremo bisogno per questo progetto. Queste librerie includono il corelib di Adobe e ovviamente la libreria AS3 di Flickr
Avrai bisogno di ottenere l'ultima build dell'API di Flickr AS3 via SVN perché c'è un problema con la funzione "upload" delle build rilasciate che non è stata ancora risolta.
Passaggio 3: sposta le librerie nella cartella del progetto
Con le tue librerie scaricate, dobbiamo spostarle nella nostra cartella del progetto. Decomprimere il "corelib" e navigare nella cartella "com" all'interno della cartella "src". Ora apri la cartella del progetto in una nuova finestra e apri la cartella "src". Trascina la cartella "com" nella cartella "src" del tuo progetto.
All'interno della cartella API di Flickr, troverai una struttura di file simile alla cartella "corelib". Esegui il drill down nella cartella "src> com> adobe> webapis" e afferra la cartella "flickr". Sposta quella cartella nella cartella del progetto in questa directory "src> com> adobe> webapis".
Torna a Flex Builder e aggiorna il tuo Esplora pacchetti. Ora dovresti vedere le librerie che hai scaricato mostrate all'interno della cartella del tuo progetto.
Passaggio 4: Impostazione dell'interfaccia utente - Parte 1
Non caricaremo solo immagini sul nostro account Flickr, ma anche il titolo, i tag e una descrizione, quindi avremo bisogno dei campi corretti.
Imposta la dimensione del documento su 320x400. Fai clic destro sulla cartella del progetto Flex e seleziona "Proprietà". Scorri verso il basso fino al pannello Flex Compiler e inserisci il seguente codice nel campo "Argomenti aggiuntivi del compilatore", "-dimensione predefinita 320 415".
Passare alla vista Progettazione, aprire il pannello Componenti e trascinare un componente Immagine. Assicurati di assegnare al componente Immagine un ID "imagePreview", imposta la sua altezza su 205 pixel e vincola le sue proporzioni a 10 pixel da sinistra, a destra e in cima alla visualizzazione nel pannello Layout.
Quindi, trascina due componenti TextInput sullo stage e impilarli uno sopra l'altro con una spaziatura di 10 pixel tra loro vincolandoli entrambi a 10 pixel da sinistra e destra. Dare al primo campo un ID di "imageTitle" e impostare il valore del testo su "Image Title". Dare al secondo campo un ID di "imageTags" e un valore di testo di "Tag".
Passaggio 5: Impostazione dell'interfaccia utente - Parte 2
Finora abbiamo un'area di anteprima per la nostra immagine selezionata, campi per inserire un titolo e tag per la nostra immagine. Manca ancora un pezzo di dati, una descrizione. Vai al pannello Componenti e trascina un componente Area di testo e posizionalo sotto il campo Tag. Imposta l'altezza su 70 pixel e vincola la larghezza a 10 pixel da destra e sinistra. Dare all'Area di testo un ID di "imageDesc" e il valore del testo di "Descrizione immagine".
Ora tutto ciò di cui abbiamo bisogno ora è un pulsante Seleziona, un pulsante Carica e una barra di avanzamento per monitorare i nostri progressi di caricamento. Vai avanti e trascina due pulsanti nell'area di visualizzazione e una barra di avanzamento. Posiziona il primo pulsante di 10 pixel da sinistra e vincola a quella posizione. Dagli un ID di "selectBtn" e imposta l'etichetta su "Select". Posiziona il secondo pulsante di 10 pixel da destra e vincilo anche a quella posizione. Imposta il suo id su "uploadBtn" ed etichettalo come "Upload". Posiziona la barra di avanzamento al centro dei due pulsanti e vincola al centro dell'applicazione. Diamo un ID di "pBar".
La tua applicazione dovrebbe assomigliare all'immagine qui sotto:
Step 6: Tab Index
Passa alla visualizzazione del codice all'interno di Flex Builder e trova i campi di input appena creati. I tre campi di cui avrai bisogno sono i campi "Titolo", "Tag" e "Descrizione". Clicca all'interno di ognuno e aggiungi questo codice tabIndex = "n", sostituendo "n" con un numero sequenziale, in questo modo:
Passaggio 7: Iscriviti per una chiave API di Flickr
Per prima cosa, vai su Flickr e registrati per una chiave API.
Flickr ti chiederà di nominare la tua domanda e dargli una descrizione.
Una volta che hai inserito le informazioni corrette e accettato i termini e le condizioni, fai clic su Invia e Flickr ti indirizzerà a una schermata con la chiave API e la chiave segreta per la tua app. Tieni a portata di mano la chiave API e il segreto, ne avrai presto bisogno.
Passaggio 8: creare una classe per connettersi a Flickr
Ora creiamo una nuova classe ActionScript che servirà da connessione a Flickr. Torna a Flex Builder e crea una nuova classe ActionScript dal menu File> Nuovo; nominalo FlickrConnect.
Vai avanti e incolla questi comandi "importa" e ti spiegherò il loro scopo.
package import flash.net.SharedObject; // necessario per impostare i cookie di sistema import flash.net.URLRequest; import flash.net.navigateToURL; // apre la finestra di autorizzazione nel browser import mx.controls.Alert; // utilizzeremo due finestre di avviso nella nostra app import mx.events.CloseEvent; // Rileva quando la finestra di avviso è chiuso // Importa tutte le classi dell'API di Flickr per assicurarti di avere tutto ciò di cui abbiamo bisogno importando com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import com.adobe.webapis.flickr.methodgroups. *;
Con questa classe, passeremo a Flickr la nostra chiave API e la chiave segreta dell'app e in cambio otterremo un token di autenticazione che memorizzeremo come cookie sul sistema dell'utente. Quando la nostra app invia la chiave a Flickr aprirà una finestra del browser chiedendo all'utente di autenticare l'applicazione con il proprio account Flickr, una volta che avranno scelto "autorizza" e torneranno all'app saranno accolti da una finestra di avviso che chiede loro di fai clic su "OK" dopo aver autorizzato l'app con Flickr. In questo modo, invierai il token di sicurezza e imposterai il cookie che memorizza quel token a livello locale per aggirare il processo di autenticazione ogni volta che l'app viene aperta.
Passaggio 9: creare un'istanza di Flickr e inizializzare il servizio
public class FlickrConnect public var flickr: FlickrService; private var frob: String; private var flickrCookie: SharedObject = SharedObject.getLocal ("FlexFlickrUploader"); // memorizza Token Flickr in una funzione pubblica cookie FlickrConnect () flickr = new FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxxxx"); // inserisci Flickr API key flickr.secret = " xxxxxxxxxxxxxxxx "; if (flickrCookie && flickrCookie.data.auth_token) // se esistono cookie AND Auth Token, imposta token flickr.token = flickrCookie.data.auth_token; else // in caso contrario, ottieni l'autenticazione flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob ();
Nel codice sopra iniziamo dichiarando 3 variabili che useremo in questa classe. La variabile "flickr" è impostata come pubblica perché faremo riferimento a questo oggetto dall'applicazione padre, le altre due variabili sono private perché sono specifiche solo per questa classe.
Nel costruttore della classe, inizializzare l'oggetto flickr impostandolo come "nuovo FlickrService" e passando la chiave dell'API di Flickr come una stringa. Sotto, imposta la chiave segreta del nostro servizio appena creato sulla chiave che ti è stata data da Flickr quando hai richiesto una chiave API.
Sotto le nostre dichiarazioni, prima controlliamo se il nostro cookie di sistema esiste e se è stato impostato un "token di autenticazione". Se entrambi questi argomenti sono uguali, andiamo avanti e impostiamo la proprietà "token" del nostro servizio flickr uguale al token di autenticazione memorizzato nel nostro cookie. Se uno di questi argomenti non è vero, continuiamo il processo di autenticazione dell'applicazione.
Aggiungi e ascoltatore di eventi al servizio di flickr. Il tipo è di "FlickrResultEvent" e stiamo ascoltando "AUTH_GET_FROB". Immettere il nome della funzione "getFrobResponse". Avvia una nuova riga ed esegui la funzione "getFrob ()" dell'API di Flickr.
Frob
Flickr non definisce il termine "frob" nella loro documentazione API, tuttavia una breve spiegazione è elencata di seguito.
Un 'frob' è solo una stringa con codifica esadecimale che i server di Flickr distribuiscono come parte del processo di autorizzazione; un termine più convenzionale perché sarebbe un "nonce".
Una definizione più dettagliata può essere trovata qui.
Passaggio 10: Ottieni Frob
La funzione getFrob () invierà la nostra chiave API a Flickr e se la chiave è valida, Flickr restituirà una stringa a noi. Il frob verrà passato ad un'altra funzione che costruirà un URL di accesso che indirizzeremo l'utente a accedere al proprio account Flickr e darà alla nostra app il permesso di caricare foto.
funzione privata getFrobResponse (evento: FlickrResultEvent): void if (event.success) frob = String (event.data.frob); var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); // genera un URL di accesso navigateToURL (new URLRequest (auth_url), "_blank"); // apre il browser e richiede la verifica Alert.show ("Chiudi questa finestra dopo aver effettuato l'accesso a Flickr", "Autorizzazione Flickr", Alert.OK, null, onCloseAuthWindow);
Una volta ricevuta una risposta da Flickr con un frob, controlliamo se la risposta ha restituito un "successo". Una volta determinato viene restituito un frob, assegniamo i dati restituiti a una variabile String, creiamo un'altra variabile String che costituirà l'URL di autenticazione e quindi usiamo una delle API Flickr AS3 incorporate in funzioni che genereranno il nostro URL di accesso e assegneremo il suo valore alla nostra stringa "auth_url".
La prossima parte dovrebbe essere familiare a chiunque abbia lavorato per un po 'in Flash. Utilizza la funzione incorporata di "navigateToURL" di Flash per aprire Flickr nel browser e chiedere all'utente di accedere e autorizzare la nostra app ad accedere al proprio account. Come parte di questo processo, chiederemo a Flickr il permesso "DELETE" che è il più alto livello di accesso che un'app possa avere. Con quel livello di accesso, saremo in grado di caricare, modificare, aggiungere ed eliminare. Questo è un po 'eccessivo, ma ho scelto di mantenerlo a questo livello come riferimento per i tuoi progetti.
Allo stesso tempo, siamo indirizzati alla pagina di accesso di Flickr, la nostra app sta generando una finestra di avviso. Questa finestra includerà il messaggio "Chiudi questa finestra DOPO che accedi a Flickr". Quando l'utente ha effettuato l'accesso a Flickr e ha fatto ritorno all'app, verrà visualizzato "OK" che chiamerà un'altra funzione che recupererà un token di accesso da Flickr.
Questa funzione richiede semplicemente a Flickr un token di accesso, Flickr vedrà che la nostra app (identificata dal nostro frob) è stata autorizzata e restituirà il token.
Passaggio 12: impostare il token di accesso e il cookie di sistema
funzione privata getTokenResponse (evento: FlickrResultEvent): void if (event.success) var authResult: AuthResult = AuthResult (event.data.auth); flickr.token = authResult.token; flickrCookie.data.auth_token = flickr.token; flickrCookie.flush (); // imposta cookie sul computer locale
L'ultima funzione nella nostra classe FlickrConnect accetterà il token inviato da Flickr e lo memorizzerà in un cookie di sistema. Inizia nuovamente controllando per assicurarsi che l'evento abbia avuto successo. Se riusciamo a recuperare un token da Flickr, crea un'istanza di "AuthResult" e assegnalo a una variabile chiamata "authResult". Imposta il valore della variabile pari al valore "auth" dei dati restituiti. Imposta la proprietà "token" del nostro FlickrService sulla proprietà "token" della nostra variabile "authResult".
Successivamente, assegna una proprietà di "auth_token" al cookie che abbiamo creato all'inizio della classe (flickrCookie) e uguale a "flickr.token". Non resta che impostare il cookie sul nostro computer locale, lo facciamo usando la funzione "flush ()" di SharedObject in AS3.
Ora che abbiamo una classe per connetterci a Flickr e impostare la nostra autenticazione e le autorizzazioni, possiamo iniziare a codificare la parte principale della nostra applicazione.
Passaggio 13: importazioni e variabili
Nel nostro script principale, importeremo tre classi; la classe che abbiamo appena creato, la classe Flex Alert integrata e la classe Upload dell'API AS3 di Flickr.
Delle quattro variabili di cui avremo bisogno, la prima che dobbiamo creare è un'istanza della classe FlickrConnect appena creata, denominate la classe "flickrLogin". Crea una variabile chiamata "uploader" con un'istanza di "Upload" e passa nell'istanza di flickr dalla nostra classe FlickrConnect. Crea altre due variabili, entrambe del tipo "File". Una di queste variabili, chiameremo "file", l'altro "fileToOpen".
importare FlickrConnect; import mx.controls.Alert; import com.adobe.webapis.flickr.methodgroups.Upload; private var flickrLogin: FlickrConnect = new FlickrConnect (); private var uploader: Upload = new Upload (flickrLogin.flickr); file var privato: File; private var fileToOpen: File = File.documentsDirectory;
Passaggio 14: Inizializzazione e funzione di selezione immagine
Ora che abbiamo impostato le nostre importazioni e variabili, dobbiamo avviare la nostra applicazione. Durante il processo di inizializzazione, impostare la barra di avanzamento (pBar) su invisibile. Vogliamo che la barra sia visibile solo quando stiamo caricando un'immagine.
La prossima funzione è aprire il browser di file per consentire all'utente di selezionare un'immagine.
funzione privata init (): void pBar.visible = false; private function selectImageFile (root: File): void var imgFilter: FileFilter = new FileFilter ("Immagini", "* .jpg; *. gif; *. png"); root.browseForOpen ("Open", [imgFilter]); root.addEventListener (Event.SELECT, fileSelected);
Passaggio 15: Leggi i campi Informazioni sui file e Aggiorna input
Crea una funzione denominata "fileSelected" che si attiva quando l'utente seleziona un'immagine. Questa funzione leggerà anche il nome e l'URL del file dell'immagine. Aggiorna il campo di inserimento "Titolo" con il nome del file selezionato e scegli come target "Anteprima immagine", impostando il suo URL all'URL del file selezionato.
Passaggio 16: caricamento di file e avanzamento della traccia
Crea altre due funzioni, una per gestire il caricamento dell'immagine su Flickr e l'altra per tracciare il suo avanzamento tramite la barra di avanzamento.
Denominare la prima funzione "uploadFile" con un tipo di "MouseEvent". All'interno di tale funzione, imposta la variabile che abbiamo creato in precedenza, "file" per digitare "File" e passa l'URL dell'immagine selezionata dall'utente. Aggiungi due listener a quella variabile. Il primo listener sarà un "DataEvent" in ascolto per il caricamento completo e la sua funzione target sarà chiamata "uploadCompleteHandler". Il secondo listener sarà un evento progress e il suo obiettivo sarà la funzione "onProgress".
Creare la seconda funzione e denominarla "onProgress". All'interno della funzione imposta la barra di avanzamento su visibile e imposta la sua origine su quella di "file".
Una volta completato il caricamento, Flickr invierà una risposta alla nostra app per informarci che l'upload è terminato. La risposta di Flickr a noi sarà sotto forma di XML, avremo bisogno di analizzare questo XML e determinare la risposta sia che si tratti di un "ok" o di qualcos'altro. Tutto quello che dobbiamo sapere è se la risposta è "ok", quindi lanciare una finestra di avviso che indica che il caricamento è riuscito o se la risposta, se non altro, significa che il caricamento è fallito e dobbiamo far sapere all'utente.
funzione privata uploadCompleteHandler (event: DataEvent): void pBar.visible = false; traccia ("upload done"); var xData: XML = new XML (event.data); traccia (xdata); if (xData [0] .attribute ("stat") == "ok") Alert.show ("Carica con successo", "Stato caricamento"); else Alert.show ("Caricamento fallito", "Stato caricamento");
Passaggio 18: chiama le funzioni e avvia l'applicazione
A questo punto, se provi la tua applicazione, non succederà nulla. Questo perché non abbiamo aggiunto funzioni di clic ai nostri pulsanti e, cosa più importante, non abbiamo avviato la nostra applicazione.
All'interno del codice dell'applicazione principale, scorrere verso il basso e trovare il codice per i pulsanti creati utilizzando la GUI all'inizio di questo tutorial. Dovremo aggiungere i gestori "Click" a ciascun pulsante per indicare quale funzione eseguire quando viene fatto clic.
Il pulsante di selezione chiamerà selectImageFile (fileToOpen) con la variabile fileToOpen passato dentro.
Il pulsante di caricamento chiamerà UploadFile (evento) e passerà in un evento in esso.
Ora tutto ciò che dobbiamo fare è avviare la nostra applicazione. Lo facciamo aggiungendo del codice nella parte superiore del nostro file sotto l'elemento "WindowedApplication". Tutto ciò che dobbiamo fare è aggiungere chiamare la funzione dentro() con questo applicationComplete. Dovrebbe sembrare come questo:
Passaggio 19: verifica la tua applicazione
Una volta terminata la codifica dell'applicazione, è ora di testarla per accertarsi che funzioni.
Fare clic su "debug" in Flex Builder per distribuire l'applicazione.
L'applicazione ti avviserà di fare clic su "OK" solo dopo aver effettuato l'accesso a Flickr e dare l'autorizzazione all'app per accedere al tuo account Flickr.
Passaggio 20: selezionare un'immagine da caricare
Dopo aver fatto clic su "OK" vedrai l'applicazione vuota in attesa di input.
Fai clic su "Seleziona" e passa a un'immagine sul tuo computer locale. Una volta selezionato, fai clic su "Apri". Ora dovresti vedere un'anteprima dell'immagine che hai selezionato. Vai avanti e dagli un titolo e una descrizione. Pensa ad alcuni tag che accompagnano l'immagine e inseriscili nel campo "tag", separati da virgole. Fai clic su "Carica".
Se hai avuto successo dovresti vedere la seguente schermata.
Per assicurarti che l'immagine sia stata caricata correttamente, accedi al tuo account Flickr e visualizza l'immagine che hai appena caricato.
Passaggio 21: Esporta come AIR
Ora che sappiamo che la nostra app funziona correttamente, possiamo esportarla come un'applicazione AIR. Per fare ciò, fai clic su "File> Esporta> Crea versione". Non ci sono impostazioni sulla prima finestra che dobbiamo modificare, quindi fai clic su "Avanti" e vai alla finestra successiva.
Crea un certificato compilando i campi "Nome editore" e "Password". Sfoglia una posizione per salvare il certificato e nominarlo. Fai clic su "Fine" e attendi che l'app AIR compaia.
Conclusione
La tua app è finita, funziona e l'hai esportata per AIR. E adesso? Ora puoi espandere questa applicazione con alcune delle funzioni API o puoi distribuire così com'è.
Grazie per aver dedicato del tempo a questo tutorial, spero che ti sia piaciuto. E ricorda ... continua ad imparare!
Share
Accentsconagua
