Adobe Air (wiwobooks.com Release)
Hallo-Welt-Beispiele gewöhnt sind, finden Sie hier ein etwas praxisnäheres Beispiel, das Ihnen einerseits bereits die Möglichkeit der kreativen Entfaltung gibt, andererseits verdeutlicht, mit wie wenig Aufwand eine ansprechende AIR-Anwendung erstellt werden kann.
4.1 Erstellung der Anwendung
Wir erstellen hierzu eine Art digitale Visitenkarte mit Ihren Kontaktdaten und einem Foto, die Sie als AIR-Anwendung gepackt per E-Mail versenden oder auf Ihrer Website zum Download anbieten können. Wir bedienen uns hierzu einer mit XHTML und CSS erstellten Vorlage, die wir anschließend zu einem AIR-Installationspaket verschnüren werden. AIR bietet weberfahrenen Entwicklern mit den verschiedensten Hintergründen die Möglichkeit, ihre individuellen Fertigkeiten bei der Erstellung von AIR-Anwendungen einzubringen. Im Beispiel dieses Kapitels, einer digitalen Visitenkarte, wollen wir uns der einfacheren Gruppe der Webtechnologien zuwenden: XHTML, CSS und DOM. Abbildung 4.1 vermittelt, wie das Endresultat aussehen soll: ein Kasten mit Kontaktinformationen in Textform, dazu ein Foto, das teilweise darübergelegt ist.
Den Adressblock und das Foto fügen wir in XHTML ein, die Positionierung geschieht mit Cascading Style Sheets (CSS). Wer sich schon einmal mit standardkonformer Webentwicklung mithilfe von XHTML und CSS beschäftigt hat, weiß, dass zeitgemäßes Webdesign alles andere als anspruchslos ist. Allerdings spielen bei der Entwicklung von AIR-Anwendungen mit XHTML und CSS die für die Webentwicklung wichtigen Aspekte, die der konsistenten Anzeige der Inhalte in verschiedenen Browsern dienen, eine untergeordnete Rolle – die Inhalte einer AIR-Anwendung laufen schließlich stets in der gleichen, AIR-internen WebKit-BrowserEngine. Doch bevor wir richtig loslegen, werfen wir einen Blick auf die nötigen Vorbereitungen.
Abbildung 4.1 Die fertige digitale Visitenkarte
4.1.1 Vorbereitung
Sie benötigen als Voraussetzung für unser Beispiel eine installierte Version von AIR SDK. Falls Sie noch kein AIR SDK installiert haben, wäre dies ein passender Zeitpunkt für die Lektüre des Kapitels 3, »Installation von Adobe AIR«: Weil hier die Erstellung der AIR-Anwendung im Mittelpunkt steht, gehe ich darüber hinaus davon aus, dass Sie bereits über ein Profilfoto verfügen, das wir in der digitalen Visitenkarte verwenden werden. Wenn Sie diese besonders interessant machen wollen, verwenden Sie hierzu eine (z. B. mit Fireworks erstellte) PNG-Grafik mit unregelmäßigem Rand und transparentem Hintergrund. Erstellen Sie für Ihr Mini-Projekt ein eigenes Verzeichnis, und legen Sie dort die Grafik in einem Unterverzeichnis ab. Sie können jeden beliebigen Verzeichnisnamen wählen, wenn Sie jedoch dem Beispiel folgen wollen, benennen Sie das Projektverzeichnis air-dvk (das steht für AIR Digitale Vistenkarte) und das Unterverzeichnis mit dem Bild images. Falls Sie Ihrer digitalen Visitenkarte ein eigenes Icon verpassen wollen, kopieren Sie zusätzlich bis zu vier Grafiken in ein Unterverzeichnis icons Ihres Projektordners. Folgende Pixelabmessungen sind von AIR für Icons vorgegeben:
16 × 16 Pixel
32 × 32 Pixel
48 × 48 Pixel
128 × 128 Pixel
Als Grafikformat haben Sie die Wahl zwischen JPEG, GIF oder PNG. Es ist ratsam, im Dateinamen die Größe der Icon-Dateien widerspiegeln zu lassen, z. B. icon_ 16.png oder myAppIcon_128.gif.
4.1.2 Beschreibungsdatei (Application Descriptor)
Alles, was die grundlegenden Dinge Ihrer AIR-Anwendung ausmacht, wird in einer XML-Beschreibungsdatei definiert. Sie können diese als eine Art Meta-Datei für Ihre Anwendung auffassen, weil in ihr alle notwendigen Eckpunkte der Anwendung definiert werden.Wenngleich Sie den Namen der Beschreibungsdatei frei wählen können, so ist die Benennungskonvention Anwendungsnameapp.xml doch bereits weitverbreitet. Das im AIR SDK enthaltene AIR Development Tool (ADT), mit dem die AIR-Anwendungen zu einem Installationspaket geschnürt werden, benennt diese Datei in jedem Fall in application.xml um. Es hilft jedoch der Übersicht, wenn Sie während der Entwicklung einen Namen wählen, der mit ihrer Anwendung zu tun hat. In Tabelle 4.1 finden Sie eine Übersicht über die mithilfe der Beschreibungsdatei definierten Eigenschaften.
XML-Tag
application
id
filename
name
version
description
copyright
initialWindow
content
(in initialWindow )
title
(in initialWindow )
systemChrome
(in initialWindow )
Zweck
das Stammelement der XML-Datei (benötigt)
eine eindeutige
Weitere Kostenlose Bücher