graphical modeling framework

Alicja Ciemniewskaalicja.ciemniewska@gmail.com Jakub Jurkiewiczjakub.jurkiewicz@cs.put.poznan.pl

Główny sponsor:Główny sponsor:

Graphical Modeling Framework

Szkoła Letnia Eclipse 2007

AgendaAgenda

▪ Co to jest GMF?

▪ Przykłady

▪ Jak działa GMF?

▪ Do pracy

▪ Co jeszcze…

▪ Podsumowanie

▪ Pytania

▪ Co to jest GMF?

▪ Przykłady

▪ Jak działa GMF?

▪ Do pracy

▪ Co jeszcze…

▪ Podsumowanie

▪ Pytania

Co to jest GMF?Co to jest GMF?

▪ Graphical Modeling Framework (GMF) - projekt Eclipse wspierający łatwe tworzenie edytorów graficznych bazując na EMF i GEF

▪ EMF + GEF =

▪ Graphical Modeling Framework (GMF) - projekt Eclipse wspierający łatwe tworzenie edytorów graficznych bazując na EMF i GEF

▪ EMF + GEF =

Przykłady GMFPrzykłady GMF

▪ Ecore Diagram Editor▪ Ecore Diagram Editor

▪ Taipan▪ Taipan

▪ Mind Map▪ Mind Map

Przykłady GMFPrzykłady GMF▪ Assembly Editor of Cape

Clear▪ Assembly Editor of Cape

▪ Nasz edytor ▪ Nasz edytor

Jak działa GMF?Jak działa GMF?

▪ Schemat▪ Schemat

Jak działa GMF: EMFJak działa GMF: EMF

▪ Metamodel ECore▪ Metamodel ECore

Jak działa GMF: EMFJak działa GMF: EMF

▪ Metamodel ECore▪ Metamodel ECore

Jak działa GMFJak działa GMF

GMF - Ćwiczenia praktyczne

Przyrost 1Model EMFPrzyrost 1Model EMF

▪ Tworzymy nowy projekt GMF

▪ Zaznaczamy Show dashboard view for the created project

▪ Kopiujemy plik projects.ecore

▪ Generujemy diagram Initialize ecore_diagram diagram file

▪ Tworzymy nowy projekt GMF

▪ Zaznaczamy Show dashboard view for the created project

▪ Kopiujemy plik projects.ecore

▪ Generujemy diagram Initialize ecore_diagram diagram file

ProjektProjekt

Dashboard

Diagram modelu

Model ECoreModel ECore

Generator modeluGenerator modelu

▪ Tworzymy generator modelu

Generator modeluGenerator modelu

▪ Model generatora - projects.genmodel

▪ Generujemy kod:

• Model code

• Edit code

▪ Model generatora - projects.genmodel

▪ Generujemy kod:

• Model code

• Edit code

Przyrost 2GMF Pierwsze kroki

Definicja graficzna - .gmfgraph

▪ Definicja graficzna zawiera informacje o figurach reprezentujących elementy modelu

▪ Klikamy na widoku GMF Dashboard (lub w menu New…->Other…->Graphical Definition Model) aby wybrać kreator Simple Graphical Definition Model wizard

▪ Definicja graficzna zawiera informacje o figurach reprezentujących elementy modelu

▪ Klikamy na widoku GMF Dashboard (lub w menu New…->Other…->Graphical Definition Model) aby wybrać kreator Simple Graphical Definition Model wizard

Definicja graficzna - .gmfgraph

▪ Wybieramy katalog, nazwę pliku i plik z modelem

▪ Wybieramy nadrzędny element Trac

▪ Wybieramy tylko kilka podstawowych elementów:

• Project jako wierzchołek

• Name jako etykietę projektu

• Subprojects jako połączenie (zalżność) między projektami

▪ Wybieramy katalog, nazwę pliku i plik z modelem

▪ Wybieramy nadrzędny element Trac

▪ Wybieramy tylko kilka podstawowych elementów:

• Project jako wierzchołek

• Name jako etykietę projektu

• Subprojects jako połączenie (zalżność) między projektami

Rezultat .gmfgraphRezultat .gmfgraph

Definicja narzędziDefinicja narzędzi

▪ Definicja narzędzi (Tooling definition model) zawiera definicję palety, narzędzi służących do tworzenia elementów, akcji itp.

▪ Uruchamiamy kreator Simple Tooling Definition Model

▪ Definicja narzędzi (Tooling definition model) zawiera definicję palety, narzędzi służących do tworzenia elementów, akcji itp.

▪ Uruchamiamy kreator Simple Tooling Definition Model

Definicja narzędziDefinicja narzędzi▪ Wybieramy katalog

i podajemy nazwę pliku

▪ Wybieramy model dziedzinowy (.ecore)

▪ Wybieramy jako element nadrzędny Trac

▪ Odznaczamy wszystko i wybieramy te same elementy co w modelu graficznym Project i subprojects

▪ Wybieramy katalog i podajemy nazwę pliku

▪ Wybieramy model dziedzinowy (.ecore)

▪ Wybieramy jako element nadrzędny Trac

▪ Odznaczamy wszystko i wybieramy te same elementy co w modelu graficznym Project i subprojects

Rezultat - .gmftoolRezultat - .gmftool

Definicja odwzorowaniaDefinicja odwzorowania

▪ Definicja odwzorowania (Mapping definition model) pozwoli połączyć nam 3 modele, które do tej pory stworzyliśmy:

• model (.ecore)

• definicję graficzną (.gmfgraph)

• definicję narzędzi (.gmftool)

▪ Plik .gmfmap będzie użyty jako wejście dla transformacji, która stworzy końcowy model, z którego można wygenerować kod źródłowy aplikacji.

▪ Definicja odwzorowania (Mapping definition model) pozwoli połączyć nam 3 modele, które do tej pory stworzyliśmy:

• model (.ecore)

• definicję graficzną (.gmfgraph)

• definicję narzędzi (.gmftool)

▪ Plik .gmfmap będzie użyty jako wejście dla transformacji, która stworzy końcowy model, z którego można wygenerować kod źródłowy aplikacji.

MapowanieMapowanie▪ W celu stworzenia modelu mapowania

wybieramy kreator Guide Mapping Model Creation.

▪ Ponownie wybieramy katalog model, którym będziemy przechowywać model

▪ Wybieramy plik z modelem dziedzinowym (.ecore), pakiet dla którego generujemy model (trac) oraz klasę (Trac)

▪ Na następnych stronach kreatora wybieramy model graficzny (.gmfgraph) i definicję narzędzi (.gmftool)

▪ Na ostatniej stronie wybieramy elementy do odwzorowania

▪ W celu stworzenia modelu mapowania wybieramy kreator Guide Mapping Model Creation.

▪ Ponownie wybieramy katalog model, którym będziemy przechowywać model

▪ Wybieramy plik z modelem dziedzinowym (.ecore), pakiet dla którego generujemy model (trac) oraz klasę (Trac)

▪ Na następnych stronach kreatora wybieramy model graficzny (.gmfgraph) i definicję narzędzi (.gmftool)

▪ Na ostatniej stronie wybieramy elementy do odwzorowania

MapowanieMapowanie

▪ Po lewej stronie usuwamy wszystkie elementy poza elementem Project (Project, projects)

▪ Po prawej stronie usuwamy wszystkie elementy pozostawiające jedynie połączenie subprojects : Project (ProjectSubprojects; <unspecified>)

▪ Po lewej stronie usuwamy wszystkie elementy poza elementem Project (Project, projects)

▪ Po prawej stronie usuwamy wszystkie elementy pozostawiające jedynie połączenie subprojects : Project (ProjectSubprojects; <unspecified>)

MapowanieMapowanie

MapowanieMapowanie▪ Jedyne co musimy ręcznie zdefiniować w modelu to

etykieta jaka ma zostać wyświetlona na wierzchołkach diagramu:

▪ W tym celu wybieramy element Feature Label Mapping i w widoku Properties dla elementu Diagram Label wybieramy z listy rozwijalnej Diagram Label ProjectName

▪ Jedyne co musimy ręcznie zdefiniować w modelu to etykieta jaka ma zostać wyświetlona na wierzchołkach diagramu:

▪ W tym celu wybieramy element Feature Label Mapping i w widoku Properties dla elementu Diagram Label wybieramy z listy rozwijalnej Diagram Label ProjectName

Generowanie koduGenerowanie kodu▪ Po zakończeniu edycji modelu,

klikamy prawym na modelu i z menu wybieramy opcje Create generator model…

▪ Ponownie podajemy folder, nazwę, ścieżkę do modelu odwzorowania (.gmfmap) oraz ścieżkę do generatora modelu (.genmodel). Resztę opcji pozostawiamy tak jak są zaznaczone domyśnie.

▪ Pojawił się model generatora (.gmfgen). Teraz wybieramy na modelu opcję Generate diagram code

▪ Po zakończeniu edycji modelu, klikamy prawym na modelu i z menu wybieramy opcje Create generator model…

▪ Ponownie podajemy folder, nazwę, ścieżkę do modelu odwzorowania (.gmfmap) oraz ścieżkę do generatora modelu (.genmodel). Resztę opcji pozostawiamy tak jak są zaznaczone domyśnie.

▪ Pojawił się model generatora (.gmfgen). Teraz wybieramy na modelu opcję Generate diagram code

Uruchamianie aplikacjiUruchamianie aplikacji

▪ Tworzymy nową konfigurację i uruchamiamy aplikację

Odznaczamy

Dodajemy tylko

wymagane

Sprawdzamy

Zapisujemy

Uruchamianie aplikacjiUruchamianie aplikacji

▪ Tworzymy nowy projekt, a następnie wybieramy nowy przykład i wybieramy stworzony przez nas Projects Diagram

▪ Teraz możemy dodawać nowe elementy, Projekty, Podprojekty i definiować połączenia między nimi.

▪ Działa Zoom

▪ Można automatycznie ustawiać elementy za pomocą Arrange All

▪ Dostępna jest siatka ułatwiająca pozycjonowanie elementów (menu Diagram->View->Grid)

▪ Tworzymy nowy projekt, a następnie wybieramy nowy przykład i wybieramy stworzony przez nas Projects Diagram

▪ Teraz możemy dodawać nowe elementy, Projekty, Podprojekty i definiować połączenia między nimi.

▪ Działa Zoom

▪ Można automatycznie ustawiać elementy za pomocą Arrange All

▪ Dostępna jest siatka ułatwiająca pozycjonowanie elementów (menu Diagram->View->Grid)

Efekt przyrostu 2.Efekt przyrostu 2.

Przyrost 3Dodajemy kolejny element (Person)

Co zrobimy?Co zrobimy?

▪ Teraz dodamy kolejny element reprezentujący osoby. Zrobimy to edytując pliki modelu graficznego

.gmfgraph.gmfgraph

▪ Definiujemy Figure descriptor dla elementu Person (PersonFigure)

▪ Figurę, która będzie reprezentować osobę np. elipsę (PersonFigure)

▪ Definiujemy Figure descriptor dla elementu Person (PersonFigure)

▪ Figurę, która będzie reprezentować osobę np. elipsę (PersonFigure)

.gmfgraph.gmfgraph

▪ Etykietę z imieniem osoby na elemencie (PersonLabel)

▪ oraz dostęp do etykiety - Child Access

▪ Etykietę z imieniem osoby na elemencie (PersonLabel)

▪ oraz dostęp do etykiety - Child Access

.gmfgraph.gmfgraph

• Wierzchołek reprezentujący osobę – Person

• Etykietę Diagram Label - PersonName

• Wierzchołek reprezentujący osobę – Person

• Etykietę Diagram Label - PersonName

.gmfgraph .gmfgraph

Figure DescriptorEllipse

Child Access

Diagram Label

.gmftool.gmftool

▪ W .gmftool musimy zdefiniować narzędzia do tworzenia tych elementów

▪ Najpierw jednak podzielimy elementy na dwie grupy:

• Nodes

• Connections

▪ Najpierw jednak podzielimy elementy na dwie grupy:

• Nodes

• Connections

.gmftool.gmftool

▪ Do grupy z wierzchołkami dodajemy (przez skopiowanie) narzędzie do tworzenia wierzchołków reprezentujących osoby

.gmfmap.gmfmap• Definiujemy Top Node Reference Person• Definiujemy Top Node Reference Person

Top Node Reference

Referencja do modelu

.gmfmap.gmfmap

Node Mapping

Element modelu

Wierzchołek na diagramie

Narzędzie z palety

.gmfmap.gmfmap

Feature Label Mapping

Etykieta na diagramie

Atrybut z modelu wyświetlany na etykiecie

Ćwiczenie 1Ćwiczenie 1▪ Co trzeba zrobić?

• W modelu dodać nowy element (z atrybutem typu EString), który będzie trzymany w klasie Trac (zależność Aggregation)

• Wygenerować model i edit

• Dokonać zmian w definicji graficznej

• Dokonać zmian w definicji narzędzi

• Dokonać zmian w mapowaniu

• Przegenerować kod diagramu

▪ UWAGA! Można wygrać batonika za najciekawszy element! ;-)

▪ Co trzeba zrobić?

• W modelu dodać nowy element (z atrybutem typu EString), który będzie trzymany w klasie Trac (zależność Aggregation)

• Wygenerować model i edit

• Dokonać zmian w definicji graficznej

• Dokonać zmian w definicji narzędzi

• Dokonać zmian w mapowaniu

• Przegenerować kod diagramu

▪ UWAGA! Można wygrać batonika za najciekawszy element! ;-)

Przyrost 4Zadania (Tasks)(Compartments)

Co teraz robimy?Co teraz robimy?

▪ Dodamy teraz zadania przydzielone do określonych projektów

▪ Najpierw wydzielimy w elemencie Project miejsce, w którym znajdować się będą zadania (Compartment)

▪ Stworzymy elementy Task reprezentujące zadania wewnątrz elementów Project

▪ Najpierw wydzielimy w elemencie Project miejsce, w którym znajdować się będą zadania (Compartment)

▪ Stworzymy elementy Task reprezentujące zadania wewnątrz elementów Project

Compartment - .gmfgraph

▪ Definiujemy nową figurę reprezentującą zadania

• Figure Descriptor – TaskFigure i Rectangle - TaskFigure

• Label TaskSummaryFigure

• Child Access do elementu etykiety

▪ Def. wierzchołek reprezentujący zadanie – Task Node

▪ Diagram Label TaskSummary

▪ TaskCompartment

Pamiętaj, aby usunąć Flow Layout z ProjectFigure

▪ Definiujemy nową figurę reprezentującą zadania

• Figure Descriptor – TaskFigure i Rectangle - TaskFigure

• Label TaskSummaryFigure

• Child Access do elementu etykiety

▪ Def. wierzchołek reprezentujący zadanie – Task Node

▪ Diagram Label TaskSummary

▪ TaskCompartment

Pamiętaj, aby usunąć Flow Layout z ProjectFigure

Compartment - .gmfgraph

Figure Descriptor

Compartment

Wykorzystywana figura

Compartment - .gmftool

▪ Definiujemy narzędzie do stworzenia zadań Task

Compartment - .gmfmap

▪ Definiujemy mapowanie między modelami – Compartment Mapping w Project Node Mapping

Przyrost 5Zadania przypisane

do osób

Przyrost 5Zadania przypisane

do osób

▪ Dodamy zależność określającą, które zadania są przypisane do osób.

Person Tasks - .gmfgraph

▪ Dodajemy Polyline Decoration do galerii figur

▪ Dodajemy figurę przedstawiającą zależność

• Figure Descriptor (nazwa: PersonTaskFigure)

• Polyline Connection

▪ Connection

▪ Dodajemy Polyline Decoration do galerii figur

▪ Dodajemy figurę przedstawiającą zależność

• Figure Descriptor (nazwa: PersonTaskFigure)

• Polyline Connection

▪ Connection

.gmfgraph.gmfgraph

PersonTaskDecoration

Nowy Figur Descriptor

Polyline Connection

.gmfgraph.gmfgraph

Connection PersonTask

PersonTaskFigure

Person Tasks - .gmftoolPerson Tasks - .gmftool▪ Dodajemy narzędzie do tworzenia

połączeń▪ Dodajemy narzędzie do tworzenia

połączeń

Person Tasks - .gmfmapPerson Tasks - .gmfmap

▪ Dodajemy Link Mapping▪ Dodajemy Link Mapping

Link Mapping

Element na diagramie Narzędzie z palety

Przyrost 6Figura złożona

(Composite figure)

Przyrost 6Figura złożona

(Composite figure)

Co chcemy zrobić?Co chcemy zrobić?

Złożona figura - .gmfgraph

▪ Dodajemy prostokąt (Outline – False, Fill – False), a na nim:

• Layout XY

• Color

• Size

• Figure elements

▪ Dodajemy prostokąt (Outline – False, Fill – False), a na nim:

• Layout XY

• Color

• Size

• Figure elements

▪ Otwieramy w edytorze tekstowym i znajdujemy fragment opisujący figurę

▪ Wklejamy kod▪ Wklejamy kod

▪ Wracamy do edytora GMF – wszystkie elementy są wstawione!

▪ Dodajemy etykietę jako osobną figurę BasicLabelFigure oraz PersonBasicLabel

IconFigureName

▪ Podmieniamy figurę w PersonNode▪ Podmieniamy figurę w PersonNode

PersonCompositeFigure

Node Person

Złożona figura - .gmfmap

▪ Podmieniamy Diagram Label w Label Mapping

PersonBasicLabel

Feature Label Mapping

Rezultat przyrostu 6.Rezultat przyrostu 6.

Ćwiczenie 2Ćwiczenie 2

• Wymyśleć figurę

• Zmienić definicję figury w gmfgraph

• Uaktualnić odnośniki (jeśli jest to konieczne) dla naszej figury – pliki gmfgraph i gmfmap

▪ UWAGA! Można wygrać batonika za najciekawszą figurę! ;-)

• Wymyśleć figurę

• Zmienić definicję figury w gmfgraph

• Uaktualnić odnośniki (jeśli jest to konieczne) dla naszej figury – pliki gmfgraph i gmfmap

▪ UWAGA! Można wygrać batonika za najciekawszą figurę! ;-)

Co jeszczemożna zrobić?

List LayoutList Layout▪ Zmieniamy właściwości w .gmftool▪ Zmieniamy właściwości w .gmftool

Ikony dla elementów modelu

▪ Podmieniamy pliki w katalogu icons

▪ Zmieniamy właściwości w .gmftool

▪ Podmieniamy pliki w katalogu icons

▪ Zmieniamy właściwości w .gmftool

Ikony dla edytora i kreatora

▪ Zmieniamy właściwości w .gmfgen▪ Zmieniamy właściwości w .gmfgen

Właściwości diagramu

Właściwości edytora

Zmiana rozszerzeniaZmiana rozszerzenia▪ Zmieniamy właściwości w .gmfgen▪ Zmieniamy właściwości w .gmfgen

PrzechowywaniePrzechowywanie▪ Przechowywanie modelu i diagramu

w jednym pliku▪ Przechowywanie modelu i diagramu

w jednym pliku

Wbudowane mechanizmyWbudowane mechanizmy

▪ Eksportu do obrazka

▪ Drukowanie

▪ Zoom

▪ Automatyczne rozmieszczanie elementów

▪ Ukrywanie elementów

▪ „Cofnij”/”Ponów”

▪ Eksportu do obrazka

▪ Drukowanie

▪ Zoom

▪ Automatyczne rozmieszczanie elementów

▪ Ukrywanie elementów

▪ „Cofnij”/”Ponów”

GMF - PodsumowanieGMF - Podsumowanie

▪ Szybki sposób na tworzenie aplikacji

▪ Profesjonalnie wyglądający edytor

▪ Wbudowane mechanizmy

▪ Szybki sposób na tworzenie aplikacji

▪ Profesjonalnie wyglądający edytor

▪ Wbudowane mechanizmy

LinkiLinki

▪ www.eclipse.org/gmf

▪ wiki.eclipse.org/GMF_Tutorial

▪ ftp://ftp.man.szczecin.pl/pub/eclipse/technology/phoenix/demos/gmf-orgchart/GMF-orgchart.swf

▪ www.onjava.com/pub/a/onjava/2007/07/11/gmf-beyond-the-wizards.html

▪ Newsgroup: org.modeling.gmf

▪ www.eclipse.org/gmf

▪ wiki.eclipse.org/GMF_Tutorial

▪ ftp://ftp.man.szczecin.pl/pub/eclipse/technology/phoenix/demos/gmf-orgchart/GMF-orgchart.swf

▪ www.onjava.com/pub/a/onjava/2007/07/11/gmf-beyond-the-wizards.html

▪ Newsgroup: org.modeling.gmf

Pytania?Pytania?Pytania?Pytania?

Dziękuję za uwagę

graphical modeling framework

Documents

landslide graphical analysis

a practical course in graphical bayesian modeling; class 1...

online data monitoring framework based on histogram ... ·...

eclipse modeling framework@tues

introduction to the eclipse modeling framework - omg ·...

integrative simulation framework for modeling dynamic...

modeling two-player games in the sigma graphical cognitive...

charte graphique / graphical identity

graphical symbols iso

modellgetriebene softwareentwicklung reaktiver...

05 probabilistic graphical models

graphical user interface

einführung in das graphical editor framework tutorial,...

graphical abstract 2

escuela preparatoria semi-autónoma whitmore informe de...

graphical inference

graphical analysis minitab r17

Δρ Γ Χαμόδρακας‘νάπτυξη... · qt/...

eclipse modeling framework (emf) and graphical modeling...

business process modeling: review & framework