流程設計器開發二(編輯器部分)

 

爲了實現流程編輯器，光有我們建立的模型，控制器和視圖還不夠，我們還必須新建一個編輯器類，爲此，我們要新建一個插件項目，我們新建的插件項目com.example.workflow結構如下：

爲了實現一個編輯器，我們必須擴展org.eclipse.ui.editors這個擴展點，這個可以在plugin.xm定義，定義後的文件如下：

   <extension

         point="org.eclipse.ui.editors">

      <editor

            class="com.example.workflow.ui.WorkflowProcessEditor"

            default="true"

            extensions="workflow"

            icon="src/com/example/workflow/icons/shapes.gif"

            id="com.example.workflow.WorkflowProcessEditor"

            name="流程設計器"/>

  </extension>

其中，class屬性指定我們編輯器對應的類；

      Extensions屬性指定編輯器打開文件的擴展名爲workflow；

      Default屬性指出該編輯器是擴展名爲workflow文件的默認打開方式；

      Icon爲擴展名爲workflow的文件和編輯器的圖標；

      Id屬性爲編輯器的唯一標識

      Name爲編輯器顯示的名稱

從下圖就可以很清楚看出icon和name屬性的含義：

 

 

 同時，我們還必須定義插件運行時要依賴的包，打開META－INF中的文件MANIFEST.MF ,添加依賴項就可以，最後文件內容如下：

Manifest-Version: 1.0

Bundle-ManifestVersion: 2

Bundle-Name: Workflow Plug-in

Bundle-SymbolicName: com.example.workflow;singleton:=true

Bundle-Version: 1.0.0

Bundle-Activator: com.example.workflow.Activator

Bundle-Vendor: EXAMPLE

Bundle-Localization: plugin

Require-Bundle: org.eclipse.ui,

 org.eclipse.core.runtime,

 org.eclipse.gef,

 org.eclipse.ui.editors,

 org.eclipse.ui.ide,

 org.eclipse.core.resources,

 org.eclipse.ui.views

Eclipse-LazyStart: true

 

現在我們就可以來定義編輯器對應的類了WorkflowProcessEditor，代碼如下：

package com.example.workflow.ui;

 

import org.eclipse.core.runtime.IProgressMonitor;

import org.eclipse.gef.DefaultEditDomain;

import org.eclipse.gef.GraphicalViewer;

import org.eclipse.gef.editparts.ScalableFreeformRootEditPart;

import org.eclipse.gef.palette.PaletteRoot;

import org.eclipse.gef.ui.parts.GraphicalEditorWithFlyoutPalette;

import org.eclipse.ui.IEditorInput;

 

import com.example.workflow.model.WorkflowProcess;

import com.example.workflow.parts.WorkflowProcessEditPartFactory;

 

public class WorkflowProcessEditor extends GraphicalEditorWithFlyoutPalette{

 

       private WorkflowProcess process;

       private static PaletteRoot PALETTE_MODEL;

      

       public WorkflowProcessEditor(){

              setEditDomain(new DefaultEditDomain(this));

       }

      

       private WorkflowProcess getModel(){

              return this.process;

       }

      

       protected void initializeGraphicalViewer() {        

              super.initializeGraphicalViewer();

              GraphicalViewer viewer = getGraphicalViewer();

              viewer.setContents(getModel());         

       }    

 

       protected void configureGraphicalViewer() {             

              super.configureGraphicalViewer();

              GraphicalViewer viewer = getGraphicalViewer();

              viewer.setEditPartFactory(new WorkflowProcessEditPartFactory());

              viewer.setRootEditPart(new ScalableFreeformRootEditPart());

       }    

 

       protected void setInput(IEditorInput input) {             

              super.setInput(input);

              process = new WorkflowProcess();

       }

 

       protected PaletteRoot getPaletteRoot() {

              if (PALETTE_MODEL == null)

                     PALETTE_MODEL = WorkflowProcessEditorPaletteFactory.createPalette();

              return PALETTE_MODEL;

       }

 

       public void doSave(IProgressMonitor monitor) {

              // TODO Auto-generated method stub

             

       }

 

}

 

這個類繼承了GraphicalEditorWithFlyoutPalette，帶有面板的圖形化編輯器。在這個類getPaletteRoot()方法中，我們定創建了面板，面板類詳細信息，接下來將介紹。在setInput方法中，我們定義了一個流程對象，在這裏我們也可以從外面文件讀入一個對象，作爲編輯器的輸入，在構造函數中，setEditDomain(new DefaultEditDomain(this));就是給當前編輯器設置一個默認編輯域，這個域跟命令堆棧有關。在initializeGraphicalViewer()方法中，我們把GraphicalViewer的內容設計爲流程，說明我們以後編輯的是一個流程對象，在configureGraphicalViewer()，我們把第二講中定義的模型和控制器映射的類註冊進來，這樣編輯器就知道模型和控制器的映射關係了。

接下來我們再看一下面板對應的類：

package com.example.workflow.ui;

 

import org.eclipse.gef.palette.CombinedTemplateCreationEntry;

import org.eclipse.gef.palette.ConnectionCreationToolEntry;

import org.eclipse.gef.palette.MarqueeToolEntry;

import org.eclipse.gef.palette.PaletteContainer;

import org.eclipse.gef.palette.PaletteDrawer;

import org.eclipse.gef.palette.PaletteGroup;

import org.eclipse.gef.palette.PaletteRoot;

import org.eclipse.gef.palette.PaletteSeparator;

import org.eclipse.gef.palette.PanningSelectionToolEntry;

import org.eclipse.gef.palette.ToolEntry;

import org.eclipse.gef.requests.CreationFactory;

import org.eclipse.gef.requests.SimpleFactory;

import org.eclipse.jface.resource.ImageDescriptor;

 

import com.example.workflow.Activator;

import com.example.workflow.model.Activity;

import com.example.workflow.model.EndActivity;

import com.example.workflow.model.StartActivity;

/**

 *UtilityclassthatcancreateaGEFPalette.

 *@see#createPalette()

 */

finalclass WorkflowProcessEditorPaletteFactory {   

   

    /**

     *CreatesthePaletteRootandaddsallpaletteelements.

     *Usethisfactorymethodtocreateanewpaletteforyourgraphicaleditor.

     *@returnanewPaletteRoot

     */

    static PaletteRoot createPalette(){

       PaletteRoot palette = new PaletteRoot();

       palette.add(createToolsGroup(palette));

       palette.add(createActivitiesDrawer());

       return palette;

    }

   

    /**Createthe"Activities"drawer.*/

    privatestatic PaletteContainer createActivitiesDrawer() {

       PaletteDrawer componentsDrawer = new PaletteDrawer("Process");

 

       CombinedTemplateCreationEntry component = new CombinedTemplateCreationEntry(

              "Start",

              "Create a StartActivity",

              StartActivity.class,

              new SimpleFactory(StartActivity.class),

              ImageDescriptor.createFromFile(Activator.class, "icons/start16.gif"),

              ImageDescriptor.createFromFile(Activator.class, "icons/start24.gif"));

       componentsDrawer.add(component);

 

       component = new CombinedTemplateCreationEntry(

              "Activity",

              "Create a Activity",

              Activity.class,

              new SimpleFactory(Activity.class),

              ImageDescriptor.createFromFile(Activator.class, "icons/activity16.gif"),

              ImageDescriptor.createFromFile(Activator.class, "icons/activity24.gif"));

       componentsDrawer.add(component);

      

       component = new CombinedTemplateCreationEntry(

              "End",

              "Create a EndActivity",

              Activity.class,

              new SimpleFactory(EndActivity.class),

              ImageDescriptor.createFromFile(Activator.class, "icons/end16.gif"),

              ImageDescriptor.createFromFile(Activator.class, "icons/end24.gif"));

       componentsDrawer.add(component);

 

       return componentsDrawer;

    }

   

    /**Createthe"Tools"group.*/

    privatestatic PaletteContainer createToolsGroup(PaletteRoot palette) {

       PaletteGroup toolGroup = new PaletteGroup("Tools");

 

       // Add a selection tool to the group

       ToolEntry tool = new PanningSelectionToolEntry();

       toolGroup.add(tool);

       palette.setDefaultEntry(tool);

      

       // Add a marquee tool to the group

       toolGroup.add(new MarqueeToolEntry());

 

       // Add a (unnamed) separator to the group

       toolGroup.add(new PaletteSeparator());

 

        

       tool = new ConnectionCreationToolEntry(

              "Transition",

               "Create a Transiton",

              new CreationFactory() {

                  public Object getNewObject() { returnnull; }              

                  public Object getObjectType() { returnnew Integer(1); }

              },

              ImageDescriptor.createFromFile(Activator.class, "icons/transition16.gif"),

              ImageDescriptor.createFromFile(Activator.class, "icons/transition24.gif"));

       toolGroup.add(tool);

       return toolGroup;

    }

}

這樣，我們的gef項目就可以運行起來了，效果如下圖：

對照面板的外觀，讀者應該很容易明白麪板類的含義，下一節我們將介紹如何在編輯器中創建活動。