Graphical Modeling Framework

1
Graphical Modeling Framework
2
Agenda

• Co to jest GMF?
• Przyklady
• Jak dziala GMF?
• Do pracy
• Co jeszcze
• Podsumowanie
• Pytania

3
Co to jest GMF?

• Graphical Modeling Framework (GMF) - projekt
  Eclipse wspierajacy latwe tworzenie edytorów
  graficznych bazujac na EMF i GEF
• EMF GEF

4
Przyklady GMF

• Ecore Diagram Editor

5
Przyklady GMF

• Taipan

6
Przyklady GMF

• Mind Map

7
Przyklady GMF

• Assembly Editor of Cape Clear

8
Przyklady GMF

• Nasz edytor ?

9
Jak dziala GMF?

• Schemat

10
Jak dziala GMF EMF

• Metamodel ECore

11
Jak dziala GMF EMF

• Metamodel ECore

12
Jak dziala GMF
13
Jak dziala GMF
14
GMF - Cwiczenia praktyczne
15
Przyrost 1Model EMF
16
Projekt

• Tworzymy nowy projekt GMF
• Zaznaczamy Show dashboard view for the created
  project
• Kopiujemy plik projects.ecore
• Generujemy diagram Initialize ecore_diagram
  diagram file

17
Projekt
Diagram modelu
Dashboard
18
Model ECore
19
Generator modelu

• Tworzymy generator modelu

20
Generator modelu

• Model generatora - projects.genmodel
• Generujemy kod
• Model code
• Edit code

21
Przyrost 2GMF Pierwsze kroki
22
Definicja graficzna - .gmfgraph

• Definicja graficzna zawiera informacje o figurach
  reprezentujacych elementy modelu
• Klikamy na widoku GMF Dashboard (lub w menu
  New-gtOther-gtGraphical Definition Model) aby
  wybrac kreator Simple Graphical Definition Model
  wizard

23
Definicja graficzna - .gmfgraph

• Wybieramy katalog, nazwe pliku i plik z modelem
• Wybieramy nadrzedny element Trac
• Wybieramy tylko kilka podstawowych elementów
• Project jako wierzcholek
• Name jako etykiete projektu
• Subprojects jako polaczenie (zalznosc) miedzy
  projektami

24
Rezultat .gmfgraph
25
Definicja narzedzi

• Definicja narzedzi (Tooling definition model)
  zawiera definicje palety, narzedzi sluzacych do
  tworzenia elementów, akcji itp.
• Uruchamiamy kreator Simple Tooling Definition
  Model

26
Definicja narzedzi

• Wybieramy katalog i podajemy nazwe pliku
• Wybieramy model dziedzinowy (.ecore)
• Wybieramy jako element nadrzedny Trac
• Odznaczamy wszystko i wybieramy te same elementy
  co w modelu graficznym Project i subprojects

27
Rezultat - .gmftool
28
Definicja odwzorowania

• Definicja odwzorowania (Mapping definition model)
  pozwoli polaczyc nam 3 modele, które do tej pory
  stworzylismy
• model (.ecore)
• definicje graficzna (.gmfgraph)
• definicje narzedzi (.gmftool)
• Plik .gmfmap bedzie uzyty jako wejscie dla
  transformacji, która stworzy koncowy model, z
  którego mozna wygenerowac kod zródlowy aplikacji.

29
Mapowanie

• W celu stworzenia modelu mapowania wybieramy
  kreator Guide Mapping Model Creation.
• Ponownie wybieramy katalog model, którym bedziemy
  przechowywac model
• Wybieramy plik z modelem dziedzinowym (.ecore),
  pakiet dla którego generujemy model (trac) oraz
  klase (Trac)
• Na nastepnych stronach kreatora wybieramy model
  graficzny (.gmfgraph) i definicje narzedzi
  (.gmftool)
• Na ostatniej stronie wybieramy elementy do
  odwzorowania

30
Mapowanie

• Po lewej stronie usuwamy wszystkie elementy poza
  elementem Project (Project, projects)
• Po prawej stronie usuwamy wszystkie elementy
  pozostawiajace jedynie polaczenie subprojects
  Project (ProjectSubprojects ltunspecifiedgt)

31
Mapowanie
32
Mapowanie

• Jedyne co musimy recznie zdefiniowac w modelu to
  etykieta jaka ma zostac wyswietlona na
  wierzcholkach diagramu
• W tym celu wybieramy element Feature Label
  Mapping i w widoku Properties dla elementu
  Diagram Label wybieramy z listy rozwijalnej
  Diagram Label ProjectName

33
Generowanie kodu

• Po zakonczeniu edycji modelu, klikamy prawym na
  modelu i z menu wybieramy opcje Create generator
  model
• Ponownie podajemy folder, nazwe, sciezke do
  modelu odwzorowania (.gmfmap) oraz sciezke do
  generatora modelu (.genmodel). Reszte opcji
  pozostawiamy tak jak sa zaznaczone domysnie.
• Pojawil sie model generatora (.gmfgen). Teraz
  wybieramy na modelu opcje Generate diagram code

34
Uruchamianie aplikacji

• Tworzymy nowa konfiguracje i uruchamiamy aplikacje

Odznaczamy Dodajemy tylko wymagane Sprawdzamy Z
apisujemy
35
Uruchamianie aplikacji

• Tworzymy nowy projekt, a nastepnie wybieramy nowy
  przyklad i wybieramy stworzony przez nas Projects
  Diagram
• Teraz mozemy dodawac nowe elementy, Projekty,
  Podprojekty i definiowac polaczenia miedzy nimi.
• Dziala Zoom
• Mozna automatycznie ustawiac elementy za pomoca
  Arrange All
• Dostepna jest siatka ulatwiajaca pozycjonowanie
  elementów (menu Diagram-gtView-gtGrid)

36
Efekt przyrostu 2.
37
Przyrost 3Dodajemy kolejny element (Person)
38
Co zrobimy?

• Teraz dodamy kolejny element reprezentujacy
  osoby. Zrobimy to edytujac pliki modelu
  graficznego

39
.gmfgraph

• Definiujemy Figure descriptor dla elementu Person
  (PersonFigure)
• Figure, która bedzie reprezentowac osobe np.
  elipse (PersonFigure)

40
.gmfgraph

• Etykiete z imieniem osoby na elemencie
  (PersonLabel)
• oraz dostep do etykiety - Child Access

41
.gmfgraph

• Wierzcholek reprezentujacy osobe Person
• Etykiete Diagram Label - PersonName

42
.gmfgraph
Figure Descriptor
Ellipse
Label
Child Access
Node
Diagram Label
43
.gmftool

• W .gmftool musimy zdefiniowac narzedzia do
  tworzenia tych elementów

• Najpierw jednak podzielimy elementy na dwie
  grupy
• Nodes
• Connections

44
.gmftool

• Do grupy z wierzcholkami dodajemy (przez
  skopiowanie) narzedzie do tworzenia wierzcholków
  reprezentujacych osoby

45
.gmfmap

• Definiujemy Top Node Reference Person

Top Node Reference
Referencja do modelu
46
.gmfmap
Node Mapping
Element modelu
Wierzcholek na diagramie
Narzedzie z palety
47
.gmfmap
Feature Label Mapping
Etykieta na diagramie
Atrybut z modelu wyswietlany na etykiecie
48
Efekt przyrostu 3.
49
Cwiczenie 1

• Co trzeba zrobic?
• W modelu dodac nowy element (z atrybutem typu
  EString), który bedzie trzymany w klasie Trac
  (zaleznosc Aggregation)
• Wygenerowac model i edit
• Dokonac zmian w definicji graficznej
• Dokonac zmian w definicji narzedzi
• Dokonac zmian w mapowaniu
• Przegenerowac kod diagramu
• UWAGA! Mozna wygrac batonika za najciekawszy
  element! -)

50
Przyrost 4Zadania (Tasks)(Compartments)
51
Co teraz robimy?

• Dodamy teraz zadania przydzielone do okreslonych
  projektów

52
Co teraz robimy?

• Najpierw wydzielimy w elemencie Project
  miejsce, w którym znajdowac sie beda zadania
  (Compartment)
• Stworzymy elementy Task reprezentujace zadania
  wewnatrz elementów Project

53
Compartment - .gmfgraph

• Definiujemy nowa figure reprezentujaca zadania
• Figure Descriptor TaskFigure i Rectangle -
  TaskFigure
• Label TaskSummaryFigure
• Child Access do elementu etykiety
• Def. wierzcholek reprezentujacy zadanie Task
  Node
• Diagram Label TaskSummary
• TaskCompartment
• Pamietaj, aby usunac Flow Layout z
  ProjectFigure

54
Compartment - .gmfgraph
Figure Descriptor
Compartment
Wykorzystywana figura
55
Compartment - .gmftool

• Definiujemy narzedzie do stworzenia zadan Task

56
Compartment - .gmfmap

• Definiujemy mapowanie miedzy modelami
  Compartment Mapping w Project Node Mapping

57
Efekt przyrostu 4.
58
Przyrost 5Zadania przypisanedo osób
59
Co teraz robimy?

• Dodamy zaleznosc okreslajaca, które zadania sa
  przypisane do osób.

60
Person Tasks - .gmfgraph

• Dodajemy Polyline Decoration do galerii figur
• Dodajemy figure przedstawiajaca zaleznosc
• Figure Descriptor (nazwa PersonTaskFigure)
• Polyline Connection
• Connection

61
.gmfgraph
62
.gmfgraph
63
.gmfgraph
PersonTaskDecoration
Nowy Figur Descriptor
Polyline Connection
64
.gmfgraph
PersonTaskFigure
Connection PersonTask
65
Person Tasks - .gmftool

• Dodajemy narzedzie do tworzenia polaczen

66
Person Tasks - .gmfmap

• Dodajemy Link Mapping

Link Mapping
Model
Narzedzie z palety
Element na diagramie
67
Efekt przyrostu 5.
68
Przyrost 6Figura zlozona(Composite figure)
69
Co chcemy zrobic?
70
Zlozona figura - .gmfgraph

• Dodajemy prostokat (Outline False, Fill
  False), a na nim
• Layout XY
• Color
• Size
• Figure elements

71
Zlozona figura - .gmfgraph

• Otwieramy w edytorze tekstowym i znajdujemy
  fragment opisujacy figure

72
Zlozona figura - .gmfgraph

• Wklejamy kod

73
Zlozona figura - .gmfgraph

• Wracamy do edytora GMF wszystkie elementy sa
  wstawione! ?

74
Zlozona figura - .gmfgraph

• Dodajemy etykiete jako osobna figure
  BasicLabelFigure oraz PersonBasicLabel

Icon
Figure
Name
75
Zlozona figura - .gmfgraph

• Podmieniamy figure w PersonNode

Node Person
PersonCompositeFigure
76
Zlozona figura - .gmfmap

• Podmieniamy Diagram Label w Label Mapping

Feature Label Mapping
PersonBasicLabel
77
Rezultat przyrostu 6.
78
Cwiczenie 2

• Co trzeba zrobic?
• Wymyslec figure
• Zmienic definicje figury w gmfgraph
• Uaktualnic odnosniki (jesli jest to konieczne)
  dla naszej figury pliki gmfgraph i gmfmap
• UWAGA! Mozna wygrac batonika za najciekawsza
  figure! -)

79
Co jeszczemozna zrobic?
80
List Layout

• Zmieniamy wlasciwosci w .gmftool

81
Ikony dla elementów modelu

• Podmieniamy pliki w katalogu icons
• Zmieniamy wlasciwosci w .gmftool

82
Ikony dla edytora i kreatora

• Zmieniamy wlasciwosci w .gmfgen

Wlasciwosci diagramu
Wlasciwosci edytora
83
Zmiana rozszerzenia

• Zmieniamy wlasciwosci w .gmfgen

84
Przechowywanie

• Przechowywanie modelu i diagramu w jednym pliku

85
Wbudowane mechanizmy

• Eksportu do obrazka
• Drukowanie
• Zoom
• Automatyczne rozmieszczanie elementów
• Ukrywanie elementów
• Cofnij/Ponów

86
GMF - Podsumowanie

• Szybki sposób na tworzenie aplikacji
• Profesjonalnie wygladajacy edytor
• Wbudowane mechanizmy

87
Linki

• www.eclipse.org/gmf
• wiki.eclipse.org/GMF_Tutorial
• ftp//ftp.man.szczecin.pl/pub/eclipse/technology/p
  hoenix/demos/gmf-orgchart/GMF-orgchart.swf
• www.onjava.com/pub/a/onjava/2007/07/11/gmf-beyond-
  the-wizards.html
• Newsgroup org.modeling.gmf

88
Pytania?
89
Dziekuje za uwage ?