Learn Eclipse GMF in 15 minutes

Get started with model-driven development the Eclipse way

Background

Let me be blunt: In the past, creating graphical editors within Eclipse using the Graphical Editor Framework (GEF) was slow and painful. It involved understanding a complex framework and quite a bit of redundant code. That said, GEF is an excellent framework for creating graphical editors because it is model-agnostic. On the other hand, being model-agnostic creates its own problems.

GEF, in the spirit of the Model-View-Controller (MVC) paradigm, allows you to bring your own model to the table. In the early days of GEF, most people used custom models (think Plain Old Java™ Objects (POJOs)). The problem with custom models is that you find yourself writing common code to support your model, like serialization and the ability to listen to model changes.

The next logical step for using a model in GEF was to use the Eclipse Modeling Framework (EMF), which provides facilities to serialize your model in various formats and the ability to listen to model changes, all out of the box.

However, there were technical challenges (like different command stacks) integrating EMF models within the GEF framework, which delayed adoption of EMF models for GEF-based editors. In the end, the GMF project was born out of this frustration and the desire to bring an expedited way to generate graphical editors. In a similar way, EMF generates basic editors for EMF models.

Create your EMF model

The first step on our adventure is to define an EMF model with which to work. My goal is just to show the process of defining the model and not go into the depth of the facilities that EMF provides for manipulating a model. The model we will use in this example is a simple shapes model. I like to start with a picture to help me visualize how the model will look.

Figure 1. The shapes model visualized

The shapes model visualized

As you can see, the model is a very simple way to help us understand how everything works. It has a notion of some shapes, connections, and a shapes diagram.

EMF supports multiple ways of defining a model. I decided to use annotated Java technology for simplicity. The code listings below show how to define a model using EMF. Our first model object is a shape that has a name attribute, source, and target connections (of type Connection). Please note that this is an abstract EMF class.

Listing 1. Shape.java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/**
 * @model abstract="true"
 */
public interface Shape {
 
/**
 * @model
 */
String getName();
 
/**
 * @model type="com.ibm.model.shapes.model.Connection" containment="true"
 */
List getSourceConnections();
 
/**
 * @model type="com.ibm.model.shapes.model.Connection"
 */
List getTargetConnections();
}

Next, we define a shapes diagram that will hold a list of all our shapes.

Listing 2. ShapesDiagram.java
1
2
3
4
5
6
7
8
9
/**
 * @model
 */
public interface ShapesDiagram {
/**
 * @model type="com.ibm.model.shapes.model.Shape" containment="true"
 */
List getShapes();
}

Next, we define some special shapes to liven up our model a bit.

Listing 3. RectangularShape.java
1
2
3
4
/**
 * @model
 */
public interface RectangularShape extends Shape {}
Listing 4. EllipticalShape.java
1
2
3
4
/**
 * @model
 */
public interface EllipticalShape extends Shape {}

Finally, it would be nice if we had some notion of a connection so we could actually connect our shapes together.

Listing 5. Connection.java
1
2
3
4
5
6
7
8
9
10
/**
 * @model
 */
public interface Connection {
/** @model */
Shape getSource();
 
/** @model */
Shape getTarget();
}

After we have our models defined in the Java programming language, we define a new EMF genmodel by using File > New > Eclipse Modeling Framework > EMF Model (see Figure 2). Note: If you don't have an EMF project, create one first.

Figure 2. EMF annotated Java importer

EMF annotated Java importer

After you create your EMF genmodel, right-click on the file and make sure to generate Model and Edit components (you can just select Generate All to make your life easier).

Create your GMF models

GMF has a set of models you need to create to generate a graphical editor. Figure 3 displays the process involved in creating these models. The first model we need to work with is the graphical definition, which defines the visual aspects of our generated editor. Next is the tooling definition, which comprises things related to editor palettes, menus, etc. Finally, the last model we need is the mapping definition that defines -- you guessed it -- the mapping between the business logic (your EMF shapes model) and visual model (graphical and tooling definition).

Figure 3. GMF overview (from the GMF wiki)

GMF overview

GMF has a great utility called the GMF dashboard (Window > Show View > Other > GMF Dashboard). The dashboard serves as an easy way to go through the process of generating a graphical editor. At this stage, you should already have your domain model and domain genmodel selected.

Figure 4. GMF dashboard

GMF dashboard

The GMF graphical definition model

The first model we create is the graphical definition model (click the create hyperlink under the Graphical Def Model in the dashboard). Make sure to select Canvas as the model object. This model is simple to create:

  1. Create the figures we want displayed on the diagram. This is done by creating a new Figure Gallery entry in the editor and creating various figures.
  2. Create the nodes we'll see on our diagram (rectangular shape and elliptical shape).
  3. Create a connection on our diagram.
  4. Make sure each node matches up to the figure created in the figure gallery.

Note: If you're having trouble with this task, there is a sample plug-in download that has all the models already made for you.

Figure 5. GMF graph model

GMF graph model

The GMF tooling definition model

In this step, we need to define the tooling definition model, which lets us define information-like palettes and menus for our graphical editor. To define a tooling definition model, open the GMF Dashboard and click create. Our simple model only needs to define a palette and some creation tools to help with model creation (see Figure 6).

Figure 6. GMF tooling model

GMF tooling model

The GMF mapping definition model

The mapping definition model is where it all comes together. In this model, we map our visual (graph) model to our business logic (domain model). GMF has a neat set of wizards to help create a mapping definition. It can be invoked using File > New > Graphical Modeling Framework > Guide GMFMap Creation. The first step is to select all of our GMF models (see Figure 7).

Figure 7. GMFMap guide wizard 1

GMFMap guide wizard 1

Next, the wizard intelligently asks us to select which model element we want to use as the diagram root element. In our case, this will be the ShapesDiagram model element.

Figure 8. GMFMap guide wizard 2

GMFMap guide wizard 2

Finally, GMF does some magic for us to figure out what model elements should be mapped to what visual elements.

Figure 9. GMFMap Guide wizard 3

GMFMap guide wizard 3

It is important to note that these wizards may change as GMF evolves. There is talk of GMF using graphical editors bootstrapped by GMF itself to help with the creation of the mapping definition file (and the other GMF models).

Generate your GMF editor

The last and most enjoyable step of this whole process is to generate your graphical editor. To do this, create a GMFGen model from your mapping definition model. To do this, right-click your mapping definition file and select Create generator model.... A new project should be generated containing all the code to work with your graphical editor. To use your graphical editor, launch a new Eclipse runtime workbench and go to File > New > Examples > Model Diagram (see Figure 10).

Figure 10. Model wizard

Model wizard

After your model file is created, you should be able to work with the generated editor (see Figure 11). That wasn't too bad, was it?

Figure 11. Shapes editor

Shapes editor

GMF features

It's important to note that the generated editor we've concocted is only a fraction of GMF's capabilities. There is much tweaking that can be done to take advantage of the advanced features of the framework.

For example, GMF has support for validation. What I mean by this: What happens if we wanted to restrict our shapes model to only allow one connection per model element? Only allow similar elements to connect to each other? Or, how about have control over what type of names can be used for our shapes? GMF is fully capable of supporting these types of validation and more. For validation, GMF takes advantage of the Eclipse Modeling Framework Technology (EMFT) to support scenarios involving defining validators using Java code and the Object Constraint Language (OCL). GMF will put error markers for files that don't pass validation similar to what Eclipse does for Java files that don't compile. To find out more about what GMF supports, see Related topics.

Conclusion

My goal here was twofold: I wanted to demonstrate a new and exciting part of the Eclipse Callisto release that supports model-driven development, and I wanted to show how cool it is, in just 15 minutes, to generate graphical editors in Eclipse.

 

Downloadable resources

 

Related topics

[출처] https://www.ibm.com/developerworks/library/os-ecl-gmf/

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
번호 제목 글쓴이 날짜 조회 수
35 [EMF] EMF Tutorial EMF 튜터리얼 file 졸리운_곰 2023.08.23 20
34 Eclipse RAP Tutorial for Beginners - Workbench Application (OLD) file 졸리운_곰 2021.01.30 66
33 Learn Eclipse GMF in 15 minutes file 졸리운_곰 2019.11.27 42
32 [Eclipse] GEF entry series (10, an implementation of the form) file 졸리운_곰 2019.11.25 45
31 GEF Programmer Guide 번역 졸리운_곰 2019.11.25 53
» Learn Eclipse GMF in 15 minutes file 졸리운_곰 2019.11.20 41
29 RCP 에디터 정리 졸리운_곰 2019.11.20 122
28 다른 그림과 관련하여 GEF 편집기 레이아웃에서 그림의 위치 제한 조건을 동적으로 계산 Dynamically calculating the position constraints for a figure in a GEF editor layout in relation to another figure file 졸리운_곰 2019.11.20 90
27 RCP 등에서 .mf 파일로 다른 프로젝트 익스포트 포함시 라이브러리(메소드)를 찾지 못할 때, Eclipse RCP - cant resolve importing libraries in final build file 졸리운_곰 2019.10.15 181
26 ESE2006-EclipseModelingSymposium15_GMF.pdf file 졸리운_곰 2019.09.21 64
25 GMF_Creation_Review.pdf file 졸리운_곰 2019.09.21 74
24 Eclipse EMF and GMF Tutorial file 졸리운_곰 2019.09.21 46
23 GMF Tutorial/ko file 졸리운_곰 2019.09.20 162
22 Model Driven Architecture approach to domain of graphical editors file 졸리운_곰 2019.09.20 44
21 Single_Sourcing_RAP_RCP_en.pdf file 졸리운_곰 2019.05.15 27
20 Rich client platform 설명 및 배우기 참고 졸리운_곰 2019.05.15 89
19 Rich Ajax Platform, Part 1: 소개 file 졸리운_곰 2019.05.15 126
18 또 하나의 크로스 플랫폼: Eclipse RAP file 졸리운_곰 2019.05.15 143
17 Eclipse 4 RCP 튜토리얼(완료) file 졸리운_곰 2019.05.14 670
16 Updating UI in Eclipse RCP 졸리운_곰 2015.11.07 183
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED