Business UI in Enterprise Anwendungen

Transkript

1 Business UI in Enterprise Anwendungen modellgetrieben und dynamisch Workshop OOP 2011

2 Agenda vormittags 9:00-10:30 Part 1 Begrüßung und Vorstellung, Überblick BusinessUI, Open Source Projekte, Installation EMF Metamodelle, Tools, Editoren 11:00-12:00 Part II redview Architektur, Metamodelle, Editor EMFStore

3 Agenda nachmittags 13:00-14:30 Part III Wege zum Prototyp Riena Toolbox, from scratch EMF Domain Modell Generierung mit MWE, Xpand, Xtend 15:00-16:00 Part IV Analyse Generierung, Designänderungen Abschlussdiskussion

4 9:00-10:30

5 Begrüßung Vorstellung der Speaker Ekkehard Gentz Florian Pirchner Jonas Helming Maximilian Kögel Ziel des Workshops

7 Business UI in Enterprise Applikationen redview - Open Source Projekt Riena EMF Dynamic Views Business UI modellgetrieben

8

9

10 User Interface

11

12

13

14

15 Boilerplate of Code vermeideen

16 Riena EMF Dynamic View

17

18

19 EMF MWE (Workflow) meets Xpand/Xtend Riena Ridgets + LnF Riena Navigation + UI Equinox DS RCP, RAP

20 elements styles layout layoutdata binding Model Extensions validation datatypes

21

22

23

24

25

26

27

28 EMF Repository -> EMFStore praktisches Beispiel und Übungen im Part II

29

30

31

32

33 preserve design modifications

34

35

36

37

38

39

40

41 Entity: Container Entity: Presscontainer

42

43

44

45

46

47

48

49 redview und red-open praktische Übungen am Nachmittag

50 kurze Pause / Diskussion

52 Installation es gibt zwei USB Sticks Helios wer noch nichts installiert hat Workshop Dokumentation, Projekte...

53 Installation der Helios USB Stick enthält die Itemis Helios - xtext Distribution

54 Installation der Workshop USB Stick

55 Installation während der Installationen interessieren uns die Erwartungen der Teilnehmer an den Workshop: kurze Vorstellung der Teilnehmer

56 Installation Helios SR1 EPP Modeling + redview + Xpand oder Itemis Xtext Distribution + redview

57 Installation Bitte alles nah am Root installieren ohne Leerzeichen im Pfadnamen MacHD/oop C:\oop

58 Installation Helios SR1 Modeling oder Itemis Xtext installieren

59 Installation (eclipse) Modeling

60 Installation (itemis) downloads - xtext distribution

61 Installation entpacken in ordner (Pfad ohne Leerzeichen) Ordner work anlegen

62 Installation eclipse.ini editieren OSX eclipse.app Paketinhalt zeigen

63 Installation eclipse.ini editieren: -vmargs -XX:MaxPermSize=256m -Xms256m -Xmx768m

64 Installation eclipse.ini editieren: in die ersten beiden Zeilen einen Verweis auf das Datenverzeichnis. Wird benötigt wegen Bugzilla : -data myhd/oop/work

65 Installation eclipse.ini

66 Installation Eclipse starten OOP Ekkehard Gentz, Florian Pirchner, Maximilian Kögel, Jonas

67 Installation Einstellungen General

68 Installation Einstellungen Workspace

69 Installation Einstellungen, Software Sites, add Site

70 Installation Perspektive wechseln

71 Installation redview installieren ausführliche Anleitung s.a.

72 Installation redview installieren

73 Installation redview installieren

74 Installation redview installieren - noch NICHT neu starten!!!!

75 Installation A C H T U N G leider passiert es seit einigen Tagen wieder, dass P2 RAP PlugIns in die IDE installiert :( bitte in der PlugIns View testen --> Eclipse beenden ggf aus eclipse/plugins alle o.e.rap.* löschen Eclipse wieder neu starten

76 Installation Target Platform einrichten vom USB-Stick (NICHT ENTPACKEN)...oder...

77 Installation...oder... download von SourceForge

78 Installation Working Sets einrichten neu -> Java

79 Installation Working Set redview markieren + Import

80 Installation Import Archiv Datei

81 Installation Target Platform vorbereiten rename Target Platform Datei + Launch Config _template entfernen

82 Installation Target Platform resolven Doppelclick Target Platform Datei + W A R T E N

83 Installation Target Platform resolven Doppelclick Target Platform Datei + W A R T E N bis alles resolved ist!!!

84 Installation Target Platform resolven

85 Installation Target Platform resolven wenn alles resolved: als Target Platform setzen evtl. RAP Error ignorieren

86 Installation Target Platform Datei wieder schliessen redview examples in den Workspace laden Plug-ins -- Import as -- Source Project

87 Installation redview examples in Working Set redview

88 Installation wenn von Helios SR1 EPP Modeling jetzt Xpand installieren

89 Installation Xpand installieren

90 Installation Xpand installieren

91 Installation redview Installation beendet alles Weitere dann im Workshop!!!

94 EMF Metamodelle, Tools, Editoren EMF - Modellierung Code - Generierung Generierte Editoren

95 EMF Modellierung EMF erlaubt die Generierung von Entitätsklassen basierend auf einem Modell EPackage EClass EAttribute EReference Package Class Attribute Reference

96 EMF Beispiel Bowling Model

97 EMF Modellierung Neues Empty EMF Project anlegen

98 EMF Modellierung EMF Modell anlegen Ecore Dateien enthalten die Modelldefinition (Meta-Modell)

99 EMF Meta-Modell Name, Prefix und URL für Root- EPackage vergeben

100 EMF Meta-Modell Bowling Modell modellieren Details werden in der Properties View bearbeitet

101 EMF Meta-Modell EMF unterstützt auch graphische Modellierung (Rechtsclick => Initialize EcoreDiagram)

102 EMF Code-Generierung Gen-Model erzeugen Gen-Modelle enthalten Einstellungen für den Codegenerator Durch Rechtsklick auf den Root-Node im Gen-Modell kann der Code generiert werden (Generate All)

103 Generierte Plug-ins Bowling: Entitätsklassen, Factories und Package Informationen (Modell-Plug-in) Bowling.edit: Zusatzklassen UI Bowling.editor: generierter Standard- Editor für Modellinstanzen Bowling.tests: vorgenerierte Tests

104 Generierter Editor Modell starten durch Rechtsclick => Run as Eclipse Application Anlegen einer Modellinstanz mit dem generierten Editor

105 EMF API Test Case in PlayerTest anlegen Player und Round über Factory instanziieren Referenz setzen und überprüfen

106 10:30-11:00

107 11:00-12:00

109 Riena EMF Dynamic Views technischer Überblick Architektur, Metamodelle, Editor erste hands-on Lessons

110 Installation Import eines Projektes in den Working Set oop

113 Architektur SWT UI redview EMF Model

114 architecture Architektur EMF model (redview model)

115 architecture Architektur connector notifies EMF model (redview model)

116 architecture Architektur ui abstraction dispatches connector notifies EMF model (redview model)

117 Architektur architecture uses ui controller creates ui abstraction GUI swt & riena ridget controller dispatches connector notifies EMF model (redview model)

118 Architektur architecture uses ui controller creates ui abstraction GUI swt & riena ridget controller dispatches connector EMF Edit API in designer mode notifies EMF model (redview model)

119 Architektur MetaModelle hands-on mit den redview Examples

120 Tooling

121 Tooling {

122 {

123 Tooling

124 Tooling

125 Tooling

126 Tooling

127 Tooling hands-on mit den redview Examples

128 Abstraktions Schicht

129 Views einbinden notwendige Schritte, um redview Views einzubinden Erstellen eines View Models mit dem WYSIWYG Designer Editor View im viewstore ablegen UI Rendern UI binden

130 Views einbinden hands-on org.redview.example.oop.exampleview

131 BeanManager adresse slot 1 observes straße changes access slot 2 BeanPath slot1:address.street

134 EMFStore Einführung in den EMFStore praktische Übungen

135 EMFStore EMFStore erlaubt verteiltes Bearbeiten von Modellen

136 EMFStore EMFStore verteilt Änderungen eines Clients an die anderen Clients

137 EMFStore Im Konfliktfall bietet EMFStore einen interaktiven und modellbasierten Merge

138 EMFStore hands-on mit den redview EMFStore Examples

139 12:00-13:00

140 13:00-14:30

141 Live Coding der praktische Teil des Workshops wenig Slides viel Coding

142 Wege zum Business UI Prototyp Riena Toolbox redview View Modelle from scratch dynamisch und modelliert mit redview, red-open, EMFStore

143 Toolbox

144 Toolbox Installation ein Projekt importieren in Working Set oop

145 Toolbox Riena Architektur Riena UI und Navigation

146 Architektur Riena ein Eclipse Runtime Projekt Client / Server Apps OSGI / Equinox / RCP Enterprise - ready Enduser - Navigationskonzept

147 Navigation Navigations Modell als Baumstruktur Applikation Sub Applikation (Eclipse Perspektive) Modulgruppen, Module Sub Module (Eclipse View)

148 Navigation Navigations Modell als Baumstruktur einfaches Navigieren von A nach B Springen jump to Cache für vor / zurück Navigation leaves : reguläre RCP Views

149 Navigation

150 UI View und Controller: Code getrennt View Color, Fonts, Widgets, Position, Layout Controller Databinding, Action Listener dynamische Attribute Validator, Converter

151 UI Ridgets Controller greifen auf View über Ridgets zu Riena s Wrapper für (SWT)Widgets Marker: Error, Mandatory Databinding made easy UI Filter (Validation, show/hide)

152 UI + Navigation Demos und Examples

153 UI + Navigation Demos und Examples Riena RCP, Client-Server Eclipse SWT App

154 Toolbox Was ist die Toolbox? Assembly Editor erleichtert das Assemblieren schneller als PDE Tooling -> plugin.xml Wizards Code Generierung

155 Toolbox Installation der Toolbox IDE: UI (Eclipse View) von Updatesite Bestandteil von redview Target Platform Riena Target Components

156 Toolbox Installation der Toolbox IDE: UI (Eclipse View)

157 Toolbox Assembly Editor

158 Toolbox Installation der Toolbox Target Platform

159 Toolbox Riena Toolbox IDE + Target Plattform Assembly Editor Code Generierung

160 Toolbox hands-on

161 Toolbox hands-on new PlugIn Project oop.conference.toolbox

165 Toolbox hands-on run as Eclipse Application

166 Toolbox hands-on refresh Assembly Editor

167 Toolbox hands-on Assembly Editor: edit Hello World

168 Toolbox hands-on Assembly Editor: assemble new SubApplication with ModuleGroups, Modules, SubModules

169 Toolbox hands-on Assembly Editor: generate Code Generate / Register Perspective for the SubApplication Generate View / Controller for each SubModule RunAs Eclipse Application to test

170 Toolbox hands-on create the model (simple beans - getter/setter) org.oop.conference.toolbox.model Conference (String name, String city) Presenter (String firstname, String surname) Session (String name, String room)

171 Toolbox hands-on open View Classes edit Code of each View

172 Toolbox hands-on generate configureridgets for each Submodule

173 Toolbox hands-on open Controller Classes edit Code of each Controller

174 Toolbox hands-on plugin.xml by magic

175 Toolbox hands-on run as Eclipse Application

177 from Scratch

178 from Scratch Daten Modell UI Design ScetchUp Projekt anlegen View Modell erzeugen Views testen WYSIWYG Editor: Views designen

179 from Scratch das Daten Modell: Customer (String name, String city) hat 0..n Ferienziele: Vacation (String destination)

180 from Scratch UI Design ScetchUp

181 from Scratch UI Design: redview UI Elemente

182 from Scratch hands-on Projekt anlegen

185 from Scratch hands-on POJO s anlegen

186 from Scratch hands-on POJO s anlegen

187 from Scratch hands-on Extensions SWT View Riena redview

188 from Scratch hands-on org.eclipse.ui.views add Category

189 from Scratch hands-on org.eclipse.ui.views add View, dann View Klasse erzeugen

190 from Scratch hands-on View Klasse erzeugen

191 from Scratch hands-on o.e.riena.ui.swt.imagepaths

192 from Scratch hands-on org.redview.datasource.xmi.viewstore

193 from Scratch hands-on build.properties

194 from Scratch hands-on redview anlegen UI Elemente anlegen Styles und Layout Properties

195 from Scratch hands-on redview anlegen

196 from Scratch hands-on redview anlegen

197 from Scratch hands-on redview WYSIWYG Editor öffnet sich

198 from Scratch hands-on redview Outline -> add childs

199 from Scratch hands-on redview Outline -> add some more childs

200 from Scratch hands-on redview Outline -> copy Name in City

201 from Scratch hands-on redview Outline -> add RGroup

202 from Scratch hands-on redview Outline -> add RList zu RGroup

203 from Scratch hands-on redview Outline -> add Databinding RText

204 from Scratch hands-on redview Outline -> add Databinding RList

205 from Scratch hands-on redview Outline -> add Databinding RBase

206 from Scratch hands-on redview Outline -> add RBaseStyle Properties: set refresh

207 from Scratch hands-on redview Outline

208 from Scratch hands-on edit CustomerView

209 from Scratch hands-on Dependencies

210 from Scratch hands-on run as Eclipse Application edit launch config (only oop.* from workspace)

211 from Scratch hands-on run as Eclipse Application edit launch config (deselect Riena examples)

212 from Scratch hands-on run as Eclipse Application show View (Categorie scratch)

213 from Scratch hands-on geschafft:

214 from Scratch hands-on wenn noch Zeit ist: Änderung am Design neu Run As Eclipse Application

216 redview + red-open modellgetrieben und dynamisch bis 16:00

217 redview + red-open modellgetrieben und dynamisch während dieses Themas gibts eine Pause 14:30-15:00

218 redview + red-open modellgetrieben und dynamisch Installation der red-open Projekte

219 redview + red-open Installation red-open Generierung Dropins Cartridges Generator Examples redview MetaModel

220 redview + red-open Installation red-open benötigt 3 PlugIns im Dropins Eclipse beenden in dropins kopieren + neu starten

221 redview + red-open Installation red-open Cartridge Projekte importieren in Working Set red-open-cartridges

222 redview + red-open Installation red-open Cartridge Projekte importieren

223 redview + red-open Installation red-open Generator Projekte importieren in Working Set red-open-generator

224 redview + red-open Installation red-open Example Projekt importieren in Working Set red-open-examples

225 redview + red-open Installation redview MetaModel in Workspace importieren in Working Set redview

226 redview + red-open modellgetrieben und dynamisch Überblick über Generierung Workflow (MWE) Templates (Xpand/Xtend) EMF Domain Modell

227 redview + red-open modellgetrieben und dynamisch EMF Domain Modell

228 redview + red-open modellgetrieben und dynamisch EMF Domain Modell

229 redview + red-open modellgetrieben und dynamisch Workflow Properties anpassen

230 redview + red-open modellgetrieben und dynamisch Workflow Properties anpassen

231 redview + red-open modellgetrieben und dynamisch Workflow generiert in das conference Projekt

232 redview + red-open modellgetrieben und dynamisch das conference Projekt ist eine leere Hülse: kein src, keine icons, keine views, keine plugin.xml

233 redview + red-open modellgetrieben und dynamisch Workflow Generierung starten

234 redview + red-open modellgetrieben und dynamisch Workflow Generierung starten

235 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Inhalt:

236 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Inhalt:

237 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Beans:

238 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Mockups:

239 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Views:

240 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit redview s:

241 redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit plugin.xml:

242 redview + red-open modellgetrieben und dynamisch Conference Projekt run as Eclipse Application:

243 redview + red-open modellgetrieben und dynamisch red-open Generierung Workflow Cartridges Extensions

244 Business UI in Enterprise Applikationen Zusammenfassung Diskussion