In deze zelfstudie leert u hoe u uw eigen Flex Feed-lezer kunt maken. In dit geval is het eindresultaat een eenvoudige feedlezer die in uw blog of site kan worden gebruikt om uw favoriete feeds weer te geven.
Voorbenodigdheden
Om deze tutorial te voltooien, heb je een aantal dingen nodig:
Een exemplaar van Flex Builder 3.x kunt u gratis downloaden van de Adobe-site.
De opensourcebibliotheek as3syndicationlib (Ik zal het wiel niet opnieuw uitvinden door een syndicatie-lib aan te maken!) Die hier kan worden gedownload.
Afbeeldingen die ik in het project heb gebruikt. Je kunt ze hier downloaden.
De klasse XMLUtil.as om de XML-structuur te valideren, beschikbaar via corelib Package.
Wat vrije tijd!
Stap 1: Maak een nieuw project
Welnu, dit is waarschijnlijk iets dat u al weet hoe u het moet doen, maar alleen om u eraan te herinneren en ervoor te zorgen dat we op dezelfde pagina werken:
Begin met het uitvoeren van Flex Builder en maak vervolgens een nieuw project aan (Menu Bestand> Nieuw> Flex-project). Zorg ervoor dat u dezelfde eigenschappen invoert in het dialoogvenster als hier weergegeven:
Voer gewoon in als de projectnaam: WFlexibleFeed. Al de rest blijft zoals het is! Druk op de knop "voltooien"! Je project is gemaakt!
Stap 2: Vereiste Libs instellen
Open de gedownloade xmlsyndication-.85.zip lib uit de meegeleverde downloadbron, blader door het archief xmlsyndicationlib / bin / en pak de xmlsyndication.swc uit in de map libs van uw flexproject. Het zou moeten resulteren in de volgende structuur:
Dit bibliotheekbestand wordt automatisch geladen omdat het zich in de map libs bevindt. U hoeft niets anders te doen om deze bibliotheek te laden, u hoeft alleen de klassen te importeren voor gebruik. (Let op, als je de bin-release map niet maakt, maak je dan geen zorgen, dit is voorlopig niet belangrijk!).
Stap 3: Projectdetails definiëren
In deze stap stelt u enkele mappen in die we samen met ons project zullen gebruiken. De eerste is een map "assets" in de project root (src map). Om het te maken klikt u met de rechtermuisknop op de map src en gaat u naar (Nieuw> Map) en geeft u deze de naam "assets"..
Herhaal dezelfde acties voor een "com" -map.
Wanneer dit is gebeurd, extraheert u de afbeeldingen in het bestand images.zip naar de map met items (u kunt ze selecteren en naar de map met items in flexbuilder slepen). U zou nu de volgende structuur moeten hebben in het flex navigator-project:
Stap 4: Een eenvoudige lay-out maken
Deze "eenvoudige lay-out" kan zijn wat u maar wilt, het moet alleen een datagrid bevatten, een tekstinvoer met feedadres, een knop om te laden en een andere om te verversen. Om mijn lay-out te krijgen:
u moet de volgende code invoegen in WFlexibleFeed.mxml in de tags:
Zoals u kunt zien, heb ik al enkele wijzigingen aangebracht in sommige componentenargumenten, zoals het geven van een DP variable to dataGrid dataProvider, de feed geadresseerde ... nou ... dat kun je zelf zien. Dit zijn de belangrijkste projectcomponenten, we zullen een beetje CSS-code gebruiken (ja, Flex ondersteunt css) om het mooier te maken.
Stap 5: een stylesheet maken
Dit proces is heel eenvoudig. Kopieer hier mijn CSS-code om deze gelijk te maken. Als je wat andere kleuren wilt, probeer dan de Flex 3-stijlverkenner en maak je eigen CSS-stijlen.
Kopieer deze CSS naar uw applicatie, direct na de label:
Dit zorgt voor een betere widget-look en feel, toch??
Stap 6: Maak de feedhandler aan
Ja, zelfs met de xmlsyndication lib moet je een klasse coderen om de parser-uitvoer af te handelen, anders krijg je niets om te werken. U moet dus een nieuwe ActionScript-klasse maken, ga naar menu Bestand> Nieuw> Action Script Class en voer de instellingen in zoals te zien in de afbeelding hieronder. We hebben ook een klasse nodig (van corelib) om het XML-formaat te valideren. Download de klas hier en zet hem in je "com" -map.
Hiermee wordt een nieuwe map "feed" in de map "com" en een bestand "FeedParser.as" gemaakt. De Action Script-editor wordt nu geopend.
Stap 7: Codeer de Parserklasse
Kopieer deze code gewoon naar de FeedParser.as-klasse:
package com.feed // noodzakelijke import import com.XMLUtil; // bruikbaar voor correct xml-formaat XMLUtil.as van corelibPackage import com.adobe.xml.syndication.atom.Atom10; // import vanuit xmlsyndicationlib vanuit adobe import com.adobe.xml.syndication.atom.Entry; import com.adobe.xml.syndication.rss.Item20; import com.adobe.xml.syndication.rss.RSS20; // wat flash-import vereist om met de feed te kunnen werken import flash.display.Sprite; import flash.events.Event; import flash.events.IOErrorEvent; import flash.events.SecurityErrorEvent; import flash.net.URLLoader; import flash.net.URLRequest; import flash.net.URLRequestMethod; // twee klassen die worden gebruikt in de procesimport mx.collections.ArrayCollection; import mx.controls.Alert; public class FeedParser breidt Sprite uit private var feedURI: String = "http://feedproxy.google.com/flashtuts/"; // standaard feed private var feedLoader: URLLoader; // de feedlader public var FEED_DATA: ArrayCollection = null; // de feedgegevens openbare functie FeedParser (url: String) feedURI = url; // op initiate, stel de feed-URL in public function loadFeed (): void // voeg de luisteraargebeurtenissen toe en laad de feed feedLoader = new URLLoader (); var req: URLRequest = new URLRequest (feedURI); req.method = URLRequestMethod.GET; feedLoader.addEventListener (Event.COMPLETE, completeHandler); feedLoader.addEventListener (IOErrorEvent.IO_ERROR, errorHandler); feedLoader.addEventListener (SecurityErrorEvent.SECURITY_ERROR, errorHandler); feedLoader.load (req); // foutafhandelingsfunctie private function errorHandler (e: Event): void if (e.type == SecurityErrorEvent.SECURITY_ERROR) Alert.show ("Beveiligingsfout tijdens lezen feed URI!"); else if (e.type == IOErrorEvent.IO_ERROR) Alert.show ("I / O Error while feed URI!"); anders Alert.show (e.type + "Fout tijdens het lezen van feed URI!"); // on result-functie private function completeHandler (evt: Event): void var feedData: String = feedLoader.data; // haal de feedinhoud op var feed_type: String = "RSS"; var entrys: Array; var tempObj: Object; // oude manier om feedtype en versie te detecteren if (feedData.search ("rss version = \" 2.0 \ "")> - 1) trace ("FEED RSS 2.0"); else if (feedData.search ("rss version =")> - 1) trace ("FEED RSS <=1.0"); else if(feedData.search("Atom")>-1) trace ("FEED ATOM"); if (feedData.search ("xmlns = \" http://www.w3.org/2005/Atom ")> - 1) feed_type =" ATOM "; // controleer of is een ATOM-feed // if is een RSS feed if (feed_type == "RSS") var rss: RSS20 = nieuwe RSS20 (); probeer rss.parse (feedData); // ontleed deze (e: Fout) Alert.show ("Fout bij parseren van feed ! \ nOngeldige link? "); return void; entrys = rss.items; // haal de items FEED_DATA = new ArrayCollection (); // start de arrayCollection // valideer de feed als (! XMLUtil.isValidXML (feedData)) Alert.show ("Ongeldige of slechte feed-URI of -structuur!"); Return void; // bouwde een array-verzameling met de resultaten voor elk (var-invoer: Item20 in ingangen) tempObj = new Object (); tempObj. title = entry.title; tempObj.link = entry.link; tempObj.desc = entry.description; tempObj.author = entry.creator; FEED_DATA.addItem (tempObj); else if (feed_type == "ATOM") // else if is een ATOM-feed, doe hetzelfde proces var rssA: Atom10 = new Atom10 () try rssA.parse (feedData); catch (e: Error) Alert.show ("Error Parsing Feed! \ nInvalid link? "); return void; var e ntrysA: Array = rssA.entries; var tempObj2: Object; FEED_DATA = nieuwe ArrayCollection (); if (! XMLUtil.isValidXML (feedData)) Alert.show ("Ongeldige / slechte feed-URI of structuur!"); terugkeer ongeldig; voor elk (var entryA: Entry in entrysA) tempObj2 = new Object (); tempObj2.title = entryA.title; tempObj2.link = entryA.links [0] .HREF; tempObj2.desc = entryA.content; tempObj2.author = entryA.authors; FEED_DATA.addItem (tempObj2); else // onmogelijk om het feedtype te vinden ... Alert.show ("Kan het feedtype niet vinden \ nInvalid link?") return void; this.dispatchEvent (nieuwe gebeurtenis ("DataReady")); // gegevens kunnen nu worden gebruikt! luister dit evenement naar acess-gegevens!
Sla uw bestand nu op!
Stap 8: De Feed Parser begrijpen
Eenvoudig, lees de opmerkingen in de code en je zult het kunnen begrijpen. Als je dat niet wilt, moet je gewoon weten wat we zullen schrijven om het te gebruiken:
import com.feed.FeedParser; private var parser: FeedParser; parser = nieuwe FeedParser ("http: //feed.url/feed/"); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed ();
Welnu, dit is een vereenvoudigde versie van hoe we met onze klas kunnen werken. We zullen het in gebruik zien ... blijf de tutorial volgen ...
Stap 9: Neem een pauze
Dit is een ontspannende stap, misschien was dat te veel code tegelijk, laat me de workflow uitleggen:
We hebben een syndicationlib die verantwoordelijk is voor het lezen van de feed en de inhoud in een objectklasse plaatst. Het belangrijkste doel van onze FeedParser-klasse is om de uitvoer van de syndicatieklasse voor te bereiden, te callen en af te handelen.
Dan is er onze hoofdtoepassing, die de FeedParser-klasse zal aanroepen en wachten tot de DataReady-gebeurtenis de feeditems in de datagrid-dataprovider laadt.
Stap 10: Code Eerste laadfunctie
Dit is de functie die onze feedreader zal doen werken. We zullen een init () -functie coderen die wordt aangeroepen tijdens de creationComplete -gebeurtenis van onze applicatie.
Schrijf noodzakelijke import:
import mx.collections.ArrayCollection; import mx.controls.Alert; import com.feed.FeedParser; private var parser: FeedParser; private var currentFeed: String; [Bindbaar] privé var DP: ArrayCollection;
Onze eerste functie:
private function init (): void DP = null; Security.allowDomain (feedURI.text); // nuttig soms, probeer domeintoegangsfouten te voorkomen Security.allowInsecureDomain (feedURI.text); // nuttig soms, probeer domeintoegangsfouten te vermijden // in sommige gevallen hebt u (indien mogelijk) een extern crossdomain.xml-bestand nodig ... parser = new FeedParser (feedURI.text); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed ();
Stap 11: codeer de gebeurtenishandlers
Laat code de 3 noodzakelijke event handlers zien.
De foutenbehandelaar:
persoonlijke functiegegevensErrorHandler (evt: Event): void Alert.show ("Er is een fout opgetreden bij het lezen van gegevens uit de feed! \ n \ n Mogelijke oorzaken: \ n Ongeldige feed-URL \ n Ongeldig feedtype (niet RSS 2.0) \ n Ongeldige feedindeling");
De succeshandler:
private function dataHandler (evt: Event): void DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; // we slaan de feedURL op in een variabele, die nodig is om de feed te vernieuwen en terugroepacties te voorkomen
Nu hebben we onze feeditems in de DP-arrayCollection, klaar om te gebruiken in de dataGrid. Ik wil ook een zelfverversingsmechanisme hebben (zodat de updates van feeditems worden uitgevoerd naar datagrid), we zullen het nu maken.
Stap 12: Codering van een mechanisme voor zelf-update
Het proces is heel eenvoudig, we hebben een timer nodig om een nieuwe oproep uit te voeren om de inhoud van de feed te krijgen, dus ...
Declareer de timer naast onze var-parser:
private var updateTimer: Timer = new Timer (600000); // betekent 600 seconden = 10 minuten
Schrijf loadAutoUpdate (); op de dataHandler-functie onderaan:
private function dataHandler (evt: Event): void DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; // we slaan de feedURL op in een variabele, die nodig is om de feed te vernieuwen en terugroepen van loadAutoUpdate () te voorkomen; // laad de update-engine
en laten we de updatefunctie coderen:
persoonlijke functie loadAutoUpdate (): void try updateTimer.stop (); // we proberen een mogelijke gestarte timer updateTimer.removeEventListener (TimerEvent.TIMER, onTime) te stoppen; // verwijder de eventListener catch (e: Error) trace ("Error on timer!") // behandel mogelijke fouten updateTimer.addEventListener (TimerEvent.TIMER, onTime); // luisteraar opnieuw toevoegen updateTimer.start (); // start de timer
Ten slotte hebben we de onTime-functie nodig om elke 10 minuten tijdgebeurtenissen af te handelen:
private function onTime (evt: TimerEvent): void feedURI.text = currentFeed; in het();
Omdat mensen het feedURI-veld kunnen wijzigen, slaan we het op in een currentFeed-variabele totdat er nieuwe feedgegevens worden geparseerd.
Stap 13: Het mechanisme voor zelf-update begrijpen
De workflow is eenvoudig. Wanneer de init () -functie wordt aangeroepen, wordt de feedParser geladen.
In deze functie stellen we de DP (gegevensprovider) opnieuw in, stellen we het beveiligingsbeleid in (om sommige domeingebruiksfouten te voorkomen) en laden we de feed:
(...) parser.loadFeed (); (...)
Ten slotte wordt de feed geparseerd en wordt de DP gevuld met feeditems:
(...) DP = nieuwe ArrayCollection (); DP = parser.FEED_DATA; (...)
en we laden het updatemechanisme dat elke 10 minuten wordt geladen (~ 600 seconden / 600.000 miliseconden):
(...) private var updateTimer: Timer = new Timer (600000); (...) updateTimer.start (); (...)
Dat zal de onTime-functie om de 10 minuten oproepen en de init-functie oproepen om de feed opnieuw te laden.
private function onTime (evt: TimerEvent): void feedURI.text = currentFeed; in het();
Het hoofdsysteem is gecodeerd, nu moeten we gewoon wat meer acties toevoegen.
Stap 14: Acties codeknoop
In deze stap moeten we de functies coderen om naar een nieuwe feed te veranderen en de huidige te vernieuwen.
De refresh-functie is vrij eenvoudig:
persoonlijke functie vernieuwen (): void feedURI.text = currentFeed; // om wijzigingen in textInput init () te voorkomen; // laad de feed opnieuw
en de change feed-functie:
privéfunctie switchFeed (): void if (currentFeed == feedURI.text) Alert.show ("Bewerk de feed-URL en probeer het opnieuw!"); // we schakelen niet naar dezelfde feed! else init (); // laad de feed omdat feedURI.text niet gelijk is aan de werkelijke feed-URI.
Stap 15: laad de dingen op en test ze
We moeten het hele proces laden in de creationComplete -gebeurtenis van de toepassing, gewoon toevoegen aan uw mx: application-tag:
(...) creationComplete = "init ()" (...)
Probeer de applicatie nu uit te voeren! Het werkt, toch? We verbeteren nu de interactie met de app ...
Stap 16: De DP-elementen begrijpen
De gegevensprovider DP is een kopie van de array-verzameling FeedParser.FEED_DATA, dus we moeten de FEED_DATA-structuur toevoegen aan de klasse FeedParser.as:
Hierin kunnen we zien dat elk item een titel, link, desc (ription) en auteur (s) elementen bevat. Dit is handig als u die informatie in de datagrid wilt weergeven, maar op dit moment willen we alleen de titel weergeven (met dataField):
Als we de. Moeten weergeven desc of link, we hoeven alleen maar het veld te bieden desc als dataField-parameter in een nieuwe kolom.
Stap 17: laad de Item-webpagina
Dit is natuurlijk erg handig! We hoeven alleen maar de dubbelklik in de dataGrid in te schakelen door het volgende in de mx te schrijven: Tabel-tag:
persoonlijke functie loadURL (): void if (dataGridItems.selectedIndex> -1) navigateToURL (new URLRequest (dataGridItems.selectedItem.link), "_blank"); // als er een geselecteerde index is, laadt u de URL in een ander venster.
Heel eenvoudig, dus we zijn bijna klaar met de feedReader, tijd om de code te bekijken.
Veel mensen zullen de gegenereerde WFlexibleFeed.swf uit de bin-debug-map halen en deze in de uiteindelijke productieomgeving plaatsen, maar dit is een vergissing!
Gebruik eerst het framework (nabij 200 kb) als RSL (Runtime Shared Library). Dat wordt dan één keer naar de computer van de gebruiker gedownload, de volgende keer wordt het niet geladen (waardoor de laadtijd korter wordt). Hiervoor gaat u naar Project> Eigenschappen> Flex-bouwpad> Bibliotheekpad en klikt u op Framework-koppeling. Wijzig het van "Samengevoegd in code" in "Runtime gedeelde bibliotheek (RSL)" en klik vervolgens op OK. Het raamwerk wordt nu als een afzonderlijk bestand geëxporteerd.
We zijn klaar om de applicatie te exporteren.
Stap 20: Export Release Build
Elke toepassing moet worden geëxporteerd als een release-build (daarom bevat het projectpad de bin-release-map). U hoeft alleen maar op de Export Release Build-knop te klikken, hier geel weergegeven:
Het hele project wordt geëxporteerd naar de map "bin-release". Dit zijn de inhoud die op uw site of blog moet worden geplaatst!
Stap 21: Speel ermee
Je hebt nu tijd om te spelen met het eindresultaat, een aantal CSS-details te wijzigen, een ander soort feedswitcher te maken, er zijn veel dingen die je kunt verbeteren. U kunt het zelfs naar uw bureaublad brengen met Adobe AIR. Raak geïnspireerd! Een erg leuke toepassing voor deze feedReader is om je eigen feed-URL in te stellen, teksteditie uit te schakelen, de knoppen wijzigen en vernieuwen uit te schakelen en naar andere sites te distribueren als een widget om je blog-items te lezen ...
Conclusie
In deze zelfstudie hebt u geleerd hoe u voerinvoer in een DataGrid in Flash kunt ontleden, verwerken en weergeven. Je hebt een beetje geleerd over de coole xmlsyndication lib en hebt ook enkele trucjes ontdekt om je projecten te verbeteren. Blader door de code, download de bronbestanden en heb plezier!
Opmerking: gebruik het menu Bestand> Importeren> Flex-projectarchief om de bronbestanden te importeren; ze zijn klaar voor gebruik!
Ik hoop dat je deze tutorial leuk vond, bedankt voor het lezen!
Share
Accentsconagua
