Introduktion till Adobe Air

Denna handledning kommer att introducera dig till Adobe Air, ett ramverk för att bygga rika internetapplikationer. Denna första introduktion visar hur man skapar en enkel applikation med hjälp av Html / Js-teknik.

Vad är Adobe Air?

Adobe Air är ett ramverk som gör det möjligt att bygga stationära applikationer.
Adobe Air-applikationer bygger på två teknologier: Html / Js och Flash.
Utvecklare kan välja att bygga stationära applikationer via HTML / JS, Flash eller Flex. Efter en kort översikt över arkitekturen bygger vi en enkel applikation med hjälp av Html / Js.

Steg 1 - Arkitektur av en luftapplikation

En Air-applikation exekveras med hjälp av en runtime-komponent som kör koden i luftfilen. Som du kan se i bilden tillhandahåller Adobe runtime-komponenten för operativsystemen för tre borgmästare, Mac OS X, Windows (XP / Vista) och Linux (notera: Linux-versionen är fortfarande i beta). Figuren kan leda till att de båda metoderna är exklusiva, antingen utvecklas du i HTML / JS eller Flash. Eftersom air runtime tillåter "överbrygga" mellan Javascript och ActionScript-motorer kan du ringa javascript-kod från en swf, manipulera HTML / DOM via ActionScript, etc..

Steg 2 - Funktioner på operativ nivå

Adobe Air runtime är inte bara en integration av HTML / JS och Flash-teknik. Runtiden ger en uppsättning API som tillåter luftapplikationer att interagera med operativsystemfunktioner som:

  • Filläsning och skrivning
  • Native Windows / Menus skapande och hantering
  • Hämtning av internetresurser

Adobe Air innehåller även SQLite, en databasmotor för att lokalt lagra och hämta data.

Steg 3 - Installation

För att upprepa de steg som beskrivs nedan måste du installera runtime och sdk (Software Development Kit), som gör att du kan bygga luftapplikationer.
Körtiden kan laddas ner från http://www.adobe.com/go/getair. Kör bara installationsprogrammet och följ anvisningarna.
SDK kan laddas ner från: http://www.adobe.com/go/getairsdk
Unzip SDK och placera mapparna på den plats du föredrar (macosx-användare måste montera en .dmg-bild). Kom ihåg platsen för SDK, vi kommer att referera till det som SDKPATH.
SDK: s katalog ska se ut så här:

Steg 4 - Konfiguration

SDK måste konfigureras, annars kommer operativsystemet inte att hitta de kommandon som ska utföras.
Faktum är att om du öppnar ett skal en typ adl, ditt operativsystem kommer att säga något som "kommando inte hittat". Det här fungerar bara om du flyttar till bin-katalogen i SDK-mappen. Eftersom vi vill kunna köra bygg- och testkommandon från varje mapp måste vi konfigurera SDK. Det är viktigt att skriva korrekt den absoluta vägen i bin-katalogen i SDK-mappen.

På en Mac OS X följer du följande procedur:

  1. Öppna terminalen (/ Program / Verktyg / Terminal)
  2. Typ CD att du är i din hemmapp
  3. leta efter en fil med namnet .profil. Om det inte existerar skapa det
  4. Leta efter en linje som liknar detta: exportera PATH = $ PATH: / usr / bin
  5. lägg till en annan rad så här: exportera PATH = $ PATH: / airsdk / bin
  6. Om sökvägen till luften SDK innehåller vita mellanslag sätter den ihop med en dubbel citat (t ex "/ my pathtosdk / air")
  7. Stäng och öppna terminalen igen. Eller skriv källa .profil

Följ Windows på följande sätt:

  1. Högerklicka på Den här datorn, välj Egenskaper
  2. Markera fliken Avancerat och klicka sedan på knappen Miljömässiga variabler
  3. Välj VÄG från bottenlistan och lägg till sökvägen till sdk-mappen i slutet, som i figuren.

För att testa om konfigurationen är framgångsrik låt oss öppna ett skal och skriva in
adt kommando.
Resultatet ska vara följande:

Detta svar betyder tekniskt att vi har angivit ett felaktigt antal parametrar till kommandot, men det också
innebär att SDK har installerats och konfigurerats korrekt.

Steg 5 - Projektskapande

Låt oss nu skapa vår projektmapp. Vi kallar det myTest och vi skapar två filer: myTest.html och myTest.xml.

XML-filen är konfigurationsfilen, som möjliggör inställning av luftapplikationen. Öppna den med din föredragna redaktör och sätt in följande kod.


Den första raden är en standardrubrik för xml-filer. Den andra raden startar definitionen av vår ansökan. De id är den unika identifieraren av din ansökan. I det här fallet prefixade jag det med mitt domännamn. De filnamn är namnet på det körbara som vi kommer att generera. namn är namnet på ansökan, sett av användaren. De beskrivning är ett fragment som visas under installationen för att beskriva applikationen. Version anger versionsnumret för din app, 0,1 i vårt fall.
Efter att ha angett metadata om programmet, går vi till definitionen av grafiken, som bifogas i märka.

Linje 10 anger rotfilen, det vill säga filen som ska laddas i luftapplikationen vid start. I det här fallet myTest.html som vi kommer att visa senare. Titel är strängen som kommer att visas i övre delen av fönstret. De systemchrome anger om din ansökan har standardkrom (den som är värd för operativsystemet), eller ingen. Chrome är en uppsättning standardverktyg som gör det möjligt att manipulera ett fönster i en skrivbordsmiljö, nämligen titellinjen, knapparna nära / ändra storlek, gränser och det område som ska grepp för att ändra storlek.

De bakgrund av en luftapplikation kan ställas in till transparent, men det här alternativet är endast giltigt om krom är inställd på ingen. Visible gör det möjligt att bestämma om du ska visa ansökan när den startas. Det här är användbart när uppstarten tar lite tid och du vill inte visa grafiken för användare.
Betydelsen av taggar minimizable, maximizable och resizable bör vara intuitivt och inte behöva förklaring.

Låt oss nu titta på myTest.html som faktiskt innehåller vår applikation.

Som du kan se är det en vanlig html-sida med huvud och kropp. Huvudet innehåller en titel och kroppen har en enkel div med centrerad text.

Steg 6 - Kör ansökan

Innan vi paketerar programmet som en .air-fil testar vi den för att kontrollera om den ger det förväntade resultatet.
Verktyget vi använder id adl, vilket gör det möjligt att köra våra luftapplikationer utan installation.
Låt oss öppna ett skal och gå till katalogen som innehåller våra myTest-filer (både html och xml).
Skriv sedan följande kommando:

 adl myTest.xml 

Detta kör programmet med det aktuella operativsystemets krom. På en MacOs ska det se ut så här.

I Windows XP visas programmet så här:

Du kan tvivla på att den här applikationen fungerar bara med html. Låt oss testa javascript.
Vi ändrar myTest.html filen enligt följande.

Med avseende på den tidigare versionen lade vi till en skriptikett som innehåller definitionen av en enkel javascript-funktion, myFunction (),poppar upp en varning (linjer 4-8). Vi lade till en knapp i kroppen (rad 12). Åtgärden som är associerad med knappklicket är popme () fungera. Låt oss spara filen och köra den, med samma kommando från skalet, adl myTest.xml

Om vi ​​klickar på knappen borde vi se något som följande:

Steg 7 - Använda luftapplikation

När din ansökan är klar för distribuering kan vi skapa .air-filen, som är distributionspaketet för Adobe Air-applikationer.
Den här filen, som är baserad på zip-komprimering, innehåller alla de saker som behövs för att installera luftapplikationer.
En luftapplikation måste signeras med ett certifikat. För brett distribuerade applikationer är det att föredra att erhålla ett certifikat från en auktoriserad myndighet.
Vårt syfte är bara att testa, så ett självtecknat certifikat är tillräckligt. Skapandet av ett certifikat kan göras via adt kommando. Öppna ett skal, flytta till projektmappen och skriv det här kommandot:

 adt-certifikat -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass 

adt-certifikat-cn är helt enkelt den syntax som krävs av kommandot. Följande tabell förklarar de värden som ges till kommandot.

Parametervärde Förklaring
mycertificate Certifikatets namn
1024-RSA Certifikatets krypteringsnyckel
mycertificatefile.p12 Filen där certifikatet är lagrat
mysecretpass Lösenordet som skyddar ditt certifikat

Om du kontrollerar projektmappen hittar du en ny fil som heter mycertificate.p12 vilket är det självsignerade certifikatet som vi skapade rätt.
Projektmappen ska nu innehålla tre filer som i bilden nedan.

Nu har vi allt vi behöver för att skapa vår .air-fil. Vi måste köra ett ganska långt shell-kommando. Var inte panik. Jag ska förklara varje enskilt ord. Låt oss först se det.

adt -package -storlek pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html

Som ovan adt-package är kommandotens syntax, Arkivtyp Indikerar formatet på nyckelaffären. Detta är en ganska teknisk parameter. För att vara kortfattad, eftersom vi skapat ett certifikat enligt pkcs12-formatet måste vi berätta det för kompilatorn. Därefter specificerar vi certifikatfilen via -nyckellagret parameter. Slutligen ger vi namnet på den resulterande .air-filen, xml-filen som innehåller programinställningarna och .html-inmatningsfilen. När vi utfärdar det här kommandot kommer vi att bli ombedda att lösenordet inmatades under skapandet av certifikatet ("mysecretpass") i vårt fall.
Vi har nu en .air-fil, som är distributionsformatet för vår ansökan. Om vi ​​dubbelklickar på så startar installationsprocessen.
Installation går igenom två enkla steg som visas nedan.

Observera att, eftersom vi själv signerat certifikatet, den publicerade identiteten för ansökan om ej bekant.

Under det andra steget kan du ange var du ska installera programmet och huruvida det ska startas när installationen är klar.

Slutsats

I denna handledning har vi introducerat Adobe Air-ramen och vi har byggt vår första Adobe Air-applikation med hjälp av HTML / Js.
I nästa episod ser vi hur man bygger samma applikation med Flex och Flash CS3.

  • Prenumerera på NETTUTS RSS-flödet för fler dagliga webbutvecklingstoppar och artiklar.