Christian Kurz SWT Projekt WS 07/08

Transkript

1 Christian Kurz SWT Projekt WS 07/08

2 1. Allgemeine Aspekte der generativen GUI- Entwicklung 2. Entwicklung mit Hilfe von GUI-Designern 3. Entwicklung mit Hilfe deklarativer GUI- Sprachen 4. Modellgetriebene GUI- Entwicklung 2

3 3

4 Benutzeroberfläche ist westendlicher, aber sehr komplexer Bestandteil von Softwareprodukten Hohe Know-How Anforderungen Hohe Kosten Hohes Fehlerpotenzial im Bezug auf Ergonomie Lösung 1. Entwicklung eines Modells 2. Aus diesem Modell automatisierte Übersetzung in Quellcode 4

5 Text GUI- Designer deklarative GUI- Sprachen MDA Plattformunabhängigkeit Plattform- & Geräteunabhängigkeit 5

6 public class GuiLogin extends ApplicationWindow { // Loginname { Label lname = new Label(compLogin, SWT.LEFT); lname.settext("loginname:"); tname = new Text(compLogin, SWT.LEFT SWT.SINGLE SWT.BORDER); tname.settext(props.getproperty(constants.property_name)); tname.settooltiptext("das Eingabefeld für Ihren Loginnamen."); GridData layoutname = new GridData(GridData.HORIZONTAL_ALIGN_FILL GridData.GRAB_HORIZONTAL); layoutname.horizontalspan = 2; tname.setlayoutdata(layoutname); tname.addkeylistener(new PWEnterListener(this)); } 6

7 public class GuiLogin extends ApplicationWindow{ // button bar { // OK Button bok = new Button(compLogin, SWT.PUSH); bok.settext("ok"); bok.settooltiptext ("Drücken Sie hier, um sich in das System einzuloggen."); bok.setlayoutdata (newgriddata( )); bok.addselectionlistener(new LoginOKListener(this));} 7

8 Vorgehen: Anlegen jeder einzelnen Komponente der GUI per new- Befehl Anpassung des Layouts per set- Befehle Hinzufügen der Komponenten mit add- Befehl Bearbeitung der Benutzeraktionen mit Hilfe von ActionListener Alle diese Befehle wiederholen sich jeweils analog für jede einzelne Komponente der GUI 8

9 Vorteile: Sehr einfach strukturierter Code Nachteile: Sehr hoher Arbeitsaufwand Geringe Flexibilität Keinerlei Automatisierung vieler gleichartiger Arbeitsschritte führt zu großer Ineffizienz 9

10 Tools: integrierter Matisse Designer bei NetBeans Visual Editor für Eclipse Vorgehen: WYSIWYG Programmieren per Drag & Drop Quelle [1] 10

11 Vorteile: Widgets & Assistenten Benötigter Code wird on the fly erzeugt Nachteile: Oft Probleme beim Reverse Engineering Tools sind bugbehaftet im Bezug auf Synchronisation zwischen Code und visueller Ansicht Funktionalität muss weiterhin von Hand implementiert werden 11

12 Tools: JAXfront XUL (Mozilla Produktfamilie) XAML (Windows Vista) XFORMS Vorgehen: Beschreibung der Oberfläche in Meta- Sprache (XML oder XML- Dialekt) UIDL (User Interface Description Language) Automatische Generierung der GUI zu Laufzeit aus diesem Modell 12

13 Beispiel: Hello World in XUL <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <!DOCTYPE window> <window title="hello World!" xmlns:html= xmlns=" style="background-color: white;" width="300" height="150" onload="centerwindowonscreen( )"> <script type="application/x-javascript" src="chrome://global/content/dialogoverlay.js" /> <vbox> <hbox align="left"> <label value ="Hello, World from" /> <image src="xul.jpg" /> </hbox> <button label="click me!" oncommand="alert('hello World');" /> </vbox> </window> Quelle [2] 13

14 Struktur von Mozilla-XUL: Inhalt : Struktur und Beschreibung von UI- Elementen (z.b. XUL, XHTML) Aussehen: Skin oder Theme (Look & Feel) (z.b. CSS) Lokalisierung: Dadurch können Applikationen einfach in verschiedenen Sprachen für unterschiedliche Regionen genutzt werden (DTD und.properties-datei) 14

15 Vorteile: Klare Trennung zwischen GUI und Logik Die Oberfläche kann zur Laufzeit verändert werden Gute Wartbarkeit Plattformunabhängigkeit: konsistentes Erscheinungsbild Nachteile: Geschwindigkeit beim Aufbau der GUIs Sehr allgemeiner Ansatz bringt sehr hohen Aufwand Selbst triviale Beispiele werden sehr groß Zum Teil unterspezifiziert 15

16 Tools: 1. Reine Modellierungswerkzeuge: lediglich grafischen Darstellung keine automatische Transformation Export des Modells in Austauschformat (z.b. XMI) AgroUML 2. Reine Transformatoren: ausschließlich Transformation von Modellen Import eines Modells aus Austauschformat, dann Generierung von Code openarchitectureware 3. Integrierte MDA Werkzeuge Modellierung -> Transformationen -> Codegenerierung Keine überflüssige Export- und Importvorgänge IBM Rational 16

17 Vorgehen: 1. PIM: Abbildung der Anforderungen durch visuelle Modellierungswerkzeuge, meist in UML (ab hier eigentlich Aufbau auf deklaratives GUI- Design) 2. PSM: Automatische Transformation -> gerätespezifisches Model (PDAs, PC, Tablett PCs, Spielekonsolen, Automaten, etc.) 3. Automatische Generierung des benötigten Codes 4. Sämtliche Änderungen werden dabei im Model vorgenommen und vollständig automatisch generiert Quelle [3] 17

18 Vorteile: Durchgehend generative Entwicklung der GUI aus Modellen Modelle können von Domänespezialisten erstellt werden Gute Wartbarkeit Gute Erweiterbarkeit Nachteile: Bei geringen Anforderungen ist Modellierung größer als direkte Erstellung der GUI Automatisierte Codegenerierung erfordert genaue Modellspezifizierung Keine Modellabbildung von komplexen Abläufen möglich 18

19 Jeder weiterer Evolutionsschritt dehnt die Modellierung weiter an den tatsächlich abzubildenden Prozess Es wird also immer mehr visuell entworfen und immer weniger wirklich programmiert Anforderungen der Benutzerinteraktionen PIM in UML PSM Quellcode Deklarative GUI- Entwicklung Modellgetriebene GUI- Entwicklung 19

20 20

21 [1] [2] Peng Xu Vergleich von verschiedenen XML-GUI-Standards [3] Daniel Schulz MDA-Frameworks: AndroMDA Literatur: Christian Beutenmüller, Christian Lehmann Einführung in modellbasierte XML XML- Sprachen für Benutzerschnittstellen index2.html Stefan Link, Thomas Schuster, Philip Hoyer, Sebastian Abeck - Modellgetriebene Entwicklung von grafischen Benutzerschnittstellen Prof. Dr. Bernhard Rumpe, Dr. Joachim Schmid Oberflächen mit MDA: Beschreiben statt programmieren model-driven-architecture/model-driven-architecture-mda