A graphical editor for structural screen models

Abstract

Die Usability von vollautomatisch generierten Graphical User Interfaces (GUIs) ist im allgemeinen nicht befriedigend. Semi-automatisches Generieren von GUIs bedeutet, dass der Designer manuelle Anpassungen vornehmen muss, um die Usability des generierten GUI zu verbessern. Um den Aufwand dafür gering zu halten, sind entsprechende Tools Voraussetzung. Die Unified Communication Platform (UCP) unterstützt semi-automatische Generierung eines GUI anhand eines Diskurs-basierten Kommunikationsmodelles. UCP transformiert dieses in ein Screen-basiertes GUI-Modell - das Structural Screen Model. Dieses Modell ist am Concrete User Interface (CUI) level und UCP stellt einen Baum-Editor zur Verfugung, welcher zwar die Widget-Hierarchie des Strukturellen Screen Modells darstellt, jedoch Layout- und Style-Informationen nicht graphisch visualisiert. Der Graphical Screen Model Editor (GSME) ermöglicht das Visualisieren und Anpassen des automatisch generierten GUI auch von nicht-Programmierern (z.B., Designern). Insbesondere visualisiert der GSME das Structural Screen Model (i.e., im CUI level) mit dem angegebenen Layout und mit dem Style von einer definierten CSS-Datei. Zusätzlich ermöglicht der GSME Verbesserungen des GUI durch direkte Layout und Style-Anpassungen am Structural Screen Model, sowie spezielle Layout-Anpassungen, welche notwendige Zwischenschritte automatisieren. Wir entwickelten den GSME mit Hilfe des Eclipse Modeling Projects (EMPs). Das Structural UI Meta-Model ist das zugrundeliegende Meta-Modell des graphischen Editors. Erweitert und angepasst haben wir diesen Editor, mittels Templates und zusätzlichen Java-Klassen um eine vollständige Neugenerierung zu ermöglichen.

The usability of fully-automatically generated Graphical User Interfaces (GUIs) is typically in need of improvement. Semi-automatic GUI-generation, i.e, keeping the designer in the loop, allows for improving the usability through manual customizations and requires adequate tool support to keep the development effort low. The Unified Communication Platform (UCP) supports semiautomatic GUI generation from high-level interaction models. In particular, UCP automatically transforms Discourse-based Communication Models into a screen-based GUI model - the Structural Screen Model. This model is on the Concrete User Interface (CUI) level and UCP provides a Tree Editor that does not graphically visualize layout and style information, but displays the widget-hierarchy of the Structural Screen Model. The Graphical Screen Model Editor (GSME) facilitates GUI customization for non-programming experts (e.g., designers) through visualizing the automatically generated GUI. In particular, the GSME visualizes the Structural Screen Model (i.e., on CUI level) with its layout information and with the style information from the speci ed Cascading Style Sheet (CSS)- le. Furthermore, it supports layout and style customizations through direct manipulation of the Structural Screen Model and advanced layout features that facilitate customization through partly automating moving and resizing a widget. We developed the GSME based on the Eclipse Modeling Project (EMP). The Structural UI meta-model is the underlying model for the generation of the graphical editor. Adaptations and extensions of the GSME are persisted in templates and additional Java-classes, to support the re-generation of the graphical editor.