Zurück zur Übersicht

Hausaufgabe Mensch-Maschine-Interaktion

UIML - User Interface Markup Language

von Korbinian Zollner

Wozu brauchen wir UIML?

Die Zeiten, in denen die Anzahl der verschiedenen Typen von Endgeräten noch überschaubar war, in denen eine Anwendung nur für ein Endgerät produziert wurde, ja in denen die meisten Menschen ohnehin höchstens ein Endgerät ihr Eigen nennen konnten und der Begriff User Interface noch wie Zukunftsmusik klang, sind längst vorbei. Heutzutage sind wir beinahe überall von Automaten umgeben, die uns mit grafischen Oberflächen Prozesse wie 'Geld abheben', 'sich einen Kaffee herauslassen' oder 'ein Bahnticket erwerben' erleichtern sollen. Laut Statistik hatten im Jahr 2003 bereits 72,5 % aller deutschen Privathaushalte ein Mobiltelefon. Beinahe dreiviertel aller bundesdeutschen Haushalte verfügt über einen PC, die Hälfte sogar über einen Anschluss an das Internet. 11,7 % sind sogar unterwegs mit einem Computer versorgt. (http://www.destatis.de/basis/d/evs/budtab6.php)
Im Gegensatz zu den Zeiten des Beginns der Verbreitung von Personalcomputern, die ihren Erfolg dem Aufkommen einfacher grafischer Benutzeroberflächen zu verdanken haben, existieren nun eine Vielzahl von verschiedenen Oberflächen, durch die der Endbenutzer navigieren soll. Ähnliche Dienste sollten auch ähnlich aufgebaut sein, um dem Benutzer den Umgang mit der Dienstleistung zu erleichtern, Konsistenzen zu schaffen und eine effiziente Handhabung zu bieten. Nun stelle man sich vor, man möchte einen Dienst auf drei verschiedenen Plattformen anbieten: einem Desktop-PC, einem Mobiltelefon und einem PDA. Zum Realisieren der Benutzerschnittstelle wählen sie im Falle des Desktop-PCs die Programmiersprache Java aus. Für das Mobiltelefon verwenden sie Wireless Markup Language (WML) und beim PDA bietet sich die Programmiersprache C an. Abgesehen davon, dass sie alle drei Sprachen beherrschen müssen, entsteht ein riesiger Aufwand für die dreifach zu verrichtende Arbeit (vgl, http://mit.iddl.vt.edu/courses/cs5244/coursecontent/mod5/lesson2/uiml2.html).

Sie brauchen also eine plattformunabhängige Sprache, mit der sie die Dienstleistung so erstellen können, dass sie sich den Restriktionen des Endgeräts (z.B. kleiner Bildschirm und niedrigere Auflösung bei Mobiltelefonen) anpasst und sich harmonisch in die Umgebung des jeweiligen Endgeräts einfügt. Aus diesem Grund wurde 1998 UIML (User Interface Markup Language) von Harmonia mit dem Ziel entwickelt, "ein besseres Werkzeug für die Erstellung von Benutzeroberflächen zu ermöglichen, das zu allen heutzutage verfügbaren Plattformen kompatibel sein soll, aber zusätzlich den Benutzern von heute erlauben soll, grafische Oberflächen zu entwickeln, die auch auf Endgeräten lauffähig sein sollen, die es heute noch gar nicht gibt. (vgl. http://www.uiml.org)

Wie funktioniert UIML?

UIML ist eine Auszeichnungssprache, die auf XML basiert. Mit XML als Basis wird die Trennung von Inhalt und Design auf dem jeweiligen Endgerät konsequent umgesetzt. Das tatsächliche Erscheinungsbild der Anwendung wird in letzter Instanz nicht vom Entwickler, sondern durch die Spezifikationen des Endgerät bestimmt. XML gewährleistet zudem, dass das Programm stets erweiterbar und flexibel bleibt. Als Entwickler ist der Aufwand, UIML zu erlernen nicht allzu hoch, da die Struktur von XML bereits bekannt sein sollte und auch von Nichtprogrammierern zu verstehen ist. Zudem ist XML bereits international standardisiert und bei den Usern akzeptiert.
In UIML können über die verschiedenen Tags die unterschiedlichen Einheiten der grafischen Oberfläche miteinander verschachtelt werden. Die logische Grundstruktur einer UIML-Datei kann dabei so aussehen:

<?xml version="1.0" ?>

<!DOCTYPE uiml PUBLIC "-//Harmonia//DTD UIML 3.0 Draft//EN" "http://uiml.org/dtds/UIML3_0a.dtd">

<interface>

<structure>...</structure>
<style>...</style>
<content>...</content>
<behavior>...</behavior>
</interface>

<logic>
</logic>

</uiml>

Zur Erklärung:

Die erste Zeile definiert die XML-Version, die zweite Zeile die Dokumententypdefinition, die der XML-Datei zugrunde liegt.

Das <interface> - Element beinhaltet alle <uiml> - Elemente, die eine Benutzeroberfläche beschreiben. Dieses <interface> - Element beschreibt jedoch nur das Zusammenspiel zwischen dem Benutzer und der grafischen Benutzungsoberfläche. Die Logik, die dahinter verborgen ist, wird erst im <logic> - Element geregelt. Der <interface> - Block kann in seiner Komplexität beliebige Ausmaße annehmen: vom einfachen Eingabefeld bis hin zur komplex verschachtelten Bedienoberfläche mit den verschiedensten Interaktionsmöglichkeiten ist alles möglich (vgl. http://www.uiml.org/specs/docs/uiml30-revised-02-12-02.pdf, S. 32).

Im <structure> - Block wird festgelegt, wie die Elemente des Interfaces gerendert werden sollen. Hierzu wird das <structure> - Element unterteilt in eine Liste von <part> - Elementen. Jedes dieser <part> - Elemente spezifiziert einen Teil der grafischen Oberfläche. Dieser part hat mindestens einen Klassennamen. Ein <structure> - Block könnte also folgendes Erscheinungsbild aufweisen:

<structure>

<part id="Fenster" class="JFrame">

<part id="Titel" class="JLabel"/>

<part id="Knopf" class="JButton"/>

</part>

</structure>

Dieses Beispiel beschreibt also die Struktur der GUI: Auf oberster Ebene befindet sich ein Fenster der Klasse JFrame. Im Fenster ist eine Titelbeschriftung und ein Knopf angebracht. Auf diese Weise lassen sich beliebig viele Elemente auf dem grafischen Interface anbringen. Je nach Endgerät können unterschiedliche <structure>-Tags auch unterschiedliche Erscheinungsbilder hervorrufen. Bei der Darstellung einer umfangreichen Anwendung eines Desktop-PCs auf einem mobilen Endgerät wie z.B. einem PDA sollte man eventuell die Anzahl der dargestellten Knöpfe oder Zeilen einschränken, da der kleine PDA sicher nicht über eine Darstellungsfläche vom Umfang eines 17 Zoll Monitors eines Desktop-PCs verfügt. (vgl. http://mit.iddl.vt.edu/courses/cs5244/coursecontent/mod5/lesson2/uiml5.html)

Der <style> - Block ist für die Darstellung der einzelnen Elemente der GUI zuständig. D.h. zwischen den <style> - Tags werden, wie z.B. bei CSS, Eigenschaften Farben, Schrifttypen, Linienstärken, etc. definiert. Der UIML-Hersteller Harmonia liefert z.B. folgendes Beispiel:

<style id="Graphical">

<property part-class="c1" name="font" >Comic</property>

<property part-name="n1" name="size" >100,200</property>

</style>

Hier werden alle <part>-Blöcke innerhalb der <structure> - Tags, die mit dem Klassenattribut 'c1' gekennzeichnet sind, in der Schriftart 'Comic' dargestellt, und das Element der GUI mit dem Namen 'n1' auf die Größe 100*200 gebracht. Auch diese Trennung dient der Plattformunabhängigkeit. (vgl. http://www.uiml.org/specs/docs/uiml30-revised-02-12-02.pdf, S. 35)

Der <Content> - Block spezifiziert die konkreten Inhalte zu den <part> - Elementen. Die Auswahlmöglichkeiten dafür sind sehr groß. Content können Bilder, Videos, Audioclips, Texte, etc. sein. Eine Möglichkeit wäre z.B. den Inhalt einer Webseite in mehreren Sprachen ausgeben zu lassen, indem man das jeweilige Content-Element in verschiedenen textuellen Ausführungen anbietet. Eine andere Möglichkeit wäre z.B. Nachrichten auf einem Handy mit kleinem Display kürzer abzubilden als auf einem großen stationären Endgerät. (vgl. http://www.w3.org/2000/10/DIAWorkshop/abrams/UIML.ppt)

Das <behavior> - Element dient als eine Art ActionListener für die grafische Benutzeroberfläche. So kann z.B. eine User-Eingabe, also z.B. das Drücken eines Knopfes in der GUI, bestimmte Auswirkungen auf die Darstellung der Oberfläche haben. Aufgabe des <behavior> - Elements ist es ein solches Knopfdrücken zu erkennen und dann Maßnahmen in die Wege zu leiten, die diesem Ereignis entsprechen.

Wie bereits erwähnt regelt das <logic> - Element die Interaktion zwischen der grafischen Benutzeroberfläche und der darunterliegenden Softwarelogik: "The <logic> element describes how the UI interacts with the underlying application logic that implements the functionality manifested through the interface" (http://www.uiml.org/specs/docs/uiml30-revised-02-12-02.pdf, S. 85)

Die zugrundeliegende Logik kann dabei in den verschiedensten Programmiersprachen und Skriptsprachen implementiert werden. Ein Beispiel für ein <logic> - Element liefert Constantinos Phanouriou:

<logic name="Java" source="http://uiml.org/apps/CalendarApp.logic"/>

<logic name="Scripts" source="http://uiml.org/apps/scripts/CalendarApp.logic"/>

(vgl. http://scholar.lib.vt.edu/theses/available/etd-08122000-19510051/unrestricted/PhanouriouETD.pdf, S. 50)

Fazit

Die Metasprache UIML ist ein sehr effizientes Werkzeug, um gleichen Content auf verschiedenen Endgeräten mit den unterschiedlichsten Spezifikationen im Rahmen einer grafischen Benutzeroberfläche darzustellen. Die Verwandtschaft zu XML ermöglicht einen schnellen Einstieg. Mit ein bisschen Hintergrundwissen z.B. in Java oder einer Skriptsprache sollte es auch Anfängern nicht allzu schwer fallen nach kurzer Einarbeitungszeit grafische Benutzeroberflächen mit UIML erstellen zu können. Durch den massiven Anstieg der Verbreitung von mobilen Endgeräten wird es zunehmend wichtiger, auf Restriktionen in der Darstellung bei PDAs oder Handys Rücksicht zu nehmen und diesen adäquate Benutzeroberflächen zu bieten. Diese sollten möglichst konsistent zu den stationären Anwendungen des Benutzers sein und Synchronisation ermöglichen. UIML bietet hierzu einen guten Ansatz und könnte in Zukunft breiter in Erscheinung treten. In Anbetracht der Knappheit an Literatur, die zum Thema UIML existiert, schließe ich jedoch daraus, dass UIML derzeit noch keine große Bedeutung für den privaten Entwickler zu haben scheint.

Weitere Quellen:

http://ebus.informatik.uni-leipzig.de/www/media/lehre/dud/dud040726-kreysler-pdf.pdf

http://www.ipd.uka.de/~koenig/MODIS/20.12.01.pdf

http://webuser.fh-furtwangen.de/~schreier/frontend.pdf

http://www8.org/w8-papers/5b-hypertext-media/uiml/uiml.html