Die Anwendung wandelt Postleitzahlen, Orte und Straßennamen in Geokoordinaten um und zeigt diese in einer dreidimensionalen Google Karte an.

Um diesen Anwendung testen zu können, laden Sie diese herunter und importieren Sie in FlexBuilder.
Außerdem benötigen Sie das kostenlose Google Maps SDK. Dieses können Sie hier herunterladen. Inkludieren Sie die im SDK enthaltene SWC Datei in FlexBuilder über “Project > Properties > Flex Build Path > Library path > Add SWC”. Bitte fügen Sie ebenso einen gültigen Google API-Schlüssel sowie eine URL in die maps:Map3D Komponente im MXML Code ein.

• Link: Quickfinder Quellcode (Flex Import)

Mit Adobe AIR 1.5 lassen sich, ohne viel Aufwand und mit wenigen Zeilen Code, Bildschirmschoner unter Windows erstellen und installieren. Dieses Tutorial zeigt Ihnen, wie einfach es geht.

Der nachfolgende Code zeigt, wie einfach Sie einen Bildschirmschoner mit Adobe AIR erstellen können. Die AIR Applikation enthält eine Flash-Animation im SWF Format, die über SWFLoader eingebunden wird. Selbstverständlich können Sie diese gegen eine eigene SWF Datei austauschen.

AIR_Screensaver.mxml:

 <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showStatusBar="false" addedToStage="onInvokeEvent(event)" horizontalScrollPolicy="off" verticalScrollPolicy="off">
	<mx:Script>
		<![CDATA[
			private function onInvokeEvent(eventObject:Event):void
			{
				// Schaltet das Fenster in den Vollbildmodus
				stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

				// Registriert zwei EventListener, die auf Mouse bzw. Keyboard Eingaben reagieren
				stage.addEventListener(MouseEvent.MOUSE_DOWN, onUserPresent);
				stage.addEventListener(KeyboardEvent.KEY_DOWN, onUserPresent);
			}

			private function onUserPresent(eventObject:Event):void
			{
				// Beendet die Applikation sobald eine Keyboard- oder Maus- Taste gedrückt wurde
				NativeApplication.nativeApplication.exit();
			}

		]]>
	</mx:Script>

	<!-- Über SWFLoader, wird eine simple Flash Animation eingebunden und auf 100% der Fenstergröße skaliert -->
	<mx:SWFLoader x="0" y="0" id="animation" source="Animation.swf" scaleContent="true" width="100%" height="100%" autoLoad="true"/>
	<mx:Label x="10" y="10" text="Click the mouse button or press a key to exit." color="#FFFFFF" fontWeight="bold" alpha="0.75"/>

</mx:WindowedApplication>

Um diese Applikation als Screensaver unter Windows zu installieren, gehen Sie bitte wie folgt vor:

1. Laden und installieren Sie die AIR Datei
2. Rufen Sie das Installationsverzeichnisder Applikation auf
3. Suchen Sie die *.exe Datei und nennen Sie diese in *.scr um
4. Klicken Sie mit der rechten Maustaste auf die Datei und wählen Sie Installieren

Fertig! Ihre AIR Anwendung ist nun als Bildschirmschoner unter Windows installiert.

• Link: AIR_Screensaver.air
• Link: AIR_Screensaver Quellcode (ZIP Flex Import)

Bei der Erstellung von Adobe AIR Applikationen gibt es eine Reihe von Best practices, die Sie unbedingt beachten sollten. Nachfolgend sind die wichtigsten Empfehlungen für Sie zusammengefasst.

Die nachfolgenden Empfehlungen sollen Ihnen als Entwickler helfen, bessere Applikationen zu entwickeln. Bei Einhaltung dieser Best practices vermeiden Sie, dass Anwender sich von Ihrer Applikation nicht belästigt fühlt. Zwar bietet die Adobe AIR API, im Zusammenspiel mit dem Betriebsystem, eine ganze Reihe nützlicher Features, jedoch sollten Sie sparsam mit deren Einsatz umgehen.

1. Empfehlung: Autostart von Applikationen

NativeApplication.nativeApplication.startAtLogin = true;

Mithilfe dieser Zeile Code, können Sie veranlassen das Ihre Applikation automatisch gestartet wird sobald sich der Anwender am Betriebsystem anmeldet. Stellen Sie unbedingt sicher, dass sich diese Autostart-Option innerhalb Ihrer Applikation ein- und ausschalten lässt. Erlauben Sie dem Anwender auch die Autostart-Option gänzlich abzuschalten.

2. Empfehlung: Fenster die im Vordergrund bleiben

NativeWindow.alwaysInFront = true;

Diese Zeile Code bewirkt, dass ein beliebiges Fenster ständig im Vordergrund bleibt. Setzen Sie diese Option sparsam ein.

3. Empfehlung: Dateien mit einer Applikation assoziieren

NativeApplication.nativeApplication.setAsDefaultApplication("jpg");

Die Adobe AIR API erlaubt Ihnen, bestimmte Dateitypen mit Ihrer Applikation zu verknüpfen. D.h. in diesem Fall wenn der Anwender eine Datei mit der Endung jpg öffnet, wird Ihre Applikation automatisch gestartet. Alle jpg Dateien des lokalen Dateisystems sind damit mit Ihrer Applikation verknüpft.

Bitte beachten Sie bei der Entwicklung Ihrer AIR Applikation, dass eventuell bereits Verknüpfungen zwischen Dateitypen und anderen Applikationen, die auf dem System installiert sind, bestehen könnten.

Um die Verknüpfung zwischen Ihrer Applikation und einem bestimmten Dateityp wieder zu lösen, können Sie die nachfolgende Zeile Code verwenden.

NativeApplication.nativeApplication.removeAsDefaultApplication("jpg");

4. Empfehlung: Vollbild-Applikationen

stage.displayState = StageDisplayState.FULL_SCREEN_INTERACTIVE;

Mit dieser Zeile Code schalten Sie ein bestimmtes Fenster in den Vollbildmodus. Dies ist unter anderem hilfreich wenn Sie z.B. einen Bildschirmschoner mit Adobe AIR erstellen möchten. Sorgen Sie jedoch dafür, dass der Anwender den Vollbildmodus auch sehr einfach wieder verlassen kann.

5. Empfehlung: Custom chrome – Eigene Fenster verwenden

Mit Hilfe der Adobe AIR API lassen sich die Fenster Ihrer Applikation frei definieren. So können Sie z.B. die für Fenster üblichen Buttons wie Minimieren, Maximieren oder Wiederherstellen gänzlich abschalten oder die Form eines Fensters völlig frei bestimmen.

Aber Vorsicht! Ermöglichen Sie dem Anwender auf jeden Fall, dass sich die Fenster Ihrer Applikation weiterhin Minimieren, Maximieren und Wiederherstellen lassen. Sie können hierfür nachfolgende Methoden nutzen:

NativeWindow.close();
NativeWindow.minimize();
NativeWindow.maximize();

6. Empfehlung: Selbst erstellte Zertifikate für Applikationen

Jeder Adobe AIR Applikation benötigt ein digitales Zertifikat. Zwar können Sie dieses Zertifikat ganz einfach selbst erstellen, es empfiehlt sich jedoch ein solches Zertifikat zu kaufen, sofern Sie vorhaben Ihre Applikation kommerziell zu vertreiben. Ansonsten sieht der Anwender bei der Installation ein rotes Kreuz, dass auf das Fehlen eines vertrauenswürdigen Zertifikates hinweist.

7. Empfehlung: Taskleiste blinken lassen (Windows) und Dock-Icon hüpfen lassen (Mac OS X)

var type:String = NotificationType.CRITICAL;
stage.nativeWindow.notifyUser(type);

Hiermit können Sie die Taskleiste von Windows blinken lassen.

var type:String = NotificationType.CRITICAL;
var dock:DockIcon = NativeApplication.nativeApplication.icon as DockIcon;
dock.bounce(type);

Dieser Code hingegen ermöglicht es Ihnen, dass Programm Icon Ihrer Applikation im Dock Menü (Mac OS X) hüpfen zu lassen.

Diese Features, egal ob unter Windows oder Mac OS X, sollten mit Bedacht eingesetzt werden. Verwenden Sie diese Features nur, um den Anwender auf etwas hinzuweisen.

FlexBuilder 3 bietet derzeit insgesamt sechs Komponenten an, die speziell für die Entwicklung von AIR Applikationen vorgesehen sind. Diese Komponenten sind: FileSystemComboBox, FileSystemDataGrid, FileSystemHistoryButton, FileSystemList, FileSystemTree und HTML.

In diesem Tutorial beschäftigen wir uns mit der FileSystemTree und FileSystemDataGrid Komponente, zur Erstellung eines einfachen Dateibrowsers.

Die Komponenten FileSystemTree und FileSystemDataGrid

Die FileSystemTree Komponente ist der Lage, den Inhalt von Verzeichnissen in einer Baumansicht darzustellen. Die Komponente bietet zahlreiche Einstellungsmöglichkeiten. So lässt sich z.B. die Erweiterung der Dateien abschalten oder versteckte Dateien ein- oder ausblenden.

Die FileSystemDataGrid Komponente zeigt, genau wie die FileSystemTree Komponente, den Inhalt des lokalen Dateisystems an. Jedoch werden die Daten in einem sogenannten Datenraster (Data grid) visualisiert. Diese Komponente ist Tabellen-artig aufgebaut und zeigt z.B. Name, Typ, Größe, Erstellungsdatum und Modifizierungsdatum von Dateien und Verzeichnissen an, die mittles dieser Komponente dargestellt werden.

Die Applikation

Die Applikation sieht wie folgt aus, sobald sie diese mithilfe von FlexBuilder 3 kompilieren.

Ein paar Worte zum Quellcode und zum Aufbau der Applikation: Sobald die FileSystemTree Komponente verändert wird, also z.B. ein Klick auf ein Verzeichnis oder eine Datei erfolgt, wird die Methode RefreshDataGrid() aufgerufen, die, sofern ein Verzeichnis aufgerufen wurde, der FileSystemDataGrid Komponente das aktuell ausgewählte Verzeichnis der FileSystemTree Komponente übergibt. Die FileSystemDataGrid Komponente zeigt daraufhin alle Unteverzeichnisse und Dateien des ausgewählten Verzeichnisses an.

Beim Klick auf eine Datei oder ein Verzeichnis in der FileSystemDataGrid Komponente, wird die Methode fileSelected() aufgerufen, die Informationen über eine bestimmte Datei oder ein Verzeichnis ausgibt – je nachdem was der Anwender gewählt hat. Die Ausgabe dieser Informationen erfolgt mittels der Alert() Klasse.

Nachfolgend sehen Sie den kompletten Quellcode. Scrollen Sie ganz nach unten, um das FlexBuilder 3 ZIP Archiv für den direkten Import herunterzuladen.

FileBrowser.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>
	<![CDATA[
		import mx.events.FileEvent;
		import mx.controls.Alert;

		private function fileSelected(event:Event):void
		{
			if(DataGrid.selectedItems.length > 0)
			{
				var fileInfo:String = new String();
				var selectedFile:File = File(DataGrid.selectedItem);

				fileInfo  = "creationDate: " + selectedFile.creationDate + "n";
				fileInfo += "creator: " + selectedFile.creator + "n";
				fileInfo += "exists: " + selectedFile.exists + "n";
				fileInfo += "extension: " + selectedFile.extension + "n";
				fileInfo += "icon: " + selectedFile.icon + "n";
				fileInfo += "isDirectory: " + selectedFile.isDirectory + "n";
				fileInfo += "modificationDate: " + selectedFile.modificationDate + "n";
				fileInfo += "name: " + selectedFile.name + "n";
				fileInfo += "nativePath: " + selectedFile.nativePath + "n";
				fileInfo += "parent: " + selectedFile.name + "n";
				fileInfo += "size: " + selectedFile.size + "n";
				fileInfo += "type: " + selectedFile.type + "n";
				fileInfo += "url: " + selectedFile.url + "n";

				Alert.show(fileInfo, "Info");
			}
		}

		private function RefreshDataGrid(event:Event):void
		{
			if(File(FileTree.selectedItem).isDirectory)
			{
				DataGrid.directory = File(FileTree.selectedItem);
			}
		}
	]]>
</mx:Script>

<mx:HDividedBox x="0" y="0" width="100%" height="100%" top="10" right="10" bottom="10" left="10">

	<mx:FileSystemTree id="FileTree"
		height="100%"
		width="200"
		showHidden="false"
		showIcons="true"
		showExtensions="true"
		change="RefreshDataGrid(event)" />

	<mx:VDividedBox x="0" y="0" width="100%" height="100%">

		<mx:FileSystemDataGrid id="DataGrid"
			height="100%"
			width="100%" />

		<mx:Button label="Info"
			click="{fileSelected(event)}" />

	</mx:VDividedBox>		

</mx:HDividedBox>

</mx:WindowedApplication>

Dieses Tutorial können Sie als Flex ZIP Datei herunterladen und direkt in FlexBuilder importieren.

Link: FileBrowser.zip (FlexBuilder 3 ZIP Import)

Dieses Tutorial zeigt die Erstellung eines einfachen Download Managers mithilfe von Adobe AIR. Mit diesem Tool können Sie eine beliebige Datei von einem Webserver auf Ihr lokales Dateisystem übertragen.

Diese Applikation funktioniert wie folgt: In das Textfeld geben Sie einen beliebige URL zu einer Datei auf einem Webserver an. In diesem Beispiel, habe ich die URL einer FLV Datei voreingestellt. Beim Klick auf den Button beginnt der Download Prozess und wird mittels eines Fortschritsbalkens (ProgressBar) angezeigt. Die jeweilige Datei wird auf Ihrem Desktop gespeichert. Ist der Download abgeschlossen, können Sie erneut eine Datei zum Download angeben.

Die Applikation verwendet die Klasse DownloadManager, welche dem Source Code beiliegt (siehe ganz unten!).

DownloadManager.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">

<mx:Script>
	<![CDATA[
		import com.elad.framework.utils.DownloadManager;
		import mx.controls.Alert;

		private var DownloadDirectory:String;
		private var FileName:String;

		private function init():void
		{
			DownloadDirectory = File.desktopDirectory.nativePath;
		}

		private function downloadFile():void
		{
			DownloadBtn.enabled = false;
			DownloadPath.enabled = false;

			FileName = DownloadPath.text.substring(DownloadPath.text.lastIndexOf("/")+1, DownloadPath.text.length);				

		        var downloadHelper:com.elad.framework.utils.DownloadManager = new com.elad.framework.utils.DownloadManager();

		        downloadHelper.addEventListener(ProgressEvent.PROGRESS, onDownloadProgress);
		        downloadHelper.addEventListener(Event.COMPLETE, onDownloadComplete);
		        downloadHelper.addEventListener(IOErrorEvent.IO_ERROR, onDownloadIOError);

		        downloadHelper.downloadFileFromServer(DownloadPath.text, DownloadDirectory + "/" + FileName);
		}

	        private function onDownloadProgress(event:ProgressEvent):void
	        {
			var value:Number = event.bytesLoaded;
			var total:Number = event.bytesTotal;
			var precent:Number = Math.round(value*100/total);

			if (progressBar.minimum==0)
			{
				progressBar.minimum = value;
				progressBar.maximum = total;
			}

			progressBar.label = "Download "+precent+"%";
			progressBar.setProgress(value, total);
        	}

        	private function onDownloadComplete(event:Event):void
        	{
 			Alert.show("Download erfolgreich beendet!");
 			DownloadBtn.enabled = true;
			DownloadPath.enabled = true;
        	}

        	private function onDownloadIOError(event:IOErrorEvent):void
        	{
        		Alert.show(event.text);
        	}	

		]]>
	</mx:Script>

	<mx:ProgressBar id="progressBar" x="10" y="40" minimum="0" label="Download 0%" mode="manual" width="250"/>
	<mx:TextInput id="DownloadPath" x="10" y="10" width="250">
		<mx:text>http://adobe.edgeboss.net/download/adobe/adobetv/gotoandlearn/airupdate.flv</mx:text>
	</mx:TextInput>
	<mx:Button id="DownloadBtn" x="268" y="10" label="Download" click="downloadFile()"/>

</mx:WindowedApplication>

Dieses Tutorial können Sie als Flex ZIP Datei herunterladen und direkt in FlexBuilder importieren.

Link: AIR DownloadManager Quellcode (ZIP Flex Import)

“Echte Screenshots” zu machen, verbieten die Sicherheitsrichtlinien der Adobe AIR Runtime von Haus aus. Dies funktioniert nur auf Umwegen, aber nicht direkt mit Adobe AIR. Zwar könnte man meinen, dass man diese Sicherheitsrichtlinie umgehen kann indem man ein Applikationsfenster transparent bzw. halbtransparent einstellt und dann einen Screenshots erstellt, aber anstatt des durchscheinenden Desktops erhält man lediglich weiße Pixels.

Der nachfolgende Code zeigt, wie einfach Sie einen Screenshot Ihres Applikationsfensters, mitsamt den darin enthaltenen Elementen, als JPG-Datei speichern können.

AIR_Screenshot_Beispiel.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" initialize="init()">
<mx:Script>
<![CDATA[
import mx.core.Window;
import mx.controls.Alert;
import flash.display.Bitmap;
import com.adobe.images.JPGEncoder;
import flash.filesystem.*;

private var imageFile:File;
private var fileStream:FileStream;

private function init():void
{
	imageFile = File.desktopDirectory.resolvePath("Screenshot.jpg");
	fileStream = new FileStream();
	fileStream.addEventListener(Event.CLOSE, completeHandler);
	fileStream.addEventListener(IOErrorEvent.IO_ERROR, errorHandler);
}

private function snagPic():void
{
	var bitmapData:BitmapData = new BitmapData(this.width, this.height);
	bitmapData.draw(this.stage,new Matrix());

	var bitmap : Bitmap = new Bitmap(bitmapData);
	var jpg:JPGEncoder = new JPGEncoder(100);
	var ba:ByteArray = jpg.encode(bitmapData);

	fileStream.openAsync(imageFile, FileMode.WRITE);
	fileStream.writeBytes(ba);
	fileStream.close();
}

private function completeHandler(event:Event):void
{
	Alert.show("Pfad:n" + imageFile.nativePath, "Screenshot gespeichert!");
}

private function errorHandler(event:IOErrorEvent):void
{
	Alert.show(event.text, "Fehler!");
}
]]>
</mx:Script>
<mx:Button x="10" y="10" id="btn" label="Screenshot erstellen" click="snagPic()"/>
</mx:WindowedApplication>

Selbstverständlich können Sie diesen Quellcode, als Flex Import downloaden.
AIR_Screenshot_Beispiel.zip

Weiterführende Weblinks:

• http://blog.everythingflex.com – Do a Screen Capture with Adobe AIR (englisch)