Einführung Adobe AIR

von Thomas Schaaf | 1 | 1 Kommentar | 5463 Aufrufe
Inhaltsverzeichnis

Anzeige Hier werben

Was ist Adobe AIR?

Adobe AIR (Adobe Integrated Runtime) ist eine so genannte plattformunabhängige Laufzeitumgebung für Rich Internet Applications (RIA). Diese Plattform soll es ermöglichen, Web-Anwendungen wie Desktop-Anwendungen benutzbar zu machen und die Vorteile beider zu vereinen.

Adobe‘s Ansatz ist vor allem deshalb so interessant, weil es für Web-Entwickler extrem leicht ist, AIR-Applikationen zu schreiben und diese auch auf verschiedenen Betriebssystemen zu benutzen. Adobe AIR ist für Windows, Mac OSX und für Linux verfügbar.

Was brauche ich?

In dieser Einführung werden Kenntnisse in HTML und JavaScript vorausgesetzt. Für die eigentliche Entwicklung brauchen Sie außerdem noch 4 Dinge:

  1. die Adobe AIR Runtime (http://get.adobe.com/air/) muss installiert sein
  2. JAVA JRE (http://java.com/en/download/index.jsp) muss installiert sein
  3. ein UTF-8 fähiger Texteditor z.B. Textpad (www.textpad.com) muss vorhanden sein
  4. das Adobe AIR SDK (www.adobe.com/products/air/tools/sdk/) muss heruntergeladen und in einem Ordner entpackt sein

Der Code

Entwicklungsumgebung

Für jedes HTML basierende AIR Projekt müssen zwei Dateien existieren. Zum einen der so genannte Descriptor und zum anderen eine HTML-Datei. In diesem Beispiel binde ich außerdem noch eine JavaScript-Datei AIRAliases.js ein, die es mir erlaubt, das AIR API komfortabler nutzen zu können.

Als erstes sollten Sie einen Ordner erstellen. In diesem Beispiel nenne ich ihn HelloWorld, dieser wird alle Projektdateien enthalten.
In diesem erstellen wir eine leere XML Datei mit dem Namen HelloWorld-app.xml sowie eine HTML Datei HelloWorld.html.
Außerdem kopieren wir aus dem SDK die Datei AIRAliases.js im Ordner frameworks in den Projektordner. Ihr Ordner HelloWorld sollte nun diese Dateien enthalten:

  • AIRAliases.js
  • HelloWorld-app.xml
  • HelloWorld.html

Descriptor-Datei

Die so genannte Descriptor-Datei ist eine XML-Datei in der Grundeinstellungen eines Projekts angeben werden. Diese umfassen zum Beispiel den Namen, die Versionsnummer oder auch eine Beschreibung.

Einfaches Descriptor-Datei Beispiel  
XML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0">
    <id>examples.html.HelloWorld</id>
    <version>0.1</version>
    <filename>HelloWorld</filename>
    <initialWindow>
        <content>HelloWorld.html</content>
        <visible>true</visible>
        <width>400</width>
        <height>200</height>
    </initialWindow>
</application>

Dieses Beispiel definiert eine id, welche das Program identifiziert. Der version-Tag gibt die Versionsnummer an. Der filename-Tag gibt den Namen der Installationsdatei an und der initialWindow-Tag beinhaltet einfache Anweisungen für die Darstellung des Fensters. content gibt die Haupt HTML-Datei an, der Tag visible beschreibt, ob das Fenster sichtbar sein soll und die Breite und Höhe des Fensters werden mit width bzw. height angegeben.

HTML-Datei

Die HTML-Datei ist der Kern der Applikation. Hier wird der eigentliche Inhalt definiert bzw. per AJAX von einem Server abgerufen.

Hello World HTML-Datei  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<html>
    <head>
        <title>Hello World Titel</title>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript">
            function appLoad()
            {
            air.trace("Hello World Trace");
            }
        </script>
    </head>
    <body onLoad="appLoad()">
        Hello World
    </body>
</html>

Dieser Code ist einfaches HTML mit ein wenig JavaScript. Er gibt in der Anwendung den einfach Text Hello World aus. Außerdem wird im Debugger der Text Hello World Trace ausgegeben. Der Befehl air.trace ermöglicht es, Text im Debugger auszugeben, ist allerdings nur benutzbar wenn die AIRAliases.js eingebunden ist. Ansonsten muss die Funktion window.runtime-trace aufgerufen werden. Die Datei AIRAliases.js erstellt wie schon am Beispiel air.trace zu sehen ist leicht zu merkende Aliase. Will man zum Beispiel den Befehl air.Clipboard("Debug 1"); ohne die Aliase verwenden, muss die Funktion window.runtime.flash.Clipboard("Debug 1"); aufgerufen werden.

Applikation testen

Um ihre Applikationen zu Debuggen müssen Sie den so genannten AIR Debug Launcher, kurz ADL, über die Kommandozeile aufrufen. Die ADL Applikation kann im Ordner bin innerhalb des AIR SDK’s gefunden werden.

Öffnen Sie zunächst eine Kommandozeile:
Windows (98, 2000, XP, Server 2003)
Klicken Sie dafür auf Start und dann auf Ausführen, danach geben Sie in dem Fenster cmd ein und bestätigen die Eingabe mit OK.
Windows Vista und Windows Server 2008
Klicken Sie auf das Vista Logo in der Taskleiste und anschließend tippen Sie im Suchen-Feld cmd ein und drücken Enter.

In der Kommandozeile wechseln Sie zu dem Ordner in dem die Descriptor-Datei ist und tippen unter Windows Systemen z.B. ..\bin\adl.exe HelloWorld-app.xml ein und führen das Kommando durch Drücken der Enter Taste aus. Die Applikation sollte nun in einem neuen Fenster zu sehen sein.

AIR Installationsdatei erstellen

Wenn Sie ihr Programm weitergeben wollen, müssen Sie eine AIR Installationsdatei mit Hilfe des ADT Programms erstellen. Unter Windows Systemen ist dies eine Batch-Datei die Java voraussetzt. Unter Vista kann es passieren, dass der Befehl java nicht gefunden wird. In diesem Fall muss der Pfad zu der java.exe in der adt.bat verändert werden zu z.B. @C:\Programme\Java\jre1.5.0\bin\java.exe -jar "%~dp0\..\lib\adt.jar" %*

Um die Sicherheit für RIA so gut wie möglich zu machen, hat sich Adobe dazu entschlossen, dass alle Applikationen digital unterschrieben werden müssen. Für die Entwicklung ist es auch möglich einen „Selfsigned“-Key zu verwenden, allerdings wird dies auch bei der Installation der Applikation angemerkt und kann Benutzer davon abschrecken die Installation fortzusetzen.

Wie erstelle ich einen Selfsigned key?

Hierfür benötigen Sie erneut die Kommandozeile. Navigieren Sie z.B. ins SDK und geben dann das Kommando bin\adt.bat –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword ein. sampleCert.pfx wird in diesem Beispiel die Schlüssel-Datei heißen. Das Wort samplePassword sollte durch ein Passwort oder eine Passphrase ersetzt werden, dieses Passwort benötigen Sie später beim Erstellen der Applikationen und sollten Sie sich gut merken.

Wie erstelle ich jetzt die Applikation?

Zum eigentlichen Erstellen der Applikation benötigen Sie erneut die Kommandozeile und eine Schlüsseldatei. Damit das (Beispiel-)Kommando funktioniert müssen Sie im gleichen Ordner sein wie die Descriptor-Datei. ..\bin\adt.exe -package -storetype pkcs12 -keystore ..\sampleCert.pfx HelloWorld.air HelloWorld-app.xml HelloWorld.html AIRAliases.js Einige Attribute müssen je nach Bedarf verändert werden. sampleCert.pfx ist die Schlüssel-Datei, HelloWorld.air der Dateiname der Installationsdatei. Anschließend kommen der Descriptor und danach alle Dateien die von der Applikation benötigt werden. Die .air Datei kann nun per Doppelklick oder per Kommandozeile ausgeführt werden und über eine intuitive Oberfläche installiert werden.

Über den Autor: Thomas Schaaf
Thomas Schaaf ist Programmierer und Supportleiter der Komola UG. Die Projekte von Komola werden mit PHP 5, MySQL 5, xHTML, CSS sowie AJAX umgesetzt. Des weiteren vertreibt er die deutsche Version der beliebten PHP IDE VS.Php.
Profilseite betrachten

Kommentare: Einführung Adobe AIR

Neuen Kommentar schreiben
Merci, feines Turorial
Beantworten

Hallo Thomas,

ein dankeschön für dieses gute Tutorial. Klappt alles, verständlich, so macht es Spaß ...

Gruß,

Juppi

juppi am 18.04.2008 um 17:49