learn-air.de

FlexBuilder 3 besitzt für die Entwicklung von AIR Applikationen spezielle Komponenten. Erfahren Sie wie Sie einen Dateibrowser erstellen, der den Inhalt Ihres  Dateisystems und Informationen über Dateien und Verzeichnisse anzeigt.

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)