DeveloperIT-ProjekteSoftware

GUI-Entwicklung mit Macromedia FLex
Oberflächendesign

0 0 Keine Kommentare

Macromedia Flex vereinfacht das Entwickeln von Rich-Internet-Anwendungen (RIA). Internet Professionell zeigt, wie Sie gut bedienbare User-Interfaces fürs Web gestalten.

Benutzerfreundlich

GUI-Entwicklung mit Macromedia FLex

Entwickler im Umfeld von Web- und Rich-Internet-Anwendungen haben mit verschiedenen Problemen zu kämpfen. Neben fachlich komplexen Anforderungen seitens der Kunden stellt sich während der Architektur- und Anwendungserstellung immer wieder die Frage nach technischen Rahmenbedingen, in die sich die zu entwickelnde Applikation einfügen muss. Aber damit noch nicht genug, denn inzwischen gewinnt auch im Web die Bedienbarkeit immer mehr an Bedeutung.


Macromedia Flex bietet in diesem Kontext viele Möglichkeiten zur Steigerung der Usability. Mit Flex erstellte Applikationen bringen, wenn die richtigen Ansätze und Vorgehensweisen genutzt werden, eine deutliche Annäherung an das Verhalten von Desktop-basierten Anwendungen.


Zur Demonstration einiger dieser Konzepte nutzt der Artikel als Grundlage die Beispielanwendung ContactTool aus dem einführenden Artikel zu Flex »In Kontakt bleiben« in der Ausgabe 7/2004 von Internet Professionell.


Rückblick

GUI-Entwicklung mit Macromedia FLex

Zu Beginn daher ein kurzer Rückblick. Das Ergebnis des Artikels in der Ausgabe 7/2004 von Internet Professionell ist ein Tool, das es ermöglicht, einfache Adressdaten zu Personen zu erfassen, erfasste Daten zu aktualisieren oder zu löschen und eine Liste aller Daten in einem Datagrid darzustellen.


Die technische Realisierung erfolgt mit Hilfe einer MXML-Datei zur deklarativen Beschreibung des User-Interfaces beziehungsweise der Anordnung der Komponenten sowie einer Actionscript-Datei, in der die Client-seitige Applikationslogik für das Event-Handling und die Kontrolle des User-Interfaces hinterlegt ist.


Beide Teile der Anwendung interagieren durch eine Import-Beziehung mit Hilfe des mx:Script-Tags.


Die Anbindung an eine Datenquelle erledigt eine Cold-Fusion-Component, die ohne wesentliche eigene Logik als Schnittstelle zur Datenhaltungsschicht dient, welche durch MySQL realisiert ist. Alle Dateien der Original-Anwendung finden Sie ebenfalls auf der Heft-CD.


Look and Feel anpassen

GUI-Entwicklung mit Macromedia FLex

Die erste Frage der zukünftigen Benutzer einer Flex-Anwendung ist oftmals, ob sich das Flex- beziehungsweise Flash-typische Look and Feel der UI-Komponenten auch anpassen lässt. Die Antwort ist so kurz wie klar: Ja, das ist möglich.


Der mitgelieferte Satz an Komponenten im so genannten Halo-Look-and-Feel ist je nach gewünschtem Grad der Angleichung an bereits vorhandene Corporate Identitys oder andere Stilvorgaben mit verschieden aufwendigen Ansätzen anpassbar.


Styling

GUI-Entwicklung mit Macromedia FLex

Der einfachste und trotzdem sehr mächtige Ansatz ist das so genannte styling der Komponenten beziehungsweise der gesamten Anwendung. Dieser Begriff leitet sich von der verwendeten Technologie ab, denn styling basiert auf den im Web verbreiteten Cascading Stylesheets (CSS). Flex ist in der Lage, mit CSS-Definitionen zu arbeiten und ermöglicht mit Hilfe des Tags mx:Style verschiedene Vorgehensweisen:

– lokale Style-Definition

– externe Style-Definition

– Inline-Styles

– StyleManager-Klassen




Der einfachste Fall sind die lokalen Style-Definitionen. Hierbei sind die CSS-Beschreibungen in ein mx:Style-Tag-Paar gekapselt:



.myButtonStyle { fontSize: 12 }



...



styleName="myButtonStyle"

label="Loeschen" />




Das Beispiel definiert die Schriftgröße 12 unter dem Namen myButtonStyle. Ein Button im weiteren Verlauf der Anwendung nutzt diesen Style durch die Verwendung des Tag-Attributs styleName. Die Re-Definition der Optik bestimmter Typen von UI-Components ist natürlich ebenfalls möglich. Dazu werden innerhalb des mx:Style-Tags einfach nur Eigenschaften der Component-Klasse überschrieben:



Button { fontSize: 12 }


Auslagerung

GUI-Entwicklung mit Macromedia FLex

Im Hinblick auf eine Trennung von UI-Beschreibung, UI-Design und Anwendungslogik ist jedoch die Auslagerung in eine oder mehrere eigene Dateien empfehlenswert. Eine solche Modularisierung sorgt dafür, dass es auch im weiteren Verlauf der Entwicklung problemlos möglich ist, gewisse Design-Parameter anzupassen, ohne die eigentlichen Kernbestandteile der Anwendung ändern zu müssen:




Inline-Styles tragen ihre Bezeichnung auf Grund ihrer Platzierung innerhalb der eigentlichen Definitionen der UI-Komponenten:



fontSize="12" label="Loeschen" />




Diese Art der Style-Definition ist sicherlich von der Kürze der Schreibweise her sehr effizient und vermeidet auch die Notwendigkeit einer weiteren CSS-Datei oder lokaler Style-Definitionen. Unter Wartungs- und Architektur-Gesichtspunkten ist diese Vorgehensweise allerdings völlig untragbar, da jede Änderung einer Design-Vorgabe viele Änderungen der Kern-Applikation nach sich zieht.


Mit StyleManager-Klassen werden CSS-Eigenschaften global (auf Ebene der Anwendung) oder für bestimmte Typen von UI-Components definiert. Ein Beispiel ist das Setzen der Schriftart Arial für alle UI-Components einer Applikation mit Hilfe des Actionscript-Befehls StyleManager.styles.global.fontFamily = "Arial" innerhalb einer Methode, für die die Klasse mx.styles.StyleManager importiert wurde.


Styles anwenden

GUI-Entwicklung mit Macromedia FLex

Ein konkretes Anwendungsbeispiel sorgt nun dafür, dass sich die Optik der Contact-Tool-Anwendung ändert. Dazu wird ein weiteres Stylesheet mit Namen global_style.css definiert und in die Applikation eingebunden.

In der CSS-Datei selbst werden neben einigen globalen Eigenschaften auch die Eigenschaften der Application-Klasse überschrieben. Da die MXML-Tags alle auf Klassen in Actionscript abgebildet werden, ändern diese Definitionen letztlich die Eigenschaften des mx:Application-Tags:

Application {

themeColor:haloBlue;

backgroundImage:"blue.swf";

backgroundSize:"100%";

backgroundColor:#23476A;

}




Besondere Erwähnung verdient hier noch die Eigenschaft themeColor. Diese setzt die Hintergrundfarbe einer Komponente und ist mit einem von vier seitens Macromedia definierten Werten vorbelegbar. Das Resultat der zweiten CSS-Datei ist im unten stehenden Kasten im oberen rechten Bild zu erkennen. Die Optik ist deutlich ins Blaue verschoben und die Darstellung der Komponenten hat sich ein wenig geändert.


Themes, Skins&Co.

GUI-Entwicklung mit Macromedia FLex

Die Möglichkeiten des Stylings sind vielfältig, trotz allem aber begrenzt. Eine Steigerung stellen Themes dar. Unter Themes versteht die Flex-Terminologie das Erzeugen einer so genannten SWC-Datei, in der ein geändertes Look and Feel für einzelne oder alle UI-Komponenten der Flex-Klassenbibliothek vorgehalten ist. SWC-Dateien sind Flash-Components, die mit Hilfe der Flash-Autorenumgebung erzeugt werden.

Zum Erzeugen eigener Themes ist die Datei HaloTheme.fla im Installationsordner von Flex ein guter Startpunkt. Eine genaue Untersuchung der Library dieser FLA-Datei in Flash MX 2004 bringt grafische Schnipsel der wesentlichen Komponenten des Halo-Sets zu Tage, die Sie leicht bearbeiten und verändern können.

Als Demonstration des Konzepts befindet sich das Theme KaiTheme.swc im Ordner themes (im Listing-ZIP-File auf der Heft-CD) und wird in Version 4 des Contact-Tools verwendet. Dort ist die Hintergrundfarbe der Anwendung im Theme auf Grün gesetzt worden, so dass die Applikation nun ohne Nutzung eines weiteren Stylesheets optisch verändert erscheint. Die SWC-Datei erzeugen Sie aus der FLA-Datei, indem Sie das HaloTheme-Symbol der Bibliothek in eine SWC-Datei exportieren. Beim Einbinden des Themes ist zu beachten, dass die Dateien nicht im Applikationsordner liegen dürfen:



theme="../themes/KaiTheme.swc">




Skinning ist eng verwandt mit den Themes, da die Änderungen am Standard-Halo-Look-and-Feel so genanntes Asset-Skinning darstellen. Programmatisches Skinning durch die Erstellung einer Actionscript-Klassenbibliothek ist ebenfalls möglich.

Ähnliches gilt für das Erzeugen eigener UI-Components. Auch das ist möglich, wenn man Flex verlässt und Flash MX 2004 nutzt. Ein Beispiel dafür ist der Doppelslider aus dem Macromedia Flexstore.


History-Management

GUI-Entwicklung mit Macromedia FLex

Ein sehr eindrucksvolles Feature ist das eingebaute History-Management von Flex. Dieses erlaubt dem Benutzer die Navigation innerhalb der Flex-Anwendung mit Hilfe der Browser-Buttons. Besonders sinnvoll einsetzbar ist das Feature in Navigations-Containern wie mx:Accordion, mx:TabNavigator oder mx:ViewStack, da durch diese Container oftmals mehrstufige Prozesse zum Erfassen und Bearbeiten von Daten abgebildet werden. In der Contact-Tool-Applikation sind die beiden Screens in einen ViewStack-Container eingefasst und werden je nach Bedarf durch die Property selectedChild des ViewStacks aktiviert oder deaktiviert. Das History-Management in ViewStacks ist per Default ausgeschaltet und lässt sich mit dem Tag-Attribut historyManagement="true" problemlos bereitstellen.


Es ist jedoch ratsam, die Verwendung des History-Managements vom jeweiligen Applikationskontext abhängig zu machen. Gerade bei der Contact-Tool-Anwendung ist der Nutzen fraglich, da es sich in diesem Fall mehr oder weniger um einfache Datenerfassung auf einem Formular handelt und die Prüfung der Applikation auf eventuelle Randbedingungen und Wechselwirkungen mit History-Funktionen deutlich größere Aufwände gegenüber der strikten Benutzerführung durch die Anwendung entstehen lassen würde.


Drag and Drop

GUI-Entwicklung mit Macromedia FLex

Ein Standard-Feature moderner Applikationen ist heutzutage die Unterstützung von Drag and Drop. In der Contact-Tool-Anwendung wird Drag and Drop bislang nicht benutzt. Eine sinnvolle Anwendung ist das Löschen von Datensätzen durch das Ziehen auf ein Papierkorbsymbol. Beim Ziehen des Eintrags aus dem DataGrid wird das Objekt als Maus-Cursor dargestellt und beim Loslassen über dem Papierkorb sowohl aus dem DataGrid als auch über das RemoteObject und die dahinter liegende CFC aus der Datenbank gelöscht.


Der erste Schritt ist das Einfügen eines Symbols für den virtuellen Papierkorb. Dieses Beispiel nutzt dazu eine PNG-Datei, die über ein mx:Image-Tag eingebunden wird. Das Tag bietet generell zwei Möglichkeiten zur Definition eines Bildobjekts. Die erste Vorgehensweise basiert auf dem Einkompilieren der Grafikdatei in die zur Laufzeit generierte SWF-Datei. Dazu fügen Sie dem Tag das Attribut source mit dem Wert "@embed('dateiname.png')" hinzu. Die Auslassung des embed-Attributs führt zu einer Referenzierung der Grafik und zu einem Einbinden der Datei zur Laufzeit.


Das Papierkorbsymbol fügt sich sinnvoll in die Buttonleiste unter dem DataGrid ein:



source="@Embed('delete_btn.png')" />




Das Einfügen in die die Buttons tragende ControlBar sorgt dafür, dass das Symbol korrekt ausgerichtet unter dem Grid ausgegeben wird.

Das Attribut dragEnabled="true" im DataGrid schaltet die Drag-and-Drop-Fähigkeit des Grids ein. Zieht der Benutzer eine Grid-Zeile mit gedrückter Maustaste, erzeugt Flex im Hintergrund ein DragSource-Objekt, das im Ziel des Drag-Vorgangs genutzt wird, um weitere Behandlungen der Daten anzustoßen.


Event-Handling

GUI-Entwicklung mit Macromedia FLex

Der mx:Image-Tag bietet nun weitere Attribute, um Drag-and-Drop-Vorgänge bearbeiten zu können. In diesen Attributen werden Actionscript-Methoden spezifiziert, die das Event-Handling übernehmen:



"doDragEnter(event)"

dragExit="doDragExit(event)"

dragOver="doDragOver(event)"

dragDrop="doDragDrop(event)"

source="@Embed('delete_btn.png')"/>




Die Methoden doDragEnter(event), doDragExit(event) sowie doDragOver(event) sind sehr einfach gehalten:

function doDragEnter(event) {

event.handled="true";

}

function doDragExit(event) {

event.target.hideDropFeedback();

}

function doDragOver(event) {

event.target.showDropFeedback();

}




Sinn dieser Methoden ist es, sicherzustellen, dass das Event als bearbeitet gekennzeichnet wird beziehungsweise mit hideDropFeedback() und showDropFeedback() der Inhalt des Drag-and-Drop-Vorgangs als Cursor dargestellt wird, solange der Benutzer die Maustaste gedrückt hält.


Die Methode doDragDrop(event) stößt nun die eigentliche Aktion an, die ausgeführt wird, wenn der Benutzer an der richtigen Stelle die Maustaste löst. Über das dem Event zugeordnete DragSource-Objekt wird die selektierte und gezogene Zeile in der lokalen Variablen item gehalten. Die Methode removeItemAt(?) löscht den Eintrag aus dem Grid, danach sorgt deleteContact(?) auf dem RemoteObject für das Löschen des Eintrags aus der Datenhaltungsschicht. Der Aufruf von deleteContact(?) stößt im Hintergrund nach Abarbeitung den ResultHandler der Methode deleteContact(?) an, der wiederum nach erfolgtem Löschen eine Statusmeldung in einer Alert-Box ausgibt.

function doDragDrop(event) {

doDragExit(event);

var item = event.dragSource.

dataForFormat("source").

selectedItem;

event.target.

removeItemAt(event.target.

selectedIndices);

ctool_ro.

deleteContact(item.CUS_ID);

}


Fazit

GUI-Entwicklung mit Macromedia FLex

Flex bietet viele Ansätze, gut bedienbare und optisch ansprechende Applikationen zu entwickeln. Mit den hier dargestellten Vorschlägen sind die Möglichkeiten bei weitem noch nicht erschöpft. Lassen Sie sich inspirieren und erweitern Sie das Contact-Tool um neue Features.