Erstmaliges Erstellen einer HTML-basierten AIR-Anwendung mit dem AIR-SDK

Erstellen der Projektdateien
Erstellen der AIR-Anwendungsdeskriptordatei
Erstellen der HTML-Seite der Anwendung
Testen der Anwendung
Erstellen der AIR-Installationsdatei
Nächste Schritte

Mithilfe der folgenden Anleitung können Sie die einfache HTML-basierte AIR-Anwendung „Hello World“ erstellen und komprimieren. Auf diese Weise bekommen Sie schnell eine Vorstellung von der Funktionsweise von Adobe® AIR®.

Zunächst muss die Laufzeitumgebung installiert und das AIR-SDK eingerichtet sein. In diesem Tutorial werden der AIR Debug Launcher (ADL) und das AIR Developer Tool (ADT) verwendet. ADL und ADT sind Befehlszeilen-Dienstprogramme. Sie finden sie im Verzeichnis bin des AIR-SDK (siehe Installieren des AIR-SDK). In diesem Tutorial wird davon ausgegangen, dass Sie mit dem Ausführen von Programmen von der Befehlszeile vertraut sind und wissen, wie die erforderlichen Pfad-Umgebungsvariablen für Ihr Betriebssystem eingerichtet werden.

Hinweis: Wenn Sie ® Dreamweaver® nutzen, lesen Sie den Abschnitt Erstmaliges Erstellen einer HTML-basierten AIR-Anwendung mit Dreamweaver.

Hinweis: HTML-basierte AIR-Anwendungen können nur für das desktop- und das extendedDesktop-Profil entwickelt werden. Die mobile- und tv-Profile werden nicht unterstützt.

Erstellen der Projektdateien

Jedes HTML-basierte Projekt muss die folgenden beiden Dateien enthalten: eine Anwendungsdeskriptordatei, in der die Anwendungsmetadaten angegeben werden, und eine HTML-Seite der obersten Ebene (Top-Level). Neben diesen erforderlichen Dateien enthält dieses Projekt eine JavaScript-Codedatei, AIRAliases.js, in der praktische Alias-Variable für die AIR-API-Klassen definiert sind.

Erstellen Sie ein Verzeichnis mit dem Namen HelloWorld für die Projektdateien.
Erstellen Sie eine XML-Datei mit dem Namen HelloWorld-app.xml.
Erstellen Sie eine HTML-Datei mit dem Namen HelloWorld.html.
Kopieren Sie die Datei AIRAliases.js aus dem Frameworks-Verzeichnis des AIR-SDK in das Projektverzeichnis.

Erstellen der AIR-Anwendungsdeskriptordatei

Um mit dem Erstellen der AIR-Anwendung zu beginnen, erstellen Sie eine AIR-Anwendungsdeskriptordatei mit der folgenden Struktur:

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>

Öffnen Sie die Datei HelloWorld-app.xml zum Bearbeiten.
Fügen Sie das <application>-Stammelement einschließlich des AIR-Namespace-Attributs hinzu:

<application xmlns="http://ns.adobe.com/air/application/2.6"> Das letzte Segment des Namespace, „2.6“, gibt die Version der Laufzeitumgebung an, die für die Anwendung erforderlich ist.
Fügen Sie das <id>-Element hinzu:

<id>examples.html.HelloWorld</id> Die Anwendungs-ID identifiziert Ihre Anwendung eindeutig, zusammen mit der Veröffentlicher-ID (die AIR aus dem Zertifikat ableitet, mit dem das Anwendungspaket signiert wurde). Die Anwendungs-ID wird verwendet für die Installation, den Zugriff auf das private Anwendungsspeicherverzeichnis im Dateisystem, den Zugriff auf den privaten verschlüsselten Speicher und für die Kommunikation zwischen Anwendungen.
Fügen Sie das <versionNumber>-Element hinzu:

<versionNumber>0.1</versionNumber> Hilft Benutzern dabei, festzustellen, welche Version Ihrer Anwendung sie installieren.
Fügen Sie das <filename>-Element hinzu:

<filename>HelloWorld</filename> Der Name, der für die ausführbare Datei der Anwendung, das Installationsverzeichnis und andere Verweise auf die Anwendung im Betriebssystem verwendet wird.
Fügen Sie das <initialWindow>-Element hinzu, das die folgenden untergeordneten Elemente enthält, um die Eigenschaften des Anfangsfensters Ihrer Anwendung festzulegen:

<content>HelloWorld.html</content> Identifiziert die HTML-Stammdatei, die AIR laden soll.

<visible>true</visible> Macht das Fenster sofort sichtbar.

<width>400</width> Legt die Breite des Fensters fest (in Pixeln).

<height>200</height> Legt die Höhe des Fensters fest.

Speichern Sie die Datei. Die fertige Anwendungsdeskriptordatei sollte folgendermaßen aussehen:

<?xml version="1.0" encoding="UTF-8"?> 
<application xmlns="http://ns.adobe.com/air/application/2.6"> 
    <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 diesem Beispiel werden nur einige wenige der möglichen Anwendungseigenschaften festgelegt. Eine Übersicht über alle Anwendungseigenschaften, mit denen Sie das Fensterdesign, die Fenstergröße, die Transparenz, das Standardinstallationsverzeichnis, die zugeordneten Dateitypen sowie Anwendungssymbole festlegen können, finden Sie unter AIR-Anwendungsdeskriptordateien.

Erstellen der HTML-Seite der Anwendung

Als Nächstes erstellen Sie eine einfache HTML-Seite, die als Hauptdatei der AIR-Anwendung dient.

Öffnen Sie die Datei HelloWorld.html zum Bearbeiten. Fügen Sie den folgenden HTML-Code hinzu:

<html> 
<head> 
    <title>Hello World</title> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

Importieren Sie im <head>-Abschnitt des HTML-Codes die Datei AIRAliases.js:
```
<script src="AIRAliases.js" type="text/javascript"></script>
```
AIR definiert die Eigenschaft runtime für das HTML-Fensterobjekt. Die Laufzeitumgebung ermöglicht den Zugriff auf die integrierten AIR-Klassen, wobei der vollständige Paketname der Klasse verwendet wird. Um zum Beispiel ein AIR-File-Objekt zu erstellen, könnten Sie die folgende Anweisung in JavaScript hinzufügen:
```
var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");
```
Die Datei AIRAliases.js definiert praktische Aliasnamen für die am häufigsten verwendeten AIR-APIs. Mithilfe der Datei AIRAliases.js könnten Sie den Verweis auf die File-Klasse folgendermaßen verkürzen:
```
var textFile = new air.File("app:/textfile.txt");
```
Fügen Sie unter dem AIRAliases-Skript-Tag ein weiteres Skript-Tag hinzu, das eine JavaScript-Funktion zur Verarbeitung des onLoad-Ereignisses enthält:
```
<script type="text/javascript"> 
function appLoad(){ 
    air.trace("Hello World"); 
} 
</script>
```
Die appLoad()-Funktion ruft die air.trace()-Funktion auf. Die trace-Meldung wird an die Befehlszeile ausgegeben, wenn Sie die Anwendung mit ADL ausführen. Trace-Anweisungen können beim Debugging sehr hilfreich sein.
Speichern Sie die Datei.

Ihre Datei HelloWorld.html sollte jetzt folgendermaßen aussehen:

<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>

Testen der Anwendung

Wenn Sie die Anwendung von der Befehlszeile ausführen und testen möchten, verwenden Sie das Dienstprogramm AIR Debug Launcher (ADL). Die ausführbare ADL-Datei befindet sich im Verzeichnis bin des AIR-SDK. Wenn Sie das AIR-SDK noch nicht eingerichtet haben, lesen Sie den Abschnitt Installieren des AIR-SDK.

Öffnen Sie eine Befehlskonsole oder Shell. Wechseln Sie zu dem Verzeichnis, das Sie für dieses Projekt erstellt haben.
Führen Sie den folgenden Befehl aus:
```
adl HelloWorld-app.xml
```
Es wird ein AIR-Fenster mit Ihrer Anwendung angezeigt. Außerdem zeigt das Konsolenfenster die Meldung an, die aus dem Aufruf von air.trace resultiert.

Weitere Informationen finden Sie unter AIR-Anwendungsdeskriptordateien.

Erstellen der AIR-Installationsdatei

Wenn Ihre Anwendung erfolgreich ausgeführt wird, können Sie sie mit dem ADT-Dienstprogramm zu einer AIR-Installationsdatei komprimieren. Eine AIR-Installationsdatei ist eine Archivdatei, die alle Anwendungsdateien enthält und die Sie an die Benutzer verteilen können. Sie müssen Adobe AIR installieren, bevor Sie eine komprimierte AIR-Datei installieren können.

Um die Sicherheit einer Anwendung zu gewährleisten, müssen alle AIR-Installationsdateien digital signiert werden. Zu Entwicklungszwecken können Sie mit ADT oder einem anderen Werkzeug für die Zertifikaterstellung ein selbstsigniertes Basiszertifikat erstellen. Sie können auch von einer kommerziellen Zertifizierungsstelle wie VeriSign oder Thawte ein Zertifikat für die Codesignierung kaufen. Wenn Benutzer ein selbstsigniertes Zertifikat installieren, wird der Herausgeber während des Installationsvorgangs als „unbekannt“ angezeigt. Dies liegt daran, dass ein selbstsigniertes Zertifikat lediglich gewährleistet, dass die AIR-Datei seit der Erstellung nicht geändert wurde. Es gibt keine Möglichkeit, zu verhindern, dass jemand eine „falsche“ AIR-Datei selbst signiert und als Ihre Anwendung ausgibt. Für veröffentlichte AIR-Dateien wird deshalb dringend ein überprüfbares, kommerzielles Zertifikat empfohlen. Einen Überblick über sicherheitsrelevante Themen zu AIR finden Sie unter AIR-Sicherheit (für ActionScript-Entwickler) oder AIR security (für HTML-Entwickler).

Generieren eines selbstsignierten Zertifikat-Schlüssel-Paars

Geben Sie an der Eingabeaufforderung den folgenden Befehl ein (die ausführbare ADT-Datei befindet sich im Verzeichnis bin des AIR-SDK):

adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

ADT generiert eine Keystoredatei mit dem Namen sampleCert.pfx, die ein Zertifikat und den dazugehörigen privaten Schlüssel enthält.

In diesem Beispiel wird nur die Mindestanzahl von Attributen verwendet, die für ein Zertifikat festgelegt werden können. Sie können beliebige Werte für die Parameter in Kursivschrift verwenden. Der Schlüsseltyp muss entweder 1024-RSA oder 2048-RSA sein (siehe Signieren von AIR-Anwendungen).

Erstellen der AIR-Installationsdatei

Geben Sie an der Eingabeaufforderung den folgenden Befehl ein (in einer Zeile):

adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

Sie werden aufgefordert, das Kennwort für die Keystoredatei einzugeben.

Das Argument „HelloWorld.air“ ist die AIR-Datei, die ADT erstellt. „HelloWorld-app.xml“ ist die Anwendungsdeskriptordatei. Die folgenden Argumente sind die Dateien, die von Ihrer Anwendung verwendet werden. In diesem Beispiel werden nur zwei Dateien verwendet, Sie können jedoch eine beliebige Anzahl von Dateien und Ordnern einbeziehen. ADT überprüft, ob die Hauptinhaltsdatei, „HelloWorld.html“ im Paket enthalten ist, wenn Sie jedoch vergessen, die Datei „AIRAliases.js“ einzuschließen, kann Ihre Anwendung nicht funktionieren.

Nachdem das AIR-Paket erstellt wurde, können Sie die Anwendung installieren und ausführen, indem Sie auf die Paketdatei doppelklicken. Sie können den AIR-Dateinamen auch als Befehl in einer Shell oder einem Befehlsfenster eingeben.

Nächste Schritte

In AIR verhält sich HTML- und JavaScript-Code im Allgemeinen genauso wie in einem üblichen Webbrowser. (AIR verwendet dieselbe WebKit-Rendering-Engine wie der Webbrowser Safari.) Es gibt jedoch einige wichtige Unterschiede, die Sie beachten müssen, wenn Sie HTML-Anwendungen in AIR entwickeln. Weitere Informationen zu diesen Unterschieden und andere wichtigen Themen finden Sie unter Programming HTML and JavaScript.