Jump to: navigation, search

GMF Tutorial/ko

이 튜토리얼은 (EMF)와 (GEF) 사이에 필요한 구조들을 자동 생성하는 것을 목적으로 하는 Graphical Modeling Framework 라는 이클립스 모델링 프로젝트를 소개합니다. (GMF)

이 튜토리얼에서 우리는 mindmap 어플리케이션을 mindmap에 기술된 요구사항에 따라 개발해 볼 것입니다. 이 문서는 2.0.1 버전을 기준으로 GMF가 제공하는 기능들에 대해 설명하고 있으며 이중 일부는 Depricate 되었을 수도 있습니다.

이곳에서 최신 버전으로 관리되는 예제를 접할 수 있습니다.

GMF 개요

이클립스 기반 제품을 만들때, EMF와 GEF를 모두 이용하는 것은 상당히 일반적인 일이다. 많은 참조 문서들이 그 둘을 어떻게 조합해서 사용하는지에 설명하고 있고, 이들 중 하나가 GMF 프로젝트에 영감을 주게 되었다. GMF 프로젝트에 뛰어들기 전에 어떻게 GMF가 EMF와 GEF를 조합해서 자동적으로 코드들을 생성해 줄 수 있는지 그 접근법을 알아보자. GMF의 런타임과 관련한 문제를 다룬 문서를 이곳에서 볼 수 있다.

GMF 프로젝트는 일명 '개발쟁이 toolsmith'라는 GMF 플러그인 개발자들과, 동시에 '업계종사자 practitioner'라 불리우는 플러그인 사용자들(물론 개발자일 수도 있다.)을 채용했다. 유용성 관점에서, GMF 내부적으로 사용되는 '모델들'의 숫자와 타입들은 완전한 확장성을 위해 감춰져야만 한다. 그러나, 대부분의 개발쟁이들은 내부적으로 돌아가는것을 알고 싶어한다. 그래서 각 모델에 대한 설명이 GMF Documentation 페이지에 링크되어 있다.

GMF Overview

이것은 GMF 개발시에 사용되는 주된 컴포넌트들과 모델들을 설명하는 그림이다. GMF의 핵심은 그래픽적인 정의 모델 개념이다. 이 모델은 GEF기반 운영환경에서 등장할 그래픽적인 요소와 관련된 정보들을 담고있다. 하지만 표현과 수정을 제공하는 도메인 모델들과 직접적인 연관성은 없다. 부가적인 도구 정의 모델은 팔레트와 그 이외의 주변을 디자인하는데 사용된다. (메뉴, 툴바, 등등..)

그래픽적 정의 혹은 도구 정의는 여러 도메인에서 동일하게 작동할 수도 있다. 예를 들어, UML 클래스 다이어그램은 많은 유사점을 가지고 있다. 이것들의 기본적인 외형 및 구조는 굉장히 유사하다. GMF의 목표는 그래픽적인 정의가 여러 도메인에서 재사용 될 수 있도록 허용하는 것이다. 이것은 그래픽적인 정의와 도구적인 정의를 선택된 도메인 모델(들)에 연결하는 분리 매핑 모델 방식으로 가능하다.

알맞게 매핑을 정의했다면, GMF가 제공하는 모델 생성기를 통해 생성 단계를 위한 세부 구현 항목을 정의할 수 있다. 모델 생성기 기반의 에디터 플러그인은 마지막 모델을 가리킬 것이다. 예를 들어, 다이어그램 구동환경 모델 (혹은 "표시 모델 notation") 같은 것. 구동환경은 사용자가 그림으로 작업할 때 표시 모델과 도메인 모델을 연결시킬 것이고, 또한 두 개 사이의 지속성과 동일성을 제공할 것이다. 이 구동환경의 중요한 관점 중에 하나는 EMF와 GEF에 서비스 기반 접근방법을 제공한다는 것이고, non-generated 어플리케이션들에 의해 사용될 수 있다는 것이다.

지금까지 이야기된 GMF 기본 지식들을 가지고, 이제 GMF를 이용하여 특정 도메인을 위한 그래픽 편집기 개발 단계로 나아가 보자. 우선, 당신은 GMF와 그 관련된 도구들을 설치해야 할 것이다.

Setup

Europa gmf.png

이 버전의 튜토리얼은 GMF(2.0.1)를 이용해 작성되었습니다. GMF를 설치하기 위해서는 빌드 페이지에 나열된 전제 조건 플러그인들을 download 페이지나 업데이트 매니저를 이용해 site 에서 설치해야 합니다.

아마도 가장 쉬운 방법은 이클립스 모델링 패키지를 다운로드 받는 것입니다. (역주: 현재 모델링 패키지는 EMF/GEF/GMF를 모두 포함하고 있음)

아래의 TaiPan 예제는 튜토리얼이 좀 오래되었다 하더라도, CVS를 통해 관리되며 마지막 GMF 버전에서도 동작 할 것입니다.


빠른 시작

Checkout.png

실제로 GMF를 돌아가는 모습을 빨리 보고 싶다면, Tipan 예제 프로젝트를 체크아웃 하세요. CVS Repository 뷰에서 오른쪽 그림에서 보이는 리포지터리를 추가 하면 됩니다. 꼭 당장 수행되는 모습을 보지 않아도 좋다면 다음 섹션까지 건너 뒤어도 됩니다.

/HEAD/org.eclipse.gmf/examples 경로에서 org.eclipse.gmf.examples.taipan.* 을 모두 체크아웃 하세요. 우클릭 한 후 Check Out을 선택하면 됩니다. 만약 마지막 GMF 빌드 버전의 전제 조건 환경이 만족되지 않은 상태라면, 날짜별 체크아웃 기능을 이용하여 사용자 환경에 맞는 버전을 체크아웃 할 수도 있습니다. 여튼 중요한 점은 여러분이 가지고 있는 GMF SDK와 Taipan의 버전을 일치시켜야 한다는 겁니다. 프로젝트를 우클릭하고 'Team -> Switch to Another Branch or Version...' 을 선택해서 'Select the tag from the following list'를 선택하고 아랫쪽의 'Add Date...' 버튼을 누르고 GMF 2.0.1 이 릴리즈된 날자를 넣으세요(28 September 2007).

퍼스펙티브를 플러그인 개발 환경으로 전환 하고, org.eclipse.gmf.examples.taipan 프로젝트의 모델 폴더를 열어 봅시다. 여기에 있는 모델들을 하나 하나 열어보고 속성이나 구조를 살펴 봅시다. 생성된 Taipan 예제의 RCP버전과 풀버전도 둘러 볼수 있다는 것을 알게 될 겁니다.

전체 튜토리얼을 통해 모든 모델을 한번씩 살펴보겠지만, 이 예제를 런타임 워크스페이스에서 수행할 수 있는지 구성을 확인하는 차원에서, 기본 이클립스 어플리케이션 실행 구성으로 실행 한 다음, 빈 프로젝트를 하나 만들고 New Wizard로 'Taipan Diagram'을 하나 만들어 봅시다. 편집창이 열리면 당신의 탐구력을 시험해 봅시다. 어떤것들은 특히 더 주의해야 합니다:

  • 툴 팔렛트와 오버뷰.
  • 레이아웃, 셀렉션 툴들.
  • 다이어 그램 이미지 익스포트(svg, bmp, jpeg, gif).
  • 탭된 프로퍼티 뷰.
  • 현재 선택 요소에 대한 폰트와 컬러 옵션.
  • 연결들의 라우팅과 스타일 옵션들.
  • 팝업바와 커넥현 핸들(역주:GEF 피겨 주변에서 선택 및 상호작용등을 나타내는 아주 조그마한 네모)들.
  • 노트와 평면 도형들.
  • 애니메이션 줌과 레이아웃.
  • 다이어 그램의 인쇄.
Taipan diagram.png

Taipan 을 독립 RCP로 실행하려면 새 실행 구성을 만들고 Taipan *.rcp 플러그인들과 디펜던시를 모두 추가한다음 실행하면 됩니다.

Taipan diagram rcp.png

이 튜토리얼의 빠른 시작 부분을 마치도록 하겠습니다. 다음에는 마인드 맵의 모델들을 좀 더 자세히 살펴보도록 하겠습니다.

새 프로젝트

시작하기 전, 워크스페이스(혹은 최소한 GMF 프로젝트에 대해) 컴파일러 버전을 1.5 이상으로 세팅해야 합니다. Window -> Preferences, Java/Compiler 옵션에서 컴파일 레벨을 1.5 이상으로 설정하세요.

여기에서 논한 바와 같이, GMF의 사용 시나리오 중 하나는, 나중에 다른 대체 뷰로 보완 될 임시 정보를 보여줄 마인드맵 어플리케이션의 시각적인 표면을 생산하는 것도 포함합니다. (간트 차트처럼) 튜토리얼의 이 섹션은 GMF의 수용범위를 시연하고 더 나아가 지속적으로 발전되고 성숙하게 될 것입니다. org.eclipse.gmf/examples에서 mindmap 프로젝트들을 찾을 수 있습니다.

Cheatsheet project.png

GMF는 튜토리얼 치트시트 (Help/Cheat Sheets.. 에서 찾을 수 있음)를 제공합니다. (만약 SDK없이 GMF를 설치한 상태라면 Window/Show View.../Other... 에서 GMF Tutorial Cheet Sheet을 선택해 열수도 있습니다.) 이 치트 시트를 이용하면 튜토리얼의 첫 단계를 수행하는데 상당히 유리해 집니다. 이를 이용해 첫 새 프로젝트를 만들어 보세요.

혹은 "New GMF Project"를 새 프로젝트 마법사에서 선택하여 'org.eclipse.gmf.examples.mindmap'이라는 프로젝트를 만들고, 루트 아래 model이라는 폴더를 만들어도 됩니다.

Domain Model Definition

시스템을 설명할 때 늘 상 도메인 모델부터 논하는 것이 필요하다 여겨질테지만, GMF 에서는 통하지 않는 이야기이다. 다이어그램의 정의와 도메인 모델의 정의는 완벽하게 분리되어 관리된다. 하지만 대부분의 개발자에게 친근한 방식을 위해 도메인 모델 부터 시작한 뒤, 위저드를 통해 우리의 다이어그램 정의 모델을 빠르게 만드는 과정을 살펴보도록 하겠다.

우리의 마인드맵 기본 도메인 모델의 Ecore 버전을 여기에서 얻을 수 있다. 치트 시트의 "Domain Model"란에 적힌 것 처럼 Model Importers... 를 선택 한후, Ecore Model ..., "Next" 그 후 내려 받은 Ecore를 넣고 "Load" 버튼을 누르자.

(혹은 XSD파일을 이용해서 모델을 로드할 수도 있다. 여기에서 다운로드할 수 있다. (EMF에서 XSD를 이용하기 위해서는 XSD Feature를 설치해야 한다.) 이 파일을 model 폴더에 복사한 후 원한다면 자유롭게 조사해 보세요. GMF 는

(you'll need to install the XSD feature from EMF in this case). Copy this file into your 'model' folder and feel free to examine the model, if you wish. GMF provides a (bootstrapped) graphical editor to complement the standard EMF generated editors, and is packaged in the SDK. 

To render the mindmap.ecore (or any *.ecore model) with the editor, simply right-click the file and select 'Initialize ecore_diagram diagram file' from the menu.

Mindmap domain model

To continue, create a new mindmap.genmodel from the mindmap.ecore file using the New > Eclipse Modeling Framework > EMF Model wizard. You may wish to change the 'Base Package' property for the genmodel's 'Mindmap' package to org.eclipse.gmf.examples to have your generated packaging match the project name. These steps are also covered in the next step of the cheat sheet.

Generate the model and edit code using the right-click menu available from the root of the generator model. There is no need to create an editor or tests, but you are welcome to do so if you'd like. Now, we're ready to begin creating the graphical and mapping definitions for our mindmap application.

Graphical Definition

Graphical Definition Model, view in actual size.

A graphical definition model is used to define the figures, nodes, links, etc. that you will display on your diagram. The model you will work with to do this is seen at the right.

Continuing on with the next step in the cheat sheet, we will create a new graphical definition model. The cheat sheet will launch the Simple Graphical Definition Model wizard, which is found in the Graphical Modeling Framework folder of the New (Ctrl + N) dialog. Select the 'model' folder under your org.eclipse.gmf.examples.mindmap project for the mindmap.gmfgraph model, and on the next page of the wizard use 'Browse' to locate your mindmap.ecore file. Select our Map class as the Diagram element.

On the last page of the wizard, select a minimal set of element, link, and label options for our Topic class as shown in the image. Later on, feel free to experiment with this wizard and observe its output. For now, we're just interested in getting a minimal set of models to get started. Click 'Finish' to complete.

If you examine the model, you will find a Canvas at the root with a Figure gallery containing basic Rectangle, Label, and Polyline Connection elements. These are used by corresponding Node, Diagram Label, and Connection elements to represent our Topics from the domain model. We can leave the defaults as-is for now and continue with our tooling definition in the next step of the cheat sheet.

Cheatsheet graph.png

Cheatsheet graph2.png

Tip : There are several figure galleries intended for reuse and included with GMF. You can load these into your *.gmfgraph model (or *.gmfmap model) by using "Load Resource..." and entering platform:/plugin/org.eclipse.gmf.graphdef/models/basic.gmfgraph for the Resource URI. Others available include classDiagram.gmfgraph and stateDiagram.gmfgraph.

Tooling Definition

Tooling Definition Model, view in actual size.

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.
Cheatsheet tool.png

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.

Mapping Definition

Mapping Definition Model, view in actual size.

The mapping definition model will let us bind the three models we have so far: the domain, the graphical definition, and the tooling definition. To the right is an image of this model. This is a key model to GMF development and will be used as input to a transformation step which will produce our final model, the generation model.

Continuing on with our cheat sheet, follow the instructions to launch the Guide Mapping Model Creation wizard. We will again select the 'model' folder to hold our mindmap.gmfmap file and move on to load each of the preselected mindmap.ecore, mindmap.gmfgraph, and mindmap.gmftool models. On the next page, select 'Map' as the Diagram Root Element, accept the mindmapPalette from the selected tooling model, and then accept the selected mindmap diagram canvas. Finally, make the last page look like the image below. Note that you can adjust the properties for the selected node or link by using the 'Change...' button in the dialog.

Cheatsheet map.png


Label mapping.png

One thing we need to do manually is create a Label Mapping for our TopicNameLabel from the graphical definition. The result should look like the image to the right. While in the properties view, check the mapping of the TopicNode Node Mapping as well, to make sure it has the desired values. Actually, carefully check that the mapping wizard assigned the proper tool to both the Topic node and the Subtopics link until bug 189410 is resolved.

Before moving on, let's pause to describe the mappings. We'll start with the Label Mapping, as it's the one we're looking at here. It's a straightforward mapping, with the Diagram Label property set as we discussed and a mapping to the 'EAttribute name' feature on our Topic element in the domain model.

Moving up to the Node Mapping, we see that our Diagram Node is mapped to the TopicNode of our graphical definition with its corresponding domain model element mapped to our Topic class. The Topic creation tool is also specified in the mapping.

Above the Node Mapping you will find a Top Node Reference. Its Containment Feature is set to the 'EReference rootTopics' feature of our Map class. So, when new Topic nodes are added to the diagram, the instance of our domain Topic will be added to the rootTopics containment reference of our Map class. The label of the node will display the 'name' attribute of the Topic.

The Map class itself is represented by the Canvas. Select the Canvas Mapping element to see this defined, along with the map to the Palette in our tooling definition. Finally, if you select the Link Mapping, you will observe that connections represented by our TopicSubtopicsLink are mapped to the 'EReference subtopics' feature of our Topic class, and are created with our TopicSubtopics Creation Tool.

Tip : It is important to select the proper element when defining mappings at this stage; that is, before GMF does more complete filtering and validation. A good way to ensure you have selected the element you intended (as several may have the same name), open the mapping definition (*.gmfmap) file in a text editor, when in doubt.

Code Generation

Generation Model, view in actual size.

The last model to cover in this tutorial, and the one that is not as critical to understand at this point, is the GMF generator model. See the diagram to the right if you're interested in examining this model.

Now that the minimal graphical elements and mappings are defined, we can generate the code needed to test our work so far. To accomplish this, we will first create a generator model (*.gmfgen) in order to set the properties for code generation, similar to the familiar EMF genmodel. To accomplish this, right-click the mapping file and select 'Create generator model...' as shown below. When prompted, keep the default name 'mindmap.gmfgen'.


Create gmfgen.png

Now, we can examine the generator model to see what it includes (if you're the curious type). We'll keep all the default values for now and right-click the mindmap.gmfgen file and select 'Generate diagram code' to proceed. If all goes well, you will see a "Code generation completed successfully." message dialog. Dismiss the dialog, opting to never see it again, and notice the new org.eclipse.gmf.examples.mindmap.diagram plug-in in your workspace.

Up to this point, the models used have been fairly straightforward to edit and understand. The transformation that takes place to create the generator model (*.gmfgen) from the mapping model involves a bit of logic that is important to understand. However, it is not required to understand the details at this point in the tutorial, so additional information can be found here for those interested.

Running the Diagram

Notation Model, view in actual size.

Recall that the runtime uses its own 'notation model' to display and persist the graphical components for your diagram. An image of this model is linked here for those interested.

Now that we have generated the plug-in needed for our diagram, let's launch a new runtime workspace and test the diagram. The default settings of a new Eclipse Application runtime configuration should work fine, while you may opt to run a minimal configuration that includes only your generated plug-ins and their runtime dependencies within an org.eclipse.platform.ide configuration.

Create an empty project and invoke the New... dialog (Ctrl+N). Under 'Examples' you'll notice your new Mindmap Diagram. Create a new diagram and explore its functionality, and look for the creation of the domain model instance as you add and save diagram elements. Of course, we've only specified enough in our diagram definition to allow for simple Topic elements and subtopic links.

Basic mindmap.png

Tip : If you'd like remove the icons from your labels (as shown here), try setting the 'Element Icon' property on your 'Diagram Label TopicNameLabel' element in your mindmap.gmfgraph model to 'false'. They are enabled by default.

Summary

As you have seen, using GMF as a means by which to get started creating graphical editors for your domain models is fairly straightforward. We have seen how creating a graphical definition and a mapping definition to the chosen domain can be used to generate much of the basic functionality expected in an EMF/GEF-based editor. In the future, GMF will mature and include more advance capabilities, so check back to see how this tutorial matures along with the project. In the meantime, if you've skipped over links that provide more detail on certain aspects of GMF, now may be the time to do so. Otherwise, feel free to continue with the GMF Tutorial Part 2.

References