Voor het eerst een AIR-toepassing op HTML-basis maken met de SDK van AIR

Voor een snelle en praktische illustratie van de werking van Adobe® AIR® kunt u met deze instructies een eenvoudige AIR-toepassing op HTML-basis ("Hello World") maken en in een pakket plaatsen.

Om te beginnen moet de runtime zijn geïnstalleerd en de SDK van AIR zijn ingesteld. In deze zelfstudie worden ADL (AIR Debug Launcher) en ADT (AIR Developer Tool) gebruikt. ADL en ADT zijn opdrachtregelprogramma's en staan in de map bin van de SDK van AIR (zie De SDK van AIR installeren ). Bij deze zelfstudie wordt ervan uitgegaan dat u weet hoe u programma's vanaf de opdrachtregel uitvoert en hoe u de juiste padomgevingsvariabelen voor het besturingssysteem instelt.

Opmerking: als u ® Dreamweaver® gebruikt, gaat u naar Voor het eerst een AIR-toepassing op HTML-basis maken met Dreamweaver .
Opmerking: AIR-toepassingen op basis van HTML kunnen alleen worden ontwikkeld voor het profielen desktop en extendedDesktop. Het mobiele profiel wordt niet ondersteund.

De projectbestanden maken

Elk AIR-project op HTML-basis moet de volgende twee bestanden bevatten: een descriptorbestand, waarin de metagegevens van de toepassing zijn opgegeven, en een HTML-pagina voor het hoogste niveau. Naast deze twee vereiste bestanden bevat dit project een bestand met JavaScript-code: AIRAliases.js . Hierin worden handige aliasvariabelen voor de AIR API-klassen gedefinieerd.

  1. Maak een map met de naam HelloWorld waarin de projectbestanden worden geplaatst.

  2. Maak een XML-bestand met de naam HelloWorld-app.xml .

  3. Maak een HTML-bestand met de naam HelloWorld.html .

  4. Kopieer AIRAliases.js uit de map frameworks van de SDK van AIR naar de projectmap.

Het descriptorbestand van de AIR-toepassing maken

Het bouwen van de AIR-toepassing begint met het maken van een XML-descriptorbestand voor de toepassing met de volgende structuur:

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>
  1. Open het bestand HelloWorld-app.xml om te bewerken.

  2. Voeg het basiselement <application> toe, inclusief het naamruimtekenmerk voor AIR:

    <application xmlns="http://ns.adobe.com/air/application/2.7"> Het laatste segment van de naamruimte, '2.7', geeft aan welke versie van de runtime voor de toepassing is vereist.

  3. Voeg het element <id> toe:

    <id>examples.html.HelloWorld</id> De toepassings-id vormt tezamen met de uitgevers-id een unieke identificatie van de toepassing (de uitgevers-id wordt door AIR afgeleid van het certificaat waarmee het toepassingspakket word ondertekend). De toepassings-id wordt gebruikt voor installatie, toegang tot de privéopslagmap van de toepassing, toegang tot gecodeerde privéopslag en onderlinge communicatie tussen toepassingen.

  4. Voeg het element <versionNumber> toe:

    <versionNumber>0.1</versionNumber> Hiermee kunnen gebruikers bepalen welke versie van de toepassing zijn installeren.

    Opmerking: als u AIR 2 of eerder gebruikt, moet u het element <version> gebruiken in plaats van het element <versionNumber> .
  5. Voeg het element <filename> toe:

    <filename>HelloWorld</filename> De naam die wordt gebruikt voor het uitvoerbare bestand en de installatiemap van de toepassing, en voor andere verwijzingen naar de toepassing in het besturingssysteem.

  6. Voeg het element <initialWindow> toe met daarin de volgende onderliggende elementen om de eigenschappen voor het eerste toepassingsvenster te definiëren:

    <content>HelloWorld.html</content> Hiermee wordt het basisbestand met HTML-inhoud gedefinieerd dat in AIR wordt geladen.

    <visible>true</visible> Hiermee wordt ingesteld dat het venster meteen zichtbaar is.

    <width>400</width> Hiermee wordt de breedte van het venster (in pixels) ingesteld.

    <height>200</height> Hiermee wordt de hoogte van het venster ingesteld.

  7. Sla het bestand op. Het voltooide descriptorbestand van de toepassing moet er als volgt uitzien:

    <?xml version="1.0" encoding="UTF-8"?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7"> 
        <id>examples.html.HelloWorld</id> 
        <versionNumber>0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.html</content> 
            <visible>true</visible> 
            <width>400</width> 
            <height>200</height> 
        </initialWindow> 
    </application>

In dit voorbeeld wordt slechts een aantal van de mogelijke toepassingseigenschappen ingesteld. Als u een overzicht wilt van de volledige serie toepassingseigenschappen, waarmee u dingen als vensterinterface, vensterformaat, transparantie, standaardmap voor installatie, gekoppelde bestandstypen en toepassingspictogrammen kunt instellen, raadpleegt u AIR-toepassingsdescriptorbestanden .

De HTML-pagina van de toepassing maken

Nu moet u een eenvoudige HTML-pagina maken die het hoofdbestand van de AIR-toepassing vormt.

  1. Open het bestand HelloWorld.html om te bewerken. Voeg de volgende HTML-code toe:

    <html> 
    <head> 
        <title>Hello World</title> 
    </head> 
    <body onLoad="appLoad()"> 
        <h1>Hello World</h1> 
    </body> 
    </html>
  2. Importeer in de sectie <head> van de HTML het bestand AIRAliases.js :

    <script src="AIRAliases.js" type="text/javascript"></script>

    AIR definieert een eigenschap met de naam runtime voor het HTML-vensterobject. De eigenschap runtime biedt toegang tot de ingebouwde AIR-klassen, waarbij gebruik wordt gemaakt van de volledig gekwalificeerde pakketnaam van de klasse. Als u bijvoorbeeld een object File van AIR wilt maken, kunt u de volgende instructie in JavaScript toevoegen:

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    Het bestand AIRAliases.js definieert handige aliassen voor de API's van AIR die het meest worden gebruikt. Met AIRAliases.js kunt u de verwijzing naar de klasse File als volgt afkorten:

    var textFile = new air.File("app:/textfile.txt");
  3. Voeg onder de scripttag AIRAliases een scripttag toe die een JavaScript-functie bevat voor het verwerken van de gebeurtenis onLoad :

    <script type="text/javascript"> 
    function appLoad(){ 
        air.trace("Hello World"); 
    } 
    </script>

    De functie appLoad() roept de functie air.trace() aan. Wanneer de toepassing met ADL wordt uitgevoerd, wordt het traceerbericht afgedrukt naar de opdrachtconsole. De instructie trace kan bijzonder handig zijn bij foutopsporing.

  4. Sla het bestand op.

Het bestand HelloWorld.html moet er als volgt uitzien:

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

De toepassing testen

Met het hulpprogramma ADL (AIR Dedug Launcher) kunt u de toepassing vanaf de opdrachtregel uitvoeren en testen. Het uitvoerbare bestand van ADL vindt u in de map bin van de SDK van AIR. Als u de SDK voor AIR nog niet hebt geïnstalleerd, gaat u naar De SDK van AIR installeren .

  1. Open een opdrachtregelconsole of shell. Ga naar de map die u voor dit project hebt gemaakt.

  2. Voer de volgende opdracht uit:

    adl HelloWorld-app.xml

    Er verschijnt een AIR-venster met daarin de toepassing. Daarnaast wordt in het venster het bericht weergegeven dat het resultaat is van het aanroepen van air.trace() .

    Zie voor meer informatie AIR-toepassingsdescriptorbestanden .

Het AIR-installatiebestand maken

Wanneer de toepassing goed uitgevoerd kan worden, kunt u het met hulpprogramma ADT de toepassing in een AIR-installatiebestand plaatsen. Een AIR-installatiebestand is een archiefbestand met alle toepassingsbestanden dat naar gebruikers gedistribueerd kan worden. Een AIR-bestand kan alleen worden geïnstalleerd als Adobe AIR is geïnstalleerd.

Voor de beveiliging van de toepassing is het noodzakelijk dat alle AIR-installatiebestanden digitaal worden ondertekend. U kunt met ADT of een ander certificaatprogramma een eenvoudig, niet-geautoriseerd certificaat genereren. Het is ook mogelijk om een commercieel met code ondertekend certificaat te kopen bij een geautoriseerde certificaatinstantie, bijvoorbeeld VeriSign of Thawte. Wanneer een AIR-bestand met een niet-geautoriseerd certificaat wordt geïnstalleerd, wordt de uitgever als onbekend weergegeven tijdens het installatieproces. De reden hiervoor is dat een niet-geautoriseerd certificaat alleen de garantie biedt dat het AIR-bestand sinds het maken niet is gewijzigd. Het zou kunnen gebeuren dat iemand een ander AIR-bestand met een niet-geautoriseerd certificaat ondertekent en doet voorkomen alsof dit uw toepassing is. Voor AIR-bestanden die openbaar worden gemaakt wordt een commercieel certificaat sterk aanbevolen. Zie Beveiliging in AIR (voor ActionScript-ontwikkelaars) of AIR security (voor HTML-ontwikkelaars) voor een overzicht van beveiligingsproblemen in AIR.

Een zelfondertekend certificaat en sleutelpaar genereren

Voer de volgende opdracht vanaf de opdrachtregel in (het uitvoerbare bestand van ADT staat in de map bin van de SDK van AIR):
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

ADT genereert een keystore-bestand met de naam sampleCert.pfx met daarin een certificaat en de gerelateerde privésleutel.

In dit voorbeeld wordt het kleinste aantal kenmerken gebruikt dat voor een certificaat kan worden ingesteld. Het sleuteltype moet 1024-RSA of 2048-RSA zijn (zie AIR-toepassingen ondertekenen ).

Het AIR-installatiebestand maken

Voer de volgende opdracht (één regel) vanaf de opdrachtregel in:
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

Er wordt gevraagd om een wachtwoord voor het keystore-bestand.

Het argument HelloWorld.air is het AIR-bestand dat door ADT wordt geproduceerd. HelloWorld-app.xml is het descriptorbestand van de toepassing. De volgende argumenten zijn de bestanden die door de toepassing worden gebruikt. In dit voorbeeld worden slechts twee bestanden gebruikt, maar u kunt elk gewenst aantal bestanden en mappen opnemen. ADT controleert of het hoofdinhoudsbestand HelloWorld.html is opgenomen in het pakket, maar als u vergeet AIRAliases.js op te nemen, werkt uw toepassing niet.

Wanneer het AIR-pakket is gemaakt, kan de toepassing worden geïnstalleerd en uitgevoerd door te dubbelklikken op het pakketbestand. Het is ook mogelijk om de naam van het AIR-bestand als opdracht in een shell of opdrachtvenster te typen.

Volgende stappen

In AIR gedragen HTML-code en JavaScript-code zich meestal net zoals in de meeste browsers. (Het is zelfs zo dat AIR dezelfde WebKit-weergave-engine gebruikt als de Safari-webbrowser.) Er is echter wel een aantal belangrijke verschillen waarmee u rekening moet houden wanneer u HTML-toepassingen in AIR ontwikkelt. Zie Programming HTML and JavaScript voor meer informatie over deze verschillen en andere belangrijke onderwerpen.