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.
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.
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..
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:
Adobe Air umfasst auch SQLite, eine Datenbank-Engine zum lokalen Speichern und Abrufen von Daten.
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:
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:
CD
Um sicher zu sein, dass Sie sich in Ihrem Heimatordner befinden .Profil
. Wenn es nicht existiert, erstellen Sie es export PATH = $ PATH: / usr / bin
export PATH = $ PATH: / airsdk / bin
Quelle .profile
Unter Windows folgen Sie diesen Schritten:
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 einadt
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.
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.
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:
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.
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.