Business UI in Enterprise Anwendungen modellgetrieben und dynamisch Workshop OOP 2011
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
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
9:00-10:30
Begrüßung Vorstellung der Speaker Ekkehard Gentz Florian Pirchner Jonas Helming Maximilian Kögel Ziel des Workshops
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
Business UI in Enterprise Applikationen redview - Open Source Projekt Riena EMF Dynamic Views Business UI modellgetrieben
User Interface
Boilerplate of Code vermeideen
Riena EMF Dynamic View
EMF MWE (Workflow) meets Xpand/Xtend Riena Ridgets + LnF Riena Navigation + UI Equinox DS RCP, RAP
elements styles layout layoutdata binding Model Extensions validation datatypes
EMF Repository -> EMFStore praktisches Beispiel und Übungen im Part II
preserve design modifications
Entity: Container Entity: Presscontainer
redview und red-open praktische Übungen am Nachmittag
kurze Pause / Diskussion
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
Installation es gibt zwei USB Sticks Helios wer noch nichts installiert hat Workshop Dokumentation, Projekte...
Installation der Helios USB Stick enthält die Itemis Helios - xtext Distribution
Installation der Workshop USB Stick
Installation während der Installationen interessieren uns die Erwartungen der Teilnehmer an den Workshop: kurze Vorstellung der Teilnehmer
Installation Helios SR1 EPP Modeling + redview + Xpand oder Itemis Xtext Distribution + redview
Installation Bitte alles nah am Root installieren ohne Leerzeichen im Pfadnamen MacHD/oop C:\oop
Installation Helios SR1 Modeling oder Itemis Xtext installieren
Installation (eclipse) http://www.eclipse.org/downloads/ 3.6.1 Modeling
Installation (itemis) http://xtext.itemis.com/ downloads - xtext distribution
Installation entpacken in ordner (Pfad ohne Leerzeichen) Ordner work anlegen
Installation eclipse.ini editieren OSX eclipse.app Paketinhalt zeigen
Installation eclipse.ini editieren: -vmargs -XX:MaxPermSize=256m -Xms256m -Xmx768m
Installation eclipse.ini editieren: in die ersten beiden Zeilen einen Verweis auf das Datenverzeichnis. Wird benötigt wegen Bugzilla 288063: -data myhd/oop/work
Installation eclipse.ini
Installation Eclipse starten OOP 2011 - Ekkehard Gentz, Florian Pirchner, Maximilian Kögel, Jonas
Installation Einstellungen General
Installation Einstellungen Workspace
Installation Einstellungen, Software Sites, add Site http://ekkes-updates.de/redview
Installation Perspektive wechseln
Installation redview installieren ausführliche Anleitung s.a. http://redview.org
Installation redview installieren
Installation redview installieren
Installation redview installieren - noch NICHT neu starten!!!!
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
Installation Target Platform einrichten vom USB-Stick (NICHT ENTPACKEN)...oder...
Installation...oder... download von SourceForge http://sourceforge.net/projects/redview/
Installation Working Sets einrichten neu -> Java
Installation Working Set redview markieren + Import
Installation Import Archiv Datei
Installation Target Platform vorbereiten rename Target Platform Datei + Launch Config _template entfernen
Installation Target Platform resolven Doppelclick Target Platform Datei + W A R T E N
Installation Target Platform resolven Doppelclick Target Platform Datei + W A R T E N bis alles resolved ist!!!
Installation Target Platform resolven
Installation Target Platform resolven wenn alles resolved: als Target Platform setzen evtl. RAP Error ignorieren
Installation Target Platform Datei wieder schliessen redview examples in den Workspace laden Plug-ins -- Import as -- Source Project
Installation redview examples in Working Set redview
Installation wenn von Helios SR1 EPP Modeling jetzt Xpand installieren
Installation Xpand installieren
Installation Xpand installieren
Installation redview Installation beendet alles Weitere dann im Workshop!!!
kurze Pause / Diskussion
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
EMF Metamodelle, Tools, Editoren EMF - Modellierung Code - Generierung Generierte Editoren
EMF Modellierung EMF erlaubt die Generierung von Entitätsklassen basierend auf einem Modell EPackage EClass EAttribute EReference Package Class Attribute Reference
EMF Beispiel Bowling Model
EMF Modellierung Neues Empty EMF Project anlegen
EMF Modellierung EMF Modell anlegen Ecore Dateien enthalten die Modelldefinition (Meta-Modell)
EMF Meta-Modell Name, Prefix und URL für Root- EPackage vergeben
EMF Meta-Modell Bowling Modell modellieren Details werden in der Properties View bearbeitet
EMF Meta-Modell EMF unterstützt auch graphische Modellierung (Rechtsclick => Initialize EcoreDiagram)
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)
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
Generierter Editor Modell starten durch Rechtsclick => Run as Eclipse Application Anlegen einer Modellinstanz mit dem generierten Editor
EMF API Test Case in PlayerTest anlegen Player und Round über Factory instanziieren Referenz setzen und überprüfen
10:30-11:00
11:00-12:00
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
Riena EMF Dynamic Views technischer Überblick Architektur, Metamodelle, Editor erste hands-on Lessons
Installation Import eines Projektes in den Working Set oop
Installation Import eines Projektes in den Working Set oop
Installation Import eines Projektes in den Working Set oop
Architektur SWT UI redview EMF Model
architecture Architektur EMF model (redview model)
architecture Architektur connector notifies EMF model (redview model)
architecture Architektur ui abstraction dispatches connector notifies EMF model (redview model)
Architektur architecture uses ui controller creates ui abstraction GUI swt & riena ridget controller dispatches connector notifies EMF model (redview model)
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)
Architektur MetaModelle hands-on mit den redview Examples
Tooling
Tooling {
{
Tooling
Tooling
Tooling
Tooling
Tooling hands-on mit den redview Examples
Abstraktions Schicht
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
Views einbinden hands-on org.redview.example.oop.exampleview
BeanManager adresse slot 1 observes straße changes access slot 2 BeanPath slot1:address.street
kurze Pause / Diskussion
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
EMFStore Einführung in den EMFStore praktische Übungen
EMFStore EMFStore erlaubt verteiltes Bearbeiten von Modellen
EMFStore EMFStore verteilt Änderungen eines Clients an die anderen Clients
EMFStore Im Konfliktfall bietet EMFStore einen interaktiven und modellbasierten Merge
EMFStore hands-on mit den redview EMFStore Examples
12:00-13:00
13:00-14:30
Live Coding der praktische Teil des Workshops wenig Slides viel Coding
Wege zum Business UI Prototyp Riena Toolbox redview View Modelle from scratch dynamisch und modelliert mit redview, red-open, EMFStore
Toolbox
Toolbox Installation ein Projekt importieren in Working Set oop
Toolbox Riena Architektur Riena UI und Navigation
Architektur Riena ein Eclipse Runtime Projekt Client / Server Apps OSGI / Equinox / RCP Enterprise - ready Enduser - Navigationskonzept
Navigation Navigations Modell als Baumstruktur Applikation Sub Applikation (Eclipse Perspektive) Modulgruppen, Module Sub Module (Eclipse View)
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
Navigation
UI View und Controller: Code getrennt View Color, Fonts, Widgets, Position, Layout Controller Databinding, Action Listener dynamische Attribute Validator, Converter
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)
UI + Navigation Demos und Examples
UI + Navigation Demos und Examples Riena RCP, Client-Server Eclipse SWT App
Toolbox Was ist die Toolbox? Assembly Editor erleichtert das Assemblieren schneller als PDE Tooling -> plugin.xml Wizards Code Generierung
Toolbox Installation der Toolbox IDE: UI (Eclipse View) von Updatesite Bestandteil von redview Target Platform Riena Target Components
Toolbox Installation der Toolbox IDE: UI (Eclipse View)
Toolbox Assembly Editor
Toolbox Installation der Toolbox Target Platform
Toolbox Riena Toolbox IDE + Target Plattform Assembly Editor Code Generierung
Toolbox hands-on
Toolbox hands-on new PlugIn Project oop.conference.toolbox
Toolbox hands-on new PlugIn Project oop.conference.toolbox
Toolbox hands-on new PlugIn Project oop.conference.toolbox
Toolbox hands-on new PlugIn Project oop.conference.toolbox
Toolbox hands-on run as Eclipse Application
Toolbox hands-on refresh Assembly Editor
Toolbox hands-on Assembly Editor: edit Hello World
Toolbox hands-on Assembly Editor: assemble new SubApplication with ModuleGroups, Modules, SubModules
Toolbox hands-on Assembly Editor: generate Code Generate / Register Perspective for the SubApplication Generate View / Controller for each SubModule RunAs Eclipse Application to test
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)
Toolbox hands-on open View Classes edit Code of each View
Toolbox hands-on generate configureridgets for each Submodule
Toolbox hands-on open Controller Classes edit Code of each Controller
Toolbox hands-on plugin.xml by magic
Toolbox hands-on run as Eclipse Application
kurze Pause / Diskussion
from Scratch
from Scratch Daten Modell UI Design ScetchUp Projekt anlegen View Modell erzeugen Views testen WYSIWYG Editor: Views designen
from Scratch das Daten Modell: Customer (String name, String city) hat 0..n Ferienziele: Vacation (String destination)
from Scratch UI Design ScetchUp
from Scratch UI Design: redview UI Elemente
from Scratch hands-on Projekt anlegen
from Scratch hands-on Projekt anlegen
from Scratch hands-on Projekt anlegen
from Scratch hands-on POJO s anlegen
from Scratch hands-on POJO s anlegen
from Scratch hands-on Extensions SWT View Riena redview
from Scratch hands-on org.eclipse.ui.views add Category
from Scratch hands-on org.eclipse.ui.views add View, dann View Klasse erzeugen
from Scratch hands-on View Klasse erzeugen
from Scratch hands-on o.e.riena.ui.swt.imagepaths
from Scratch hands-on org.redview.datasource.xmi.viewstore
from Scratch hands-on build.properties
from Scratch hands-on redview anlegen UI Elemente anlegen Styles und Layout Properties
from Scratch hands-on redview anlegen
from Scratch hands-on redview anlegen
from Scratch hands-on redview WYSIWYG Editor öffnet sich
from Scratch hands-on redview Outline -> add childs
from Scratch hands-on redview Outline -> add some more childs
from Scratch hands-on redview Outline -> copy Name in City
from Scratch hands-on redview Outline -> add RGroup
from Scratch hands-on redview Outline -> add RList zu RGroup
from Scratch hands-on redview Outline -> add Databinding RText
from Scratch hands-on redview Outline -> add Databinding RList
from Scratch hands-on redview Outline -> add Databinding RBase
from Scratch hands-on redview Outline -> add RBaseStyle Properties: set refresh
from Scratch hands-on redview Outline
from Scratch hands-on edit CustomerView
from Scratch hands-on Dependencies
from Scratch hands-on run as Eclipse Application edit launch config (only oop.* from workspace)
from Scratch hands-on run as Eclipse Application edit launch config (deselect Riena examples)
from Scratch hands-on run as Eclipse Application show View (Categorie scratch)
from Scratch hands-on geschafft:
from Scratch hands-on wenn noch Zeit ist: Änderung am Design neu Run As Eclipse Application
kurze Pause / Diskussion
redview + red-open modellgetrieben und dynamisch bis 16:00
redview + red-open modellgetrieben und dynamisch während dieses Themas gibts eine Pause 14:30-15:00
redview + red-open modellgetrieben und dynamisch Installation der red-open Projekte
redview + red-open Installation red-open Generierung Dropins Cartridges Generator Examples redview MetaModel
redview + red-open Installation red-open benötigt 3 PlugIns im Dropins Eclipse beenden in dropins kopieren + neu starten
redview + red-open Installation red-open Cartridge Projekte importieren in Working Set red-open-cartridges
redview + red-open Installation red-open Cartridge Projekte importieren
redview + red-open Installation red-open Generator Projekte importieren in Working Set red-open-generator
redview + red-open Installation red-open Example Projekt importieren in Working Set red-open-examples
redview + red-open Installation redview MetaModel in Workspace importieren in Working Set redview
redview + red-open modellgetrieben und dynamisch Überblick über Generierung Workflow (MWE) Templates (Xpand/Xtend) EMF Domain Modell
redview + red-open modellgetrieben und dynamisch EMF Domain Modell
redview + red-open modellgetrieben und dynamisch EMF Domain Modell
redview + red-open modellgetrieben und dynamisch Workflow Properties anpassen
redview + red-open modellgetrieben und dynamisch Workflow Properties anpassen
redview + red-open modellgetrieben und dynamisch Workflow generiert in das conference Projekt
redview + red-open modellgetrieben und dynamisch das conference Projekt ist eine leere Hülse: kein src, keine icons, keine views, keine plugin.xml
redview + red-open modellgetrieben und dynamisch Workflow Generierung starten
redview + red-open modellgetrieben und dynamisch Workflow Generierung starten
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Inhalt:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Inhalt:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Beans:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Mockups:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit Views:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit redview s:
redview + red-open modellgetrieben und dynamisch Conference Projekt by magic mit plugin.xml:
redview + red-open modellgetrieben und dynamisch Conference Projekt run as Eclipse Application:
redview + red-open modellgetrieben und dynamisch red-open Generierung Workflow Cartridges Extensions
Business UI in Enterprise Applikationen Zusammenfassung Diskussion
http://eclipse.org/riena http://emfstore.org
redview.org @ekkescorner ekkes-corner.org