GMF之Shapes實例Part1：建立一個GMF項目

接觸GEF與GMF有一段時間了，感受它們的功能仍是很強大的，只是我學的比較慢。也許每一個人的學習方法不同，我比較習慣作簡單的例子。今天下午也不幹活了，寫幾篇關於GMF入門的博客。之後有時間會在該系列的前一篇博客的基礎上更新。

GEF與GMF比較經典的例子是Shapes，在這裏我本身建立一個Shapes示例，其中包含6種連線（其中兩條是後備用的）、5種圖形（也有兩個是後備的），之後都是在它的基礎上更新的。

PS：個人Eclipse已經安裝了GMF插件。

一、建立一個GMF項目：

File→New→Project，找到New GMF Project，

項目名爲org.eclipse.myTest.shapes，並在下一步選中Show dashboard view for the created project ：

   

最後在下一步單擊Finish。

二、此時Eclipse打開了Dashboard，以下圖，它是一個建立GMF的嚮導，在圖中已經用數字標記了咱們接下來的步驟：

三、建立Domain Model

（1）點擊Dashboard圖中1處的Create，打開向導，選擇模型目錄文件以及輸入名稱，以下圖：

接下來的都保持默認，完成建立。

在Package Explorer中雙擊打開shapes.ecore，展開platfform，選中展開獲得的那個圖標，在Properties中設置其屬性：

（2）在Package Explorer中右擊shapes.ecore，選擇Initialize ecore_diagram diagram file，創建ecore圖形編輯文件shapes.ecore_diagram，它能夠用來比較直觀的創建模型。建立好的模型以下：

其中連線和圖形各有兩個備用的，也許之後會用到，若是到時候才添加的話可能就會比較麻煩。

四、建立Domain Gen Model

（1）確保Dashboard圖中1處選中了咱們剛剛建立的shapes.ecore，若是沒有，點擊Select，找到它。

以後，單擊Dashboard圖中2處，打開創建shapes.genmodel的嚮導，在Select a Model Importer中選擇Ecore Model：

在下一步點擊一下Load按鈕：

接下來都保持默認。

（2）在打開的shapes.genmodel展開Shapes，選中該節點內的Shapes節點，在Properties修改其部分屬性，以下圖：

以後再右擊該節點，選擇Generate Model Code、Generate Edit Code以及Generate Editor Code，這樣就生成了一部分代碼：

並新建立了兩個工程：org.eclipse.myTest.shapes.edit與org.eclipse.myTest.shapes.editor。

五、建立Graphical Def Model

這個model用來定義在畫板中顯示的圖形。

仍是要先確保Dashboard選中了咱們建立的shapes.ecore，若是沒有，須要進行選擇。

（1）單擊Dashboard圖中的3按鈕，打開建立shapes.gmfgraph的嚮導。在Diagram Element中選擇BasePanel：

在下一步定義圖形節點、線以及標籤顯示。其中AbstractShape、AbstractConnection與BasePanel都不選，各類Shape以及Connection選取樣例以下：

 

而後單擊完成。

（2）接下來要設置圖像和連線，比較繁瑣。

（2.1）先配置Shape，以EllipseShape爲例。

EllipseShape表示咱們想建立一個橢圓，不過默認是矩形。使用Sample方式打開shapes.gmfgraph，找到Ellipse子節點：

並刪除它，右擊Figure Descriptior EllipseShapeFigure，Add Child——Ellipse，設置其名稱爲EllipseShapeFigure，而後仿照RectangleShapeFigure結點爲其添加Flow Layout和Label，Label名稱爲EllipseShapeNameFigure：

而後選擇Child Access getFigureNull標籤，設置以下：

以相似的方法配置RoundRectangleShapeFigure。

（2.2）配置Connection，以ArrowDashedConnection爲例，它是一個帶有箭頭的虛連線。

找到ArrowDashedConnection結點：

右擊，選擇Add Child——Polyline Decoration，名稱爲ArrowDashedDecoration。

再選擇Figure Descriptor ArrowDashedConnectionFigure結點，在屬性視圖中將Target Decoration設置爲ArrowDashedDecoration，並將Line Kind設成LINE_DASH:

以相同的方法配置ArrowSolidConnection以及DashedConnection。

（2.3）將全部Shape與Connection標籤的默認Text設成空：

將全部標籤的Elment Icon設置成False：

而後設置：

 六、建立Tooling Def Model

（1）單擊Dashboard圖中的4按鈕，打開建立shapes.gmftool的嚮導，在下一步的Diagram Element選BasePanel：

在下一步肯定想要爲哪些元素建立工具，以及是圖形工具仍是連線工具。仍是AbstractShape、AbstractConnection與BasePanel都不選，各類Shape與Connection選擇以下：

   

點擊Finish完成建立。

（2）設置工具分組

右擊如下節點

選擇Add Child——Tool Group，設置其Title爲Connections，將原來分組中的全部Connection選項拖到這一組；

原來的分組設置Title爲Shapes；

兩個分組的Collapsible選項都設爲True。

七、建立Mapping Model

（1）點擊Dashboard圖中的5按鈕，打開新建shapes.gmfmap的嚮導，在下一步的Class選擇BasePanel，以後一直到下圖所示的這一步：

按照上圖設置，以後點擊Finish。

（2）接下來要設置映射了

（2.1）Shapes中以EllipseShape爲例，選中如下結點：

在屬性視圖作以下配置：

紅線標記處是須要注意的地方，因爲這個工具是建立EllipseShape的，因此各個選項都是與Ellipse相關的。

再選中如下標籤：

在屬性視圖設置：

（2.2）Connections的映射設置以ArrowSolidConnection爲例：

選擇節點：

在屬性視圖設置以下：

爲它添加Label，右擊上面的節點，Add Child——Feature Label Mapping，而後其屬性設置以下：

（2.3）其餘Shape和Connection設置相似。

八、點擊Dashboard圖中6處的Transform按鈕，注意不要選中RCP。

這樣會生成兩個文件

九、單擊Dashboard圖中的7處按鈕：Generate Diagram Editor，這樣又建立了一個工程org.eclipse.myTest.shapes.diagram。

若是整個過程當中都沒有出錯的話，能夠直接以Eclipse Application的方式運行，在打開的窗口新建一個Project：Shapes，在該Project下新建一個Shapes Diagram，默認是default.shapes_diagram，效果以下圖：

這篇文章寫得真不容易，邊作邊寫的，寫了三個多小時，總算完成了！

程序代碼請見個人代碼分享http://www.oschina.net/code/snippet_164134_5913。