In deze zelfstudie bouwt u een desktop-Flickr-afbeelding-uploader op met behulp van de AS3 / FlickrAPI en exporteert u de applicatie als een AIR-app.
Stap 1: Maak een nieuw flexproject
Begin door Flex Builder te openen en een nieuw project te maken door op "Bestand> Nieuw> Flexproject" te klikken. Ga je gang en geef je project een naam en locatie. Het belangrijkste waar u zich hier zorgen over moet maken, is het "Type toepassing", zorg ervoor dat dit is ingesteld op "Desktop (wordt uitgevoerd in Adobe AIR)".
Stap 2: Download noodzakelijke bibliotheken
Voordat we met het programmeren beginnen, moeten we de bibliotheken downloaden die we voor dit project nodig hebben. Die bibliotheken bevatten de corelib van Adobe en natuurlijk de Flickr AS3-bibliotheek
Je moet de laatste build van de Flickr AS3 API via SVN krijgen, omdat er een probleem is met de "upload" -functie van de vrijgegeven builds die nog niet is opgelost.
Stap 3: Verplaats Bibliotheken naar Projectmap
Nadat uw bibliotheken zijn gedownload, moeten we ze naar onze projectmap verplaatsen. Pak de "corelib" uit en navigeer naar de map "com" in de map "src". Open nu uw projectmap in een nieuw venster en open de map "src". Sleep de map "com" naar de map "src" van uw project.
Binnen in de Flickr API-map vindt u een vergelijkbare bestandsstructuur als de map "corelib". Blader naar de map "src> com> adobe> webapis" en pak de map "flickr". Verplaats die map naar de projectmap in deze map "src> com> adobe> webapis".
Ga terug naar Flex Builder en vernieuw uw pakketverkenner. Je zou nu moeten zien welke bibliotheken je hebt gedownload in je projectmap.
Stap 4: Stel de gebruikersinterface in - Deel 1
We zullen niet alleen afbeeldingen uploaden naar ons Flickr-account, maar ook de titel, tags en een beschrijving, dus we hebben de juiste velden nodig.
Stel uw documentgrootte in op 320x400. Klik met de rechtermuisknop op uw Flex-projectmap en selecteer "eigenschappen". Scrol omlaag naar het Flex-compileerpaneel en voer de volgende code in het veld "Aanvullende compilatorargumenten" in.-standaardgrootte 320 415".
Schakel over naar de ontwerpweergave, open het deelvenster Componenten en sleep een afbeeldingonderdeel. Zorg ervoor dat u het afbeeldingsonderdeel een ID geeft met de naam "imagePreview", stel de hoogte in op 205 pixels en beperk de verhoudingen tot 10 pixels vanaf de linker-, rechter- en bovenkant van het venster in het deelvenster Opmaak.
Sleep vervolgens twee TextInput-componenten naar het werkvlak en stapel ze op elkaar met een opvulling van 10 pixels tussen beide, zodat ze allebei op 10 pixels van links en rechts worden geplaatst. Geef het eerste veld een ID van "imageTitle" en stel de tekstwaarde in op "Image Title". Geef het tweede veld een ID van "imageTags" en een tekstwaarde van "Tags".
Stap 5: Stel de gebruikersinterface in - Deel 2
Tot nu toe hebben we een voorbeeldgebied voor onze geselecteerde afbeelding, velden om een titel in te voeren en tags voor onze afbeelding. Nog een stuk gegevens ontbreekt, een beschrijving. Ga naar het deelvenster Componenten en sleep een tekstgebiedcomponent naar buiten en plaats deze onder het veld Tags. Stel de hoogte in op 70 pixels en beperk de breedte tot 10 pixels van rechts en links. Geef het tekstgebied een ID van "imageDesc" en tekstwaarde van "Image Description".
Nu is alles wat we nu nodig hebben een Select-knop, een Upload-knop en een voortgangsbalk om onze uploadvoortgang te volgen. Ga je gang en sleep twee knoppen naar het weergavegebied en een voortgangsbalk. Plaats de eerste knop 10 pixels vanaf de linkerkant en beperk deze tot die positie. Geef het een ID van "selectBtn" en stel het label in op "Selecteren". Plaats de tweede knop 10 pixels vanaf de rechterkant en beperk deze ook tot die positie. Stel het ID in op "uploadBtn" en label het als "Upload". Plaats de voortgangsbalk in het midden van de twee knoppen en beperk deze tot het midden van de applicatie. Laten we het een id geven van "pBar".
Uw applicatie moet er als volgt uitzien:
Stap 6: Tabindex
Schakel over naar de codeweergave in Flex Builder en zoek de invoervelden die u zojuist hebt gemaakt. De drie velden die u nodig hebt, zijn de velden "Titel", "Labels" en "Beschrijving". Klik binnen in elk ervan en voeg deze code toe tabIndex = "n", "n" vervangen door een volgnummer, zoals zo:
Stap 7: Meld u aan voor een Flickr API-sleutel
Ga eerst naar Flickr en meld je aan voor een API-sleutel.
Flickr zal u vragen om uw toepassing een naam te geven en deze een beschrijving te geven.
Zodra u de juiste informatie hebt ingevuld en akkoord gaat met de voorwaarden, klikt u op verzenden en vervolgens stuurt Flickr u naar een scherm met uw API-sleutel en de geheime sleutel voor uw app. Houd de API Key en Secret handig, je hebt ze binnenkort nodig.
Stap 8: Maak een klasse om verbinding te maken met Flickr
Laten we nu een nieuwe ActionScript-klasse maken die zal dienen als onze verbinding met Flickr. Ga terug naar Flex Builder en maak een nieuwe ActionScript-klasse in het menu Bestand> Nieuw; Noem maar op FlickrConnect.
Ga je gang en plak in deze "import" -opdrachten en ik zal hun doel uitleggen.
package import flash.net.SharedObject; // nodig om systeemcookies in te stellen import flash.net.URLRequest; import flash.net.navigateToURL; // opent het autorisatievenster in de browser import mx.controls.Alert; // we gebruiken twee waarschuwingsvensters in onze app-import mx.events.CloseEvent; // Detecteert wanneer het waarschuwingsvenster is gesloten // Importeer alle Flickr API-klassen om ervoor te zorgen dat we alles hebben wat we nodig hebben importeer com.adobe.webapis.flickr. *; import com.adobe.webapis.flickr.events. *; import com.adobe.webapis.flickr.methodgroups. *;
Met deze klasse gaan we Flickr onze API-sleutel en de geheime sleutel van de app doorgeven en in ruil daarvoor krijgen we een authenticatietoken dat we als een cookie op het systeem van de gebruiker opslaan. Wanneer onze app de sleutel naar Flickr stuurt, wordt er een browservenster geopend waarin de gebruiker wordt gevraagd om de toepassing te verifiëren met hun Flickr-account. Zodra ze "autoriseren" kiezen en ze terugkeren naar de app, worden ze begroet door een waarschuwingsvenster waarin ze worden gevraagd klik op "OK" zodra ze de app hebben geautoriseerd met Flickr. Als u dit doet, verzendt u vervolgens het beveiligingstoken en stelt u de cookie in die dit token lokaal opslaat om het verificatieproces te omzeilen telkens wanneer de app wordt geopend.
Stap 9: Maak een Flickr-instance en initialiseer de service
public class FlickrConnect public var flickr: FlickrService; private var frob: String; privé var flickrCookie: SharedObject = SharedObject.getLocal ("FlexFlickrUploader"); // winkel Flickr-token in een openbare cookie-functie FlickrConnect () flickr = nieuwe FlickrService ("xxxxxxxxxxxxxxxxxxxxxxxx"); // voer de Flickr API-sleutel in flickr.secret = " xxxxxxxxxxxxxxxx "; if (flickrCookie && flickrCookie.data.auth_token) // als cookie AND Auth Token bestaat, stel het token in flickr.token = flickrCookie.data.auth_token; else // if not, get authentication flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, getFrobResponse); flickr.auth.getFrob ();
In de bovenstaande code beginnen we met het declareren van 3 variabelen die we in deze klasse zullen gebruiken. De "flickr" -variabele is ingesteld als openbaar omdat we dit object binnen de bovenliggende toepassing zullen raadplegen, de andere twee variabelen zijn privé omdat ze specifiek zijn voor deze klasse.
In de klasseaanbouwer initialiseert u het flickr-object door het gelijk te stellen aan een "nieuwe FlickrService" en uw Flickr API-sleutel door te geven als een tekenreeks. Stel hieronder de geheime sleutel van onze nieuw gemaakte service in op de sleutel die Flickr u heeft gegeven toen u een API-sleutel aanvraagde.
Onder onze verklaringen controleren we eerst of onze systeemcookie bestaat en of een "authenticatietoken" is ingesteld. Als beide argumenten gelijk zijn, gaan we door en stellen we de "token" -eigenschap van onze flickr-service in die gelijk is aan het authenticatietoken dat in onze cookie is opgeslagen. Als een van deze argumenten niet waar is, gaan we door met het verifiëren van de toepassing.
Voeg en gebeurtenislistener toe aan de flickr-service. Het type is van "FlickrResultEvent" en we luisteren naar "AUTH_GET_FROB". Voer de functienaam "getFrobResponse" in. Start een nieuwe regel en voer de "getFrob ()" -functie van de Flickr API uit.
Frob
Flickr definieert de term 'frob' niet in hun API-documentatie, maar hieronder vindt u een korte uitleg.
Een 'frob' is slechts een hex-gecodeerde reeks die de Flickr-servers uitdelen als onderdeel van het autorisatieproces; een meer conventionele term want het zou een 'nonce' zijn.
Een meer gedetailleerde definitie is hier te vinden.
Stap 10: Verkrijg Frob
De functie getFrob () stuurt onze API-sleutel naar Flickr en als de sleutel geldig is, stuurt Flickr een string naar ons terug. De frob zal worden doorgegeven aan een andere functie die een inlog-URL zal construeren waarop we de gebruiker zullen verwijzen om in te loggen op zijn Flickr-account en onze app toestemming te geven om foto's te uploaden.
private function getFrobResponse (event: FlickrResultEvent): void if (event.success) frob = String (event.data.frob); var auth_url: String = flickr.getLoginURL (frob, AuthPerm.DELETE); // genereert een inlog-URL navigateToURL (nieuwe URLRequest (auth_url), "_blank"); // opent de browser en vraagt om uw verificatie Alert.show ("Sluit dit venster NA u zich aanmeldt bij Flickr", "Flickr Autorisatie", Alert.OK, null, onCloseAuthWindow);
Zodra we een reactie krijgen van Flickr met een frob, controleren we of het antwoord een "succes" heeft opgeleverd. Nadat is vastgesteld dat een frob is geretourneerd, wijzen we de gegevens toe die worden geretourneerd naar een String-variabele, maken we een andere String-variabele die de authenticatie-URL zal zijn en gebruiken we vervolgens een van de Flickr AS3 API ingebouwde functies die onze inlog-URL genereren en toewijzen waarde voor onze "auth_url" string.
Het volgende deel moet bekend zijn voor iedereen die een tijdje in Flash heeft gewerkt. Gebruik de ingebouwde "navigateToURL" -functie van Flash om Flickr in de browser te openen en de gebruiker te vragen zich aan te melden en toestemming te geven aan onze app om toegang te krijgen tot zijn account. Als onderdeel van dit proces vragen we Flickr om "DELETE" -machtiging, het hoogste toegangsniveau dat een app kan hebben. Met dat toegangsniveau kunnen we uploaden, bewerken, toevoegen en verwijderen. Dit is een beetje overdreven, maar ik heb ervoor gekozen om het op dit niveau te houden als referentie voor je eigen projecten.
Tegelijkertijd worden we doorgestuurd naar de inlogpagina van Flickr, onze app genereert een waarschuwingsvenster. Dit venster bevat het bericht "Sluit dit venster NA het inloggen op Flickr". Wanneer de gebruiker zich heeft aangemeld bij Flickr en is teruggekeerd naar de app, wordt op "OK" gedrukt. Deze roept een andere functie op die een toegangstoken van Flickr ophaalt..
Stap 11: Get Access Token
public function onCloseAuthWindow (event: CloseEvent): void flickr.addEventListener (FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse); flickr.auth.getToken (frob);
Deze functie vraagt Flickr eenvoudig om een toegangstoken, Flickr zal zien dat onze app (zoals geïdentificeerd door onze frob) geautoriseerd is en het token zal teruggeven.
Stap 12: Toegangstoken en systeemcookie instellen
private function getTokenResponse (event: FlickrResultEvent): void if (event.success) var authResult: AuthResult = AuthResult (event.data.auth); flickr.token = authResult.token; flickrCookie.data.auth_token = flickr.token; flickrCookie.flush (); // zet cookie op lokale computer
De laatste functie in onze FlickrConnect-klasse accepteert het token dat is verzonden vanaf Flickr en slaat het op in een systeemcookie. Begin met opnieuw te controleren of het evenement geslaagd was. Als we erin geslaagd zijn een token van Flickr op te halen, maak dan een instantie van "AuthResult" en wijs het toe aan een variabele genaamd "authResult". Stel de waarde van de variabele in die gelijk is aan de "auth" -waarde van de geretourneerde gegevens. Stel de "token" -eigenschap van onze FlickrService in op de "token" -eigenschap van onze "authResult" variabele.
Wijs vervolgens een eigenschap van "auth_token" toe aan de cookie die we aan het begin van de klasse hebben gemaakt (flickrCookie) en gelijk aan de "flickr.token". Het enige dat overblijft is om de cookie op onze lokale computer in te stellen, we doen dit door de "flush ()" -functie van de SharedObject in AS3 te gebruiken.
Nu we een klasse hebben om verbinding te maken met Flickr en onze authenticatie en permissies in te stellen, kunnen we beginnen met het coderen van het grootste deel van onze applicatie.
Stap 13: Invoer en variabelen
In ons hoofdscript importeren we drie klassen; de klasse die we zojuist hebben gemaakt, de ingebouwde Flex Alert-klasse en de Upload-klasse van de Flickr AS3 API.
Van de vier variabelen die we nodig zullen hebben, is de eerste die we moeten maken een exemplaar van de FlickrConnect-klasse die we zojuist hebben gemaakt, noem die klasse "flickrLogin". Maak een variabele genaamd "uploader" met een instantie van "Upload" en geef het flickr-exemplaar door in onze FlickrConnect-klasse. Maak nog twee variabelen, beide van het type "Bestand". Een van die variabelen noemen we "bestand", de andere "fileToOpen".
importeer FlickrConnect; import mx.controls.Alert; import com.adobe.webapis.flickr.methodgroups.Upload; private var flickrLogin: FlickrConnect = new FlickrConnect (); privé var-uploader: uploaden = nieuwe upload (flickrLogin.flickr); privé var-bestand: bestand; private var fileToOpen: File = File.documentsDirectory;
Stap 14: Initialiseer en beeldselectiefunctie
Nu we onze import en variabelen hebben ingesteld, moeten we onze aanvraag starten. Stel tijdens het initialisatieproces de voortgangsbalk (pBar) in op onzichtbaar. We willen alleen dat de balk zichtbaar is wanneer we een afbeelding uploaden.
De volgende functie is om de bestandsbrowser te openen zodat de gebruiker een afbeelding kan selecteren.
private function init (): void pBar.visible = false; private function selectImageFile (root: File): void var imgFilter: FileFilter = new FileFilter ("Images", "* .jpg; *. gif; *. png"); root.browseForOpen ("Open", [imgFilter]); root.addEventListener (Event.SELECT, bestandgeselecteerd);
Stap 15: lees de bestandsinformatie en voer de invoervelden bij
Maak een functie met de naam "fileSelected" die wordt geactiveerd wanneer de gebruiker een afbeelding selecteert. Deze functie leest ook de bestandsnaam en URL van die afbeelding. Werk het invoerveld "Titel" bij met de naam van het geselecteerde bestand en richt het "Afbeeldingsvoorbeeld", waarbij het zijn URL instelt op de URL van het geselecteerde bestand.
bestand met persoonlijke functieSelected (event: Event): void imageTitle.text = fileToOpen.name; imagePreview.source = fileToOpen.url;
Stap 16: upload bestand en volg de voortgang
Maak nog twee functies, een voor de upload van de afbeelding naar Flickr en de andere om de voortgang via de voortgangsbalk bij te houden.
Noem de eerste functie "uploadFile" met een type "MouseEvent". Stel binnen die functie de variabele in die we eerder hebben gemaakt, "file" om "File" in te typen en geef de URL door van de door de gebruiker geselecteerde afbeelding. Voeg twee luisteraars toe aan die variabele. De eerste luisteraar zal een "DataEvent" zijn die luistert voor upload voltooid en zijn doelfunctie zal "uploadCompleteHandler" worden genoemd. De tweede luisteraar zal een voortgangsgebeurtenis zijn en zijn doel zal de functie "onProgress" zijn.
Maak de tweede functie en noem deze "onProgress". Binnenin de functie stelt u de voortgangsbalk in op zichtbaar en stelt u de bron in op die van "bestand".
Zodra de upload is voltooid, stuurt Flickr een reactie terug naar onze app om ons te laten weten dat de upload is voltooid. De reactie van Flickr op ons zal in de vorm van XML zijn, we zullen die XML moeten analyseren en het antwoord moeten bepalen of het een "ok" of iets anders is. Het enige dat we moeten weten is of het antwoord "ok" is en start een waarschuwingsvenster met de melding dat de upload is gelukt of dat de upload, als het iets anders is, betekent dat de upload is mislukt en dat we de gebruiker moeten laten weten.
private function uploadCompleteHandler (event: DataEvent): void pBar.visible = false; trace ("upload voltooid"); var xData: XML = nieuwe XML (event.data); trace (XData); if (xData [0] .attribute ("stat") == "ok") Alert.show ("Upload succesvol", "Uploadstatus"); else Alert.show ("Upload mislukt", "Uploadstatus");
Stap 18: bel functies en start applicatie
Op dit moment gebeurt er niets als u uw toepassing test. Dat komt omdat we geen klikfuncties aan onze knoppen hebben toegevoegd en wat nog belangrijker is, we hebben onze applicatie niet gestart.
Binnen in de code van uw hoofdtoepassing scrolt u omlaag en vindt u de code voor de knoppen die we aan het begin van deze zelfstudie met de GUI hebben gemaakt. We moeten "Click" -handlers toevoegen aan elke knop om aan te geven welke functie moet worden uitgevoerd wanneer erop wordt geklikt.
De selectieknop roept selectImageFile (fileToOpen) met de variabele fileToOpen erin overgegaan.
De uploadknop zal bellen uploadfile (event) en zal er in een gebeurtenis in slagen.
Nu hoeven we alleen nog maar onze applicatie te starten. We doen dit door wat code aan de bovenkant van ons bestand toe te voegen onder het element "WindowedApplication". Het enige wat we moeten doen is de functie toevoegen in het() hiermee applicationComplete. Het zou er zo uit moeten zien:
Stap 19: Test uw toepassing
Zodra u klaar bent met het coderen van uw toepassing, is het tijd om deze te testen om te controleren of deze werkt.
Klik op "debuggen" in Flex Builder om de toepassing te implementeren.
De toepassing zal u waarschuwen om alleen op "OK" te klikken nadat u zich hebt aangemeld bij Flickr en toestemming te geven aan de app om toegang te krijgen tot uw Flickr-account.
Stap 20: Selecteer een afbeelding om te uploaden
Nadat u op "OK" heeft geklikt, ziet u uw blanco toepassing wachten op invoer.
Klik op "Selecteren" en navigeer naar een afbeelding op uw lokale computer. Eenmaal geselecteerd, klikt u op "Openen". U zou nu een voorbeeld van de afbeelding moeten zien die u hebt geselecteerd. Ga je gang en geef het een titel en een beschrijving. Denk aan enkele tags die bij de afbeelding horen en voer ze in het veld 'tags' in, gescheiden door komma's. Klik op 'Uploaden'.
Als je succesvol was, zou je het volgende scherm moeten zien.
Om er zeker van te zijn dat de afbeelding succesvol is geüpload, gaat u naar uw Flickr-account en bekijkt u de afbeelding die u zojuist hebt geüpload.
Stap 21: exporteren als AIR
Nu we weten dat onze app correct werkt, kunnen we deze exporteren als AIR-toepassing. Klik hiervoor op "Bestand> Exporteren> Bouw vrijgeven". Er zijn geen instellingen in het eerste venster die we moeten wijzigen, dus klik op "Volgende" en ga naar het volgende venster.
Maak een certificaat door de velden "Publisher Name" en "Password" in te vullen. Blader door een locatie om het certificaat op te slaan en een naam te geven. Klik op 'Voltooien' en wacht totdat uw AIR-app is gemaakt.
Conclusie
Je app is voltooid, hij werkt en je hebt hem geëxporteerd voor AIR. Wat nu? Nu kunt u deze toepassing uitbreiden met enkele meer van de API-functies of u kunt het toepassen zoals het is.
Bedankt dat je de tijd hebt genomen om deze tutorial te doorlopen, ik hoop dat je het leuk vond. En onthoud ... blijf leren!
Share
Accentsconagua
