EMF Forms 2.0 入门

原文位于:https://eclipsesource.com/blogs/tutorials/getting-started-with-EMF-Forms/

本教程将会对EMF Forms进行简要介绍并描述如何入门。如果你已经了解EMF Forms,则可以直接浏览本章的“教程”小节。

本教程基于EMF Forms和EMF Client Platform 1.4.x及以上版本。

介绍

本教程描述了一个名为EMF Forms的框架。此框架的目的在于简化表单UI的开发和布局定义,这些UI允许浏览、创建和输入数据(CRUD)。EMF Forms还包含一些表单UI的典型特性,例如对UI元素的校验、基于规则的可见性控制。

EMF Forms是一个成熟的框架并且已经在多个工业项目中用于生产。EMF Forms是EMF Client Platform (ECP)的一个子组件。尽管如此,EMF Forms独立于ECP并且可以单独使用;它只是能够与ECP的框架很好地整合在一起。

EMF Forms背后的理念是什么?

很多商业应用程序是数据驱动的,并且允许用户浏览、查看和修改底层的数据模型的实体。这些实体大多数以表单布局的形式进行展现,无论是在桌面应用、还是web应用或手机应用中。

 20180506_001

为商业应用手工开发UI界面——即使是使用一个可视化的编辑器——有很多的缺点。可视化组件,例如表单或报表,经常需要根据用户对数据模型的反馈或改变而不断改变。所有的改变必须在UI代码中通过手工来编写。维护和测试手工编码的表单布局代价非常大,需要大量的时间并且很容易发生错误。而表单经常由多人并行开发,因此很难保持统一的外观并实施统一的UI规范。最终,很少开发者真正喜欢这种手工开发UI界面的方式。

主要的问题在于典型的UI布局技术,例如SWT、JavaFX或Swing,它们都很强大但是很难使用,因为它们设计用于支持广泛的应用场景。它们并非真正聚焦于表单UI业务场景。

然而,EMF Forms提供了一种新的开发表单UI的方法。和手工编码表单布局不同,它允许你使用更简单的模型替代代码来描述UI。模型仅仅定义了由给定的UI指南允许的概念。

EMF Forms的目标包括:

● 更加高效地编写表单UI

● 采用表单UI来快捷地修改数据模型

● 保持或快捷地修改统一的外观

● 与其他利益相关方更为敏捷地互动(例如产品经理、客户)

● 降低创建表单UI的技术门槛

一个模型化的UI部件会通过渲染引擎来进行解释,这取决于特定的UI Toolkit,它会将模型转换为具体的概念,例如GridLayout。EMF Forms因此甚至可以将UI的自定义布局从所采用的UI技术中抽象出来,并且允许你在不同的UI技术堆栈之间切换,例如Swing、SWT、JavaFX或Web——仅需要替换渲染器即可。

20180506_002

由EMF Forms生成的UI可以像手工开发的UI一样被集成使用。一个典型的应用场景是在RCP应用程序中将它们集成到一个View中,不过更多的工程是将它们用于网站表单、向导、属性页或其他应用程序中用于展示和修改数据地方。

由于EMF Forms聚焦于表单UI,它还与e4中的应用程序模型概念完全匹配。e4应用程序模型将一个应用程序的总体设计分解为各个元素,例如View,而EMF Forms可以描述这些元素的内容,例如,在一个Eclipse 4 View中展示什么内容。因此 EMF Forms与Eclipse 4原生应用程序完全兼容。

● 了解更多关于开发人员支持培训的信息或者联系我们

● 更多关于EMF Forms的文档(参考本文的“文档”章节)

教程

在本教程中,我们将对EMF Client Platform中demo应用程序的编辑器的布局进行自定义,它将基于EMF Forms。注意你可以将表单UI嵌入(本章中的相关小节)到你应用程序中的任何位置,将其作为View,或者View的一部分,甚至放到对话框中。Demo应程序提供的Editor只是一种简单的尝试使用EMF Forms功能特性的方式。请注意在默认情况下,EMF Forms对一个对象的所有属性进行反射处理,因此无需任何手工编码或代码生成。如果你希望自定义用到的控件,你也可以添加自定义控件到EMF Forms之中(参考这里,即本文中的“如何自定义EMF Client Platform”小节)

Setup安装

下载 Eclipse Modeling Tools Edition. 从Eclipse Luna SR1的发布开始,EMF Forms已经是Eclipse Modeling Tools包的一部分。尽管如此,我们建议通过“更新站点”将EMF Forms更新到最新版本。要尝试使用EMF Forms,最简单的入门方式就是使用EMF Client Platform的其他组件,因此仅需安装RCP SDK 3.x,这里面包含来自更新站点的EMF Forms。但是,也可以不使用ECP的其他组件来将基于表单的UI嵌入到一个自定义的应用程序中(请查看本文中的“将EMF Forms嵌入到你的自定义应用程序中”小节)。

1. 点击Eclipse IDE的Help => Install New Software

2. 入最新的更新站点到 “Work with”并敲击enter

3. 选择 ECP SDK 3.x

4. 完成向导并重启Eclipse

选择一个领域模型(Domain Model)

在本教程中,我们使用了一个名为“Make it happen!”的样例模型。如果你希望了解更多关于该样例模型的信息,请参考此处。在样例中对一个简单的任务管理系统进行了建模,其中包括“User”,“UserGroup”和 “Task”实体。本教程描述了如何为User实体创建一个简单的视图。样例模型和被创建的视图都已经在你的IDE中以样例Bundle的形式存在。请选择New => Example并且选择EMF Forms类别。“Make it happen: example model” 选项将会安装 “Make it happen”样例模型(包括编辑Bundle)到你的工作空间中。如果你需要从草稿开始学习则可以选择此选项。“Make it happen: view model” 选项会另外创建一个样例视图模型(View Model)Bundle。其他样例将会在本教程中的其他部分进行介绍。

20180506_003

当然,你也可以尝试使用你自己的模型。而且,本教程基于EMF Client Platform提供的demo应用程序,包括模型浏览器。如果你仅需要使用创建出来的表单UI,则可以单独使用EMF Forms,无需其他ECP组件。你也可以将表单UI嵌入到你的应用程序的任何部分,例如一个视图或向导中。本文中的“将EMF Forms嵌入到你的自定义应用程序中”小节中对此进行了描述。

创建一个视图模型(View Model)

一个View Model描述了一个具体实体类型的表单UI。为了在运行时可用,它必须和应用程序一起部署。有多种方法来达到这个目标,不过,最简单的方式是将View model包含在一个Bundle中,并作为应用程序的一部分进行分发。EMF Forms工具提供了向导来根据一个已有EMF model(*.ecore文件)新建View model,以及一个对应的用于包含之的bundle。这些选项都在Eclipse的新建对话框中可用。另外作为快捷方式,你可以在Ecore模型文件(*.ecore)上直接进行右键单击,然后选择EMF Forms=>Create View Model Project。在“make it happen”样例中,Ecore位于“org.eclipse.emf.ecp.makeithappen.model/model/task.ecore”。在Ecore文件上右键单击并为bundle选择一个名称,该Bundle中会包含View Model,例如默认为:“org.eclipse.emf.ecp.makeithappen.model.viewmodel”。

20180506_004

在向导的下一个页面中,你需要选择基础领域模型(在Ecore中定义的)的实体以便定义表单UI。在本教程中这个实体是EClass User。另外,你可以选择是否使用默认的控件来生成View Model。在本例中,EMF Forms将会创建一个默认的布局来展示实体对象(User)的所有属性。如果你希望使用一个空的View Model,则取消底下的勾选项。在本例中,我们假定你使用默认布局(选中勾选框)。

20180506_005

一旦你完成了向导,它将会为帮你创建三个内容:

1. 一个新的工程,其中包含了View Model

2. 一个新的View Model,包含在viewmodels/User.view文件中

3. 使用EMF Forms扩展点的View Model注册(参考View Model Bundle的xml文件)。

这个创建的View Model会在View Model Editor中自动打开,我们将会再下面的章节中进行描述。

● ⇒了解更多关于开发者支持培训联系我们

● ⇒更多关于EMF Forms的文档

视图模型编辑器(View Model Editor)

EMF Forms提供了一个编辑器来支持创建和修改View Model。它还允许你预览当前的布局。要打开View Model Editor,双击你的工作空间中的任何*.view文件即可。View Model Editor会在左侧的树控件中显示当前的View Model,并且在右侧显示当前选定View Model的元素细节。树控件允许你通过在一个父元素上右键单击来创建新元素、删除已有元素以及通过拖放来改变层次结构。右侧的Detail视图中会允许你修改元素的属性,例如分配一个名称。默认情况下,在上一节中描述的向导中会为领域模型实体(本例中为User)的每个属性创建一个控件。

20180506_006

如果你希望手工创建控件,View Model Editor也同样提供了一个向导。要尝试这个操作,选择所有生成的控件(不是父节点View),右键单击后删除它们。然后在剩下的根节点(View)上右键单击并选择“Generate Controls”。在向导的第一页中你可以选择希望生成控件的类。在我们这个简单的样例中仅有User类是可用的,但对于更复杂的表单来说可能还会有子元素。EMF Forms同样可以为它们创建控件。在向导的第二页中,你可以选择User实体中那些你希望创建控件的属性。通过选择“Show only unreferenced Attributes”,对话框中仅会显示目前并未在View中包含的属性。由于我们之前将所有的控件都删除了,因此在我们的例子中勾选此选项不会产生任何改变。点击“Select All”按钮然后点击“Finish”按钮来为所有的属性再次生成控件。

20180506_007

20180506_008

为了控制当前View Model的结果,EMF Forms工具同样提供了预览功能。你可以通过点击View Model Editor右上角的按钮来打开它。这将会打开第二个视图View,其中会展示目前View Model Editor中描述的View的渲染结果。如果你在View Model的当前状态下打开预览,它会以最简单的垂直排列的布局来展示所有控件。我们将会在后面的章节中改善这个布局。现在无论你在View Model Editor中进行了任何修改,都可以通过点击预览视图右上角的refresh按钮来刷新预览内容。另外,你可以打开“Auto-refresh”选项,每次View Model的改变都会自动刷新预览内容。试着通过拖放改变View Model中生成的控件的顺序,看看这些改变会如何在预览中同步反映。

20180506_009

未来,为了进行快速测试,对于展示在UI字段中的数据,预览视图的工具栏会包含允许你导入、导出或清除这些数据的按钮。

第一个View Model

让我们通过创建一个自定义的布局来优化一下User实体类的View。一般来说,一个布局包含两种布局要元素。第一种类型是容器Container,它用于包含其他元素。容器明确了其子节点如何被组织。每个View Model至少会有一个容器,也就是View本身。View一般都是其包含的所有元素的父容器,正如前面所见的,它会将其子元素垂直排列。

在本样例中,我们还会额外使用两个容器,HorizontalLayout和Group。HorizontalLayout会水平排列其包含的子元素。Group默认垂直排列其子元素,并绘制一个边框包含它们。请注意元素被渲染的方式是可以调整的(请看这里)。

另一种类型的元素是控件,它不包含其他子元素。一个控件渲染了View所显示的领域对象中的一个具体属性或者引用。另外,元素也可以直接绑定到一个属性或引用的元素,并显示其静态内容,例如一个标签Label。

容器元素可以相互包含。例如,为了生成一个典型的两列布局,你可以创建一个HorizontalLayout包含两个Group,而Group包含实际的控件。对于User类的Tasks引用需要更多的空间,我们将其放在两个Grooup的下方。

20180506_010

View Model Editor允许我们在树视图模式中创建所有可用的元素。想要创建任何元素,右键单击需要包含它的父元素。弹出的上下文菜单有可以被包含在该父元素中的所有元素。任何布局的根父节点就是View本身。右键单击View本身来创建一个HorizontalLayout。再右键单击刚刚创建的HorizontalLayout,创建两个Group。你可以为所有元素分配名称,这会加强对布局的理解。对于HorizontalLayout,这个名称仅仅是给开发人员看的。而对于Group,这个名称会显示在UI中作为Group的标题。请注意,如果你想改变元素在布局中的位置,可以通过拖放操作来移动元素。现在Model应该看起来是下面这个样子:

20180506_011

在保存View Model及预览后,新的布局在UI中的效果如下:

20180506_012

在本教程中,我们仅仅使用了两个简单的布局。但是你可以在这里找到更多复杂的布局元素。另外,你可能也需要使用EMF Forms开发自定义布局来满足特定的项目需求。

将EMF Forms嵌入到你的自定义应用程序中

到目前为止,我们已经声明式定义了一个View Model并在View Model Editor中进行了预览。下一步就是将它放在你自定义的应用程序中渲染出来,并集成在你想要的任何地方。EMF Forms可以嵌入到任何地方,可以是一个窗体Window、视图View、对话框Dialog、甚至是向导Wizard。

开始渲染的第一步就是选择UI技术。EMF Forms目前允许你可以在以下技术中进行选择:

● SWT:EMF Form可以通过一个SWT渲染器实现来呈现。在Eclipse IDE的View Model Editor中预览也是使用的此渲染器。想要在SWT中渲染你的View Model,请继续下一章节。SWT渲染器支持所有已定义的View Model元素及引用的实现。在本教程中,我们假设你选择SWT并进入下一个章节。

● RAP网页渲染器:远程应用程序平台RAP 是一个用于单一来源的网页或者桌面应用程序的技术。EMF Forms提供了一个RAP兼容的View Model渲染器,因此表单可以在所有的现代浏览器中展示。RAP渲染器也应用在了很多项目中。想要使用RAP来将你的表单展示在浏览器中,请查看此教程

● JavaFX:你也可以将同样的View Model在JavaFX中渲染。介绍如何在JavaFX中渲染EMF Forms的教程参见此处。请注意JavaFX渲染器目前仅支持一部分View Model元素,目前还是beta版本。

请注意,我们还开发了一些其他特定的渲染器。例如,我们正在编写一个基于AngularJS的Web渲染器。如果你对自定义渲染器感兴趣,或者你发现现有的渲染器缺少某个特性支持,基于这些目的,我们提供了赞助开发

● ⇒了解更多关于开发者支持培训联系我们

● ⇒更多关于EMF Forms的文档

将EMF Forms嵌入到一个SWT应用程序中

EMF Forms提供了两个SWT样例应用程序(一个是为3.x,一个是为e4),它们展示了如何将表单UI嵌入到一个View中,并提供了一个产品展示了哪些Bundle是必备的。请选择New => Examples => “Make it happen: eX application”菜单。在工作空间中创建了样例Bundle之后,你可以通过右键单击根文件夹中的“makeithapen_e3.product”文件并选择“Run As” => “Eclipse Application”菜单来启动样例应用程序。它会在一个View中展示虚拟对象,它会使用之前创建的View Model。

20180506_013

请查看一下“View”类(e4中的SamplePart)的实现。getDummyObject()方法创建了一个User类的样例实例。createPartControl()方法使用EMF Forms来渲染了表单UI。EMF Forms提供了API来将Editor嵌入到任何SWT View中。要为EObject创建一个表单UI,你需要依赖:

org.eclipse.emf.ecp.ui.view.swt

要渲染一个嵌入式的View,使用这个Bundle中的ECPSWTViewRenderer:

ECPSWTViewRenderer.INSTANCE.render(Composite parent, EObject domainObject);

这个方法将会选择所有已注册的View Model并使用给定的SWT Composite来为给定的Object渲染一个View。如果没有发现已注册的View Model,则会使用默认的布局。

请确认以下两个Bundle在你的Run/Product 配置中(样例应用程序中已经包含了):

● org.eclipse.emf.ecp.view.model.provider.xmi:提供通过扩展点来注册的View Model

● org.eclipse.emf.ecp.view.model.provider.generator:在没有明确注册的View Model时提供默认布局

你还需要将必须的SWT渲染器包含进来,它们用于支持你在View Model中用到的内容。

请注意如果你嵌入使用了Editor,则reference服务特性将不再可用。这是因为它们需要实体的上下文信息,例如其他哪些实体是需要引用的。EMF Forms提供了API来提供这个上下文,并且提供了一个默认实现,请查看此处来了解更多相关信息。

如果你需要将EMF Forms嵌入到你的应用程序中的支持,如果你希望评估或采用你所需的框架,我们基于此提供了开发支持

请浏览本站点来了解更多关于EMF Forms的特性。

尝试在demo应用程序中布局

除了提供了仅有一个View的样例应用程序,EMF Client Platform还提供了一个Demo应用程序,其中默认将EMF Forms嵌入作为一个Editor。因此Demo应用程序对于在真实的应用程序中测试结果非常高效。

如果要运行EMF Client Platform Demo应用程序,需要通过Run => Run Configurations.菜单来创建一个运行配置(Run Configuration)。通过单击“Eclipse Application”节点来添加一个新的run configuration。在第一个选项卡中选择“org.eclipse.emf.ecp.application.e3.application”来运行应用程序。如果你需要使用e4样例程序,则请另外选择“Run a product”和“org.eclipse.emf.ecp.application.e4.product”。你应该选择一个没有使用过的配置,例如“runtime-ECPViewModelEditor”,以便避免受到之前使用的配置的遗留内容影响而造成解析错误。

20180506_014

选择“Plugin-ins”选项卡来定义哪些Bundles可以被启动。选择“Launch with:” => “Features selected below”选项。首先取消对所有特性的选择,然后滚动到“org.eclipse.emf.ecp.demo.e3.feature”(对于e4则滚动到“org.eclipse.emf.ecp.demo.e4.feature”)并勾选它。点击“Select Required”按钮来自动添加所有必须的feature。最后,你需要将你的模型添加到这个Run Configuration之中。点击“Add Plug-Ins” 按钮(在 “Select Required”下面),并将你希望使用的所有模型都添加进来,另外还需要添加模型Bundle、View Model Bundle和对应的*.edit Bundle。如果在对话框中最初没有插件可以被选用,则在对话框中输入“makeithappen”。

20180506_015

在Demo应用程序启动后,你需要创建一个工程来包含所有的领域模型实例。参考这里来了解EMF Client Platform的Demo应用程序。为了方便,我们这次使用一个EMFStore工程,因为它不需要进行任何配置。

20180506_016

在领域模型实例工程中,我们创建了一个“User”类型的实例,在工程上右键单击,选择“New Model Element”菜单并选择“User”。此时User会在Editor中被打开,并会展示之前在View Model中定义的布局。

如果你需要将EMF Forms嵌入到你的应用程序中的支持,如果你希望评估或采用你所需的框架,我们基于此提供了开发支持

请浏览此站点来了解EMF Forms的其他特性。

● ⇒了解更多关于开发者支持培训联系我们

● ⇒更多关于EMF Forms的文档

 

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