E4 应用模型 和 SWT UI模型

参考:

https://www.eclipse.org/e4/resources/e4-whitepaper.php

https://wiki.eclipse.org/Eclipse4/Tutorials

https://eclipsesource.com/blogs/2012/05/10/eclipse-4-final-sprint-part-1-the-e4-application-model/

简述:

Eclipse 4 应用平台(Eclipse 4 Application Platform),又简称E4,或者RCP 2.0,而E4的基础就是应用模型(Application Model),应用模型是一个RCP应用的骨架和基础,而构建在这个基础之上的可以是SWT,也可以是其他的实现,例如JavaFx。

E4应用模型(Application Model)

模型定义与实现分离

E4工作台(workbench-最顶层的UI)是在应用模型(Application Model)中定义的。应用模型包括,窗口(windows),视图(views),透视图(perspectives),菜单组件(menu contributions),处理程序(handlers),键绑定(key bindings)。

通过应用模型,可以设计应用的通用设计或者基本骨架。先定义模型,而不用同时实现具体某个组件。例如,你可以添加一个视图(View)到模型里,而无需实现视图的内容(比如,某个UI有哪些控件,按钮之类的)。

通过在模型来定义窗口(window)和区域(part),与具体实现分离的这种方式,使得E4具有更大通用性和兼容性,例如,区域(part)里的视图的实现,可以使用SWT,也可以使用 JavaFx。下图,展示了一个模型化的工作台与某个部件的内容之间的关系。

(图片来源:https://wiki.eclipse.org/Eclipse4/Tutorials)

接下来,我们主要介绍E4应用模型和SWT的UI模型的基本概念和组成。

模型组件简述

我们来看看UI的一些基本元素:窗口(Windows)、部件(Parts)和部件容器(PartContainers)

(应用模型demo-图1)

部件(parts)不能单独存在,所以它们总是包含在部件容器中。部件容器(Part Containers)用于创建应用程序布局。除了窗口,还有两个元素可以包含部件(parts):part sash和Part Stacks。Part Sash将垂直或水平排列所包含的元素。Part Stack添加一个区域,其中包含的元素相互堆叠,只有一个元素显示在顶部。Part Sash和Part Stack可以相互包含,从而在窗口中创建任何类型的布局。

下面的例子展示了一个示例布局。左边显示各自的应用程序模型,右边显示呈现的结果。第一个Part Stack被设置为“水平”方向,第二个设置为“垂直”方向。请注意,第5部分实际上是不可见的,如果部件(parts)不包含在Part Stacks中,它们的标签就不会显示出来。在本例中,我们为第5部分添加了一个实现,它显示了一个标签,以便在截图中识别它。所有其他部分还没有任何实现,因此您可以在设计应用程序时不需要考虑视图的内容。

(应用模型demo-图2)

模型编辑器The e4 Model Editor

Eclipse提供了一个称为 E4 模型编辑器的工具,用于编辑应用模型,双击位于项目根目录的Application.e4xmi文件,如下图所示的编辑器,就可以对工作台(workbench)应用模型进行定制和修改了。

上图中,最左边是选中的是Application.e4xmi文件,双击打开后,为右边显示的编辑器,模型编辑器包括两个部分:一个是应用模型树节点结构;二是,最右边对选中模型节点的属性进行编辑的表单。

应用模型编辑器,有三个模式:表单模式Form(默认),列表模式List和XMI模式。

表单模式:

列表模式:

XMI模式:

以上模型对应的UI效果如下所示:

开发模型和运行模型/Development Model vs. Runtime Model

我们开发或设计的时候,在IDE里通过E4模型编辑器来创建和修改应用模型,创建或修改的最终模型会保存到Application.e4xmi文件中,在E4 应用启动的时候,这个文件会随着包含的发布包一起发布。

在E4 应用运行的时候,一共会有3个模型存在:开发模型,运行模型,内存模型。

开发模型:对应Application.e4xmi的定义。

运行模型:会从开发工作区中的Application.e4xmi文件读取一份副本到运行时工作区用于构建一个运行时的应用模型。在运行模型里,会保存应用运行的最新状态信息,例如,Parts(部件)的排列。

内存模型:运行时模型会被装载到内存中,在内存创建这个运行模型对应的内存模型。

应用通过渲染组件来解释内存的模型,并创建工作台workbench来展示UI(例如,包括窗口,部件,等等)。如果应用在调整模型后再次启动,这些调整将会更新反馈到应用UI上。应用模型也可以在运行时通过API来实时修改模型(例如,修改窗口的标签,或者创建一个新的部件)。渲染组件会实时监听模型的变动,并实时反馈这变动到运行这的应用中去。可以通过Model Spy (Live Editing)来实时调试应用模型。

注意:IDE运行的运行时模型的状态默认不会被覆盖重写,而在开发的时候,我们经常需要在每次启动后,都运行最新的状态,比如,需要在重启后展示一个新增的元素,这时,就需要在 产品/运行配置 里,添加一个命令参数“-clearPersistedState”来清楚运行时保存的状态(例如,部件布局等),具体设置,如下图所示:

声明式样式

应用例子

RCP2.0将桌面与Web融合的探索

得益与E4 应用模型,使得桌面与web之间的融合成为可能,以下3个构建RCP UI的方式,是Eclipse做的探索领域。

从网页到桌面(E4 JS Framework)

E4 JS Framework用Java编写,作为一个纯OSGi包运行的。它负责解析JavaScript包的清单,并执行JavaScript包之间依赖关系的解析。

JavaScript-Bundle: scripts/manifest.json

 {
     “Bundle-SymbolicName”:”sample.jsbundle”,
     “Bundle-Version”:”1.0″,
     “Bundle-ScriptPath”:”script.js”,
     “Import-Package”:”a.resource;version=[1.0.0,2.0.0)”,
     “Export-Package”:”sample.resource;version=1.0.0″,
     “Require-Bundle:”some.other.bundle”,
   }

从桌面到网页(SWT/BE和RAP)

上面展示了如何将为web构建的组件集成到Eclipse平台来。然而,桌面和web互操作性同样可以从桌面端发起实现。用Java编写的桌面应用,也是可以移植到web平台运行的。E4有两个探索领域来实现这种桌面到web的集成:一、SWT/BE,二是、Eclipse Rich Ajax Platform (RAP)。

SWT/BE:目标是为web UI编程提供一个通用平台,就像它为传统桌面编程所做的那样。这将允许现有的SWT应用程序在web上运行,并允许开发人员构建web UI应用程序,而不被锁定在单一的web技术中提供可能。SWT/BE目前支持ActionScript/Flex作为该技术的一个原型,但移植到其他web平台,如JavaScript/Dojo、Silverlight、Java FX等,也是可能的。图7显示了运行在Adobe Flex上的SWT控件示例,其中包含所有主要的SWT小部件。

RAP:提供了一个强大的窗口小部件工具包,并与OSGi和JEE等技术很好地集成。可以完全使用Java编写应用程序,重用代码,转化成web的应用。更多信息:

https://www.eclipse.org/rap/

声明式窗口部件

XWT: 用XML的声明式窗体Declarative widgets in XML

XWT:(XML UI for SWT)是一个用xml声明式方式编写SWT的框架。在XWT里,应用的完整结构或者窗口部件的层次结构是通过声明的方式来表述的。同时,还可以将窗口部件绑定到一些底层的应用模型或者是基于Java实现的一些窗口小部件的行为回调中。

TM: 用EMF声明窗体Declarative widgets in EMF

TM-Toolkit Model,是一个UI元素的抽象EMF模型。这个模型在运行时绑定到一个具体的窗体集(例如,SWT)。TM构建器用于在应用运行时维持TM模型与具体窗体的同步,并用于双向传播模型和窗体之间同步。应用在运行时,通常是与TM模型而非窗体进行交互,因此,应用开发者可以对一个简单的抽象模型进行开发。

SWT UI模型

从E4 应用模型的章节中可知,SWT是E4应用模型定义的一个实现,也是具体的视图,对话框,控件,表单等的具体实现。所以,首先对SWT的UI模型的层次结构有个基本的认识,是使用SWT构建UI的必要条件。以下内容分两个部分做简要说明,什么是SWT,SWT的UI模型结构。

什么是SWT?

Eclipse Standard Widget Toolkit (SWT):是一个桌面图形应用的通过API,它可以实现跨操作系统平台和本地Widget工具包。SWT允许开发人员只编写一次应用程序,并在每个目标平台上呈现高性能和本机平台的外观。

从上图可知,SWT需要不同平台的JDK/JRE和SWT包来屏蔽掉操作平台的插件,基于SWT(通常是JFace)API的UI代码,与平台无关,所以能够实现开发的UI在不同平台中重用。

UI模型层次结构

以下结构,基于 Eclipse 2022-06 (4.24) 源码整理的UI 模型结构图,E3使用下图的方式实现UI组件,E4可以使用以下部分组件,更好的方法是基于Application Model实现结构更为清晰简洁的组件,E4可以通过兼容层来使用E3的组件(详见下:E4 与 E3 的区别),当然也可以不用E3的组件,自己重新开发一套基于E4 应用模型的UI组件(新项目一般推荐用这种方式)。

图18(Eclipse 3.x 的UI模型)

E4 与E3 的区别

Eclipse 4应用平台(简称:E4AP或E4)在很大程度上与Eclipse 3.x应用平台(简称E3)相似。也就是说,所有的JDT和PDE,以及平台的大部分,都与Eclipse3.x相似。

E4与E3不同在于Workbench 的实现(即org.eclipse.ui.workbench插件),以及这个新的实现所基于的技术。在该版本发布之前,这些技术(模型化的UI,依赖注入,基于服务的编程模型,基于CSS的样式)统称为E4,但是,现在我们将E4用来代表E4AP(Eclipse 4应用平台)。

在E4的Workbench 提供了3.x的Workbench API,称为 兼容层,为现有的性能良好的Eclipse 3.x的应用程序提供向后兼容。

图19(来源:https://wiki.eclipse.org/Eclipse4)

参考

https://www.eclipse.org/e4/resources/e4-whitepaper.php

https://wiki.eclipse.org/Eclipse4/Tutorials

https://eclipsesource.com/blogs/2012/05/10/eclipse-4-final-sprint-part-1-the-e4-application-model/

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注