EMF Forms 3.0 渲染器

原文位于:https://eclipsesource.com/blogs/tutorials/emf-forms-renderer

本教程简要介绍使用EMF Forms Renderer来将EMF Forms嵌入到自定义应用程序中。其中包含了SWT、JavaFX和Web UI的Renderer。请参考此教程(《EMF Forms1-EMF Forms入门》)来了解EMF Forms和View Model的概要介绍。本教程基于ECP Version 1.7.x。

介绍

根据入门教程中的描述,EMF Fomrs提供了一个基于模型的方式来描述表单UI。UI不再使用代码来开发,而是使用“View Model”来描述。与类似SWT或JavaFX等UI Toolkit相比,View Model包含了类似Control和Group的抽象概念。因此,使用这个模型来描述UI会比基于UI Toolkit来开发表单UI会更为高效。另外,View Model与具体的UI工具包无关,因此,EMF Forms允许你使用不同的UI Toolkit来展示同一个View Model。

不过,最终View Model也必须以某种方式使用期望的UI Toolkit来将其转换成具体的UI。基于此目的,EMF Forms并不生成任何代码,而是通过Renderer在运行时将View Model解释成具体的UI(与e4中Application Model的渲染过程很类似)。View Model Editor预览工具和ECP Demo应用程序集成了EMF Forms Renderer来创建UI(参考入门教程)。如下图所示,Renderer依赖于具体的UI Toolkit,从而将抽象的View Model转换为具体的UI。

20180513_001

为了将表单UI集成到你的应用程序之中,EMF Forms Renderer提供了一个可以通过编程方式来调用的API。API自身是与UI Toolkit的 Renderer相关的,例如SWT Renderer与JavaFX Renderer会有些区别。不过,它们有很多的共性。在本节中,我们将会描述 Renderer一般是如何工作的;在下一节中,我们将会具体描述各个受支持的 Renderer。

一般来说, 渲染API包含了三个参数。

● 领域模型(Domain Model)实例:需要被渲染的根数据对象。在入门教程中,它是User对象的一个实例。当将EMF Forms嵌入到自定义应用程序中时,它会是你的自定义数据模型的一个实例。在更加复杂的UI中,根数据对象可能会带有子对象,它们也会在UI中进行渲染。

● 视图模型(View Model):这个模型定义了要被渲染的视图的布局和其中被展示的控件。View Model是一个可选参数;可以在未明确指定View Model的情况下调用 Renderer。在这种情况下,EMF Forms将会检索所有已注册的View Model,并从中找出一个与Domain Model实例相匹配的。

● 关联的UI对象:这个对象使得你可以将EMF Forms渲染出的UI嵌入到一个应用程序的已有UI之中。这个对象与UI Toolkit相关;在SWT中它是一个Composite,在JavaFX中是一个Pane等等。

在下面的章节中,我们更为详细地描述了可用的 Renderer。对于大多数 Renderer来说,EMF Forms工具包提供了一个样例应用程序,它可以导入到你的工作空间中。样例应用程序中细致展示了如何使用API,以及在一个Product/Run Configuration中需要包含哪些Bundle。

SWT Renderer

EMF Forms默认采用了SWT Renderer实现。SWT Renderer是作为参考的实现。它支持所有已定义的View Model元素并且已经在生产中进行使用。

在Eclipse IDE中的View Model Editor中的预览也使用了SWT Renderer。如果要使用SWT来渲染你的View Model请参考此教程(《EMF Forms1-EMF Forms入门》)。

RAP Renderer

Remote Application Platform是一种开发远程应用程序的技术,在这种特殊的Web应用程序场景下,主要用在Web浏览器中。这允许你使用几乎完全一致的代码基线来同时开发桌面和Web应用。

EMF Forms提供了一个RAP兼容View Model Renderer,因此表单可以在所有的现代浏览器中显示。RAP提供了基本上与SWT相同的API。因此在RAP中使用EMF Forms与在SWT中非常类似,几乎所有的渲染组件都可以完全重用。因此,与SWT Renderer一样,RAP Renderer支持所有已定义的View Model元素并且已经在生产中进行使用。

不过使用普通的SWT Renderer和在RAP中使用EMF Forms有两点不同:

● Target Platform:在使用RAP时,平台中不会包含默认的SWT实现,而是使用了RAP实现。如果你希望开发一个应用程序同时用于桌面和RAP,则你需要维护两套不同的Target Application。

● RAP特定的Bundle:即使RAP允许你在桌面应用和Web应用之间共享几乎所有的组件,但是在不同的环境中还是会有一些概念上的差别。当在RAP上运行EMF Forms时需要添加一些特定的组件。

EMF Forms的IDE工具提供了两个RAP样例应用程序,它们可以导入到你的工作空间中。样例中还包含了一个Target Platform和一个Run Configuration。这些内容为如何配置Target Platform以及哪些额外的Bundle需要添加到产品之中提供了一个模板。在下面的段落中,我们将会描述如何学习这些样例应用程序。

为了在IDE中启动RAP应用程序,你需要确保RAP工具已经在你的Eclipse中进行了安装。请从此处安装它们。注意仅需安装RAP工具,不是安装Target组件。

下面是导入EMF Forms的两个RAP样例应用程序的步骤。这两个应用程序展示了EMF Forms是如何在RAP的两种不同工作模式下进行应用的:

● J2EE模式:RAP的默认操作模式与J2EE是完全兼容的。限制条件包括:阻塞式UI组件。因此大多数Eclipse标准对话框需要特殊处理。可以在一个自定义应用程序中使用对话框,但是不能使用Eclipse Workbench。

● SWT兼容模式:允许使用阻塞式的对话框和Eclipse Workbench。

参考此链接来了解更多关于RAP运行模式的细节。

根据选择的工作模式,导入下面两个样例之一到你的工作空间中:

● Make it happen: sample J2EE RAP application

● Make it happen: sample RAP application

要导入样例应用程序,请选择New => Examples => EMF Forms => The selected example => Next => Finish。除了两种不同的工作模式,样例程序非常相似,因此下面的步骤两者是都一样的。

下一步是设置RAP Target,包含Bundle“org.eclipse.emf.ecp.makeithappen.application.sample.rap.j2ee”并且命名为“makeithappen_RAP.target”。打开此文件,等待Target解析完毕后点击Target Definition Editor右上角的“Set as target platform”按钮。

一旦Target被设置完毕,样例应用程序可以根据位于Target Platform旁边的Run Configuration的预配置信息来启动。右键单击*.launch文件并选择“Run as” => “* RAP Application”菜单。应用程序会在默认的Web浏览器中打开。有时候浏览器会比应用程序先启动导致报错,则可以尝试刷新页面。请报告尝试此教程过程中遇到的任何错误

20180513_002

在两个样例应用程序中都使用了相同的API来渲染真实的UI。相关的代码可以在下面的类中找到:

● J2EE 样例: MakeItHappenEntryPoint

● SWT兼容样例: View

在两种情况下默认的SWT Renderer都会被调用:

这个方法会检索所有已注册的View Model并且使用给定的SWT Composite来为给定的Object渲染一个View。如果没有注册相关的View Model则会使用默认的布局。Renderer还提供了一个方法指定了特定的View Model参数。

如果你需要支持将EMF Forms嵌入到应用程序之中去,如果你希望评估或采用需要使用的框架,请联系我们。我们还为此提供了专业的开发支持

JavaFX Renderer

JavaFX是一个由Java(从Java8开始)支持的本地化UI工具包。它承继自Swing,也是SWT的另一个选择。EMF Forms提供了一个JavaFX Renderer来将一个View  Model转换为JavaFX 表单UI。JavaFX Renderer与所有其他的Renderer共享了一些UI独立组件。最重要的是,它们共享View Model。因此,所有可用的渲染器可以共享同一个View Model;之前以SWT进行渲染的UI可以嵌入到一个JavaFX应用程序之中。JavaFX Renderer目前还处于Beta状态,还不是发布版的一部分,并且尚未支持所有的View Model元素和所有的组件。如果你希望评估JavaFX Renderer,或者希望扩展JavaFX Renderer的功能或修复一个Bug,请联系我们。我们还为此提供了专业的开发支持

下面的截图展示了JavaFX Renderer:

20180513_003

下面的代码可以将JavaFX渲染的表单嵌入到了任意应用程序之中:

更多的Renderer

EMF Forms所提供的基于模型的构建方式最大的优点在于UI Toolkit与EMF Forms是解耦的。如前所述,EMF Forms已经与多种不同的UI技术进行了适配。不过,现在仍然还有很多的渲染器正在开发之中。另外,还有一些专属的Renderer并未开源,因此下面的清单并不完整。如果你对开发中的Renderer感兴趣,或希望对你自定义Renderer进行评估或支持,请联系我们。我们还为此提供了专业的开发支持

我们现在正在使用AngularJS开发一个Renderer:

20180513_004

我们也在使用Tabris开发一个Mobile Renderer支持iOS和Android:

20180513_005

另外,贡献者们基于Vaadin正在开发另一个Web Renderer(请参考下一章节):

20180513_006

如你所见,UI技术解耦的方式非常强大。这会降低技术决策的风险,并允许在不同的用例中并行使用不同的UI技术。

另外令人难以置信的是,为一个新的UI技术实现一个自定义Renderer成本非常低。

如果你对开发中的Renderer感兴趣,或希望对你自定义Renderer进行评估或支持,请联系我们。我们还为此提供了专业的开发支持

Vaadin

Vaadin Framework是另一种用于开发在Web浏览器中使用的富因特网应用程序(Rich Internet Application,RIA)的技术。EMF Forms还有一个外部贡献的Vaadin Renderer,它可以将View Model转换为Vaadin实现的表单UI。Vaadin Renderer与其他的Renderer共享了一些UI独立组件。更重要的是,它可以共享View  Model。Vaadin Renderer目前处于Beta状态,它尚未支持所有的View Model元素和组件。另外,Vaadin Renderer的知识产权(IP)目前正在审核中,因此尚未对外发布。因此,我们目前还无法提供可用的样例。请注意,目前Vaadin Renderer是一个外部捐献项目,并非是EMF Forms Eclipse工程的的一部分。

Vaadin Renderer目前尚未支出如下View Model元素:

● Categorization

● CompoundControl

● StackLayout

● SectionArea

● TreeMasterDetail

● 单引用控件(Single Reference Control)

一个Vaadin应用程序看起来如下所示:

20180513_007

请注意Reference组件和一些View Model元素目前尚未被Vaadin Renderer支持。如果你希望评估,或者希望扩展Vaadin Renderer的功能或修复一个Bug,请联系我们。我们还为此提供了专业的开发支持

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2018/05/emf-forms-03/
百度未收录