工作流设计器之工作台


第 1 章 工作台

WorkbenchWindow, WorkbenchPage和WorkbenchPart属于Gef中UI层的顶级接口,它们定义了整体应用的组成结构,UI部分与图形设计其实没有任何关联,只是作为外观进行的定义。

1.1. 组成结构

工作台(Workbench)的概念来自eclipse,整个应用外观被称作工作台窗口(WorkbenchWindow)。每个工作台窗口中包含多个页面(WorkbenchPage),同一时刻只有一个页面被激活显示,这个正在显示的页面可以通过WorkbenchWindow.getActivePage()方法获得。每个页面中包含多个部分(WorkbenchPart),它们负责应用的具体功能。

0101-01.png

图 1.1. 工作台组成结构


总体的工作台窗口实际上体现了我们实现的设计器的总体外观,因为我们目前实现的设计器是基于web浏览器的,因此工作台窗口就体现为一个HTML页面,目前JavaScript版的Gef还只支持在工作台中包含一个页面,也就是在我们的WorkbenchWindow中只会存在单一的WorkbenchPage,这个WorkbenchPage就与WorkbenchWindow.getActivePage()相对应。

在一个WorkbenchPage中支持包含多个WorkbenchPart,允许不同的部分实现不同的功能,但我们目前的实现也只支持在一个WorkbenchPage中包含一个WorkbenchPart,并且这个WorkbenchPart一定是EditorPart类型。

WorkbenchPart有两个子接口,ViewPart和EditorPart。ViewPart表示只读不可编辑的部分,EditorPart表示可编辑的部分。

0101-02.png

WorkbenchPart及子接口

图 1.2. WorkbenchPart及子接口


EditorPart的意思是这个部分是支持图形处理的,用户可以在EditorPart中对图形进行拖拽等设计操作,就是说这个部分是可以修改的。而ViewPart的意思是这个部分中的内容都是可读,不可编辑的,在eclipse中一般用于显示树形菜单菜单或者属性表单等项目。

在JavaScript版的Gef中,我们只用到了EditorPart,完全没有使用到ViewPart接口。ViewPart接口在这里只是为了与eclipse中gef框架的概念进行对应而保留的。

EditorPart还对应着一个EditorInput接口,EditorInput用来为EditorPart提供所需的数据,它为我们提供了一个向EditorPart中导入初始数据的入口。

1.2. 执行顺序

应用启动的入口点是WorkbenchPage的openEditor()方法,此方法将为WorkbenchPage添加一个新EditorPart,同时使用EditorInput作为数据源。

0101-03.png

初始化

图 1.3. 初始化


初始化首先创建一个新的WorkbenchWindow,然后调用WorkbenchWindow的getActivePage()方法获得当前显示的WorkbenchPage,这样就可以向WorkbenchPage中添加一个EditorPart了。在执行WorkbenchPage.openEditor()的内部,会自动调用EditorPart的init()方法对EditorPart进行初始化。

WorkbenchPage.openEditor()中会使用传入的EditorInput对EditorPart进行初始化,并调用EditorPart的init()方法。

提示

这里需要考虑一点的是,无论WorkbenchPage.openEditor(),还是EditorPart.init()都是与EditorPart,也就是可编辑部分对应的,上述初始化过程中其实并没有考虑到EditorPart之外类型。这就意味着,虽然我们设计的结构中WorkbenchPage中可以包含多个WorkbenchPart,但是在我们目前的Gef中其实只支持EditorPart。

初始化完成后,调用render()进行渲染,绘制出整个应用的外观。

0101-04.png

渲染外观

图 1.4. 渲染外观


render渲染过程在接口中并没有体现,render()方法都是定义在接口对应的实现类中的,这是因为在不同环境中,会使用不同的渲染方式对应用外观进行绘制,我们此处使用HTML方式对应用外观进行描绘,因此定义了render()方法动态构造所需的DOM,而在其他环境中,比如Flex,需要继承对应的容器,实现回调方法,由容器统一管理应用外观的绘制工作。

1.3. 实现

在Gef.ui.support包下,提供了三个默认实现类,分别是DefaultWorkbenchWindow, DefaultWorkbenchPage和DefaultEditorPart。

实际使用时,可以通过如下代码构造应用外观。

var editor = new Gef.ui.support.DefaultEditorPart();
var input = new Gef.ui.EditorInput();

var workbenchWindow = new Gef.ui.support.DefaultWorkbenchWindow();
workbenchWindow.getActivePage().openEditor(editor, input);

workbenchWindow.render();
Gef.activeWorkbenchWindow = workbenchWindow;

因为JavaScript中没有abstract class和interface的概念,所以可以为EditorInput直接构造实例,实际中应该提供默认的实现类,或者直接传递空值null。


类图0101-05.png

图 1.5. 类图


下一篇

评论



分享