Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der...

40
Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung

Transcript of Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der...

Page 1: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

Vielfalt vs. Abstraktion

Benjamin Schmid

Der Jakobsweg der modellbasierten GUI-Entwicklung

Page 2: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#2

• Programmatisch

• GUI Designer

• Deklarative Sprachen- XUL, XAML, XForms, JAXfront / KParts / ...

• Annotated Business Model - Naked Objects, Trails, JMatter, ...

• Modellierungssprachen- UML, UMLi, DiaMODL, ...

- MDA

Ansätze zur GUI Entwicklung

Code

Modell

Page 3: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#3

GUI-Entwicklung: Programmatisch

• Vorgehen & Struktur: Technologiegebunden

• geringe Abstraktion

• keine Verwendung von Modellwissen

• Hohe Flexibilität & Detailsteuerung

• idR gute Basis für aufbauende Konzepte

class HelloWorldSwing {public static void main(String[] args) {

Runnable guiCreator = new Runnable() {public void run() {JFrame f = new JFrame

("Hallo Welt mit Swing");f.setDefaultCloseOperation(JFra...

// Fügt den "Hallo Welt"-Text hinzuJLabel label = new JLabel("Hallo Welt");f.getContentPane().add(label);

// Zeigt das Fenster anf.setSize(300, 200);f.setVisible(true);

}};SwingUtilities.invokeLater(guiCreator);

} }

Page 4: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#4

GUI-Entwicklung: GUI-Designer

oft: Visueller Editor für Swing mit Code Generator• Werkzeug, niedrige Einstiegshürde, WYSIWYG

• behindert weitere Abstraktionen & komplexere UIs

Page 5: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#5

GUI Entwicklung: Deklarative SprachenVertreter: XUL, XAML, XForms, JAXfront, KParts, ZUL, ...

• Sehr technisch / konkret / gegenständlich

• Betrachtet in der Regel nicht:

- Modellwissen

- GUI-Verhalten & -Logik

- dynamische GUI-StrukturenBeispiel: XUL (Mozilla)

Page 6: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#6

GUI-Entw.: UI aus Business Model

• Basisannahme: BO-Modell : UI Funktion ~ 1:1- gute Basis für einfachste CRUD-Anwendungen

- Praxisbedürfnisse gehen schnell darüber hinaus(Dialogführung/-struktur/-verhalten/gestaltung, etc.)

• Abstraktion und Verwendung modellierten Wissens

• Reinform-Beispiel: „Naked Objects“-Architektur

Page 7: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#7

GUI Entwicklung: Weitere UI Modelle

Dialogsteuerungs-Modelle

z.B. Dialog Flow Notation (DFN)

• Webseiten-/Dialogorientiert

• Dialogsteuerung auf Makroebene

• Richtung: Prozessflußsteuerung

Page 8: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#8

GUI Entwicklung: MDA/MDD

• GUIs konzeptionell integraler Bestandteil von MDA

• ... in UML direkt gar nicht betrachtet. Dafür zahlreiche erfolglose Modell-Versuche (UMLi, DiaMODL, ...)

• Es fehlen: Werkzeuge, praxistaugliche Lösungen, ...

Page 9: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#9

MDA/MDD

MDA: PIM -> PSM -> Fertige Anwendung - mit GUI?

Page 10: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#10

• Inhalte- Modellierte Attribute

(Labels, Eingabefelder)

- Modellierte Aktionen(Buttons)

• Funktionen- Business Funktionen

(„Löschen“)

- Navigation

Dilemma: Abstraktion ...

Page 11: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#11

Fehlerhintergrund: RGB(255,200,200)

rechtsbündig

350px

500px

5px

Tooltip / Pflichtfeld

Fehlermeldungsbereich

5px

5-Zeichen, numerisch

Länderliste ausDatenbankabfrage

5px

2px

Dilemma: ... vs. Details

• Anordnung • Größen• Ausrichtung• Widgettypen• Farben• Interaktionsmuster• Tooltips & Hints• visuelle

Gruppierungen• ...

• Inhalt• Funktion

Page 12: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#12

GUI-Modellierung: Ja oder nein?

Modellorientierte UI-Entwicklung birgt viel Potential:

• Wiederverwendung bestehenden Modellwissens- Domain Model (Entitäten, Attribute)

- Validierungen (Kardinalitäten, OCL)

- Zusatz-Infos / DSLs (Namen, Rechteregeln, ...)

• Für eng abgegrenzte Domänen (Rapid Prototyping, Dialogfluss,...) erscheinen auch zusätzliche, reine UI Modelle attraktiv

Page 13: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#13

GUI-Modellierung: Ja oder nein?

Unmöglich alle GUI-Aspekte sinnvoll zu modellieren

• Erst starke Reduktionermöglicht sinnvolle Modellierung

• Reine Modell-GUIs nur unter sehr engen Annahmen („Naked-Objects“)

• Vollwertige UIs erfordern immer zusätzliche Detailsteuerung- Implementierungszugriff/Code notwendig!

- Feinsteuerung auf allen Ebenen: vom Querschnitt bis ins Detail

Page 14: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#14

Anforderungen datenzentrischer UIs (1)GUI-Visualisierung

Visualisierungmit div. Basistechnologien

Dynamische Layoutsfür „Formulare“

Regelabhängige Präsentationaufgrund Rechte, Zustände, ...

Benutzerführung und Feedback

Page 15: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#15

Anforderungen datenzentrischer UIs (2)

GUI-Inhalte

Datenbeschaffung modellierte und modellfremder Inhalte

Eingabe-ValidierungenAttribut/Objekt-Prüfungen z.B. via OCL (Modell)

I18N

UI Ablaufsteuerung & Datenfluss

Page 16: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#16

PSM

PIMPIM

Rückblick: GUIs in der MDA

?

?

??

?

?

Page 17: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#17

Rückblick: 100% GUI Modellierung

Inhalt Funktion Darstellung

Anwendungsrahmen

Page 18: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#18

Funktion

GUIs durch Modell + Code, aber wie?

Inhalt

AnwendungsAnwendungs--DetailsDetails

QuerschnittsQuerschnitts -- Verhalten

Verhalten

Anpassungen, , Erweiterungen &Erweiterungen &

Implementierung (Code)Implementierung (Code)

Anwendungsrahmen

Wir wollen: Baukasten, aus-/anpassbare Einzelteile, Detailzugriff

Darstellung

Page 19: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#19

Was ist orchideo?

orchideo/suite

Modellierungs- und Entwicklungsumgebung für unsere Projekte auf Eclipse-Basis

orchideo/views

Modell-orientiertes Abstraktionsframework zur effizienten Erstellung datenzentrischer GUIs auf unterschiedlichen GUI-Plattformen

Page 20: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#20

Der Weg…

1. Abstraktion

2. Modellnutzung

3. Deklaratives Vorgehen

4. Bausteine & -elemente

Page 21: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#21

Der Weg…

1. Abstraktion

2. Deklaratives Vorgehen

3. Delegation an Modellwissen

4. Bausteine & -elemente

• Zergliederung in gröbere Strukturen(Vereinfachung, DRY)

• Entkopplung (Technologie/Domänen)

Page 22: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#22

Abstraktion: Representation

Representation : Darstellungsknoten mit „Features“

Fenster

Button Bereich

Importieren

OK

Formular

Geschlecht

Name

Page 23: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#23

Abstraktion: Features

Feature : Austauschbare Querschnittsfunktionen aller Representations

• im Querschnitt (Swing -> Echo3)

• als auch im Einzelnen (Button -> Grafik-Button)

• Themen- Visualisierung

- Data Binding

- Validierung

- Rechte & Editierbarkeiten

- UI Ereignisse, ...

Page 24: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#24

Überblick: Abstraktionsebenen

Process

View

Representation &

Feature

Process & View

Flow

Page 25: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#25

Der Weg…

1. Abstraktion

2. Deklaratives Vorgehen

3. Delegation an Modellwissen

4. Bausteine & -elemente

• Beschreibung der GUI via Regelnstatt konkreter Einzelbefehle

• Tor zur Modellinterpretation

Page 26: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#26

• Datenanbindung Lazy Loading, Transformation, etc.

• GUI-Layout Dynamische Formulare

• Darstellungs-Modi Regelbasierte Rechteabildung

• Dialogablauf

Deklarative Formulierung von

Beispiel: Deklarative Datenanbindung

Datenbank-Trefferliste(Personen)

selektierterTreffer

Adresse derPerson

davon: Hausnr.(Zahl)

Lesen & Schreibenals Text

Source<String> hnr = Provider.of(result).at(selectHandle).get(Person.ADRESS).get(Adress.HNR).as(String.class);

hnr.get(); // Lesenhnr.set(„7“); // Schreiben

Page 27: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#27

Warum nun deklarative Struktur?

Beschreibung einer abstrakten Regel anstatt konkreter Einzelbefehle

• Einfacher

• Robuster & Effizienter

• ermöglicht Beschreibung

- im Code

- in einem Modell!

Page 28: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#28

Strukturierung: Lebenszyklus & Phasen

Interaktions-Phasen

• Abbild des Dialogmodus von Benutzeraktion und Systemreaktion

• Trigger für die Interpretation der deklarierten Regeln

Page 29: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#29

Der Weg…

1. Abstraktion

2. Deklaratives Vorgehen

3. Delegation an Modellwissen

4. Bausteine & -elemente

• Modell-Abbildunggeeigneter Aspekte

• GUI Deklaration: Modellreferenz statt Code

Page 30: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#30

GUIs & Modelle?

Modellierung• Der BO-Modelle

• zusätzlicher GUI Inhalte & Modelle, wo sinnvoll DSLs

Realisierung der GUIs• Basierend auf den Modell-Inhalten...

... aber auch abweichend davon

• Generativ & Interpretativ

Page 31: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#31

Entw

ickl

ung

& L

aufz

eit

Entw

ickl

ung

Lauf

zeit

Modell-Artefakte & Nutzung

Modell-Editor

Code Modell-Referenzen

BusinessModel Code

LadbaresLaufzeit-Modell

Modell

GUI-Gerüst/Prototyp

Generierung/Transformation

Page 32: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#32

Modellwissen

Gut an das Modell delegierbar:

• Datenanbindung

• Präsentationdetails (Namen, Typen, ...)

• Eingabevalidierungen

• Fachlichkeitenz.B. Rollenabhängige Schreibrechte

Page 33: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#33

Der Weg…

1. Abstraktion

2. Deklarative Struktur

3. Delegation an Modellwissen

4. Bausteine & -elemente

• Flexibilität: Vom Grundpfeiler bis ins Detail

• Effizienz und Wiederverwendung

Page 34: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#34

Technologie- & Lösungs-„Kits“

Framework-Kern definiert Abstraktionen & Strukturen

kits liefern Implementierungs-Einzelteile

• Technologie/Modell-Adapter

• Lösungsbausteine

Page 35: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#35

Die Summe der Teile

effizient?

Page 36: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#36

Setups

• sind Templates

• Definieren Annahmen- für die Interpretation des Modells

- in der Gestaltung der Projekt-API

• Liefern den sinnvollen ‚Standard‘fall

Setup

Page 37: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#37

...und was ist nun mit den Details?

• Rahmencode in der Hand

• Tauschbare & konfigurierbare

Einzelteile

• API-‚Durchgriff‘ auf Technologie

myButton.getVisualizer().getUI().setWidth(..)

Core Feature Echo3 Kit Echo3

Page 38: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#38

Anwendung mit orchideo/views

Page 39: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#39

Live Demo

Page 40: Vielfalt vs. Abstraktion - eXXcellent solutions...Vielfalt vs. Abstraktion Benjamin Schmid Der Jakobsweg der modellbasierten GUI-Entwicklung #2 • Programmatisch • GUI Designer

#40

Vielen Dank für Ihre

Aufmerksamkeit!

Referenzen:

Naked Objects: http://www.nakedobjects.org/ XUL Tutorial: https://developer.mozilla.org/en/XULDialog Flow Notion: http://bit.ly/9XPg1c orchideo: http://www.exxcellent.de/