GEF企业应用开发之--辅助功能

1 GEF辅助功能

1.1 Ruler

在图形编辑区，有时需要借助标尺和网格的功能来定位图形的位置。对于标尺和网格GEF都提供了相应的实现，可以通过学习Gef自带的logic例子来学习。如何预览GEF自带的例子，方法很简单，在现有项目中new一个Flow/Logic/Shapes Diagram文件，双击该文件即可的得到Example的演示。如果想对查看其源码，活在在实例上做二次开发，这可以选择下图中的“Gef（Graphical Editing Framework） Plug-ins”来创建一个插件项目，其运行与一般插件项目完全相同。





在调度系统中，需要用到类似标尺的功能，节纵坐标来表示泊位，纵坐标表示预计靠泊日期，或许你现在对这些也去概念有些迷惑，不用着急，本文描述的方法适合一般的添加标尺的方法。或者你可以看一下本节的末截图，即可了解横纵坐标的含义。
本文修改了GEF自带的Ruler组件，并放到了“org.jport.gef.component.rulers”包中，你可以在随书的源码中找到对应的源码。
第一步：在model中定义ruler属性

[align=left]package org.jport.gef.berth.model;[/align] [align=left]import org.eclipse.draw2d.PositionConstants;[/align] [align=left]public class DiagramModel extends BaseModel{[/align] [align=left] private BaseRuler leftRuler, topRuler;[/align] [align=left] // 标尺是否可见[/align] [align=left] private boolean rulersVisibility = true;[/align] [align=left] //return ruler type[/align] [align=left] public BaseRuler getRuler(int orientation) {[/align] [align=left] BaseRuler result = null;[/align] [align=left] switch (orientation) {[/align] [align=left] case PositionConstants.NORTH :[/align] [align=left] if(topRuler==null)[/align] [align=left] topRuler = new BaseRuler(true);[/align] [align=left] result = topRuler;[/align] [align=left] break;[/align] [align=left] case PositionConstants.WEST :[/align] [align=left] if(leftRuler==null)[/align] [align=left] leftRuler=new BaseRuler(false);[/align] [align=left] result = leftRuler;[/align] [align=left] break;[/align] [align=left] }[/align] [align=left] return result;[/align] [align=left] }[/align] [align=left] public boolean getRulerVisibility() {[/align] [align=left] return rulersVisibility;[/align] [align=left] }[/align] [align=left] public void setRulerVisibility(boolean newValue) {[/align] [align=left] rulersVisibility = newValue;[/align] [align=left] }[/align] [align=left] public BaseRuler getTopRuler() {[/align] [align=left] return topRuler;[/align] [align=left] }[/align] [align=left] [/align] [align=left] public void setTopRuler(BaseRuler topRuler) {[/align] [align=left] this.topRuler = topRuler;[/align] [align=left] }[/align] [align=left]}[/align]

在BerthGraphicalEditor中添加标尺支持：

[align=left]// 定义标尺[/align] [align=left] private JportRulerComposite rulerComp;[/align] [align=left]@Override[/align] [align=left] protected void createGraphicalViewer(Composite parent) {[/align] [align=left] rulerComp = new JportRulerComposite(parent, SWT.NONE);[/align] [align=left] super.createGraphicalViewer(rulerComp);[/align] [align=left] rulerComp[/align] [align=left] .setGraphicalViewer((ScrollingGraphicalViewer) getGraphicalViewer());[/align] [align=left] }[/align] [align=left]protected Control getGraphicalControl() {[/align] [align=left] return rulerComp;[/align] [align=left] }[/align]

在BerthGraphicalEditor配置Ruler：

[align=left] protected void loadProperties() {[/align] [align=left] // BerthUtil.CURRENt_COMPANY=getCompanyId();[/align] [align=left] BaseRuler ruler = getModel().getRuler(PositionConstants.WEST);[/align] [align=left] RulerProvider provider = null;[/align] [align=left] if (ruler != null) {[/align] [align=left] provider = new BerthRulerProvider(ruler);[/align] [align=left] }[/align] [align=left] getGraphicalViewer().setProperty(RulerProvider.PROPERTY_VERTICAL_RULER,[/align] [align=left] provider);[/align] [align=left] ruler = getModel().getRuler(PositionConstants.NORTH);[/align] [align=left] provider = null;[/align] [align=left] if (ruler != null) {[/align] [align=left] provider = new BerthRulerProvider(ruler);[/align] [align=left] }[/align] [align=left] getGraphicalViewer().setProperty([/align] [align=left] RulerProvider.PROPERTY_HORIZONTAL_RULER, provider);[/align] [align=left] getGraphicalViewer().setProperty([/align] [align=left] RulerProvider.PROPERTY_RULER_VISIBILITY,[/align] [align=left] new Boolean(getModel().getRulerVisibility()));[/align] [align=left]…………[/align] [align=left]}[/align]

在本例中对标尺的实现作了修改，通过个性化配置了标尺，具体配置如下：

[align=left]/**[/align] [align=left] * 泊位标尺[/align] [align=left] * @param graphics 绘图对象[/align] [align=left] * @param dotsPerDivision 放缩比例，在目前的方法实现中并没有使用[/align] [align=left] */[/align] [align=left]private void drawBerthLine(Graphics graphics,double dotsPerDivision) {[/align] [align=left] // TODO Auto-generated method stub[/align] [align=left] int berthSum=0;[/align] [align=left] //画线的位置*放缩比例d[/align] [align=left] int drawLine_x=0;[/align] [align=left] [/align] [align=left] List<Berth> berthList=DataService.getInstances().getBerthList();[/align] [align=left] for(Berth berth:berthList)[/align] [align=left] {[/align] [align=left] drawLine_x=berthSum+berth.getBerthLenth();[/align] [align=left] graphics.setForegroundColor(ColorConstants.red);[/align] [align=left] graphics.drawLine(drawLine_x,10,drawLine_x,45);[/align] [align=left] [/align] [align=left] int midPos=berthSum+(drawLine_x-berthSum)/2;[/align] [align=left] //在泊位中点画出泊位的名称[/align] [align=left] drawText(graphics,berth.getBerthName(),midPos,10);[/align] [align=left] berthSum=drawLine_x;[/align] [align=left] [/align] [align=left] } [/align] [align=left]}[/align]

GEF自带ruler实现：





JPort定义的ruler实现：





1.2 Zoom
在绘图工具中Zoom是不可或缺的功能，在GEF中添加Zoom功能，只需在Editor中做简单的配置即可。但是要实现工具条上的按钮的放缩按钮稍微麻烦一点。
添加缩放功能：

[align=left]protected void configureGraphicalViewer() {[/align] [align=left] ScalableRootEditPart root = new ScalableRootEditPart();[/align] [align=left] // all the figure attach to this root have the zoom ablity[/align] [align=left] double[] zoomLevels = new double[] { 0.25, 0.5, 0.75, 1.0, 1.25, 1.5,1.75, 2.0, 2.5, 2.5, 10 };[/align] [align=left] root.getZoomManager().setZoomLevels(zoomLevels);[/align] [align=left] IAction zoomIn = new ZoomInAction(root.getZoomManager());[/align] [align=left] IAction zoomOut = new ZoomOutAction(root.getZoomManager());[/align] [align=left] getActionRegistry().registerAction(zoomIn);[/align] [align=left] getActionRegistry().registerAction(zoomOut);[/align] [align=left] getSite().getKeyBindingService().registerAction(zoomIn);[/align] [align=left] getSite().getKeyBindingService().registerAction(zoomOut);[/align] [align=left]……[/align] } [align=left]public Object getAdapter(Class type) {[/align] [align=left] if (type == ZoomManager.class)[/align] [align=left] return ((ScalableRootEditPart) getGraphicalViewer()[/align] .getRootEditPart()).getZoomManager(); …… }

配置“contributorClass”，在contributorClass创建了在工具栏上显示的工具按钮。

[align=left]<extension[/align] [align=left] point="org.eclipse.ui.editors">[/align] [align=left] <editor[/align] [align=left] class="org.jport.gef.berth.ui.BerthGraphicalEditor"[/align] [align=left] contributorClass="org.jport.gef.berth.action.DiagramActionBarContributor"[/align] [align=left] default="true"[/align] [align=left] icon="icons/sample.gif"[/align] [align=left] id="org.jport.gef.berth.ui.BerthGraphicalEditor"[/align] [align=left] name="泊位调度">[/align] [align=left] </editor>[/align] </extension>

类DiagramActionBarContributor的具体实现，请参照随书源码。
注意要能让工具条显示，在“ApplicationWorkbenchWindowAdvisor”中设置

[align=left]@Override[/align] [align=left] public void preWindowOpen() {[/align] [align=left] IWorkbenchWindowConfigurer configurer = getWindowConfigurer();[/align] [align=left] configurer.setInitialSize(new Point(400, 300));[/align] [align=left] //要让工具栏显示，应设为true[/align] [align=left] configurer.setShowCoolBar(true);[/align] [align=left] configurer.setShowStatusLine(false);[/align] [align=left] configurer.setTitle("GEF 企业应用");[/align] }

此时再运行project，在工具条上可以看到放缩按钮和放缩比例下拉框，如上图所示，并且通过ctrl+鼠标滚轮可是实现放缩功能。

1.3 Outline&Overview
在BerthGraphicalEditor中定义OutlinePage，

[align=left]// 定义大纲视图[/align] public OutlinePage outlinePage;

由于OutlinePage使用到了BerthGraphicalEditor中的许多属性，作为单独的类提出来要传递大量的参数，所以做成了是一个内部类。

[align=left]public class OutlinePage extends ContentOutlinePage implements IAdaptable {[/align] [align=left] // 用Logic example 的现实方式，把outline和oview放到pageBook中显示[/align] [align=left] private PageBook pageBook;[/align] [align=left] //大纲视图类[/align] [align=left] private Control outline;[/align] [align=left] //用来显示缩微图的画布[/align] [align=left] private Canvas overview;[/align] [align=left] // 缩微图实现类[/align] private Thumbnail thumbnail; …… }

与overview不同，需要告诉Outline如何来显示所绘图形的结构，包括父子结构、节点名称、节点图标等，其实就是一个树结构的实现。大纲视图结构的实现，可以在随书源代码“org.jport.gef.berth.part.tree”包中找到。





1.4 Tabbed
属性视图的实现有两种方式：
1. 传统列表方式





2. Tabbed方式，这种方式可以使用SWT的各种组件来展现对象的属性。如下图所示。



实现的Tabbed步骤
1、加入插件依赖：org.eclipse.ui.views.properties.tabbed。
2、配置plugin.xml

[align=left]<extension[/align] [align=left] point="org.eclipse.ui.views.properties.tabbed.propertyContributor">[/align] [align=left] <propertyContributor[/align] [align=left] typeMapper="org.jport.gef.berth.properties.tabbed.ElementTypeMapper"[/align] [align=left] contributorId="org.jport.gef.berth.ui.BerthGraphicalEditor"[/align] [align=left] labelProvider="org.jport.gef.berth.properties.tabbed.BerthElementLabelProvider"[/align] [align=left] >[/align] [align=left] <propertyCategory category="berth"/>[/align] [align=left] </propertyContributor>[/align] </extension> [align=left]<extension[/align] [align=left] point="org.eclipse.ui.views.properties.tabbed.propertyTabs">[/align] [align=left] <propertyTabs contributorId="org.jport.gef.berth.ui.BerthGraphicalEditor">[/align] [align=left] <propertyTab[/align] [align=left] category="berth"[/align] [align=left] id="shipTab"[/align] [align=left] label="船舶基本信息"/>[/align] [align=left] </propertyTabs>[/align] </extension>

配置说明：
typeMapper：Tabbed显示的类，类型过滤。
contributorId：为edior的id
labelProvider：Tabbed的Lable实现，如上图中的1部分。这不是实现Tabbed必须的，可也不实现。
propertyCategory与propertyTab中的category有对应关系，propertyTab的id必须唯一，label配置项即为途中的2部分。
3、配置propertySection

[align=left]<extension[/align] [align=left] point="org.eclipse.ui.views.properties.tabbed.propertySections">[/align] [align=left] <propertySections contributorId="org.jport.gef.berth.ui.BerthGraphicalEditor">[/align] [align=left] <propertySection[/align] [align=left] class="org.jport.gef.berth.properties.tabbed.ShipInfoSection"[/align] [align=left] id="shipInfoSection"[/align] [align=left] tab="shipTab">[/align] [align=left] <input[/align] [align=left] type="org.jport.gef.berth.model.ShipModel">[/align] [align=left] </input>[/align] [align=left] </propertySection>[/align] [align=left] </propertySections>[/align] </extension>

配置说明：
1、在三部分的Tabbed配置中，contributorId均是editor的id。
2、ShipInfoSection是Tabbed的主要部分，控制Section的生命周期。
3、input 输入ShipInfoSection显示的模型。
1.5 Palette
Palette工具箱可以提供便捷的图形编辑支持，Palette作为GEF自带的功能，实现起来也比较简单。先看一下，我们将实现的效果：





1、让editor继承父类GraphicalEditorWithFlyoutPalette，实现方法：

[align=left] @Override[/align] [align=left] protected PaletteRoot getPaletteRoot() {[/align] [align=left] // TODO Auto-generated method stub[/align] [align=left] if( paletteRoot == null ){[/align] [align=left] paletteRoot =PaletteFactory.createPalette();[/align] [align=left] }[/align] [align=left] return paletteRoot;[/align] }

1. PaletteFactory是自定义类，负责创建Palette。

[align=left]……[/align] [align=left]private static PaletteContainer createComponentsDrawer() {[/align] [align=left] // TODO Auto-generated method stub[/align] [align=left] PaletteDrawer drawer = new PaletteDrawer("操作工具", ImageDescriptor[/align] [align=left] .createFromFile(Activator.class, "icons/comp.gif"));[/align] [align=left] List entries = new ArrayList();[/align] [align=left] CombinedTemplateCreationEntry combined = new CombinedTemplateCreationEntry([/align] [align=left] "预报信息", "添加预报信息", new SimpleFactory(ShipModel.class),[/align] [align=left] ImageDescriptor.createFromFile(Activator.class,[/align] [align=left] "icons/ship16.gif"), [/align] [align=left] ImageDescriptor.createFromFile(Activator.class,[/align] [align=left] "icons/ship24.gif")[/align] [align=left] );[/align] [align=left] entries.add(combined);[/align] [align=left] drawer.addAll(entries);[/align] [align=left] return drawer;[/align] } ……

2. 实现protected Command getCreateCommand(CreateRequest request) {}方法，

[align=left] @Override[/align] [align=left] protected Command getCreateCommand(CreateRequest request) {[/align] [align=left] if (request.getType() == REQ_CREATE && getHost() instanceof DiagramPart) {[/align] [align=left] ShipCreateCommand cmd = new ShipCreateCommand();[/align] [align=left] cmd.setDiagramModel(getHost().getModel());[/align] [align=left] cmd.setShipModel(request.getNewObject());[/align] [align=left] Rectangle constraint = (Rectangle)getConstraintFor(request);[/align] [align=left] constraint.x = (constraint.x < 0) ? 0 : constraint.x;[/align] [align=left] constraint.y = (constraint.y < 0) ? 0 : constraint.y;[/align] [align=left] [/align] [align=left] constraint.width = (constraint.width <= 0) ? BerthConstants.SHIP_LENGTH : constraint.width;[/align] [align=left] constraint.height = (constraint.height <= 0) ? BerthConstants.SHIP_WIDTH: constraint.height;[/align] [align=left] cmd.setLayout(constraint);[/align] [align=left] return cmd;[/align] [align=left] }[/align] [align=left] return null;[/align] }

3. 创建ShipCreateCommand.java

[align=left] package org.jport.gef.berth.command;[/align] [align=left] [/align] [align=left]import org.eclipse.draw2d.geometry.Rectangle;[/align] [align=left]import org.eclipse.gef.commands.Command;[/align] [align=left]import org.jport.gef.berth.model.DiagramModel;[/align] [align=left]import org.jport.gef.berth.model.ShipModel;[/align] [align=left] [/align] [align=left] [/align] [align=left]public class ShipCreateCommand extends Command[/align] [align=left]{[/align] [align=left] [/align] [align=left] private ShipModel ship;[/align] [align=left] private DiagramModel diagram;[/align] [align=left] [/align] [align=left] public ShipCreateCommand() {[/align] [align=left] super();[/align] [align=left] ship = null;[/align] [align=left] diagram= null;[/align] [align=left] }[/align] [align=left] public void setShipModel(Object s)[/align] [align=left] {[/align] [align=left] if (s instanceof ShipModel)[/align] [align=left] this.ship = (ShipModel)s;[/align] [align=left] }[/align] [align=left] public void setDiagramModel(Object e) {[/align] [align=left] if (e instanceof DiagramModel)[/align] [align=left] this.diagram = (DiagramModel)e;[/align] [align=left] }[/align] [align=left] [/align] [align=left] public void setLayout(Rectangle r) {[/align] [align=left] if (ship == null)[/align] [align=left] return;[/align] [align=left] ship.setLayout(r);[/align] [align=left] }[/align] [align=left] @Override[/align] [align=left] public boolean canExecute() {[/align] [align=left] if (ship == null || diagram == null)[/align] [align=left] return false;[/align] [align=left] return true;[/align] [align=left] }[/align] [align=left] [/align] [align=left] @Override[/align] [align=left] public void execute() {[/align] [align=left] diagram.addChild(ship);[/align] [align=left] }[/align] [align=left] [/align] [align=left] @Override[/align] [align=left] public boolean canUndo() {[/align] [align=left] if (ship == null || diagram == null)[/align] [align=left] return false;[/align] [align=left] return diagram.contains(ship);[/align] [align=left] }[/align] [align=left] @Override[/align] [align=left] public void undo() {[/align] [align=left] diagram.removeChild(ship);[/align] [align=left] }[/align] [align=left]}[/align]