Lieferung 6.2 Modellierungsumgebung: Graphische Editoren für alle identifizierten Sichten

Transkript

1 Lieferung 6.2 Modellierungsumgebung: Graphische Editoren für alle identifizierten Sichten für das BMBF-Projekt Modellgetriebene agile Entwicklung für mobile Anwendungen (ModAgile Mobile) Arbeitspaket AP 6 Modellierungsumgebung / Editoren Arbeitspaketleitung FZI Forschungszentrum Informatik Förderkennzeichen 01IS11012A-C Projektleitung andrena objects AG Jochen Winzen Partner andrena objects ag arconsis IT-Solutions GmbH FZI Forschungszentrum Informatik Autoren Zoya Durdik, Martin Küster, Klaus Krogmann Lieferdatum M16 Letztes Änderungsdatum Version 1.0 ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 1

2 1 Einleitung Um die Bearbeitung von Modellen komfortabler und effizienter zu machen, wurde im Arbeitspaket AP6.1 Konzeption der Visualisierung von Modellen der DSL; Identifikation benötigter Sichten ein Konzept der Visualisierung von Modellen der domänenspezifischen Sprache (DSL) für mobile Anwendung erstellt. Das Konzept wurde im AP6.2 Graphische Editoren für alle identifizierten Sichten erfolgreich umgesetzt. Die Implementierung erfolgte dabei auf Basis des Eclipse Graphical Modeling Frameworks (GMF). Die Umsetzung erfasst zwei Sichten auf das Modell - die Architektur- und Ablaufansichten. Um diese Sichten zu ermöglichen, wurden drei Editoren implementiert: ein Baum-Editor zur hierarchischen Darstellung der vollständigen Modelle (auf Basis des Eclipse Modeling Frameworks, EMF), ein Modell- Editor für das sogenannte Story-Board zur Modellierung von Abläufen zwischen den Bildschirmen mobiler Anwendungen (GMF), und ein Modell-Editor für die Erstellung und Bearbeitung von sogenannten Composite-Strukturen der Oberflächen mobiler Anwendungen (GMF). Alle drei Editoren bearbeiten eine App-Modell-Instanz. Hierbei folgen die Editoren dem entwickelten Ansatz mehrere Sichten auf das gleiche Modell zu ermöglichen. Jede Sicht hebt dabei die spezifischen Elemente für einen bestimmten Bearbeitungsschritt hervor und verbirgt andere Elemente. Beispielsweise hebt das Story-Board den Fluss zwischen Bildschirmen hervor verbirgt aber Details der Datenmodellierung und die inneren Details graphischer Elemente. Im weiteren Projektverlauf des Forschungsvorhabens sollen die hier präsentierten Editoren noch auf eine weitere Sicht und einen textuellen Editor erweitert werden (AP 6.3), um die Erstellung algorithmischer Modellelemente zu unterstützen. Auf Basis der bereits existierenden mobilen Applikation MAMEX (die Modagile Mobile Referenzanwendung; vgl. bisherige Lieferungen) soll die Funktionsweise des graphischen Editors für die Modelle im weiteren Verlauf gezeigt werden. Die Editor-Elemente werden zusammen mit den entsprechenden Metamodellelementen in Abschnitt Fehler! Verweisquelle konnte nicht gefunden werden. vorgestellt (das Metamodell wurde gegenüber der Lieferung 6.1 aktualisiert). Damit entspricht das Vorgehen bei der Entwicklung des agilen Vorgehensprozess, der für die Entwicklung in Modagile Mobile vorgesehen wurde. 2 Umsetzung des Konzeptes der Editoren Die Editoren werden im Folgenden am Beispiel der MAMEX Anwendung beschrieben. Die grobe Funktionalität von MAMEX kann der folgenden Abbildung 1 entnommen werden. In der Abbildung werden die Hauptbildschirme mit ihren Inhaltselementen dargestellt. Dabei sind insbesondere die Übergänge zwischen den Bildschirmen hervorzuheben, die sich im Story-Board-Editor niederschlagen. Die Definition von Bildschirmen und Story-Boards erfolgt in Modagile Mobile deklarativ. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 2

3 Abbildung 1: Skizze zum Entwurf der MAMEX-Anwendung mit Übergängen und Inhaltselementen Das Konzept der graphischen Editoren, das im AP6.1 Konzeption der Visualisierung von Modellen der DSL; Identifikation benötigter Sichten erarbeitet wurde, kann aus der folgenden Abbildung 2 entnommen werden. Abbildung 2 Konzept der graphischen Modellierung der MAMEX Anwendung Die Abbildung 7 stellt vier Screens dar, die durch verschiedene Übergänge ( Flows ) verbunden sind. Ausgelöst werden diese Übergänge durch Trigger wie z.b. das Klicken auf einen Button. Elemente wie die Zusammenführung der Screens (vom ersten und zweiten Screen zum dritten) ermöglichen komplexere Übergänge ohne Duplikation der Flows. Im rechten Teil der Abbildung ist die Konzeption der Werkzeugpalette des graphischen Editors illustriert. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 3

4 Dieses Konzept wurde mit kleineren Änderungen umgesetzt. So wurde bei der Implementierung festgestellt, dass die dynamischen Elemente wie Start, Stop und Join für die Modellierung der mobilen Anwendungen nicht relevant sind, und wurden entsprechen nicht umgesetzt. Start, Stop und Join ergeben sich stattdessen allgemein aus den Übergängen bzw. dem Nicht-Vorhandensein von Nachfolgeknoten. Insgesamt wurden, wie in Abbildung 3 vorgestellt, drei notwendige Sichten auf das Modell identifiziert und umgesetzt. Diese drei Editoren sind: Baumeditor (EMF, links) Model-Editor: Story-Board (GMF, mitte) Model-Editor: Composite (GMF, rechts) Abbildung 3 Konzept der graphischen Modellierung der MAMEX Anwendung In der Darstellung wird ersichtlich, dass der Baum-Editor eine Gesamtsicht auf die Modelle bietet. Das Story-Board stellt vor allem Übergänge und Definitionen von Screens dar. Der Composite-Editor definiert und verfeinert wiederverwendbar angelegte Modellelemente. Composite-Elemente sind ähnlich einem Repositorium abgelegt und von dort aus auch über mehrere Screens hinweg wiederverwendbar. 3 Die drei graphischen Editoren für die Visualisierung der DSL Modelle Im folgenden Abschnitt werden die grafischen Editoren für die Visualisierung der DSL Modelle dargestellt. Der Fokus liegt auf dem Paket der UI-Elemente die grafisch editiert werden sollen. 3.1 Aktualisierte Elemente der Meta-Modelle Abbildung 4 enthält eine grafische Darstellung der UI-relevanten Elemente des aktualisierten Modagile-Applikations-Metamodells. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 4

5 Abbildung 4: Applikations-Metamodell (Stand: August 2012) Die derzeit unterstützten UI Elemente können die Kernfunktionalität für Story-Board-Editor und Composite-Editor abbilden: Abbildung 5: Baumansicht der UI-Elemente des App-Metamodells (Stand: August 2012) Im Vergleich zum vorigen Stand (März 2012), wurden folgende Änderungen vorgenommen: Checkbox (neu), Image Button (neu), Menu Bar (neu), und Fragment Navigation (neu). Diese Erweiterungen des Meta-Modells tragen den Entwicklungen von Android (Version 4.x), Windows Phone und ios Rechnung. Über die Menu Bar und Fragment Navigation können Navigationsstrukturen und wiederverwendbare Elemente realisiert werden, die mehrere Screens betreffen können. Außerdem lassen sich Tablet-Element mit denen von Smartphone-Anwendungen teilen. 3.2 Baumeditor (EMF) Der durch EMF generierte Baum-Editor wurde entsprechend der Metamodell-Änderungen aktualisiert. Die aktualisierte Version wir in Abbildung 6 am Beispiel der MAMEX-Anwendung vorgestellt. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 5

6 Abbildung 6 Modellierung der MAMEX Anwendung im graphischen Baum-Editor (EMF) Wie aus der Abbildung gut zu ersehen ist, können die für das Story-Board und den Composite-Editor relevanten Element (unterhalb des Display Element Repository Knotens sind die Elemente aus dem UI-Paket), mit Hilfe der graphischen Editoren bequem editiert werden. Im Folgenden werden die zwei entsprechenden graphischen Editoren vorgestellt. 3.3 Model-Editor: Story-Board (GMF) Der graphische Story-Board-Editor (Abbildung 7) dient dazu, die Übergänge (Flows) zwischen Bildschirmsichten (Screens) und die UI-Inhalte (unterschiedliche Display-Elemente) der Screens zu definieren. Im rechten Teil der Abbildung ist die Werkzeugpalette des Editors zu sehen, wo die Modellierungstools für UI-Elemente enthalten sind. Es werden folgende UI-Elemente unterstützt: Screen Stellt einen Bildschirm in der App dar (z.b. im MAMEX-Fall: Benutzer Anlegen oder Freunde-Liste ansehen ) Flow Übergang zwischen Screens Dynamic List Darstellung von Daten (aus dem Domänenmodell) in Listenform. Solche Listenelemente sind normalerweise interaktiv, so dass auf Eingaben wie Klicks reagiert werden kann Button Schaltfläche (z.b. um zwischen Screens zu wechseln) Label Darstellung statischen oder dynamischen Texts Input Eingabefeld Date Picker Kalender-Funktionalität zum Auswählen eines Datums Location Picker Karten-Funktionalität zum Auswählen eines Ortes Image Darstellung eines Bildes ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 6

7 Composite Display Element eine Gruppe von Display-Elementen, die zusammen verwendet werden, Darstellung der Elementen in strukturierter Form (z.b. in Form einer Tabelle) Checkbox (neu) Darstellung des Checkbox-Elements, die meistens in einer Gruppe verwendet werden Image-Button (neu) graphische Schaltfläche (z.b. eine Flash- Schaltfläche um zwischen Screens zu wechseln) Menu Bar (neu) ein Menü des mobilen Gerätes, die zur deren Bedienung (z.b. die Navigation zwischen Apps und Subkategorien) gilt Fragment Navigation (neu) die Navigation zwischen Subelementen (Composite Display Elements) eines Screens Abbildung 7 Modellierung der MAMEX Anwendung im graphischen Editor: Story Board (GMF) 3.4 Model-Editor: Composite (GMF) Der graphische Composite-Editor (Abbildung 8) dient dazu, Typen von CompositeDisplayElements und deren Inhalte zu definieren. Die CompositeDisplayElementTypes können dann im Story-Board- Editor zur Typisierung der CompositeDisplayElements verwendet werden Die CompositeDisplayElements müssen einen Typ haben. Die möglichen Typen werden im CompositeDisplayElementTypeRepository definiert und eingelegt. Im rechten Teil der Abbildung ist die Werkzeugpalette des Editors zu sehen, wo die Modellierungstools für entsprechende UI-Elemente enthalten sind. Es werden folgende UI-Elemente unterstützt (für die Beschreibung sehe Definitionen aus dem Story-Board-Editor): Dynamic List, Button, Label, Input, Date Picker, Location Picker, Image, CompositeDisplayElementType, CompositeDisplayElement, Checkbox, Image Button, Menu Bar und Fragment Navigation. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 7

8 Abbildung 8 Modellierung der MAMEX Anwendung im graphischen Editor: Composite Repository (GMF) 4 Zusammenfassung und Ausblick In diesem Dokument wurden die drei grafischen Editoren für die Modagile Mobile Modelle vorgestellt. Diese Editoren dienen zur graphischen Modellierung der UI-Elemente, der wiederverwendbaren Gruppen von UI-Elemente und den Übergängen zwischen Screen die in der Applikation enthalten sind. Durch die mögliche weitere Evolution des Metamodells, werden die Editoren je nach weiteren Anforderungen iterativ verfeinert und angepasst. Jede UI-Metamodelländerung erfordert eine Anpassung aller Editoren. Im nächsten Schritt wird die Implementierung des textuellen Editors angegangen (AP6.3) erfolgen. ModAgile Mobile 6.2 Graphische Editoren für alle identifizierten Sichten 8