Graphical Modeling Framework

1. Graphical Modeling Framework

2. Agenda • Co to jest GMF? • Przykłady • Jak działa GMF? • Do pracy • Co jeszcze… • Podsumowanie • Pytania

3. 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 =

4. Przykłady GMF • Ecore Diagram Editor

5. Przykłady GMF • Taipan

6. Przykłady GMF • MindMap

7. Przykłady GMF • Assembly Editor of Cape Clear

8. Przykłady GMF • Nasz edytor 

9. Jak działa GMF? • Schemat

10. Jak działa GMF: EMF • Metamodel ECore

11. Jak działa GMF: EMF • Metamodel ECore

12. Jak działa GMF

13. Jak działa GMF

14. GMF - Ćwiczenia 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 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

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

24. Rezultat .gmfgraph

25. Definicja 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

26. Definicja 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

27. Rezultat - .gmftool

28. Definicja 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.

29. Mapowanie 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

30. Mapowanie 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>)

31. Mapowanie

32. Mapowanie 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

33. Generowanie 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

34. Uruchamianie aplikacji Tworzymy nową konfigurację i uruchamiamy aplikację Odznaczamy Dodajemy tylko wymagane Sprawdzamy Zapisujemy

35. Uruchamianie 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)

36. Efekt przyrostu 2.

37. Przyrost 3Dodajemy kolejny element (Person)

38. Co zrobimy? Teraz dodamy kolejny element reprezentujący osoby. Zrobimy to edytując pliki modelu graficznego

39. .gmfgraph Definiujemy Figure descriptor dla elementu Person (PersonFigure) Figurę, która będzie reprezentować osobę np. elipsę (PersonFigure)

40. .gmfgraph Etykietę z imieniem osoby na elemencie (PersonLabel) oraz dostęp do etykiety - Child Access

41. .gmfgraph Wierzchołek reprezentujący osobę – Person Etykietę Diagram Label - PersonName

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

43. .gmftool W .gmftool musimy zdefiniować narzędzia do tworzenia tych elementów • Najpierw jednak podzielimy elementy na dwie grupy: • Nodes • Connections

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

45. .gmfmap Definiujemy Top Node Reference Person Top Node Reference Referencja do modelu

46. .gmfmap Node Mapping Element modelu Wierzchołek na diagramie Narzędzie z palety

47. .gmfmap Feature Label Mapping Etykieta na diagramie Atrybut z modelu wyświetlany na etykiecie

48. Efekt przyrostu 3.

49. Ć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! ;-)

50. Przyrost 4Zadania (Tasks)(Compartments)