EMF Forms 4.0 View Model元素

原文地址:https://eclipsesource.com/blogs/tutorials/emf-forms-view-model-elements/

本教程提供了View Model所有可用元素的概览。请参考此教程(EMF Forms1-EMF Forms入门)来了解EMF Forms和View Model的基本介绍。

视图(View)

View是所有View Model的根(Root)元素。如果你使用IDE工具创建一个新的View Model,则默认会创建Root View。View的名称仅用于在View Model中进行更好的标识;它并不会被渲染。一个View会指定展示在UI中的领域模型的EClass。在创建一个View Model的时候,必须首先设置这个属性(Root EClass)。请注意,如果你使用EMF Forms工具来创建View Model的时候会默认设置Root EClass。如果你希望手工设置Root EClass,则请双击一个View并选择“Root EClass”属性右侧的按钮,会弹出对话框来让你选择所有已注册的EMF模型中的EClass。如果你希望创建一个View并以层级方式展示所有的对象,请选择这个树的Root Class。

20180603_001

在将一个View与EClass关联起来后,你可以继续通过添加子元素(右键单击View来添加子元素)来自定义对应的View。一些子对象将会读取Root EClass,例如一个控件与EClass的属性绑定。因此,你需要首先设置Root EClass。

控件(Control)

Control用于展示领域模型(Domain Model)的特定属性或引用。在EMF中,使用术语“Feature”来表示属性和引用。通过向View Model中添加Control,你可以指定某个Feature在UI中是否可见及可编辑。这样就将UI组件和Domain Model的Feature之间进行了绑定。

20180603_002

控件可以添加为任何容器的子元素,这些容器包括处于Root层次的View或其他布局元素。为了更好地理解控件的作用你可以为其分配一个名称。不过,这个名称并不会影响UI的渲染结果。控件的标签会从领域模型中检索得到并且可以在对应的View Model中进行使用。

创建控件的最佳方式是在容器上右键单击并选择“Generate Controls”。在第一页中你可以选择EClass,该EClass包含了那些希望添加控件的Feature。如果View的EClass带有子元素,对话框还会允许你绑定这些子元素的Feature。第二页将会让你选择哪些属性和Reference来生成控件。在创建了控件之后,你可以使用拖放来在布局中移动产生的控件,将它们放到合适的地方。

每个控件需要指定它需要与哪个Feature绑定,默认情况下,会有且仅有一个Feature。请注意如果你生成了控件,则对应的绑定也已经添加完毕了,你什么都不需要做。

垂直/水平布局(Vertical/Horizontal Layout)

垂直和水平布局都是非常简单而强大的容器元素。它们都可以包含各种类型的View Model元素,例如一个控件或其他容器。水平布局将各个控件并排摆放,垂直布局则将各个控件上下摆放。通过嵌套两种布局,或者嵌套其他布局,我们可以产生更为复杂的布局,不过它们仍然很容易理解。为了更佳的可用性,你可以为这些布局命名,例如“root container”或“first column”。这将使得开发者更容易理解一个已有的View Model。尽管这些名称并不会在最终的UI渲染结果中显示出来。

20180603_003

20180603_004

组(Group)

这个元素允许你对任意数量的其他元素、控件或容器进行分组。默认的渲染器会在子元素的外围绘制一个边框并按垂直布局来展示。

20180603_005

20180603_006

标准的渲染器支持三种不同的组,可以通过“Group Type”属性来选择它们:

● 普通(Normal): 在所包含的元素周围绘制一个边框

● 折叠(Collapsible):允许你将Group中的内容进行折叠

● 嵌入(Embedded):将Group中的内容嵌入到父布局中并添加一个标题标签

20180603_007

不过,Group的概念非常通用;它并非意味着一个Group实际上会被渲染为一个带有边框的区域。例如,EMF Forms提供了另一个Renderer使用一个Expand Bar来渲染一个Group。根据UI的上下文,一个Group也可以是一个选项卡、一个页面或一个对话框。因此,Group的使用为UI渲染提供了更多的灵活性,并且使得你可以在不同的用例中重用View Model。因此,和Vertical Layout这类灵活性不足的布局元素对比,Group会更可取。

20180603_008

表格控件(TableControl )

一个TableControl用于在一个表格中展示一个实体的子元素。默认情况下ECP会在表格中展示一个包含引用(Containment Reference),但是仅会显示被包含的元素的名称。

20180603_009

这个列表允许你查看子元素,它会在另一个View中打开。不过,你可能会希望在同一个View 里的表格中展示一个元素的子元素和属性,允许用户直接查看和编辑它们。TableControl提供了这些功能。下面的样例基于“Make it Happen!”样例模型;请参考这里(译文见:EMF Client Platform1:Make It Happen! Day 0 and 1)来了解更多的信息。在样例中,我们将会为UserGroup实体添加一个TableControl来在一个表格中展示用户列表,并且允许你编辑“first name”和“last name”属性。相关的引用是“users”。在准备阶段,请确保在生成的Model中此引用的Property Type被设置为Editable。默认情况下,包含引用的Property Type会被设置为none。

20180603_010

一个TableControl可以像一个标准的控件一样被添加到View Model的任意位置。在下面的样例中,我们首先为一个UserGroup定义了一个View(右键单击task.ecore => EMF Forms => Create View Model)。在这个View中,我们添加了一个TableControl。该TableControl需要一个Domain Model Reference来决定它将会显示哪个Reference。对于TableControl来说,它有一个特殊的类型的:TableDomainModelReference。将它添加到TableControl中,并且让其指向包含引用,它将会展示在表格中:

20180603_011

最终,你需要指定表格的列。列会以子领域模型引用(sub-DomainModelReferences)添加到TableDomainModelReference中。它们指定了被引用的实体(在本例中是User)的哪些属性会被展示在表格中。在样例中,我们希望添加两列到TableControl中。第一列指向“first name”属性,第二列指向“last name”。创建列的最佳方式是右键单击表格控件并选择“Generate Columns”。这将会为被引用的类(在本例中是User)的每个属性创建一个列。你随后可以在表格控件的属性View中移除不需要的列。20180603_012

本例中的渲染结果将会在下面的截图中展示。TableControl 的“Add Remove Disabled”属性决定了在表格中创建和删除元素的按钮是否会被渲染。“Detailed editing”属性指定了表格中的元素将会如何进行编辑:

● None:在表格中直接编辑

● WithDialog:显示一个按钮来打开编辑表格条目的对话框

● With Panel:在表格下面提供一个细节区域来展示当前选定元素的属性,并允许你进行编辑。

网格控件(Control Grid)

一般来说,当你使用EMF Forms时不需要处理网格布局,被渲染的组件会自动将布局信息转换为底层UI工具包的对应组件。然而,有时候在对控件进行布局时,水平和垂直布局并不够用,你可能希望以更节省空间的方式来排列控件。为此EMF Forms(从1.9.0开始)提供了一个名为“Control Grid”的元素。

它是经典的网格布局的简化版。它的目的在于提供尽可能多的必需配置项,同时尽可能保持简单。

Control Grid聚焦于控件布局,它提供了两个附加的布局容器:Row和Cell。使用这些元素你可以更细致地逐行指定控件布局,但比起手工编写一个网格更加简单。

在添加了网格控件之后,你可以添加行作为其子元素。在每行中,你可以添加任意数量的单元格。最后,你可以在每个单元格中添加一个控件。

20180603_013

20180603_014

自定义控件区域(Custom Control Areas)

ECP为每种类型的属性或引用都提供了标准的控件。另外,你也可以使用自己的实现来替代这些默认控件。这些“标准”控件由框架根据View Model中的与控件相关联的VDomainModelReference来进行选择。另外,标准控件与其展示的具体数据无关;它们仅依赖其类型,例如是String还是Boolean。可以通过组合控件并使用布局元素进行排列来设计复杂的视图。

不过,有时View的某一部分需要以非常特殊的方式进行展示,这会影响到布局或行为。在这种情况下,ECP允许你插入一个Custom Control Area。它允许你手工编写一个表单编辑器并在View Model中像使用标准控件一样使用它。请注意在很多情况下可以使用自定义元素来对View进行扩展以避免这种手工实现方式。

你可以在这里(译文见:EMF Form3_1自定义控件区域)找到如何使用Custom Control Area的具体教程。

主-从树视图(Tree Master Detail)

Tree Master Detail以树的方式来展示一个模型实例的层级关系。左边展示了根元素的所有子元素。你可以在树上添加新的子元素(通过在父节点上右键单击),删除元素以及通过拖放来修改层级关系。

右边展示了在树中被选中的元素的细节表单。如果想要使用一个Tree Master Detail,首先需要为根元素创建一个View Model(例如一个user group)。请注意Tree Master Detail仅对包含有子节点的元素有用,因此这些元素中必需带有指向其他元素的引用。如果你只是希望展示Tree Master Detail(这是最典型的用例),则只需要向View Model的根节点上增加一个Tree Master Detail元素。

这些是你需要指定的所有内容,EMF Forms将会选取被选定的元素的View Model,展示到Tree Master Detail的右侧的表单中,因此你可以为树中的所有元素分别添加独立的View Model。树的根元素是一个特殊情况,因为你刚刚为其注册了一个View Model,其中包含了 Tree Master Detail。

如果你选中了树的根元素,EMF Forms将会在右侧以递归的方式渲染出另一个 Tree Master Detail。因此,你需要为根元素类型注册另外一个View Model。它随后被用于展示Tree Master Detail的右侧内容,因此一般它会展示为一个由各个控件组成的表单UI。为了区分这两个View Model,你需要将用在Tree Master Detail之中的那个View Model在其注册时标记为“detail”。下面的plugin.xml样例中展示了将两个View Model注册到“User Group”的情况。第一个View Model会用在Tree Master Detail之中,

20180603_015

第二个则包含了Tree Master Detail。

20180603_016

 

下面是渲染的结果:

20180603_017

视图代理(View Proxy)

View Proxy允许在一个View中嵌入其他View元素,这有利于重用已有组件。例如,如果你的领域模型有一些类由一个超类继承而来,你可以为超类的属性定义一个View Model,并且随后可以将其嵌入到子类的View Model之中。

View Proxy元素可以被添加到任何View的容器之中,并且将作为被其引用的View的占位符,它们会在运行时被解析。View Proxy必须声明一个id,因为上述方案是通过该id实现的。

20180603_018

在注册的时候,被嵌入的View必须使用上述相同的Id,使用“proxyId”来声明一个filter。注册的样例如下:

键“proxyId”的值必须与使用proxy的View中声明的Id一致。

根据这个key,将会在运行时使用原始的View Object来替代View Proxy。

使用View Proxy的默认情况是重用一个通用的基类的View Model。然而,你可以编写自定义代码来在你的工程中以不同的方式来处理View Proxy,例如使用一个id和一些View Model元素来替代View Proxy。

其他元素(Additional Elements)

EMF Forms提供了更多的View Model元素,例如:

分组网格(Grouped Grid)

20180603_019

分层表单(Hierarchical Forms)

20180603_020

主从树视图(Tree Master Detail View)

20180603_021

基于规则来控制部分UI的可用性和可见性

基于定义好的规则来隐藏或禁用部分UI

标签和分割符

添加静态的UI元素来结构化UI

还有更多

最终,EMF Forms可以轻易地通过新的元素和概念来进行扩展以满足你的特定需求。我们为此提供了专业的支持和培训。如果你希望了解更多关于自定义并加强EMF Forms的培训和方式,请联系我们

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