Graphical Modeling Framework

Alicja [email protected] Jakub [email protected]

Alicja [email protected] Jakub [email protected]

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

Graphical Modeling Framework

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

Clear



▪ 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


Jak działa GMFJak działa GMF

GMF - Ćwiczenia praktyczne

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

ProjektProjekt

Dashboard

Diagram modelu

Model ECoreModel ECore


Generator modeluGenerator modelu

▪ Tworzymy generator 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

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




▪ 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ę

▪ 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)

Przyrost 3Dodajemy kolejny element (Person)


Co zrobimy?Co zrobimy?

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

▪ 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

Label

Child Access

Node

Diagram Label


.gmftool.gmftool

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

▪ 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

▪ 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)

Przyrost 4Zadania (Tasks)(Compartments)


Co teraz robimy?Co teraz robimy?

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

▪ 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




Figure Descriptor

Compartment

Wykorzystywana figura


Compartment - .gmftool

Compartment - .gmftool

▪ Definiujemy narzędzie do stworzenia zadań Task

▪ Definiujemy narzędzie do stworzenia zadań Task


Compartment - .gmfmap

Compartment - .gmfmap

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

▪ 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.

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


Person Tasks - .gmfgraph

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


.gmfgraph.gmfgraph


.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

Model

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ę

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




▪ Wklejamy kod▪ Wklejamy kod




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

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




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

▪ 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

Złożona figura - .gmfmap

▪ Podmieniamy Diagram Label w Label Mapping

▪ 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ć?

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

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

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ę

Documents

Graphical Modeling Framework