Desktop RSS med Adobe AIR

Adobe AIR (Adobe Integrated Runtime) er for tiden i offentlig beta; den lar utviklere bygge doble plattformapplikasjoner for skrivebordet med eksisterende Web 2.0-teknologier inkludert Flash og Ajax (HTML og JavaScript).

Vi vil vise deg hvor enkelt det er å bygge den første applikasjonen din for AIR, og deretter i fremtidige artikler ta deg gjennom prosessen med å utvide det til et stykke stasjonær programvare distribuert via AIR.

Vi har tidligere diskutert Adobes Spry Ajax-rammeverk, og evaluert funksjonssettet i en artikkel som tidligere ble publisert her på Builder AU i juni 2007. Vi kommer til å bruke Spry for å gi noe av logikken for Adobe AIR-applikasjonen som vi bygger .

Planen for første trinn er å bygge en applikasjon som vil bruke Spry Data Library til å importere, analysere og vise en RSS-feed. Grensesnittet vil bli delt inn i to halvdeler med en liste over RSS-innlegg hentet fra en feed vist i øvre halvdel og detaljene om et valgt innlegg vises i den nedre halvdelen av siden.

Aptana, formørkelse for webutviklere

Med denne artikkelen skal vi også utforske noen av funksjonene i Aptana, en åpen kildekode-IDE for nettutviklere som er basert på Eclipse. Aptana utvider Eclipse ved å legge til ekstra støtte for HTML, CSS og JavaScript. Det er gratis og tilgjengelig for de fleste operativsystemer. Aptana samler en rekke Ajax-rammer, noe som gjør det enklere å finne de nødvendige kontrollene som trengs for å bygge en webapplikasjon. Det er veldig oppdatert og har plugins-moduler tilgjengelig for Apple iPhone og Adobe AIR.

Opprette prosjektet

Når du har lastet ned og spilt med Aptana, burde du ha oppdaget at det leveres sammen med bibliotekene for en rekke populære Ajax-rammer. Du må laste ned både Aptana-plugin-modulen for Adobe AIR og Adobe AIR SDK for å utvikle og kompilere Adobe AIR-applikasjoner; som Aptana, begge disse er gratis å laste ned, utvikle og distribuere applikasjoner med. Aptanas startside vil hjelpe deg med å konfigurere den for AIR-utvikling. Se en demo for å se hvordan du bygger en enkel Adobe AIR-applikasjon.

Opprett et nytt Adobe AIR-prosjekt i Aptana ved å velge File> New> Project; Velg AIR Project fra dialogboksen som vises. Tilordn deretter prosjektet ditt et passende navn og bestemme hvor det skal lagres; Aptana ønsker å tilordne prosjektnavnet til standard applikasjonsside - det er å foretrekke å gi det nytt navn til index.html.

Adobe AIR-applikasjoner krever en XML-fil for å sette opp applikasjonsdetaljene, kalt application.xml. Den neste Aptana-dialogen ber deg om de grunnleggende detaljene for applikasjonen din, som igjen vil bli brukt til å lage application.xml for deg. Merk at ID-en skal være i samsvar med standard regler for navngivende variabler og ikke ha noen mellomrom i verdien.

Programikoner håndteres automatisk av AIR for de to plattformene som den for øyeblikket støtter (Windows og OS X). En rekke formater og ikonstørrelser brukes av AIR, og den gjeldende dialogen vil importere de nominerte filene til prosjektet. Legg merke til forskjellige størrelser: AIR faller grasiøst tilbake hvis en bestemt størrelse ikke leveres - for eksempel 128 x 128. PNG-filer med alfa-gjennomsiktighet gir de beste resultatene.

Den neste dialogen vil gi deg valget om å legge til bibliotekene for Ajax-rammene du kan bruke i prosjektet ditt; det er en rekke populære rammer bundet med Aptana inkludert Yahoo, Dojo og Scriptaculous. Legg gjerne til de du er interessert i, vi bruker Spry til applikasjonen vi bygger, så det kommer inn først.

Prosjektet skal nå opprettes; legg merke til at en katalog kalt lib er lagt til - dette vil inneholde hvilke som helst av Ajax-bibliotekene du valgte under trinnene du nettopp har fullført. Aptana vil også plassere en eksempelfil for hvert valgte bibliotek i prosjektet.

Hente og analysere RSS-strømmen

For denne applikasjonen bruker vi prosjektets standard HTML-side for basen, pluss de nødvendige CSS- og JavaScript-filene for applikasjonen. Importer både xpath- og SpryData JavaScript-filene fra Spry-rammeverket, slik at vi kan hente og analysere RSS-filen som applikasjonen skal vise. Disse to er inkludert i Spry-biblioteket som du la til når du opprettet prosjektet og er lokalisert i banen lib / spry / inkluderer /, de er også en del av Spry-nedlastingen tilgjengelig fra labs.adobe.com.

Opprett deretter en forekomst av Spry XMLDataSet; her har vi kalt det rssData. Instantieringen krever to parametere, plasseringen av XML-filen og et XPath-uttrykk som identifiserer XML-noden eller nodene som dataene er inne i. Å finne noden er sannsynligvis den eneste vanskelige biten mens du bygger denne versjonen av applikasjonen, du må kunne se XML for RSS-filen direkte; og et ord om advarsel ... RSS er ikke bare RSS, det er også RDF også - dette betyr at det er to mulige dokumenttypedefinisjoner (DTD) som du potensielt har å gjøre med her. Eksempelkode en illustrerer koden vi nettopp har beskrevet. Legg merke til at Aptana også har inkludert en egen JavaScript-fil som en del av AIR-plugin-modulen.

Eksempelkode én

 Spry RSS-parser 

Viser strømmen

Deretter må vi vise dataene som er hentet. Plasser en Spry dynamisk region i en div, og sett den til rssData XMLDataSet, dette er en observatør av Spry-datasettet. Innblandet i det er en tabell med tr-koden satt til Spry-repeateren for å iterere over radene med data hentet fra RSS-strømmen. Innenfor raden legger vi ut to variabler fra rssData som identifiserer dem til Spry med krøllete seler (eksempelskode to).

Eksempelkode to

{tittel}
{} PubDate

Gjør applikasjonsstørrelsen ved å åpne application.xml - se etter rootContent-taggen og endre bredden til 620 og høyden til 385. Test koden ved å klikke på kjørknappen (skjermdump en); du skal se et AIR-vindu som inneholder en rulleliste. Endre koden ved å omgi den eksisterende div med en annen (prøvekode tre). Denne nye div skal brukes til å lage et panel for å vise listen over feeds. Vi har lagt en CSS-klasse til den som vil administrere panelets utseende. Legg merke til at tr som inneholder Spry-gjenta nå bruker en innebygd Spry-klasse for å vise dataene i vekslende radfarger.

Prøvekode tre

{tittel}
{} PubDate

Eksempelkode fire er en liste over CSS til dags dato, legg merke til størrelsesattributtene til feedsDisplayPanel kontrollerer størrelsen på panelet, og at overflow-attributtet er satt til auto for å tillate vertikal rulling. Stiler med de reserverte navnene på jevne og rare er lagt til for de vekslende radfargene.

Eksempelkode fire

 body {font-family: Arial, Helvetica, sans-serif; skriftstørrelse: 12px; } .feedsDisplayPanel {margin: 0px; polstring: 3px; kant-venstre: solid 1px #CCC; grense-høyre: solid 1px # 999; border-top: solid 1px # 999; border-bottom: solid 1px #CCC; bredde: 590px; høyde: 180px; overflow: auto; } .even {bakgrunnsfarge: # FFAB00; } .odd {bakgrunnsfarge: # CC8900; } 

Legg deretter til et nytt panel for å vise beskrivelsen for et valgt innlegg (eksempelkode fem), dette ligner på det første panelets kode - det som er annerledes er at det er nestet div er satt til å være et eksempel på Spry-detaljregionen som er tildelt til rssData XMLDataSet. CSS-klassen skiller seg bare i høyden.

Eksempelkode fem

 {tittel} 
{beskrivelse}
Les hele artikkelen

En Spry onclick-hendelse for å vise beskrivelsesteksten er lagt til i tabellrekken som viser de enkelte feedoverskriftene; dette vil sette verdiene til tittelen, beskrivelsen og koblingsvariablene innen feedDetailPanel (eksempelskode seks). Onclick-hendelsen vil ikke føre til at markøren normalt endres for å gi brukeren den rette visuelle signalen om at de svever over noe de kan klikke på, tr-taggen har blitt endret i stilarket for å vise riktig markør (eksempelkode syv ). Ytterligere styling er lagt til applikasjonen for å forbedre utseendet, last ned prøven av programkoden for å se den fullførte koden.

Eksempelkode seks

Eksempelkode syv

 tr {markør: peker; } 

Pakking av applikasjonen

Den siste tingen å gjøre er å pakke applikasjonen inn i en AIR-fil for distribusjon og installasjon. Når prosjektet er valgt, klikk på Eksporter AIR-knappen på verktøylinjen, velg filene for applikasjonen din fra dialogboksen som vises. Det her er at det er veldig enkelt å velge og pakke hele lib-katalogen som Spry-bibliotekene er plassert i. Årsaken til at du ikke vil gjøre det, er at mer enn to megabyte i unødvendige filer er lagt til AIR-pakken . Du må bore ned i katalogen som de to Spry JavaScript-filene er plassert i og bare ta dem med.

En bedre løsning, spesielt hvis du skal pakke applikasjonen flere ganger, er å lage en ny katalog og kopiere på tvers av nødvendige Spry JavaScript-filer - ikke glem å endre banene i programkoden.

Den resulterende AIR-pakken kan deretter distribueres på hvilken som helst maskin med Adobe AIR-runtime installert. Husk at dette er beta-programvare, bevis på at det er slik distribusjonen av Webkit i AIR utvikler seg. Windows-ytelsen til Apollo var ganske vanlig sammenlignet med Mac, dette var spesielt fordi den distribusjonen av Webkit ennå ikke er optimalisert. Vi oppdaget små forskjeller i gjengivelse av oppsettet mellom Mac- og Windows-installasjoner av eksempelskoden som bare kan tilskrives Webkit-implementeringene.

Neste skritt

Det er de første trinnene dine i å bygge en Ajax-applikasjon og pakke den til Adobe AIR. Det er egentlig ikke noe med stor skjønnhet, og jeg er sikker på at de av dere som er dyktige på CSS kan style det til å være mer glamorøst - men vurder at applikasjonssiden leverer en RSS-leser på mindre enn 40 kodelinjer.

Pålydende er det noen raske små ting som kan gjøres for å finesse applikasjonen: det første vil være å legge til laster for å underholde brukeren mens RSS-feeden blir hentet.

Ved å klikke på koblingen Les hele artikkelen vil applikasjonen laste inn den nødvendige siden, men størrelsen på størrelsen er feil, og det er ingen måte å gå tilbake til RSS-leseren på. Vi tar opp det i en artikkel om AIR-vindu.

Hva mer kan vi gjøre for det, spesielt med det som er tilgjengelig fra AIR-funksjonen? I fremtidige artikler viser vi deg hvordan du lagrer data lokalt ved hjelp av en rekke metoder, inkludert lagring i en innebygd SQLite-database og gjøre applikasjonsforbindelsen oppmerksom slik at den kan fungere både off og online.

© Copyright 2021 | pepebotifarra.com