Einführung in Adobe Air

In diesem Lernprogramm werden Sie mit Adobe Air vertraut gemacht, einem Framework zum Erstellen von Rich-Internet-Anwendungen. Diese erste Einführung zeigt, wie Sie eine einfache Anwendung mit Html / Js-Technologien erstellen.

Was ist Adobe Air??

Adobe Air ist ein Framework, mit dem Sie Desktop-Anwendungen erstellen können.
Adobe Air-Anwendungen basieren auf zwei Technologien: Html / Js und Flash.
Entwickler können sich entscheiden, ob sie eine Desktop-Anwendung über Html / Js, Flash oder Flex erstellen möchten. Nach einem kurzen Überblick über die Architektur erstellen wir eine einfache Anwendung mit Html / Js.

Schritt 1 - Architektur einer Luftanwendung

Eine Air-Anwendung wird mit einer Laufzeitkomponente ausgeführt, die den in der Air-Datei enthaltenen Code ausführt. Wie Sie in der Abbildung sehen können, stellt Adobe die Laufzeitkomponente für die drei Betriebssysteme Mac OS X, Windows (XP / Vista) und Linux bereit (Hinweis: Die Linux-Version befindet sich noch in der Beta-Phase). Die Abbildung lässt vermuten, dass die beiden Ansätze exklusiv sind. Entweder Sie entwickeln in HTML / JS oder Flash. Da die Luftlaufzeit eine Überbrückung zwischen Javascript- und ActionScript-Engines ermöglicht, können Sie Javascript-Code von einem SWF-Code aus aufrufen, HTML / DOM über ActionScript bearbeiten usw..

Schritt 2 - Funktionalitäten auf Betriebssystemebene

Adobe Air Runtime ist nicht einfach eine Integration von HTML / JS- und Flash-Technologien. Die Laufzeitumgebung bietet eine Reihe von APIs, mit denen Luftanwendungen mit Betriebssystemfunktionen wie der folgenden interagieren können:

  • Datei lesen und schreiben
  • Native Windows / Menüs erstellen und verwalten
  • Abruf von Internetressourcen

Adobe Air umfasst auch SQLite, eine Datenbank-Engine zum lokalen Speichern und Abrufen von Daten.

Schritt 3 - Installation

Um die unten beschriebenen Schritte zu wiederholen, müssen Sie die Laufzeitumgebung und das SDK (Software Development Kit) installieren, mit dem Sie Luftanwendungen erstellen können.
Die Laufzeit kann von http://www.adobe.com/go/getair heruntergeladen werden. Führen Sie einfach das Installationsprogramm aus und folgen Sie den Anweisungen.
Das SDK kann unter folgender Adresse heruntergeladen werden: http://www.adobe.com/go/getairsdk
Entpacken Sie das SDK und legen Sie die Ordner an dem von Ihnen bevorzugten Ort ab (Macosx-Benutzer müssen ein .dmg-Image einhängen). Denken Sie daran, wo sich das SDK befindet. Wir bezeichnen es als SDKPATH.
Das Verzeichnis des SDK sollte folgendermaßen aussehen:

Schritt 4 - Konfiguration

Das SDK muss konfiguriert werden, sonst findet das Betriebssystem die auszuführenden Befehle nicht.
In der Tat, wenn Sie eine Shell einen Typ öffnen adl, Ihr Betriebssystem sagt etwas wie "Befehl nicht gefunden". Dies funktioniert nur, wenn Sie in das bin-Verzeichnis des SDK-Ordners wechseln. Da wir Build- und Testbefehle von jedem Ordner aus ausführen möchten, müssen Sie das SDK konfigurieren. Es ist wichtig, den absoluten Pfad des bin-Verzeichnisses im SDK-Ordner korrekt einzugeben.

Gehen Sie auf einem Mac OS X folgendermaßen vor:

  1. Öffnen Sie das Terminal (/ Programme / Dienstprogramme / Terminal)
  2. Art CD Um sicher zu sein, dass Sie sich in Ihrem Heimatordner befinden
  3. Suchen Sie nach einer Datei mit dem Namen .Profil. Wenn es nicht existiert, erstellen Sie es
  4. Suchen Sie nach einer ähnlichen Zeile: export PATH = $ PATH: / usr / bin
  5. füge eine weitere Zeile hinzu: export PATH = $ PATH: / airsdk / bin
  6. Wenn der Pfad zum Air-SDK weiße Leerzeichen enthält, umschließen Sie es mit einem doppelten Anführungszeichen (z. B. "/ my pathtosdk / air").
  7. Schließen Sie das Terminal und öffnen Sie es erneut. Oder geben Sie ein Quelle .profile

Unter Windows folgen Sie diesen Schritten:

  1. Klicken Sie mit der rechten Maustaste auf Arbeitsplatz, und wählen Sie Eigenschaften
  2. Wählen Sie die Registerkarte Erweitert aus und klicken Sie auf die Schaltfläche Umgebungsvariablen
  3. Wählen PFAD aus der unteren Liste und fügen Sie den Pfad zum sdk-Ordner am Ende hinzu (siehe Abbildung).

Um zu testen, ob die Konfiguration erfolgreich ist, öffnen Sie eine Shell und geben Sie das ein
adt Befehl.
Das Ergebnis sollte folgendes sein:

Diese Antwort bedeutet technisch, dass wir dem Befehl eine falsche Anzahl von Parametern zur Verfügung gestellt haben
bedeutet, dass das SDK korrekt installiert und konfiguriert wurde.

Schritt 5 - Projekterstellung

Nun erstellen wir unseren Projektordner. Wir nennen es myTest und erstellen zwei Dateien: myTest.html und myTest.xml.

Die XML-Datei ist die Konfigurationsdatei, mit der die Luftanwendung eingerichtet werden kann. Öffnen Sie es mit Ihrem bevorzugten Editor und fügen Sie den folgenden Code ein.


Die erste Zeile ist ein Standardheader für XML-Dateien. Die zweite Zeile beginnt mit der Definition unserer Anwendung. Das Ich würde ist die eindeutige Kennung Ihrer Anwendung. In diesem Fall habe ich meinen Domainnamen vorangestellt. Das Dateiname ist der Name der ausführbaren Datei, die wir generieren werden. Name ist der Name der Anwendung, wie vom Benutzer gesehen. Das Beschreibung ist ein Ausschnitt, der während der Installation zur Beschreibung der Anwendung angezeigt wird. Ausführung gibt die Versionsnummer Ihrer App an, in unserem Fall 0,1.
Nachdem Sie Metadaten über die Anwendung festgelegt haben, gehen wir zur Definition der Grafiken, eingeschlossen in der Etikett.

Zeile 10 gibt die Stammdatei an, dh die Datei, die beim Start in die Luftanwendung geladen werden soll. In diesem Fall die myTest.html, die wir später zeigen werden. Titel ist die Zeichenfolge, die im oberen Teil des Fensters angezeigt wird. Das systemChrome Gibt an, ob Ihre Anwendung über den Standard-Chrome (den des Hosting-Betriebssystems) verfügt oder über keinen. Chrome ist eine Reihe von Standardwerkzeugen, mit denen ein Fenster in einer Desktop-Umgebung bearbeitet werden kann, nämlich die Titelleiste, Schaltflächen zum Schließen / Ändern der Größe, Rahmen und der zu ändernde Bereich.

Das Hintergrund einer Air-Anwendung kann auf transparent gesetzt werden, diese Option ist jedoch nur gültig, wenn für Chrome keine festgelegt ist. Sichtbar ermöglicht Ihnen zu entscheiden, ob Ihre Anwendung beim Start angezeigt werden soll. Dies ist nützlich, wenn der Startvorgang einige Zeit in Anspruch nimmt und Sie den Benutzern die Grafiken nicht anzeigen möchten.
Die Bedeutung von Tags minimierbar, maximierbar und der Größe veränderbar sollte intuitiv sein und keine Erklärung benötigen.

Schauen wir uns jetzt myTest.html an, die unsere Anwendung enthält.

Wie Sie sehen, handelt es sich um eine Standard-HTML-Seite mit einem Kopf und einem Körper. Der Kopf enthält einen Titel und der Körper hat ein einfaches Div mit zentriertem Text.

Schritt 6 - Ausführen der Anwendung

Bevor wir die Anwendung als .air-Datei packen, testen wir sie, um zu prüfen, ob sie das erwartete Ergebnis liefert.
Das Werkzeug verwenden wir id adl, Dadurch können unsere Air-Anwendungen ohne Installation ausgeführt werden.
Lassen Sie uns eine Shell öffnen und zu dem Verzeichnis wechseln, das unsere myTest-Dateien enthält (sowohl html als auch xml).
Geben Sie dann den folgenden Befehl ein:

 adl myTest.xml 

Dadurch wird die Anwendung mit dem Chrome des aktuellen Betriebssystems ausgeführt. Auf einem MacOs sollte das so aussehen.

Unter Windows XP sieht die Anwendung folgendermaßen aus:

Sie können bezweifeln, dass diese Anwendung nur mit HTML funktioniert. Lassen Sie uns Javascript testen.
Wir ändern das myTest.html Datei wie folgt.

In Bezug auf die vorherige Version haben wir ein Skript-Tag hinzugefügt, das die Definition einer einfachen Javascript-Funktion enthält, meine Funktion (),Aufrufen einer Warnmeldung (Zeilen 4-8). Wir haben dem Körper eine Schaltfläche hinzugefügt (Zeile 12). Die mit dem Klicken der Schaltfläche verknüpfte Aktion ist die popme () Funktion. Speichern Sie die Datei und führen Sie sie mit demselben Befehl aus der Shell aus, adl myTest.xml

Wenn wir auf die Schaltfläche klicken, sollten wir etwa Folgendes sehen:

Schritt 7 - Bereitstellung der Air-Anwendung

Sobald Ihre Anwendung bereit für die Bereitstellung ist, können wir die .air-Datei erstellen. Hierbei handelt es sich um das Distributionspaket für Adobe Air-Anwendungen.
Diese Datei, die auf der ZIP-Komprimierung basiert, enthält alles, was zur Installation von Luftanwendungen erforderlich ist.
Ein Luftantrag muss mit einem Zertifikat unterzeichnet werden. Bei weit verbreiteten Anwendungen ist es vorzuziehen, ein Zertifikat von einer Behörde wie thawte zu erhalten.
Unser Zweck ist nur das Testen, daher reicht ein selbstsigniertes Zertifikat aus. Die Erstellung eines Zertifikats kann über die erfolgen adt Befehl. Öffnen Sie eine Shell, wechseln Sie in den Projektordner und geben Sie folgenden Befehl ein:

 ADT -certificate -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass 

ADT -Zertifikat -cn ist einfach die vom Befehl geforderte Syntax. In der folgenden Tabelle werden die für den Befehl angegebenen Werte erläutert.

Parameterwert Erläuterung
myzertifikat Der Name des Zertifikats
1024-RSA Der Verschlüsselungsschlüssel des Zertifikats
mycertificatefile.p12 Die Datei, in der das Zertifikat gespeichert ist
mysecretpass Das Passwort, das Ihr Zertifikat schützt

Wenn Sie den Projektordner überprüfen, finden Sie eine neue Datei mit dem Namen mycertificate.p12 Dies ist das selbstsignierte Zertifikat, das wir zu Recht erstellt haben.
Der Projektordner sollte jetzt drei Dateien enthalten (siehe Abbildung unten).

Jetzt haben wir alles, um unsere .air-Datei zu erstellen. Wir müssen einen ziemlich langen Shell-Befehl ausführen. Keine Panik Ich erkläre jedes einzelne Wort. Zuerst sehen wir es uns an.

ADT -Paket -Storetyp pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html

Wie oben ADT-Paket ist die Syntax des Befehls, Storetyp gibt das Format des Schlüsselspeichers an. Dies ist ein ziemlich technischer Parameter. Um es kurz zu machen, da wir ein Zertifikat im pkcs12-Format erstellt haben, müssen wir es dem Compiler mitteilen. Als nächstes legen wir die Zertifikatsdatei über das fest -Schlüsselspeicher Parameter. Schließlich geben wir den Namen der resultierenden .air-Datei, die xml-Datei mit den Anwendungseinstellungen und die .html-Einstiegspunktdatei an. Wenn Sie diesen Befehl ausgeben, werden wir in diesem Fall nach dem Passwort gefragt, das Sie bei der Erstellung des Zertifikats ("mysecretpass") eingegeben haben.
Wir haben jetzt eine .air-Datei, das das Vertriebsformat unserer Anwendung ist. Wenn wir darauf doppelklicken, beginnt der Installationsvorgang.
Die Installation umfasst zwei einfache Schritte (siehe unten).

Beachten Sie, dass, da wir das Zertifikat selbst signiert haben, die veröffentlichte Identität der Anwendung UNBEKANNT ist.

Im zweiten Schritt können Sie angeben, wo die Anwendung installiert werden soll und ob sie nach Abschluss der Installation gestartet werden soll.

Fazit

In diesem Lernprogramm haben wir das Adobe Air-Framework vorgestellt und unsere erste Adobe Air-Anwendung mit Html / Js erstellt.
In den nächsten Episoden werden wir sehen, wie dieselbe Anwendung mit Flex und Flash CS3 erstellt wird.

  • Abonnieren Sie den NETTUTS-RSS-Feed für mehr tägliche Webentwicklungsberichte und -artikel.