Creating en Feed Reader Widget med Adobe Flex 3
Del
Del
Del
Del

Denne Cyber ​​Monday Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av.

I denne opplæringen vil du lære hvordan du kan lage din egen Flex feed-leser søknaden. I dette tilfellet vil det endelige resultatet være en enkel feed reader som kan brukes i din blogg eller nettsted for å vise dine favoritt feeds.

Pre -Requirements

For å fullføre denne opplæringen du trenger noen ting:.

En kopi av Flex Builder 3.x, kan du laste ned en prøveversjon gratis fra Adobes nettsted

Den opensource bibliotek as3syndicationlib product: (Jeg vil ikke re-oppfinne hjulet ved å opprette én syndikering lib!) som kan lastes ned her.

Bilder jeg har brukt i prosjektet. Du kan laste dem ned her

XMLUtil.as klassen å validere XML-struktur, tilgjengelig fra corelib Package

Noen fritiden

Trinn 1:.. Opprett et nytt prosjekt

Vel, dette er sannsynligvis noe som du allerede vet hvordan du skal gjøre, men bare for å minne deg på og sikre at vi jobber på samme side:

Begynn med å kjøre Flex Builder deretter opprette et nytt prosjekt (Meny Fil > New > Flex Project). Sørg for at du skriver de samme egenskapene i dialogboksen som vist her:

Bare skriv som Prosjektnavn: WFlexibleFeed
. Alle de andre er fortsatt som det er! Trykk på "Finish" -knappen! Prosjektet er opprettet

Trinn 2: Sette opp Nødvendig Libs

Åpne den nedlastede xmlsyndication-.85.zip lib fra den medfølgende nedlasting kilde, bla gjennom arkivet xmlsyndicationlib /bin /og trekke ut xmlsyndication.swc inn i libs mappen du flex prosjektet. Det bør resultere i følgende struktur:

Dette vil bibliotekfilen automatisk lastes inn fordi det er i libs mappen. Du trenger ikke å gjøre noe annet for å laste dette biblioteket, du trenger bare å importere sine klasser før bruk. (Merk, hvis du ikke har bin-release-mappen ikke bli bekymret, dette er ikke viktig for nå!)

Trinn 3:. Definere Prosjekt Detaljer

I dette trinnet, du setup noen mapper som vi skal bruke sammen med vårt prosjekt. Den første er en mappe "eiendeler" i prosjektet root (src mappe). Å skape det bare å høyreklikke på src mappen, og deretter gå til (New > mappe).. Og gi den navnet "eiendeler"

Gjenta de samme handlingene for en "com" -mappen

Når dette er gjort, hente bilder gitt i images.zip filen til eiendeler mappen (du kan velge dem og dra dem til eiendeler mappen i Flex Builder). Du skal nå ha følgende struktur i flex navigator prosjektet:

Trinn 4: Lage en enkel layout

Denne "Simple layout" kan bli hva du vil, det trenger bare å inneholde en Datagrid En textinput med fôr adresse, en knapp for å laste og en annen for å oppdatere. Å få min layout:

må du sette inn følgende kode i WFlexibleFeed.mxml innenfor < mx: Application > tags:
< mx: Canvas width = "336" height = "208" horizontalCenter = "0" verticalCenter = "0" borderColor = "# A70101" bakgrunnsfarge = "# 242424" > < mx: Canvas x = "0" y = "0" width = "336" height = "24" bakgrunnsfarge = "# 333333" > < mx: Etikett x = "9" y = "4" text = "WFlexible feed v1.0" width = "298" color = "# BBBBBB" /> < /mx: Canvas > < mx: Etikett x = "11" y = "27" text = "Feed:" color = "# FFFFFF" /> < mx: Bilde x = "310" y = "25" source = "@ Bygg (kilde = 'eiendeler /Rss.png')" useHandCursor = "true" buttonMode = "true" tooltip = "Switch-feed!" klikk = "switchFeed ()" /> < mx: Bilde x = "291" y = "25" source = "@ Bygg (kilde = 'eiendeler /Refresh.png')" useHandCursor = "true" buttonMode = "true" tooltip = "Refresh" klikk = " refresh () "/> < mx: Bilde x = "50" y = "103" source = "@ Bygg (kilde = 'eiendeler /logo.png')" /> < mx: Datagrid x = "10" y = "47" height = "155" width = "316" id = "dataGridItems" dataprovider = "{DP}" useHandCursor = "true" backgroundAlpha = "0.4" > < mx: kolonner > < mx: DataGridColumn headerText = "feed oppføringer ..." datafeltet = "title" sorterbar = "false" /> < /mx: kolonner > < /mx: Datagrid > < mx: TextInput x = "56" y = "26" width = "227" text = "http://feedproxy.google.com/flashtuts/" height = "20" tooltip = "Klikk for å redigere feed URL" id = "feedURI" styleName = "myTextInput" /> < /mx: Canvas >

Som du kan se, har jeg allerede gjort noen modifikasjoner i enkelte komponenter argumenter, som å gi en DP
variabel til Datagrid dataprovider, sette fôret addresse ... vel .. du kan se selv. Disse er de viktigste prosjektet komponenter, vil vi bruke litt av CSS-kode (ja, støtter Flex css) for å gjøre det mer vakker

Trinn 5:. Opprette et stilark

Denne prosessen er veldig enkelt. Kopier min css koden her for å gjøre det samme. Hvis du vil ha noen andre farger, bare prøv Flex 3 stil explorer og lage dine egne CSS-stiler

Kopier denne css inn søknaden din, rett etter < mx. Application > tag:
< mx: Stil > .myTextInput {Border: none; borderColor: # 505050; backgroundAlpha: 0; bakgrunnsfarge: #ffffff; color: # 5C5C5C; themeColor: #FFFFFF;} Button {cornerRadius: 0; borderColor: # 000000; themeColor: # 333333;} Alert {bakgrunnsfarge: # 000000; borderColor: # 000000; backgroundAlpha: 0,9; borderAlpha: 0,9; color: #FFFFFF;} ToolTip {bakgrunnsfarge: # 333333; farge: #cccccc;} Grid {backgroundAlpha: 1; bakgrunnsfarge: # 666666; alternatingItemColors: # 666666, # 333333; headerColors: # 000000, # 000000; horizontalGridLines: true; horizontalGridLineColor: # 000000; verticalGridLines: false; verticalGridLineColor: #cccccc; rollOverColor: #ffffff; textRollOverColor: # 000000; borderColor: # 000000; selectionColor: #ffffff; color: #ffffff; headerStyleName: ". mydataGridHeaderStyle";} mydataGridHeaderStyle {color: #ffffff; fontWeight: normal; fontStyle: italic; textDecoration: none; bokstav: 1; } VScrollBar {cornerRadius: 0; highlightAlphas: 0,46, 0,27; fillAlphas: 1, 1, 1, 1; fillColors: # 666666, # 333333, #cccccc, # 999999; trackColors: # 666666, # 333333; themeColor: # 000000; borderColor: # 000000; iconColor: # 111111; thumbOffset: 1;} < /mx: Stil >

Dette vil gi en bedre widget utseende, rett

Trinn 6: Lag Feed Handler

Ja, selv med? den xmlsyndication lib du trenger å kode en klasse til å håndtere parser utgang, eller du får ingenting til å fungere. Så, må du opprette en ny Action Script Class, bare gå til menyen Fil > New > Action Script klasse og angir innstillingene som vist på bildet nedenfor. Vi trenger også en klasse (fra corelib) for å validere XML-format. Bare last klassen her og sette den i "com" -mappen.

Dette vil opprette en ny mappe "feed" i "com" -mappen og en "FeedParser.as" filen også. Action Script Editor vil nå åpne

Trinn 7:. Kode den parser Class

Bare kopiere denne koden inn i FeedParser.as Klasse:
pakke com.feed {//nødvendige import import com.XMLUtil; //nyttig for riktig xml-format XMLUtil.as fra corelibPackage import com.adobe.xml.syndication.atom.Atom10; //import fra xmlsyndicationlib fra adobe import com.adobe.xml.syndication.atom.Entry; import com.adobe.xml.syndication.rss.Item20; import com.adobe.xml.syndication.rss.RSS20; //noen flash import trengs for å arbeide med fôret 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; //to klasser som brukes i prosessen import mx.collections.ArrayCollection; import mx.controls.Alert; public class FeedParser strekker Sprite {private Var feedURI: String = "http://feedproxy.google.com/flashtuts/"; //standard fôr privat Var feedLoader: URLLoader; //fôret loader offentlig Var FEED_DATA: ArrayCollection = null; //den fôr data offentlig funksjon FeedParser (url: String) {feedURI = url; //på initiere, satt fôret url} offentlig funksjon loadFeed (): void {//legge lytteren hendelser og laste fôret 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); } //Feilhåndtering funksjon privat funksjon Errorhandler (e: Hendelses): void {if (e.type == SecurityErrorEvent.SECURITY_ERROR) Alert.show ("! Security Feil ved lesing fôr URI"); else if (e.type == IOErrorEvent.IO_ERROR) Alert.show ("I /O Feil ved lesing fôr URI!"); annet Alert.show (e.type + "Feil under lesing av fôr URI!"); } //På resultat funksjon privat funksjon completeHandler (evt: Hendelses): void {var feedData: String = feedLoader.data; //få fôr innholdet Var feed_type: String = "RSS"; Var entrys: Array; Var tempObj: Object; //gamle måten å oppdage fôrtype & versjon 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 "; //sjekke om er en ATOM-feed //hvis er en RSS feed if (feed_type == "RSS") {var rss: RSS20 = new RSS20 (); try {rss.parse (feedData);} //analysere den fange (e: Feil) {Alert.show ("Feil Parsing \\ nInvalid lenke mate ");!? returnere void;} entrys = rss.items; //få elementer FEED_DATA = new ArrayCollection (!); //starte arrayCollection //validere fôret if (XMLUtil.isValidXML (feedData) ) {Alert.show ("Ugyldig eller dårlig fôr URI eller struktur!"); returnere void;} //bygget en rekke Collection med resultatene for hver (var entry: Item20 i entrys) {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") {//annet hvis er en ATOM feed, gjør den samme prosessen Var rssA: Atom10 = new Atom10 () try {rssA.parse (feedData);} catch! (e: Feil) {Alert.show ("Feil Parsing feed \\ nInvalid link "); returnere void; } Var entrysA: Array = rssA.entries; Var tempObj2: Object; FEED_DATA = new ArrayCollection (); hvis {Alert.show ("Ugyldig /dårlig fôr URI eller struktur!") (XMLUtil.isValidXML (feedData)!); returnere void; } For hver (var entryA: Entry i 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 {//umulig å finne fôr type ... Alert.show ("Kan ikke påvise fôrtype \\ nInvalid link?") Returnerer void; } This.dispatchEvent (ny hendelse ("DataReady")); //data er nå klar til å bli brukt! hør denne hendelsen å acess data! !}}}

Lagre filen nå

Trinn 8: Forstå feed parser

Enkelt, bare les kommentarene i koden, og du vil være i stand til å forstå det. Hvis du ikke vil, du trenger bare å vite hva vi skal skrive for å bruke det:
import com.feed.FeedParser; private Var parser: FeedParser; parser = new FeedParser ("http: //feed.url/feed/"); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed ();

Vel, dette er en forenklet versjon av hvordan du arbeider med klassen vår. Vi får se den i bruk ... holde følge tutorial ..

Trinn 9: Ta en pause

Dette er en avslappende skritt, kanskje det var for mye kode på en gang, la meg forklare arbeidsflyten:

Vi har en syndicationlib ansvarlig for lesing fôret og sette inn innholdet i et dokument klasse. Vår FeedParser class 'viktigste formål er å forberede, ringe og håndtere utgang fra syndikering klassen.

Så er det vår hovedprogrammet, som vil kalle FeedParser klasse og vente på DataReady begivenhet å laste mate elementer inn Datagrid dataprovider

Trinn 10:. Kode Første Load Funksjon

Dette er funksjonen som vil gjøre vårt feed reader arbeid. Vi vil kode en init () funksjon som vil bli kalt på creationComplete tilfelle av vår søknad

Skriv nødvendige import:.
Import mx.collections.ArrayCollection, importere mx.controls.Alert; import com.feed.FeedParser; private Var parser: FeedParser; private Var currentFeed: String; [Bind] private Var DP: ArrayCollection;

Vår første funksjon:
privat funksjon init (): void {DP = null; Security.allowDomain (feedURI.text); //nyttig noen ganger, prøv å unngå domenetilgangsfeil Security.allowInsecureDomain (feedURI.text); //nyttig noen ganger, prøv å unngå domenetilgangsfeil //i noen tilfeller trenger du (om mulig) å laste en ekstern crossdomain.xml fil ... parser = new FeedParser (feedURI.text); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed (); }
Trinn 11: Code hendelses Handlers

Gir kode de 3 nødvendige hendelsesbehandlinger

Den feilbehandleren.
privat funksjon dataErrorHandler (evt: Hendelses): void {Alert .vis ("Noen feil oppstod lese data fra fôr \\ n \\ nPossible Årsaker: \\ nInvalid mate URL \\ nInvalid fôrtype (Ikke RSS 2.0) \\ nInvalid innmatingsformat!");}

Suksessen handler:
privat funksjon dataHandler (evt: Hendelses): void {DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; //vi redde feedURL til en variabel, for å oppdatere feed og unngå minnes}

Nå har vi våre fôr elementer i DP arrayCollection, ferdig til bruk i Datagrid. Jeg ønsker også å ha en selv refresh mekanisme (så fôret oppføringer oppdateringer avgitt til Datagrid), vil vi lage det nå

Trinn 12:. Coding en Self-oppdateringsmekanismen

Prosessen er meget enkel, trenger vi en timer for å gjennomføre en ny samtale for å få fôr innholdet, så ...

Erklærer timeren ved siden av vår Var parser:
private Var updateTimer: Timer = ny Timer (600000); //betyr 600 sekunder = 10 minutter

Skriv loadAutoUpdate (); på dataHandler funksjonen på bunnen:
privat funksjon dataHandler (evt: Hendelses): void {DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; //vi redde feedURL til en variabel, for å oppdatere feed og unngå minnes loadAutoUpdate (); //laste ned oppdateringen motoren}

og la oss kode oppdateringsfunksjonen:
privat funksjon loadAutoUpdate (): void {try {updateTimer.stop (); //vi prøver å stoppe en mulig startet timer updateTimer.removeEventListener (TimerEvent.TIMER, Ontime); //fjerne eventListener} catch (e: Feil) {trace ("Feil på timer!")} //håndtere mulige feil updateTimer.addEventListener (TimerEvent.TIMER, Ontime); //legger lytteren igjen updateTimer.start (); //starter tidtakeren}

Til slutt må vi Ontime funksjon for å håndtere tidsbegivenheter hvert 10. minutt:
privat funksjon Ontime (evt: Timerevent): void {feedURI.text = currentFeed; init ();}

Som mennesker kan endre feedURI feltet, vi lagre den i en currentFeed variabel inntil en ny feed data analyseres

Trinn 13: Forstå Self-oppdateringsmekanismen
<. p> Arbeidsflyten er enkel. Når init () funksjonen kalles, er feedParser lastet

I denne funksjonen vi nullstille DP (dataleverandøren), oppsett sikkerhetspolitikk (for å unngå noen domene tilgang feil) og laste inn feed:.
(...) parser.loadFeed (), (...)

Til slutt blir fôret analysert og DP er befolket med fôr elementer: product: (...) DP = new ArrayCollection (); DP = parser.FEED_DATA, (...)

og vi laster ned oppdateringen mekanisme som vil bli lastet hvert 10. minutt (~ 600 sekunder /600 000 miliseconds):
(...) private Var updateTimer: Timer = new Timer (600000), (...) updateTimer.start (), (...)

Det vil kalle Ontime funksjonen hvert 10. minutt og husker init funksjon for å laste fôret
private. funksjon Ontime (evt: Timerevent): void {feedURI.text = currentFeed; init ();}

Hovedsystemet er kodet, nå trenger vi bare å legge til noen flere handlinger

Trinn 14: Kode Knappehandlinger

I dette trinnet vi må. kode funksjonene for å bytte til en ny feed og oppdatere gjeldende en

Oppdateringsfunksjonen i ganske enkel:
privat funksjon refresh (). void {feedURI.text = currentFeed; //for å unngå endringer på textInput init (); //laste fôret}

og endringen fôr funksjon:
privat funksjon switchFeed (): void {if (currentFeed == feedURI.text) Alert.show ("Rediger innmatingsadresse og prøv igjen!" ); //vi vil ikke bytte fôr til det samme! annet init (); //laste fôret fordi feedURI.text er ikke lik selve fôret URI}
Trinn 15:. Legg den ting opp og teste dem

Vi trenger å laste hele prosessen på creationComplete begivenhet søknad, bare legge til din mx: søknad tag: product: (...) creationComplete = "init ()" (...)

Prøv å kjøre programmet nå! Det fungerer, ikke sant? Vi vil nå forbedre programmet samspillet ..

Trinn 16: Forstå DP Elements

dataleverandøren DP
er en kopi fra FeedParser.FEED_DATA rekke samling, så vi må legge FEED_DATA struktur inn i FeedParser.as Klasse:
tempObj = new Object (); tempObj.title = entry.title; tempObj.link = entry.link; tempObj.desc = entry.description; tempObj.author = entry.creator; FEED_DATA.addItem (tempObj);

I her vi kan se hvert element inneholder en tittel, link, synkende (ription) og forfatteren (e) elementer. Dette vil være nyttig hvis du vil vise denne informasjonen på Datagrid, men for øyeblikket vi bare vil vise tittelen (ved hjelp av datafeltet):
< mx: DataGridColumn headerText = "feed oppføringer ..." datafeltet = "title" sorterbar = "false" />

Hvis vi trenger å vise synkende
eller
, vi trenger bare å gi feltet synkende Anmeldelser som datafeltet parameter i en ny kolonne

Trinn 17:. Legg den varen Websiden

Selvfølgelig, dette er veldig nyttig! Vi trenger bare å aktivere dobbeltklikker inn i Datagrid ved å skrive inn følgende i mx: Tabell tag:
doubleClickEnabled = "true" Doubleclick = "loadURL ()"

og loadURL () -funksjonen:
privat funksjon loadURL (): void {if (dataGridItems.selectedIndex > -1) navigateToURL (ny URLRequest (dataGridItems.selectedItem.link), "_blank"); //hvis det er noen valgte indeksen, laste inn nettadressen i et annet vindu}

Ganske enkelt, så vi har nesten ferdig Feedreader, tid til å gjennomgå koden

Trinn 18:.. Gjennomgå Kode

Tid for å sammenligne koden med meg

WFlexibleFeed.xmml
<? xml version = "1.0" encoding = "utf-8" > < mx: Søknad xmlns: mx = "http://www.adobe.com/2006/mxml" layout = "absolutte" backgroundGradientAlphas = "[1.0, 1.0]" backgroundGradientColors = "[# EBEBEB, #CBCBCB]" creationComplete = "init ()" > < mx: Stil > .myTextInput {Border: none; borderColor: # 505050; backgroundAlpha: 0; bakgrunnsfarge: #ffffff; color: # 5C5C5C; themeColor: #FFFFFF; } Button {cornerRadius: 0; borderColor: # 000000; themeColor: # 333333; } Alert {bakgrunnsfarge: # 000000; borderColor: # 000000; backgroundAlpha: 0.9; borderAlpha: 0.9; color: #FFFFFF; } ToolTip {bakgrunnsfarge: # 333333; farge: #cccccc; } Datagrid {backgroundAlpha: 1; bakgrunnsfarge: # 666666; alternatingItemColors: # 666666, # 333333; headerColors: # 000000, # 000000; horizontalGridLines: true; horizontalGridLineColor: # 000000; verticalGridLines: false; verticalGridLineColor: #cccccc; rollOverColor: #ffffff; textRollOverColor: # 000000; borderColor: # 000000; selectionColor: #ffffff; color: #ffffff; headerStyleName: "mydataGridHeaderStyle"; } .mydataGridHeaderStyle {color: #ffffff; fontWeight: normal; fontStyle: italic; textDecoration: none; bokstav: 1;} VScrollBar {cornerRadius: 0; highlightAlphas: 0,46, 0,27; fillAlphas: 1, 1, 1, 1; fillColors: # 666666, # 333333, #cccccc, # 999999; trackColors: # 666666, # 333333; themeColor: # 000000; borderColor: # 000000; iconColor: # 111111; thumbOffset: 1;} < /mx: Stil > < mx: Script > <! [CDATA [import mx.collections.ArrayCollection; import mx.controls.Alert; import com.feed.FeedParser; private Var parser: FeedParser; private Var updateTimer: Timer = new Timer (600000); [Bind] private Var DP: ArrayCollection; private Var currentFeed: String; privat funksjon init (): void {DP = null; Security.allowDomain (feedURI.text); Security.allowInsecureDomain (feedURI.text); parser = new FeedParser (feedURI.text); parser.addEventListener ("DataReady", dataHandler); parser.addEventListener ("DataError", dataErrorHandler); parser.loadFeed (); } Private funksjon dataErrorHandler (evt: Hendelses): void {Alert.show ("Noen feil oppstod lese data fra fôr \\ n \\ nPossible Årsaker: \\ nInvalid mate URL \\ nInvalid fôrtype (Ikke RSS 2.0) \\ nInvalid fôr format"); } Private funksjon loadAutoUpdate (): void {try {updateTimer.stop (); updateTimer.removeEventListener (TimerEvent.TIMER, Ontime); } Catch (e: Feil) {} updateTimer.addEventListener (TimerEvent.TIMER, Ontime); updateTimer.start (); } Private funksjon Ontime (evt: Timerevent): void {feedURI.text = currentFeed; i det(); } Private funksjon dataHandler (evt: Hendelses): void {DP = new ArrayCollection (); DP = parser.FEED_DATA; currentFeed = feedURI.text; loadAutoUpdate (); } Private funksjon loadURL (): void {if (dataGridItems.selectedIndex > -1) navigateToURL (ny URLRequest (dataGridItems.selectedItem.link), "_blank"); } Private funksjon refresh (): void {feedURI.text = currentFeed; i det(); } Private funksjon switchFeed (): void {if (currentFeed == feedURI.text) Alert.show ("Rediger innmatingsadresse og prøv igjen!"); annet init (); }]] ≫ < /mx: Script > < mx: Canvas width = "336" height = "208" horizontalCenter = "0" verticalCenter = "0" borderColor = "# A70101" bakgrunnsfarge = "# 242424" > < mx: Canvas x = "0" y = "0" width = "336" height = "24" bakgrunnsfarge = "# 333333" > < mx: Etikett x = "9" y = "4" text = "WFlexible feed v1.0" width = "298" color = "# BBBBBB" /> < /mx: Canvas > < mx: Etikett x = "11" y = "27" text = "Feed:" color = "# FFFFFF" /> < mx: Bilde x = "310" y = "25" source = "@ Bygg (kilde = 'eiendeler /Rss.png')" useHandCursor = "true" buttonMode = "true" tooltip = "Switch-feed!" klikk = "switchFeed ()" /> < mx: Bilde x = "291" y = "25" source = "@ Bygg (kilde = 'eiendeler /Refresh.png')" useHandCursor = "true" buttonMode = "true" tooltip = "Refresh" klikk = " refresh () "/> < mx: Bilde x = "50" y = "103" source = "@ Bygg (kilde = 'eiendeler /logo.png')" /> < mx: Datagrid x = "10" y = "47" height = "155" width = "316" id = "dataGridItems" dataprovider = "{DP}" doubleClickEnabled = "true" Doubleclick = "loadURL ()" useHandCursor = "true" backgroundAlpha = "0.4" > < mx: kolonner > < mx: DataGridColumn headerText = "feed oppføringer ..." datafeltet = "title" sorterbar = "false" /> < /mx: kolonner > < /mx: Datagrid > < mx: TextInput x = "56" y = "26" width = "227" text = "http://feedproxy.google.com/flashtuts/" height = "20" tooltip = "Klikk for å redigere feed URL" id = "feedURI" styleName = "myTextInput" /> < /mx: Canvas > < /mx: Application >

Det er nesten lik rett

Trinn 19: Forbered Søknad om Web

Mange vil ta tak i generert WFlexibleFeed.swf fra bin-debug-mappen? og sette det i den endelige produksjonsmiljø, men dette er en feil!

Først bruker rammeverket (nær 200kb) som RSL (Runtime Shared Library). Det vil da bli lastet ned bare en gang til brukerens maskin, neste gang vil det ikke bli lastet (derfor redusere lasting tid). For å gjøre dette, goto Prosjekt > Properties > Flex Bygg Sti > Library Path og klikk på Work Heis. Endre den fra "flettet inn koden" til "Runtime delt bibliotek (RSL)" klikk OK
. Rammeverket vil nå bli eksportert som et separert fil

Vi er klare til å eksportere programmet

Trinn 20:.. Export Slipp Bygg

Hver søknad skal eksporteres som en utgivelse build (det er derfor prosjektet banen inneholder bin-release-mappen). Du trenger bare å klikke på Eksporter Slipp Bygg Button, vist gult her:

Hele prosjektet vil bli eksportert til "bin-release" -mappen. Dette er innholdet som skal plasseres på nettstedet ditt eller bloggen!

Trinn 21: leke med den

Du har nå tid til å leke med det endelige resultatet, endre noen css detaljer, foreta en ny type fôr switcher, er det mange ting du kan forbedre det. Du kan selv ta den på skrivebordet ved hjelp av Adobe AIR. Bli inspirert! En veldig fin søknad om dette Feedreader er å sette ditt eget innmatingsnettadresse, deaktivere tekst utgaven, deaktivere endring og oppdatere knapper og distribuere til andre nettsteder som en widget for å lese dine blogginnlegg ...

Konklusjon

I denne opplæringen har du lært hvordan å analysere, håndtere og vise feed oppføringer i en Datagrid inne Flash. Du har lært litt om den kule xmlsyndication lib og også oppdaget noen triks for å forbedre dine prosjekter. Bla gjennom koden, laste ned kildefilene og ha det gøy

Merk: Bruk menyen Fil >! Import > Flex Prosjektarkiv importere kildefilene; de er klare til bruk!

Jeg håper du likte denne opplæringen, takk for lesing!