Graphical Modeling Framework

Graphical Modeling Framework
Alicja Ciemniewska i Jakub Jurkiewicz Graphical Modeling Framework Przedstawienie prezentera – Alicja Ciemniewska, Jakub Jurkiewicz, absolwenci PP (inżynieria wymagań), Kuba - pracownik IBM Eclipse Support Center przy Politechnice Poznańskiej Dzisiaj zatrzymamy się trochę nad możliwościami tworzenia graficznych edytorów w Eclipsie. Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz
Agenda Co to jest GMF? Przykłady Jak działa GMF? Do pracy Co jeszcze… Podsumowanie Pytania Eclipse Summer School

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 = GMF is a framework that takes a set of configuration files (a domain model, a graphical definition, and a tool definition), puts them all in a blender, and **poof - magic** out comes a professional looking Eclipse plug-in. Not only does it generate most of the functionality that you have designed, it also gives many freebies such as printing, drag-and-drop, save to image, and customization. GMF to „framework”, który na podstawie zbioru plików konfiguracyjnych: modelu dziedzinowego, definicji graficznej i definicji narzędzi pozwala w łatwy i wręcz magiczny sposób stworzyć profesjonalnie wyglądający plugin Eclipse. Pozwala on wygenerować znaczną część zaprojektowanej funkcjonalności, udostępniając przy tym przydatne funkcje takie jak drukowanie, mechanizm drag & drop, export diagramu do obrazka. Wygenerowanie znacznej części kodu gwarantuje, że kod ten nie jest tak podatny na błędy. Ponadto dzięki temu możemy skupić się na implementacji istotnych funkcji programu. Zanim powstał GMF, diagramy graficzne w Eclipse były tworzone z wykorzystaniem GEFa. GEF pozwalała na wykorzystanie dowolnego modelu danych, jednak najczęściej programiści wykorzystywali EMFa, gdyż posiadał już „wbudowaną” część funkcjonalności (np. Powiadamianie o zmianach w modelu). Z tego właśnie powodu wymyślono GMFa, który łączy zalety modelu EMFa z możliwościam graficznymi GEFa i pozwala na łatwe generowania edytorów graficznych. Eclipse Summer School

Przykłady GMF Ecore Diagram Editor Przykładowy diagram wygenerowany w GMF Eclipse Summer School

Przykłady GMF Taipan Przykładowy diagram wygenerowany w GMF Eclipse Summer School

Przykłady GMF Mind Map Przykładowy diagram wygenerowany w GMF Eclipse Summer School

Przykłady GMF Assembly Editor of Cape Clear Przykładowy diagram wygenerowany w GMF znaleziony w Internecie. Graficzny edytor do modelowania procesów Eclipse Summer School

Przykłady GMF Nasz edytor  Przykładowy diagram wygenerowany w GMF znaleziony w Internecie. Graficzny edytor do modelowania procesów Eclipse Summer School

Jak działa GMF? Schemat Jak działa GMF? Kursy pokazujące jak rozpocząć pracę z GMF od razu przechodzą do kreatorów, które są udostępnione wraz ze środowiskiem i wspomagają pracę z GMFem. Poza modelem zawierającym dane (model dziedzinowy) wszystkie pozostałe pliki konfiguracyjne mogą być wygenerowane za pomocą kreatorów. Jest to bardzo wygodne, jednak posłgując się zasadą "Nie generuj czegoś czego nie rozumiesz" zagłębimy się na chwilę "pod" warstwę kreatorów. Postaram się Państwu ogólnie nakreslić co dzieje się za kreatorami : ecore, gmfgraph, gmftool. gmfmap. Eclipse Summer School

Jak działa GMF: EMF Metamodel ECore Jak wpomniane zostało wcześniej … Model dziedzinowy (pliki ecore/genmodel) stanowią podstawę rozwoju wszelkich aplikacji Eclipsowych. Są to pliki EMF-owe (o EMF już Państwo słyszeli na tym kursie). Pozwalają zamodelować obiekty dziedzinowe, a nastęonie łatwo wygenerować kod obsługujący ten model, włączając klasy reprezentujace obiekty, kod do ich edycji, mechanizm notyfikacji oraz nasłuchiwania na zmiany modelu. Eclipse Summer School

Jak działa GMF: EMF Metamodel ECore Jak wpomniane zostało wcześniej … Model dziedzinowy (pliki ecore/genmodel) stanowią podstawę rozwoju wszelkich aplikacji Eclipsowych. Są to pliki EMF-owe (o EMF już Państwo słyszeli na tym kursie). Pozwalają zamodelować obiekty dziedzinowe, a nastęonie łatwo wygenerować kod obsługujący ten model, włączając klasy reprezentujace obiekty, kod do ich edycji, mechanizm notyfikacji oraz nasłuchiwania na zmiany modelu. ECore zawiera jedynie informacje o modelu Genmodel zawiera informacje potrzebne do wygenerowania kodu Genmodel contains additional information needed for code generation - package prefix, generation options, etc. Eclipse Summer School

Jak działa GMF Definicje graficzna i narzędzi są jasne. Graficzna to lista figur zdefiniowana w plikach .gmfgraph, które będą użte do wyświetlenia klas z modelu dziedzinowego. Definicja narzędzi (.gmftool) określa jaki tekst i ikony mają zostać wyświetlone na palecie oraz jako podpowiedzi na przyciskach. Eclipse Summer School

Jak działa GMF Ostatnim krokiem jest określnenie jak te wszystkie elementy współpracują przez zdefiniowanie pliku mapowania .gmfmap. Ten element stanowi spoiwo wszystkich pozostałych plików konfiguracyjnych. Dzięki niemu GMF wie jaką akcję ma wykonać w odpowiedzi na wybranie elemetnu z palety, jakie klasy wygenerować i jakie figury wyświetlić na diagramie, kiedy te klasy są dodawane do diagramu. Kiedy wszystko jest już połączone za pomocą mapowania, generujemy plik generatora .gmfgen i za jego pomocą kod aplikacji. Eclipse Summer School

GMF - Ćwiczenia praktyczne
Alicja Ciemniewska i Jakub Jurkiewicz GMF - Ćwiczenia praktyczne Przewodniki pokazujące jak rozpocząć przygodę z GMF zaczynają od kreatorów pokazują Kreatory Eclipse Summer School

Przyrost 1 Model EMF Przewodniki pokazujące jak rozpocząć przygodę z GMF zaczynają od kreatorów pokazują Kreatory Eclipse Summer School

Projekt 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” Do katalogu model kopiujemy plik projects.ecore Wybieramy opcję „Initialize ecore_diagram diagram file” Możemy zobaczyć jak wygląda model dziedzinowy naszej aplikacji Eclipse Summer School

Projekt Diagram modelu Tworzymy nowy projekt GMF Zaznaczamy „Show dashboard view for the created project” Do katalogu model kopiujemy plik projects.ecore Wybieramy opcję „Initialize ecore_diagram diagram file” Możemy zobaczyć jak wygląda model dziedzinowy naszej aplikacji Dashboard Eclipse Summer School

Model ECore To jest nasz model dziedzinowy, który posłuży nam do stworzenia edytora graficznego. Edytor będzie pozwalał na stworzenie „map” projektów, zadań zdefiniowanych w ramach projektu i przypisanie ludzi do określonych zadań. Eclipse Summer School

Generator modelu Tworzymy generator modelu Mając plik ECore, generujemy genmodel. Eclipse Summer School

Generator modelu Model generatora - projects.genmodel Generujemy kod: Model code Edit code Mając plik ECore, generujemy genmodel. Eclipse Summer School

Przyrost 2 GMF Pierwsze kroki
Alicja Ciemniewska i Jakub Jurkiewicz Przyrost 2 GMF Pierwsze kroki Przewodniki pokazujące jak rozpocząć przygodę z GMF zaczynają od kreatorów pokazują Kreatory Eclipse Summer School

Definicja graficzna - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz 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 Mając modele .ecore i .genmodel możemy wygenerować graficzną definicję modelu .gmfgraph Model reprezentacji graficznej jest używany do definiowania figur, wierzchołków, połączeń itd. które będą wyświetlane na diagramie. W tym celu klikamy na widoku „GMF Dashboard” (lub w menu New…->Other…->Graphical Definition Model) aby wybrać kreator „Simple Graphical Definition Model wizard” Jako diagram element wybieramy nadrzędny element – czyli trac (to będzie nasze płótno na którym będziemy ustawiać kolejne elementy Eclipse Summer School

Definicja graficzna - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz 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 tylko kilka podstawowych elementów: Project jako wierzchołek Name jako etykietę projektu Subprojects jako połączenie (zalżność) między projektami Eclipse Summer School

Rezultat .gmfgraph Kiedy przyjrzycie się modelowi, ujrzycie element Canvas (płótno) jako nadrzędny element, który posiada galerię figur zawierającą Prostokąt, Etykietę i Linię (łamaną) reprezentującą połączenie. Są one używane przez odpowiadające im elementy modelu: Node (Wierzchołek), Diagram Label (etykieta) i Connection do reprezentacji Projektów z modelu dziedzinowego. Na razie możemy zostawić domyśle wartości dla tych elementów i skupić się na zdefiniowaniu narzędzi (służących do stworzenia tych elementów). Po otworzeniu pliku gmfgraph widzimy, że jego głównym elementem jest element o nazwie Canvas, elementy wchodzące w jego skład to: kształty/figury dostępne w ramach aplikacji (są one tworzone w węźle Figure Gallery Default) wierzchołki (ang. nodes) – graficzna reprezentacja elementów modelu etykiety diagramu (ang. diagram labels) – etykiety wierzchołków połączenia (ang. connections) – linie wskazujące na związki między elementami modelu Definicje figur znajdują się w elementach Figure Descriptor Eclipse Summer School

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 Definicja narzędzi (Tooling definition model) zawiera definicję palety, narzędzi służących do tworzenia elementów, akcji itp. Stworzymy teraz prosty model narzędzi. W rzeczywistości proces ten jest prawie identyczny z poprzednim. Uruchamiamy kreator Simple Tooling Definition Model 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 As mentioned above, the tooling definition model is used to specify the palette, creation tools, actions, etc. for your graphical elements. To the right is a diagram of the model. The cheat sheet will guide you through a very similar process for getting started with our Simple Tooling Definition Model. In fact, the two steps are virtually identical, as the mindmap domain model is loaded and examined for possible tooling needs. We will simply select the same options we did for the graphical definition, save a tool for the Topic name label, and begin with a very simple palette for our Topic elements. Eclipse Summer School

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 Eclipse Summer School

Rezultat - .gmftool Patrząc na stworzony model zobaczymy, że najwyższym elementem jest „Tool registry” pod którym możemy znaleźć Paletę. Paleta zawiera Grupy Narzędzi (na razie tylko jedną) w których znajdują się narzędzia do tworzenia poszczególnych elementów modelu. Looking at the model provided for us, we see there is a top-level 'Tool Registry' element, under which we find a Palette. The palette contains a Tool Group with Creation Tool elements for both Topic nodes and links for subtopic elements that were identified by the wizard. We will reorganize these and modify them a bit in the future, but for now we'll leave the defaults and move on to the mapping definition. Feel free to browse this model and inspect its properties to familiarize yourself with tooling definitions. Eclipse Summer School

Definicja odwzorowania
Alicja Ciemniewska i Jakub Jurkiewicz 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. Ten model jest kluczowy dla rozwoju aplikacji GMF i 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. Eclipse Summer School

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 Eclipse Summer School

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>) Na początek wybierzemy proste mapowanie dla elementów wybranych w poprzednich krokach: Eclipse Summer School

Mapowanie Eclipse Summer School

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 (przed wygenerowaniem sprawdzić czy wszystkie leementy wygenerowały się poprawnie szczególnie Link mapping!!!!!!) Eclipse Summer School

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 Eclipse Summer School

Uruchamianie aplikacji
Alicja Ciemniewska i Jakub Jurkiewicz Uruchamianie aplikacji Tworzymy nową konfigurację i uruchamiamy aplikację Odznaczamy Dodajemy tylko wymagane Sprawdzamy Zapisujemy Eclipse Summer School

Uruchamianie aplikacji
Alicja Ciemniewska i Jakub Jurkiewicz 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) Eclipse Summer School

Efekt przyrostu 2. Eclipse Summer School

Przyrost 3 Dodajemy kolejny element (Person)
Alicja Ciemniewska i Jakub Jurkiewicz Przyrost 3 Dodajemy kolejny element (Person) Przewodniki pokazujące jak rozpocząć przygodę z GMF zaczynają od kreatorów pokazują Kreatory Eclipse Summer School

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

.gmfgraph Definiujemy Figure descriptor dla elementu Person (PersonFigure) Figurę, która będzie reprezentować osobę np. elipsę (PersonFigure) Etykietę z imieniem osoby na elemencie i Child Access Eclipse Summer School

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

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

.gmfgraph Figure Descriptor Ellipse Label Child Access Node Diagram Label Eclipse Summer School

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

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

.gmfmap Definiujemy Top Node Reference Person Top Node Reference Referencja do modelu Eclipse Summer School

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

.gmfmap Feature Label Mapping Etykieta na diagramie UWAGA! Po zmianach w gmftool (po dodaniu grup) gmfam może być niepoprawny, bo zmieniły się położenia narzędzi! Trzeba sprawdzić! Atrybut z modelu wyświetlany na etykiecie Eclipse Summer School

Ć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! ;-) Pdzielimy projekt na 2 częsci:jedna zawierająca etykietę wierzchołka i drugą zawierającą wewnętrzne elementy Eclipse Summer School

Przyrost 4 Zadania (Tasks) (Compartments)
Alicja Ciemniewska i Jakub Jurkiewicz Przyrost 4 Zadania (Tasks) (Compartments) Eclipse Summer School

Co teraz robimy? Dodamy teraz zadania przydzielone do określonych projektów Pdzielimy projekt na 2 częsci:jedna zawierająca etykietę wierzchołka i drugą zawierającą wewnętrzne elementy Eclipse Summer School

Co teraz robimy? 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 Pdzielimy projekt na 2 częsci:jedna zawierająca etykietę wierzchołka i drugą zawierającą wewnętrzne elementy Eclipse Summer School

Compartment - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz 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 Eclipse Summer School

Compartment - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz Compartment - .gmfgraph Figure Descriptor Compartment Wykorzystywana figura Eclipse Summer School

Compartment - .gmftool Definiujemy narzędzie do stworzenia zadań Task Eclipse Summer School

Compartment - .gmfmap Definiujemy mapowanie między modelami – Compartment Mapping w Project Node Mapping Note : If you're wondering about the difference between 'Children Feature' and 'Containment Feature' the idea is this (as described in the newsgroup): the 'Containment Feature' refers to where children are stored, while the 'Children Feature' refers to where to take them from. These are usually the same, and there is no need to set Children Feature if Containment Feature is set as it will default to this value. An example of when you'd need to specify this property is with EClass and EAttribute where eStructuralFeatures is the 'containment' for both operations and attributes, but where eAttributes is 'children' for instances of EAttribute. Eclipse Summer School

Przyrost 5 Zadania przypisane do osób
Alicja Ciemniewska i Jakub Jurkiewicz Przyrost 5 Zadania przypisane do osób Eclipse Summer School

Co teraz robimy? Dodamy zależność określającą, które zadania są przypisane do osób. Eclipse Summer School

Person Tasks - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz Person Tasks - .gmfgraph Dodajemy Polyline Decoration do galerii figur Dodajemy figurę przedstawiającą zależność Figure Descriptor (nazwa: PersonTaskFigure) Polyline Connection Connection Eclipse Summer School

.gmfgraph Eclipse Summer School

PersonTaskDecoration
.gmfgraph PersonTaskDecoration Nowy Figur Descriptor Polyline Connection

.gmfgraph PersonTaskFigure Connection PersonTask Eclipse Summer School

Person Tasks - .gmftool Dodajemy narzędzie do tworzenia połączeń Eclipse Summer School

Person Tasks - .gmfmap Dodajemy Link Mapping Link Mapping Model Narzędzie z palety Element na diagramie Eclipse Summer School

Przyrost 6 Figura złożona (Composite figure)
Alicja Ciemniewska i Jakub Jurkiewicz Przyrost 6 Figura złożona (Composite figure) Eclipse Summer School

Co chcemy zrobić? To co chcemy teraz zrobić to zamienić figurę reprezentującą osobę na figurę przypominającą kształtem człowieczka. Eclipse Summer School

Złożona figura - .gmfgraph
Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Dodajemy prostokąt (Outline – False, Fill – False), a na nim: Layout XY Color Size Figure elements Dodajemy prostokąt, który będzie stanowił ramę naszej figury. Ustawiamy właściwości figury: Outline i Fill na False. Jak widać na rysunku dodamy teraz kolejne element składowe naszej figury. Najpierw dodajemy XY Layout, który pozwoli nam rozmieścić pozostałe figury. Następnie ustawimy rozmiar oraz dodamy pozostałe figury: Elipsy jako głowę i oczy, prostokąt jako nos oraz wielokąty jako usta i resztę ciała. Zamiast dodawać wszystkie elementy po kolei , co byłoby czasochłonne skorzystamy tym razem ze ściągi i wkleimy kod bezpośrednio do pliku. Otwieramy .gmfgraph w edytorze tekstoym, znajdujemy fragment z opisem figury PersonCompositeFigure i wklejamy fragment znajdujący się w dodatkowym pliku. Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Otwieramy w edytorze tekstowym i znajdujemy fragment opisujący figurę Dodajemy prostokąt, który będzie stanowił ramę naszej figury. Ustawiamy właściwości figury: Outline i Fill na False. Jak widać na rysunku dodamy teraz kolejne element składowe naszej figury. Najpierw dodajemy XY Layout, który pozwoli nam rozmieścić pozostałe figury. Następnie ustawimy rozmiar oraz dodamy pozostałe figury: Elipsy jako głowę i oczy, prostokąt jako nos oraz wielokąty jako usta i resztę ciała. Zamiast dodawać wszystkie elementy po kolei , co byłoby czasochłonne skorzystamy tym razem ze ściągi i wkleimy kod bezpośrednio do pliku. Otwieramy .gmfgraph w edytorze tekstoym, znajdujemy fragment z opisem figury PersonCompositeFigure i wklejamy fragment znajdujący się w dodatkowym pliku. Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Wklejamy kod Dodajemy prostokąt, który będzie stanowił ramę naszej figury. Ustawiamy właściwości figury: Outline i Fill na False. Jak widać na rysunku dodamy teraz kolejne element składowe naszej figury. Najpierw dodajemy XY Layout, który pozwoli nam rozmieścić pozostałe figury. Następnie ustawimy rozmiar oraz dodamy pozostałe figury: Elipsy jako głowę i oczy, prostokąt jako nos oraz wielokąty jako usta i resztę ciała. Zamiast dodawać wszystkie elementy po kolei , co byłoby czasochłonne skorzystamy tym razem ze ściągi i wkleimy kod bezpośrednio do pliku. Otwieramy .gmfgraph w edytorze tekstoym, znajdujemy fragment z opisem figury PersonCompositeFigure i wklejamy fragment znajdujący się w dodatkowym pliku. Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Wracamy do edytora GMF – wszystkie elementy są wstawione!  Dodajemy prostokąt, który będzie stanowił ramę naszej figury. Ustawiamy właściwości figury: Outline i Fill na False. Jak widać na rysunku dodamy teraz kolejne element składowe naszej figury. Najpierw dodajemy XY Layout, który pozwoli nam rozmieścić pozostałe figury. Następnie ustawimy rozmiar oraz dodamy pozostałe figury: Elipsy jako głowę i oczy, prostokąt jako nos oraz wielokąty jako usta i resztę ciała. Zamiast dodawać wszystkie elementy po kolei , co byłoby czasochłonne skorzystamy tym razem ze ściągi i wkleimy kod bezpośrednio do pliku. Otwieramy .gmfgraph w edytorze tekstoym, znajdujemy fragment z opisem figury PersonCompositeFigure i wklejamy fragment znajdujący się w dodatkowym pliku. Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Dodajemy etykietę jako osobną figurę BasicLabelFigure oraz PersonBasicLabel Musimy dodać jeszcze podpis figury. W tym celu dodajemy Figure descriptor BasicLabelFigure i w nim dodajemy Label o takiej samej nazwie. Następnie dodajemy Diaram Label – PersonBasicLabel, a we właściwościach ustawiamy Element Icon – false; Figure - BasicLabelFigure Icon Figure Name Eclipse Summer School

Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfgraph Podmieniamy figurę w PersonNode Node Person PersonCompositeFigure Musimy dodać jeszcze podpis figury. W tym celu dodajemy Figure descriptor BasicLabelFigure i w nim dodajemy Label o takiej samej nazwie. Następnie dodajemy Diaram Label – PersonBasicLabel, a we właściwościach ustawiamy Element Icon – false; Figure - BasicLabelFigure Eclipse Summer School

Złożona figura - .gmfmap
Alicja Ciemniewska i Jakub Jurkiewicz Złożona figura - .gmfmap Podmieniamy Diagram Label w Label Mapping Feature Label Mapping PersonBasicLabel Musimy dodać jeszcze podpis figury. W tym celu dodajemy Figure descriptor BasicLabelFigure i w nim dodajemy Label o takiej samej nazwie. Następnie dodajemy Diaram Label – PersonBasicLabel, a we właściwościach ustawiamy Element Icon – false; Figure - BasicLabelFigure Eclipse Summer School

Rezultat przyrostu 6. Eclipse Summer School

Ćwiczenie 2 Co trzeba zrobić? 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ę! ;-) Musimy dodać jeszcze podpis figury. W tym celu dodajemy Figure descriptor BasicLabelFigure i w nim dodajemy Label o takiej samej nazwie. Następnie dodajemy Diaram Label – PersonBasicLabel, a we właściwościach ustawiamy Element Icon – false; Figure - BasicLabelFigure Eclipse Summer School

Co jeszcze można zrobić?
Alicja Ciemniewska i Jakub Jurkiewicz Co jeszcze można zrobić? Eclipse Summer School

List Layout Zmieniamy właściwości w .gmftool List layout wskazuje jak mają zostać ułożone elementy wewnątrz elementu Compartment. Jeśli List layout ma wartość TRUE elementy wewnątrz Compartment będą układane jeden pod drugim wyrównane do lewej strony. Jeśli ustawimy wartość na FALSE elementy będą umieszczone w miejscu wstawienia i będzie je można przesuwać; mogą też wtedy nachodzić na siebie nawzajem. Czasem trzeba usunąć istniejący plugin z diagramem! Eclipse Summer School

Ikony dla elementów modelu
Alicja Ciemniewska i Jakub Jurkiewicz Ikony dla elementów modelu Podmieniamy pliki w katalogu icons Zmieniamy właściwości w .gmftool Eclipse Summer School

Ikony dla edytora i kreatora
Alicja Ciemniewska i Jakub Jurkiewicz Ikony dla edytora i kreatora Zmieniamy właściwości w .gmfgen Właściwości diagramu Właściwości edytora Eclipse Summer School

Zmiana rozszerzenia Zmieniamy właściwości w .gmfgen Eclipse Summer School

Przechowywanie Przechowywanie modelu i diagramu w jednym pliku Sprawdź!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Sprawdzone!  Eclipse Summer School

Wbudowane mechanizmy Eksportu do obrazka Drukowanie Zoom
Automatyczne rozmieszczanie elementów Ukrywanie elementów „Cofnij”/”Ponów”

GMF - Podsumowanie Szybki sposób na tworzenie aplikacji
Profesjonalnie wyglądający edytor Wbudowane mechanizmy

Linki www.eclipse.org/gmf wiki.eclipse.org/GMF_Tutorial
ftp://ftp.man.szczecin.pl/pub/eclipse/technology/ph oenix/demos/gmf-orgchart/GMF-orgchart.swf beyond-the-wizards.html Newsgroup: org.modeling.gmf

Pytania?

Dziękuję za uwagę 

Graphical Modeling Framework

Podobne prezentacje

Prezentacja na temat: "Graphical Modeling Framework"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres

Wejść

Zaloguj się poprzez sieć społeczną:

Graphical Modeling Framework

Podobne prezentacje

Prezentacja na temat: "Graphical Modeling Framework"— Zapis prezentacji:

Podobne prezentacje

О projekcie

Zwrotny adres