`
lggege
  • 浏览: 375228 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

GEF实践总结(三)简易数据库编辑器

    博客分类:
  • GEF
阅读更多

一. 目标

  1. 不基于GraphicalEditorWithPalette或GraphicalEditorWithFlyoutPalette,而是完全在ViewPart上,因为实际开发中用户很难接受GraphicalEditor呆板的界面风格。
  2. 实现了一个简易的DataBase->Table->TableColumn的图像编辑器。
  3. 在不停的增强功能的过程中,探索GEF。


二. 修改GraphicalViewer

FigureCanvas canvas = (FigureCanvas) graphicalViewer.getControl();
canvas.setBackground(ColorConstants.white);
canvas.setScrollBarVisibility(FigureCanvas.ALWAYS);
  1. GraphicalViewer的最底层控件是FigureCanvas
  2. 给FigureCanvas设置背景色,并一直显示滚动条


三. 修改模型、添加EditPart、增加Figure


四. Layout
在这步引入了Layout的概念,和SWT中的Layout作用是一样的。

public class DataBaseFigure extends FreeformLayer implements IBaseFigure<DataBaseModel> {
private DataBaseModel model;

public DataBaseFigure() {
this.setLayoutManager(new FreeformLayout());
this.setBorder(new LineBorder(1));
}
  1. 继承于FreeformLayer,FreeformLayer是一种上下左右四个方向都可以扩展的Figure。
  2. 使用的Layout是FreeformLayout,FreeformLayout实际上就是XYLayout,只是它在计算起始位置的时候都是(0,0)坐标

 

public class TableFigure extends Figure implements IBaseFigure<TableModel> {
private TableModel model;

public TableFigure() {
super();
this.setBorder(new MarginBorder(20, 0, 0, 0));

GridLayout layout = new GridLayout(1, true);
this.setLayoutManager(layout);
}
  1. 为了代码简单,只继承于Figure,实际上可以继承于RectangleFigure。因为Table毕竟只显示是一个矩形。
  2. TableFigure内部的Layout是GridLayout。GridLayout应该是3.4后才出现的。上面的代码表示内部的子Figure排成一个列且列宽相等(别扭,其实是因为只有一个列),和SWT内一样。
  3. 在GridLayout内创建子Figure在时设置坐标属性的时候,需要传递GridData对象,而不是Rectangle对象(XYLayout)。于是,我们修改了BaseEditPart的refreshVisual方法。代码如下:
/**
* @see org.eclipse.gef.editparts.AbstractEditPart#refreshVisuals()
*/
protected void refreshVisuals() {
BaseModel model = (BaseModel) getModel();
GraphicalEditPart parentEditPart = (GraphicalEditPart) getParent();
IFigure parentFigure = parentEditPart.getFigure();
LayoutManager parentLayout = parentFigure.getLayoutManager();

if (parentLayout == null || parentLayout instanceof XYLayout) {
// ...
} else if (parentLayout instanceof GridLayout) {
GridData constraint = new GridData(model.getW(), model.getH());
parentEditPart.setLayoutConstraint(this, getFigure(), constraint);
}
}

 


五. 分析Figure的关键方法
setBorder(new LineBorder(1));
表示有线条的边框,线条宽为1。其实LineBorder还可以设置颜色的。

setBorder(new MarginBorder(20, 0, 0, 0));
表示是一个空白的边框,上面20像素不会被子Figure占用,子Figure的坐标计算从20像素下面作为起始点进行计算。

Rectangle
Rectangle用来表示xywh值的类,同时封装了一些好用的计算方法。

Rectangle headerRect = bounds.getCopy();
从一个Rectangle获得拷贝后的新的Rectangle对象,注意,不要轻易去修改Figure.getBounds()得到的Rectangle,需要计算的时候应该从bounds.getCopy()获得新的Rectangle对象再去计算。

Rectangle的计算

  1. headerRect.getTopLeft();  获得左上的坐标
  2. bodyRect.crop(new Insets(21, 1, 1, 1)); crop 调整大小

Point
Point用来表示xy值的类,同时封装了一些好用的计算方法。

  1. getCopy() 得到拷贝后的新对象
  2. translate(1,1) 坐标移动

Graphics
Graphics就是在Draw2d中进行绘图的类。可以设置前景色setForegroundColor、背景色setBackgroundColor、画线drawLine、设置字体setFont、线条样式setLineStyle、填充一个矩形区域fillRectangle、画一个矩形drawRectangle、画文字drawText等操作。

六. 启动,查看运行效果


七. 总结

  1. 效果还不错。而且,代码也尽量做到简单,到此还没出现EditPolicy、Command等。
  2. 理解Layout
  3. 基本的使用Graphics进行绘图的技巧
  4. 懂得使用Rectangle和Point

 

 

3
0
分享到:
评论
1 楼 lee8400 2013-06-06  
我把代码复制了,无法实现上图的功能啊。失望了

相关推荐

    GEF学习总结

    GEF 全称 Graphical Editor Framework 。它是一个基于 eclipse 的图形化编辑框架。通过它,开发人员可以方便的以图形化的方式(而非文本的方式)展示和编辑模型。

    GEF简易教程-学习GEF的入门教程

    为了构建GEF编辑器,需要创建以下三个核心组件: 1. **模型(Model)**:定义数据结构,通常存储在`.model`包中。 2. **控制器(Controller)**:实现模型与视图之间的交互逻辑,可放置于`.parts`或`.editparts`包内。 ...

    GEF学习体会与经验总结(.doc)

    **GEF学习体会与经验总结** GEF,全称Graphical Editing Framework,是Eclipse组织开发的一个图形编辑框架,主要用于构建可自定义的图形化编辑工具。它为开发者提供了丰富的API和工具,使得创建复杂的图形用户界面...

    GEF研究总结

    在各种图形化编辑应用中,如UML类图编辑器、XML图形编辑器、界面设计工具和图形化数据库结构设计工具等,我们可以发现以下共同特点: 1. **编辑区域和工具条**:为用户提供一个工作区域,同时配备工具条,用户可...

    Gef 学习总结

    **Gef 学习总结** Gef,全称为 Graph Editor Framework,是一个强大的图形编辑框架,主要用于构建可视化的图形编辑工具。在IT行业中,Gef通常与EMF(Eclipse Modeling Framework)结合使用,用于创建复杂的建模和...

    GEF理解系列三

    在GEF(Graphical Editing Framework)中,理解其工作流程对于开发图形编辑工具至关重要。GEF主要用于构建基于SWT...通过不断实践和调试,开发者可以熟练掌握GEF的各种策略和命令,从而构建出功能丰富的图形编辑工具。

    自己下的GEF资源打包

    总的来说,这个“GEF资源打包”是一个完整的学习路径,从理论到实践,从基础到高级,对于任何想要涉足或者已经从事图形编辑器开发的IT专业人员来说,都是一个不可多得的学习资源。通过系统的阅读和实践,用户可以...

    eclipse插件开发之GEF编辑器

    对gef中相关内容的描述,这里面我只是个人的理解,描述gef的最基本的功能,若需深入研究,可以从网上查询更多资料,我个人也在继续研究中。

    GEF教程,注重实践。

    总之,通过这个实践导向的GEF教程,开发者不仅可以学会如何使用GEF创建图形编辑器,还能深入理解软件工程中的MVC模式,提升软件设计和实现的能力。无论是初学者还是经验丰富的开发者,都能从中受益。

    GEF快速入门教程和EMF教程

    - 在`gef.tutorial.step.ui`包中实现编辑器类,该类继承自`org.eclipse.ui.part.EditorPart`。 - 实现编辑器的`createPartControl`方法,以设置编辑器的内容。 - 在编辑器中集成`Viewer`以显示图形。 ### 总结 ...

    eclipse gef ve gmf

    这三者的关系是:GEF提供基础的图形编辑支持,VE是在GEF基础上构建的一个特定领域的可视化编辑器,主要针对Java GUI开发;而GMF则是对GEF的增强,专门用于创建复杂的模型驱动的图形编辑器。在Eclipse 3.2这个版本中...

    GEF学习资料.zip

    通过这些资料,你可以深入理解GEF的架构和使用方法,逐步掌握如何利用GEF构建自己的图形编辑器。资料可能包括教程文档、示例代码、演示应用程序等,通过实践操作,能够更好地掌握GEF的精髓。 总之,GEF作为Eclipse...

    GEF中文教程+代码

    **GEF(Graphical Editing Framework)** 是一个强大的开源框架,用于构建图形化编辑器,主要在Java平台上运行,由Eclipse基金会维护。这个框架提供了一整套工具,帮助开发者创建出具有专业级别的图形用户界面,特别...

    GEF 入门版中文教程 源码

    总结来说,"GEF入门版中文教程 源码"是一个面向初学者的宝贵资源,它涵盖了GEF的主要概念和技术,结合源码实践,可以帮助开发者快速掌握图形化编辑器的开发技术,并为后续的RCP应用开发打下坚实基础。无论你是希望...

    GEF初学者开发样例

    **GEF初学者开发样例详解** ...总的来说,GEF为图形编辑器的开发提供了一种标准和灵活的框架,通过"gefpractice"这样的实践项目,初学者可以逐步掌握其核心概念和实际应用,从而提升在图形界面开发领域的技能。

    GEF入门系列

    通过这个GEF入门系列,你可以逐步掌握如何利用GEF创建强大的图形化编辑器,无论是简单的绘图工具还是复杂的业务流程编辑器,GEF都能提供坚实的技术支持。在实践中不断探索和学习,你将能够充分发挥GEF的潜力,构建出...

    RCP与GEF课件,介绍RCP和GEF各组成部分和工作原理

    **GEF(Graphical Editing Framework)** 是Eclipse中的一个图形编辑框架,它为开发图形化编辑器提供了基础。GEF支持创建各种图形用户界面,包括绘图工具、流程图和模型编辑器。 GEF的主要组件包括: 1. **Model**...

    gef-step3.zip_3gef_GEF eclipse_GEF-step2_gef_gef-st

    总的来说,这个压缩包提供了一个学习和实践GEF的绝佳机会,涵盖了一个完整的图形编辑器开发过程的多个阶段。通过逐步学习和实践,开发者能够掌握如何在Eclipse环境中利用GEF创建复杂的图形界面,从而提升其在软件...

    GEF开发整合资料大全

    GEF(Graphical Editing Framework)是Eclipse平台下的一款用于构建图形化编辑器的框架,它为开发者提供了一套全面的工具和API,使得创建复杂的图形用户界面(GUI)变得简单。GEF主要用于开发基于模型的图形编辑器,...

Global site tag (gtag.js) - Google Analytics