1. ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Centro de Informática – CIn/UFPe ORCAS Group Eclipse GMF Fábio M. Pereira Ramon Rabello

2. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework2 Agenda  GMF – What is it?  EMF – Overview  GEF – Overview  GMF – Models

3. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework3 GMF – What is it?  It provides a generative component and runtime infrastructure for developing graphical editors based on EMF (Eclipse Modeling Framework) and GEF (Graphical Editing Framework)  It enables to produce graphical editors for Eclipse –For example, a UML modeling tool, workflow editor, etc. –Basically, a graphical editing surface for any domain model in EMF

4. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework4 GMF – What is it?

5. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Scenario 17/11/2015GEF - Graphical Modeling Framework5

6. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Components 17/11/2015GEF - Graphical Modeling Framework6

7. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites GMF Runtime  Its features provide a consistent look and feel with other GMF-based graphical editors  Its editors can be created manually from the ground up and/or be generated from the great tooling currently being developed as part GMF's SDK  It manages diagram persistence, allowing clients to focus on their business logic  Its extensible nature allows GMF Runtime clients to be fully open editors that in turn can be extended by third-parties 17/11/2015GEF - Graphical Modeling Framework7

8. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites GMF Runtime  It is already integrated with various new EMFT components such as validation and OCL should you need such support  It defines an extensible notation meta-model to enable the isolation of notation from semantic concerns  Its features are well designed, coded, tested, and deployed  Future community enhancements to the runtime will easily be integrated with your editor 17/11/2015GEF - Graphical Modeling Framework8

9. ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Centro de Informática – CIn/UFPe ORCAS Group EMF Overview

10. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework10 EMF – Eclipse Modeling Framework  The EMF project is a modeling framework and code generation facility for building tools and other applications based on a structured data model  The key concepts underlying the framework are: meta-data, code generation, and default serialization

11. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework11 EMF Benefits  Increase productivity  Model change notification  Persistence support including default XMI and schema-based XML serialization  A framework for model validation  A very efficient reflective API for manipulating EMF objects generically  Most important of all, EMF provides the foundation for interoperability with other EMF-based tools and applications

12. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework12 Developing an Eclipse plug-in using EMF  1: Designing the model –The first step is to design the data model for the application - that is, the structure of the data we want to be able to view and edit, and the relationships between data items –You may find a UML tool useful, or a piece of paper  2: Defining the model –The next step is to define the model to EMF so that code can be generated  3: Generating the model –Now that the model has been defined, we can proceed to generate the model implementation  4: Generating an editor  5: Trying out the generated plug-ins

13. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework13 Defining an EMF Model  Our model definition can be provided to the EMF code generator in a number of ways: –UML: if you have a modeling tool that works with EMF, you can simply draw the class diagram (*.uml) –XMI: we could describe the model directly in an XMI document (*.ecore) –Export the XMI document from the Rational Rose modeling tool (*.mdl) –Annotate Java interfaces with model properties (*.java) –Use XML Schema to describe the form of a serialization of the model (*.xsd; *.wsdl)

14. ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Centro de Informática – CIn/UFPe ORCAS Group GEF Graphical Editing Framework Overview

15. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework15 GEF – Graphical Editing Framework  It allows to easily develop graphical representations for existing models –It is possible to develop feature rich graphical editors using GEF  All graphical visualization is done via the Draw2D framework, which is a standard 2D drawing framework based on SWT from eclipse.org

16. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework16 GEF – Graphical Editing Framework  Its editing possibilities allow you to build graphical editors for nearly every model –With these editors, it is possible to do simple modifications to your model, like changing element properties or complex operations like changing the structure of your model in different ways at the same time –All these modifications to your model can be handled in a graphical editor using very common functions like drag and drop, copy and paste, and actions invoked from menus or toolbars

17. ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Centro de Informática – CIn/UFPe ORCAS Group Models

18. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites 17/11/2015GEF - Graphical Modeling Framework18 GMF Generated Diagram Editor

19. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites GMF Generation Overview 17/11/2015GEF - Graphical Modeling Framework19

20. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Develop Graphical Definition 17/11/2015GEF - Graphical Modeling Framework20 It is used to define the figures, nodes, links, etc. that you will display on your diagram

21. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Develop Tooling Definition 17/11/2015GEF - Graphical Modeling Framework21 It is used to specify the palette, creation tools, actions, etc. for your graphical elements

22. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Mapping Definition 17/11/2015GEF - Graphical Modeling Framework22

23. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Develop Mapping Definition 17/11/2015GEF - Graphical Modeling Framework23

24. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Create Generator Model 17/11/2015GEF - Graphical Modeling Framework24

25. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Generate Diagram Plug-in and Run Diagram 17/11/2015GEF - Graphical Modeling Framework25

26. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Validation  Validation Rules are written in OCL  They are defined in GMF Map model –State has ‘States should have unique names’ validation rule –Rules for source and target of a Transition  ‘StopState cannot be a source for a transition’ for StopState  ‘StartState cannot be a target for a transition’ for Transition 17/11/2015GEF - Graphical Modeling Framework26

27. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites Conclusions  Creating graphical editors for domain models is fairly straightforward  Using GMF is an iterative process  GMF code can be customized  It allows M2M transformations 17/11/2015GEF - Graphical Modeling Framework27

28. Centro de Informática – CIn/UFPe ORCAS Group ModelPedia Model Driven Engineering Graphical User Interfaces for Web 2.0 Sites References  Eclipse GMF website http://www.eclipse.org/gmf http://www.eclipse.org/gmf  Eclipse Modeling Framework (EMF) website http://www.eclipse.org/emf http://www.eclipse.org/emf  Graphical Modeling Framework (GEF) website http://ww.eclipse.org/gef http://ww.eclipse.org/gef  Using GMF and M2M for Model-Driven Development (Fesenko, T.; Dvorak, R.; Kolb B.; Voelter, M.)  Introducing the GMF Runtime. http://www.eclipse.org/articles/Article- Introducing-GMF/article.html http://www.eclipse.org/articles/Article- Introducing-GMF/article.html  From Front End To Code - MDSD in Practice. http://www.eclipse.org/articles/Article-FromFrontendToCode- MDSDInPractice/article.html http://www.eclipse.org/articles/Article-FromFrontendToCode- MDSDInPractice/article.html 17/11/2015GEF - Graphical Modeling Framework28