该产品不同于一个简单的前端设计工具，而是集前端页面设计，前后端代码集成，客制化代码编辑为一体的一个平台。该平台运行于Lumos家族产品之上, 借助于平台已有的自定义表，扩展属性等功能，可以以极低的代码量轻松实现页面的增删改查，可以最大限度的允许用户更改系统提供的固有页面，从而 达到快速开发的目的。
1. 名词介绍
| Abbreviation | Comment |
|---|---|
Meper |
Meper |
用户 |
指LSV的实际使用者，多为实施开发人员或者甲方的IT人员 |
最终用户 |
指LSV开发出来的功能页面，最终使用这些页面的人。比如用Meper开发出来了一套MES系统，那么最终用户是指使用这套MES系统的人 |
2. 页面设计入口
用户可以在系统中创建任意多的页面，并且可以与系统提供的固有页面进行菜单级别的融合，也就是说整个菜单都可以定制化，随意加入用户自己加入的页面。
通过点击系统的“页面列表”进入如下页面：
上图正在示例如何添加一个新的页面设计，核心属性依次为：
| 属性 | 含义 |
|---|---|
名称 |
页面编辑的名称 |
类别 |
系统预留，不强制输入 |
版本 |
名称和版本组合唯一 |
Controller Class |
当LSV无法满足较为复杂的逻辑设计需要，那么可以通过写一些Java Class直接写控制逻辑，可以很好的做到页面设计和后台逻辑分离 一旦设置了全类名，系统将在进入该页面的时候，初始化该Controller Class，保证每个页面一个示例，互不影响。 |
类型 |
分为电脑和手机两类，电脑用于PC端页面设计，手机用于安卓端页面设计。 |
模板选择 |
右侧选择区域为模板选择，已经被选为模板的页面，将会出现在该列表中。 仅仅在新增的情况下才会出现模板选择，在编辑的时候，不能进行模板的选择 |
模板 |
可以将已将做好的页面设置为模板，一旦被设置为模板的页面，将会出现在右边模板区域，在新建 页面的时候，允许用户选择一个模板，并根据该模板生成相应的页面。 |
弹出框 |
设置为弹出框的页面，设计页面会自动生成DialogHead和VerticalLayout。弹出框页面主要用于与页面按钮做绑定事件。 |
侧边弹出框 |
创建页面勾选侧边弹出框选项，与常规的弹出框不一样侧边弹出框被触发时从侧边弹出。 |
组件 |
设置为组件的页面是作为公用的，其他页面设计页面时可调用组件库—扩展下的组件页面。最常用的做法是将几个组件页面拼凑成一个完整的页面。 |
工作流表单 |
bpmn专用，添加流程定义使用的表单页面。 |
描述 |
用户可以输入任何描述性语言。 |
模板图片 |
模板页面可添加模板图片，选择模板时查看模板图片可直观的了解模板页面的样式。 |
3. 界面布局
当用户在页面列表中点击“设计”，将会在新的标签页进入该页面设计状态，进入设计器，设计器整体布局如下图所示：
如图中所示，整体Meper的设计页面分为5个区域：
-
组件大纲
-
组件库
-
设计区域
-
属性编辑区域
-
操作栏
3.1. 组件大纲
组件大纲会将所有添加到该页面的组件以树状结构罗列出来，树状结构表明了组件的层次，在同一个父组件下，从上到下，表示组件的加入顺序，靠上的表示 最先加入父容器。
除此之外，用户可以在组件树中选中一个节点，并进行上移，下移以及删除操作。当用户做对应的操作的时候，区域3中的组件也将同步做相应的变化。
各节点的显示如图中 1 所示，显示的规律为首先显示控件的类型，然后“- >” 后显示他的别名和ID。
图中 2 的眼睛正常时组件是可见的，眼睛上加了斜线代表控件被隐藏。
3.2. 组件库
组件库会随着后续版本发布而逐渐丰富，争取涵盖所有常用的组件
组件库支持检索，用户输入组件的名称，将会模糊查询系统中支持的组件，将符合条件的组件罗列出来，供用户选择。
系统支持以下两种方式进行组件添加：
-
拖动一个组件到设计区域，系统会根据拖动的目标对象，将拖动的组件加入目标对象
-
双击一个组件。
该模式下需要保证已经选择了一个父对象，否则双击的组件将加入到根容器中
不管是拖动组件，还是双击添加，只有在父容器支持的组件才会被加入。比如一个Column组件不能加入到除Grid之外的组件中，如果用户拖动到一个Layout中 那么将没有任何效果，拖动失败。
如图所示，目前组件库分为四大类（后面章节会对各个组件进行介绍，这里仅仅对分类做大致介绍）：
-
Basic
基础控件，如表格，按钮，column，Label等组件 -
Input
所有输入类型的组件，如text field，password field，combo box，Radio Button， Check Box等等 -
Layout
所有布局类型的组件，如VerticalLayout，HorizontalLayout，FormLayout等。这些组件内部可以再放入其他的组件 -
Extend
所有已经创建的页面在此显示，用户可以直接将页面拖入当前设计页面中。该功能对于结构化设计页面比较有用。
例如：对于一个CRUD页面，用户可以将顶部的ToolBar设计为一个页面，然后拖入到其他页面中，保证所有页面样式的统一。
将另外页面拖入当前页面后，会将原来页面所有的“样式属性”信息带入新的页面，用户只能在新页面中定义原来页面的事件，数据源等信息
样式信息会每次在页面初始化的时候，从原有页面去读取，所以尽管将原有页面拖入到新的页面中，用户依然可以通过修改原有页面的样式属性， 在新页面中 进行体现。比如颜色，大小等。
-
Chart
设计器中提供基本的图形展示控件，如常用的柱状图，饼图，曲线图，区域图等，用户可以通过这些控件快速设计页面。
3.3. 属性编辑
属性编辑分为如下三部分：
-
基本样式
针对组件所有的显示属性进行设定，如size，背景，padding（内边距），margin（外边距），显示文本，标题等等。 -
数据源
设定组件加载数据时所需要的数据源的相关设定，如表格加载数据时是来自于系统表，还是自定义表，还是通过SQL直接拿值等。另外对于一些组件的备选项也在这里设定，如combo box，list box等组件下拉框里面的值也在可以在这里进行设定。
-
事件
针对各个组件支持的事件，来定义事件触发时应该激发的动作，如按钮的点击事件，页面的加载事件等。
4. 页面状态
编辑中的页面一共有以下状态，如下表所示：
| 状态 | 含义 | 允许的下个状态 |
|---|---|---|
Create |
页面创建后的初始状态 |
Release：点击Release按钮 |
Release |
页面设计已经完成，可以给到最终用户使用 |
Check Out：点击Check Out按钮 |
Check Out |
页面发布后，仍需要继续更改，需要进入该状态。 在该状态下，用户的保存动作不会影响到最终用户的使用， 最终用户使用的版本依然是Check Out之前的版本 |
Check In： 用户点击Check In 按钮 |
Check In |
用户Check Out后，调整页面功能完毕，要反映到最终用户，那么需要进入在此状态 |
Check Out: 用户点击Check Out按钮 |
总之，最终用户只能使用Release、Check In状态下的页面，如果页面没有发布，系统最终用户将不能使用。如果页面处于Check Out状态，那么用户只能 使用上次发布的页面，直至用户再次Check In页面。
5. 数据源
5.1. 数据源
数据源是一个组件的灵魂，通过设置数据源，使各组件得以填充数据。
| Meper的组件中的数据都是自加载的，这个是Meper数据源设计的基础，时刻牢记 |
数据源是以组件为单位的，不同的组件可以设置不同的数据源，同一种组件也可以设置不同的数据源。在页面初始化的时候，进行数据的加载。
一般情况下，会将Layout类型的组件中，设置一个数据源来源，然后在其具体的子对象中，设置具体的取值方法。
比如，可以设定一个表格从用户对象中取值，而具体的某一个栏位可以指定从系统User对象的某一个方法中取值；或者设定表格从SQL语句中取值，而栏位可以从SQL返回的众多栏位中的其中 一个进行数据绑定。
再比如，一个FormLayout中，包含一个TextField，可以设定FormLayout组件及其子对象的值来源于User对象，而TextField的值来源于User 对象的 getUserName()方法
如上图所示，一般情况下，数据源分为五个元素：
-
数据源类型
根据数据源的数据来源不同，分为诸如系统对象，自定义表等，后面章节会详细介绍 -
数据源对象
数据源类型选定后，会选择在来源下，具体的数据源对象是什么。比如，如果设定数据源是系统对象，那么数据源对象可以使用户对象，角色对象等，如果设定数据源 是自定义表，那么数据源对象就是自定义表的名称 -
取值方法
数据源对象确定后，需要确定取值的方法。针对系统对象，一般为常用的get方法，针对自定义对象，一般为栏位的名称即可为了将取值显示内容规范化，所有的取值方法都会采用类似于开发方法的展示形式：
形式为： 返回类型 get属性()
如： String getUserName()，即为返回用户名。
同时也支持扩展属性，扩展属性为 Object getCEF($栏位名称)。当用户选择扩展属性时，系统会跳出选择框，供用户选择具体哪个属性
-
设值方法
数据源对象确定后，需要确定设值的方法。针对系统对象，一般为常用的set方法，针对自定义对象，一般为栏位的名称即可为了将取值显示内容规范化，所有的取值方法都会采用类似于开发方法的展示形式：
形式为： void set属性(参数类型)
如： void setUserName(String)
同时也支持扩展属性，扩展属性为 Object setCEF($栏位名称,Object)。当用户选择扩展属性时，系统会跳出选择框，供用户选择具体哪个属性
-
初始值
一旦用户定义好数据源和数据类型，还可以设定其初始值。-
User Defined
这个值用户可以随便输入，但是不能动态改变，一旦输入后就确定下来 -
Component
拿到的是当前页面下某一个组件的值。
-
一般情况下，数据源类型和数据源对象会设置在Layout，表格等父对象上。而“取值方法”、“设值方法”会设置在子对象上。
比如，表格中设置数据来自于系统对象的User对象，子对象的栏位设置取值方法为getUserName
数据源根据数据来源不同，分为以下几种：
5.1.1. System_Object
系统对象，是指有Lumos平台原生提供的对象，如用户，角色，权限，用户组，产线，工艺，物料，bom等系统对象。
Meper根据如下接口来具体系统的对象，但是会过滤掉中间的对象。所有该接口的实现都会作为系统对象来处理。
public interface IObjectType {
String getName();
default String getNameKey() {
return "objecttype." + this.getName();
}
Class<?> getClazz();
default Class<?> getDomainClazz() {
return null;
}
default String getTableName() {
Class<?> clazz = this.getClazz();
Table annotation = (Table)clazz.getAnnotation(Table.class);
return annotation != null ? annotation.name() : this.getName();
}
}5.1.2. Customized_Object
自定义对象，指的是自定义表对象。
上图数据源对象的值直接来源于自定义表对象，会将自定义表全部罗列出。
自定义表字段获取有两种方式，一是编辑子项目弹出框中展示所有自定义表字段，勾选所需要的自定义表字段在文本框中输入字段栏位名称（或者选择文本ID）；二是 选中表格列，数据源字段获取器下拉框选择自定义表字段。
5.1.3. SQL
系统支持直接通过SQL语句来获取数据。
-
图中 1 所示，用户可以输入准备好的SQL语句。（目前仅支持较简单的SQL,对于存储过程等，暂时不支持）
-
图中 2 所示，根据用户输入的SQL语句，系统会自动进行解析出所返回的栏位，用户可以根据栏位来设置过滤条件。
| 目前仅支持较简单的SQL,对于存储过程等，暂时不支持 |
5.1.4. VO
待续
DTO
Meper支持自定义GRID分页的数据源，如图所示：
-
查询器：Query对象，用于组装查询，系统中纯代码的分页GRID也是使用的这个
-
返回值类型：表示这个GRID的数据源对象
-
查询条件：就是我们的查询条件（一般是QO）
使用方法需要在代码中注册，注册方式如下：
public enum DeviceQueryType implements IPagingQueryType {
EQUIPMENT_PAGE_QUERY(EquipmentPageQuery.class, Equipment.class, EquipmentQO.class);
private Class queryClazz;
private Class queryGenericClazz;
private Class queryConditionClass;
DeviceQueryType(Class queryClazz, Class queryGenericClazz, Class queryConditionClass) {
this.queryClazz = queryClazz;
this.queryGenericClazz = queryGenericClazz;
this.queryConditionClass = queryConditionClass;
}
@Override
public Class getQueryClazz() {
return this.queryClazz;
}
@Override
public Class getQueryGenericClazz() {
return this.queryGenericClazz;
}
@Override
public Class getQueryConditionClass() {
return this.queryConditionClass;
}
@Override
public String getName() {
return getQueryClazz().getSimpleName();
}
}注册完成之后，即可在我们的页面上获取到指定DTO的查询数据源。
5.1.5. Component
该数据源表示数据并不是来源于数据库，代码，用户预定义等，而是在运行期来源于控件的值。
Data Source Object的值为页面中的所有ID，用户可以选择想要取值的组件。
一旦在某个Layout类型的组件上面指定了该数据源，且指定了数据源对象，也就意味着该数据源对象所代表的控件上面的数据源，就做为该Layout的数据源了 ，后续在该Layout中加入的其他组件，如Text Field，在为子组件设置数据源的时候，getter或者setter将会从数据源对象所指定的控件上面的数据源指定的类型去获取。
-
所有Input 类型的控件，如Text Field、Integer Field、Combo Box、Datatime Picker等等
-
Grid
取值为选中的行，如果没有，则取值为空 -
Pagination Grid
取值为选中的行，如果没有，则取值为空
| 值得注意的是，系统中有多处取值为COMPONENT的情况，含义均如上所述，并无不同 |
5.1.6. API
对于复杂的逻辑，不属于页面逻辑可以解决的部分，需要借助于调用后台的API进行处理。 一般用于调用后台API的场景主要有：
-
核心逻辑在于后台处理，如产品在站位开始处理(startAtRouteStep)、产品在站位结束处理(completeAtRouteStep)等
-
对于对象之间的关系绑定。如用户与角色的绑定、用于与权限的绑定
上图即为API Action的定义界面：
-
Service
罗列出系统中的所有服务 -
Method
列出选中服务中所有的可以调用的方法 (只列出操作类型的方法，取值类型的方法并不列出，关于如何取值请参考[load-data]) -
参数定义
一旦选中Method后，该方法所需要的参数将会全部现在下面的表格中，用户需要定义各个参数需要从哪里获取值，一共有三种取值方法-
USER DEFINED
如果参数是一个常量，需要用户直接输入，可以使用该方法 -
COMPONENT
如果参数需要从页面元素中取值，一旦用户确定使用该方法取值，在 “值” 这一列将会列出当前页面中的所有的ID。 -
Expression
待续
-
5.1.7. User Defined
用户自定义（在string类型下）该数据源比较简单，一般使用在列表项的定义，比如Combo Box的下拉框，List Box的列表中。
用户可以根据自己实施的需要，手动输入需要显示的值。
5.2. 多数据源
当不同类型系统之间（例如MES和ERP）需要传递数据时，同一个页面中可能存在多个Grid，并且数据源来自多个不同的数据库，可以使用SQL语句+第三方数据源的方式绑定数据源。
5.2.1. 添加第三方数据源
在界面中为组件绑定第三方数据源之前，首先要在二次开发模块下的数据源界面中添加第三方数据
各部分说明：
-
名称：自定义名称
-
数据库驱动：不同数据库对应的驱动如下
-
MySql：com.mysql.jdbc.Driver
-
SqlServer：com.microsoft.sqlserver.jdbc.SQLServerDriver
-
Oracle：oracle.jdbc.OracleDriver
-
-
数据库方言：不同数据库对应的数据库方言如下
-
MySql：org.hibernate.dialect.MySQL5InnoDBDialect
-
SqlServer：org.hibernate.dialect.SQLServer2008Dialect
-
Oracle：org.hibernate.dialect.Oracle10gDialect
-
-
URL：数据库的连接地址；
-
用户名/密码：数据库的用户名和密码；
-
最大/最小连接数：允许连接的最大/最小用户数；
| 数据源添加完成后，查看状态是否是已激活，只有激活的数据源才可以在配置数据源时显示 |
5.2.2. 设置数据源
SQL语句说明
通过SQL语句为组件绑定数据源时，如果使用一般的SQL语句，是没有过滤属性的， <#if></#if>语句的作用是为该数据源添加过滤属性和过滤条件
select * from ut_material
<#if matDesc?? && matDesc!=''>where MT_DESC=:matDesc</#if>以上面例子中的SQL语句为例，各部分含义如下：
-
matDesc
数据源过滤属性 -
matDesc??
表示matDesc不为空时,才执行<#if></#if>之间的语句 -
MT_DESC
表示数据库中与过滤属性绑定的字段名 -
=:
将运算符两边的变量绑定，在执行过滤时判断两边是否相等
其他判断条件语法格式如下：
-
左匹配
select * from ut_material where 1=1
<#if matDesc?? && matDesc!=''>and MT_DESC like:matDesc%</#if>-
右匹配
select * from ut_material where 1=1
<#if matDesc?? && matDesc!=''>and MT_DESC like%:matDesc</#if>-
包含
select * from ut_material where 1=1
<#if matDesc?? && matDesc!=''>and MT_DESC like%:matDesc%</#if>| matDesc!=''判空语句，这里写 空字符串 '' 是因为数据库中的MT_DESC字段是字符串类型，其他数据类型写法可能不同，long类型写法如下； |
select * from ut_material
<#if matId?? && matId!=-1>where MT_ID=:matId</#if>5.2.3. 过滤功能
使用输入框+按钮的方式过滤数据
在按钮的点击事件中设置流程，首先获取输入框的输入值，然后添加过滤器， 过滤目标设置成上面绑定好数据源的Grid，在过滤属性下拉框中出现的matDesc就是上面SQL语句中写的过滤属性， 表达式直接填入在"获取组件值"中取的别名即可。
多个表之间的过滤功能
要实现的效果如下图所示，当选中表A一行数据后，自动使用版本号过滤表B：
添加过滤器
在表A的选中事件中添加流程，首先获取表A的值，然后添加过滤器,输入表达式：
获取Grid某个列的值表达式写法和TextField不同， 因为对Grid使用获取组件值功能，拿到的是当前选中的一整条记录（未选择数据则为null）， 如果想拿到特定字段的值，需要使用平台定义好的get方法，为Grid绑定不同类型的数据源时， 获取到值的类型和写法也略有不同，当使用SQL设置数据源时， 获取类型是java中的HashMap类型，以字段名为键，字段值作为值，具体类型和写法如下：
-
SYSTEM_OBJECT
平台为每个系统表都提供了对应的原生类，类中为每个字段封装了get和set方法
完整类型名一般为驼峰命名法的数据库表名称,例如用户User表对应的完整类名如下。
com.ags.meperframework.suites.appbase.sdk.base.domain.User
示例
edition.getEdition()-
CUSTOMIZED_TABLE
平台为所有自定义表统一定义了一个CustomizedObjectSupport类，公共字段的获取方法和系统表写法相同，自定义字段写法getValue("字段名")
完整类型名
com.ags.meperframework.suites.appbase.sdk.base.domain.CustomizedObjectSupport
示例
edition.getValue("Edition")-
SQL
获取到的数据类型是HashMap，使用HashMap提供的get(“字段名”)方法；-
key：字段名（全大写）；
-
value：字段值；
完整类型名
-
java.util.HashMap
示例
edition.get("Edition")| 数据源类型 | “获取组件值”的类型名 | 获取字段值表达式 | 示例 |
|---|---|---|---|
SYSTEM_OBJECT |
com.ags.meperframework.suites.appbase.sdk.base.domain.表名称 |
getXxx(); Xxx-字段名 |
edition.getEdition() |
CUSTOMIZED_TABLE |
com.ags.meperframework.suites.appbase.sdk.base.domain.CustomizedObjectSupport |
公共字段同上； |
edition.getValue("Edition") |
SQL+第三方数据源 |
java.util.HashMap |
get("字段名"); |
edition.get("EDITION") |
6. 事件
事件，是指每种控件在某种特定情况下而触发的动作，Meper通过在事件中定义不同的响应类型，而形成与最终用户的互动，从而赋予程序以灵魂。
当用户选中一个组件的时候，会自动列出该控件所支持的事件类型。如上图所示，按钮支持click事件。
目前系统支持以下几种事件类型：
-
Button Click
按钮的点击事件 -
Timer Click
定时器的点击事件 -
MenuBar Click
菜单栏的点击事件 -
Search Field Click
搜索框的点击事件 -
Item Click
表格等组件的点击事件 -
Item Double Click
表格等组件的双击事件 -
Item Select
表格数据的选中事件 -
Value Change
Input类型组件的值发生变化时触发 -
Post Initialize
页面初始化完成事件，每个页面初始化完成时触发，且只触发一次 -
Tab Selected Change
TabSheet组件的值发生变化时触发 -
Calendar Timeslot Click
LumosResourceCalendar组件的时间槽被点击时触发 -
Calendar Entry Click
LumosResourceCalendar组件中入口被点击时触发 -
Parameter Value Set
为页面传值所用，当ViewModel调用页面的setParmater方法时，会默认发布一个此事件
6.1. Actions
在某种事件发生后，需要在事件中定义各种事件发生后的响应类型，来进行一系列的动作。
这些Action会随着平台的升级而逐渐丰富起来。如上图所示，当前所支持的响应类型主要为以下几种
6.1.1. 弹出框
定义一个弹出框事件，比如点击添加按钮时，需要弹出一个窗体，就可以在添加按钮的actionflow流程下添加一个弹出框
-
图 1：在Entry下双击“弹出框”，Entry与弹出框直接会自动加上连接线；或直接拖拽一个弹出框到actionflow下，再用连接线将Entry与弹出框连接起来。
-
图 2：选中弹出框，点击下拉框选择弹出框页面，下拉框中展示的是系统所有弹出框类型的页面。
-
图 3：弹出框页面选完之后，需要在弹出框后的连接线上选择弹出框定义的事件（这个事件在设计弹出框页面时，在弹出框GlobalEvent定义的事件），也就是点击按钮弹出对应页面后需要执行什么事件。
6.1.3. API
对于复杂的逻辑，不属于页面逻辑可以解决的部分，需要借助于调用后台的API进行处理。 一般用于调用后台API的场景主要有：
-
核心逻辑在于后台处理，如产品在站位开始处理(startAtRouteStep)、产品在站位结束处理(completeAtRouteStep)等
-
对于对象之间的关系绑定。如用户与角色的绑定、用于与权限的绑定
上图即为API Action的定义界面：
-
系统服务
罗列出系统中的所有服务，选择系统服务后再选择服务中可以调用的方法，如调用UserService服务下的assignUserWithroles方法，绑定用户与角色。 -
组件
列出当前页面所有组件（当前在设计页面中添加的各种组件），选择组件后再选择组件下可以调用的方法，如调用grid组件下的clear方法，清除grid下的数据。 -
ViewModel
列出当前页面所定义的Controller方法（调用后台ViewModel代码），选择ViewModel服务后再选择ViewModel下可以调用的方法，如生产定义页面调用 ProductConfigurationViewModel下的refreshTreeGrid方法，刷新生产定义树形表格。 -
参数定义
一旦选中Method后，该方法所需要的参数将会全部现在下面的表格中，用户需要定义各个参数需要从哪里获取值，一共有三种取值方法-
USER DEFINED
如果参数是一个常量，需要用户直接输入，可以使用该方法 -
COMPONENT
如果参数需要从页面元素中取值，一旦用户确定使用该方法取值，在 “值” 这一列将会列出当前页面中的所有的ID，对于取值组件，请参考 [component-get-value] -
ACTION_CONTEXT
如果参数不能通过以上方法获取，最后一种策略可以从Action执行的上下文中获取。
往往一个事件中，会有多个Action的定义。对于一个按钮事件，既有LoadData这样的Action，又有API这样的Action。每一种Action的执行，系统都会 将Action中使用到的值放到Action执行的上下文中。这些值对于后续的Action可见。
Figure 6. ActionContext 取值示意
-
| 在各种API调用中，定义参数的时候，常常有ENUM作为参数的情况，此种情况，需要定义参数获取为USER_DEFINED。 |
ENUM本身作为常量，其值有可能固定不变，针对固定不变的情况，为了对这种情况提供支持，用户可以直接选择参数获取为User_Defined，然后直接输入ENUM的名称即可。
比如，User 对象中，
public void setStatus(UserStatusType status) {
getInternalObject().setStatus(status.getName());
}
对于以上方法，用于可以直接输入：ACTIVE
那么在后台API调用的时候，对于ENUM类型的参数，需要直接从用户输入中解析为ENUM，进行API调用
6.1.4. 导航
该Action用于添加导航，将页面重定向到新地址，填写的URL可以是系统内部的网页也可以是系统外部的。
上图即为该事件的定义界面：
-
系统页面
导航到系统设计页面，下拉框会展示系统内所有设计页面，不包含弹出框页面 。 -
URL
导航到一个指定URL地址。 -
在新标签页中打开
是指在预览点击事件触发时，重开打开一个浏览器页面还是在当前预览页面中打开新页面。
6.1.17. 过滤器
用于使用特定条件过滤表格数据，如：用户在查询条件输入框中输入特定用户名，点击查询按钮后，根据输入的用户名过滤用户表格。
❶ 从输入框获取输入的用户名，将获取到的值赋予变量名称userName
❷ 添加过滤器
❸ 设置过滤目标、过滤属性、表达式
❹ 在表达式框中输入上面获取到的userName
6.1.18. 发布事件
主要有以下两个用途：
-
简单的通知事件
当用户点击某个按钮时，发布一个事件，其他Action接收到这个事件后再执行后续操作。 比如：用户进行添加数据操作时，希望只有成功添加数据后，才会刷新Grid，可以在添加弹出框的确定按钮中添加OK事件，主页面弹出添加界面后，只有接收到OK事件，才会执行后续的刷新功能。 -
通过给事件添加额外参数来实现跨页面传值。
比如：用户通过输入框+查询按钮的组合方式，来查找特定的物料编号。
具体设置过程：
6.1.20. 上传文件
需要组件库中的“上传”组件和ActionFlow库中的“提交上传文件”Action配合使用，
上传组件只是给用户选择本地文件用的，真正上传到数据库中的动作是由提交上传文件这个Action执行的，文件会上传到SYS_MEDIA表中。
提交上传文件还可以有返回值，需要给返回值起一个变量名，可以通过设置组件值Action将返回的变量赋值给文件预览Action，这样会弹出一个新窗口对上传的文件进行预览，也可以赋值给页面中的Image组件，直接在当前页面中预览，赋值给Image组件时只能赋值文件的Id，可通过getId()方法获取文件Id。
-
上传组件可以配置后台流程，如果将提交上传文件Action配置在上传组件的流程中，程序在执行的时候，会在用户选择完文件的同时将文件上传到数据库中；
-
也可以在其他按钮的流程中添加提交上传文件Action，比如：在弹出框的保存按钮中配置，当用户通过上传组件选择要上传的文件后，点击保存按钮之后，才会将所选文件上传到数据库中。
具体配置步骤：
❶ 在界面中添加上传组件；
❷ 在上传组件或其他按钮的流程中添加提交上传文件Action；
❸ 可以根据需要给返回值定义名称，赋值给预览文件或者Image组件；
Upload组件“上传结束”的事件配置三种用法：详见以下具体实现方法。
用法1：上传前预览。首先【API】获取文件流（此步骤不会生成Media对象，即不会保存进数据库），然后【设置组件值】将文件流赋值给Image组件。
用法2：上传后预览。首先【提交保存数据】（保存到数据库media表），然后【文件预览】。
用法3：上传后显示。首先【提交保存数据】（保存到数据库media表），然后【设置组件值】赋值给MediaFrame组件。
另外：是否要上传多个文件，在Upload组件的【基本属性】-【组件】-【File Max Files】中设置，1为单个文件，大于1为多个文件。
6.2. Action 扩展
Action除了内置的实现, 平台也提供了扩展。 如需扩展，需要实现以下步骤：
-
扩展Action：需继承ExtendAction类，并重写getActionFlowItemType()方法及getLabel()方法。
-
扩展Action类型：需实现IWidgetActionFlowItemType接口
-
扩展Action对应的属性面板：需实现IActionPropertiesPanel接口
-
扩展Action对应的执行程序：需实现IActor接口
扩展Action
继承ExtendAction类
新扩展的Action类型，会在页面“Action Flow Library”面板看到，设计时可以选择扩展的类型。
public class ExtendAction extends NodeData {
private static final long serialVersionUID = 567285355342148548L;
public ExtendAction() {
super("extend-action");
}
@Override
public String getLabel() {
return "Extend";
}
@Override
public void validate(IDisplay display) {
}
@Override
public ExtendAction clone() {
ExtendAction clone = (ExtendAction) super.clone();
return clone;
}
}public class TextAction extends ExtendAction {
@Override
public IWidgetActionFlowItemType getActionFlowItemType() {
return MesWidgetActionFlowItemType.TEST;
}
@Override
public String getLabel() {
return "Text";
}
}
扩展Action类型
创建一个enum并继承IWidgetActionFlowItemType接口。
public interface IWidgetActionFlowItemType {
IWidgetActionFlowItemType getValue(String name);
String getName();
String getNameKey();
String getDisplayName();
String getIcon();
Class<? extends IActionPropertiesPanel> getPanelClazz();
Class<? extends CellData> getActionClazz();
}public enum MesWidgetActionFlowItemType implements IWidgetActionFlowItemType {
/**
*
*/
TEST("Test", "lumos.design.event.test", "platform/icons/actionflow/Entry.png", TextAction.class, TestWidgetActionPanel.class);
private String name;
private String nameKey;
private Class<? extends IActionPropertiesPanel> panelClass;
private Class<? extends CellData> actionClass;
private String iconPath;
MesWidgetActionFlowItemType(String name, String nameKey, String iconPath, Class<? extends CellData> actionClass, Class<? extends IActionPropertiesPanel> panelClass) {
this.name = name;
this.nameKey = nameKey;
this.iconPath = iconPath;
this.actionClass = actionClass;
this.panelClass = panelClass;
}
@Override
public IWidgetActionFlowItemType getValue(String name) {
if (name != null) {
for (MesWidgetActionFlowItemType c : MesWidgetActionFlowItemType.values()) {
if (c.getName().equals(name)) {
return c;
}
}
}
return null;
}
@Override
public String getName() {
return name;
}
@Override
public String getNameKey() {
return nameKey;
}
@Override
public String getDisplayName() {
return I18NUtility.getValue(getNameKey(), getName());
}
@Override
public String getIcon() {
return iconPath;
}
@Override
public Class<? extends IActionPropertiesPanel> getPanelClazz() {
return panelClass;
}
@Override
public Class<? extends CellData> getActionClazz() {
return actionClass;
}
}扩展Action属性面板
创建一个enum并继承 IActionPropertiesPanel 接口。
public interface IActionPropertiesPanel<T extends CellData> {
IWidgetActionFlowItemType getActionType();
void init(IDisplay display, T callData, WidgetActionFlowDiagram actionFlowDiagram, ActionFlowData actionFlowData);
default void setDisplay(IDisplay display) {
}
default void setCellData(T callData) {
}
default void setActionFlowData(ActionFlowData actionFlowData) {
}
default void setDiagram(WidgetActionFlowDiagram actionFlowDiagram) {
}
}
扩展Action执行
实现IActor接口。
public interface IActor {
void execute(ActionFlowContext actionFlowContext);
}public class TextActor extends BaseActor<TextAction> {
public TextActor(TextAction action) {
super(action);
}
@Override
protected boolean doExecute(ActionFlowContext actionFlowContext) {
//自定义自己的执行逻辑
return true;
}
}6.3. Action一键检查功能
Console展示错误信息
一键检查功能是指针对Action进行遍历检查，对可能出现的错误进行打印提示。
一键检查有两个入口，分别在页面头部位置和Action Flow画布的右上角位置
当点击一键check按钮时，系统会自动打开Console面板展示错误信息。
用户也可以按下 Ctrl+F12 键手动打开/关闭Console面板。
validate扩展
重写 IAction 中的 validate 方法
public class OpenDialogAction extends CommonAction {
@Override
public void validate(IDisplay display) {
if (type.equals(APIActionType.COMPONENT.getName())) {
if (Strings.isNullOrEmpty(componentId) || display.getWidgetById(componentId) == null) {
Designer.getConsole()
.error(this.getClass().getSimpleName() + " --- Component: '" + componentId + "' is not existed");
}
} else if (type.equals(APIActionType.SERVICE.getName())) {
if (serviceClassName == null) {
Designer.getConsole().error(this.getClass().getSimpleName() + " --- Service class name is null");
}
if (Strings.isNullOrEmpty(methodName)) {
Designer.getConsole().error(this.getClass().getSimpleName() + " --- Method name is null");
}
}
}
}6.4. 事务处理
对于众多的Action执行中，系统支持对于事务的基本处理。其原则为：
系统会在一次事件调用中，遍历所有的Action，找到第一个为 ITransactionalAction 类型的action，然后将后续的所有Action放入到事务中来处理。
public interface ITransactionalAction {}目前实现以上的接口有以下几个Action：
-
ApiAction
-
SubmitDataAction
public class ApiAction extends BaseAction implements ITransactionalAction {
private static final long serialVersionUID = -8906250438743395484L;
private static Logger log = LoggerFactory.getLogger(LoadDataAction.class);
private Class serviceName;public class SubmitDataAction extends HasAction implements ITransactionalAction {
private static final long serialVersionUID = -8030805740324876028L;
private static final Logger log = LoggerFactory.getLogger(SubmitDataAction.class);
public static final String SUMBMIT_DATA = "submitdata";7. 传值
在页面设计中，往往需要在页面之间或者页面与弹窗之间进行值的传递。
根据传值的源头和目的地的不同，传值分为如下几种类型：
7.1. 页面组件间传值
该情况的一般场景为：
-
表格联动，点击一个表格，而引起另外一个表格的数据变化
-
表格与数据详情联动，即点击一个表格，将选中数据在属性页进行展示
页面组件间传值，一般借助于数据源类型 COMPONENT来实现。
请参考Component数据源，这里不再赘述。
7.2. 页面与Dialog之间传值
在一个页面点击一个按钮，从而弹出一个窗体，是一个非常普遍的案例。 但是在弹出的窗体中，常常需要传递参数，比如在编辑某一个对象的时候，就需要 将要编辑的对象传递到窗体中。
此种情况，向窗体传值是采用Parameter来实现的，一般步骤为：
-
在窗体中，定义要编辑对象的Parameter。例如是编辑自定义表对象，还是系统对象,并自定义名称。
-
一旦在窗体中创建了Parameter，那么在主页面定义弹出窗体的时候，就会将该数据源解析为需要外部传递参数的情况，用户在定义窗体的时候，就必须 指定传值主页面的传值组件。
Figure 7. 定义传值（主页面）
7.3. 页面与页面之间传值
在一个页面中通过一个动作，跳转到另一个页面并传递某个组件的值，可以通过导航来实现。一般步骤为：
-
在接受值页面里编辑对象的Parameter，此处可参考[passvalue-parameter]。
-
在发送值页面获取要传递的组件值，并用导航实现页面跳转和传值，详情如下图所示。
Figure 9. 定义传值（导航）
8. Mobile
9. bpmn
BPMN提供了一种标准图表表示，以图形方式展示业务流程的每一个步骤，即图表描述的流程所涉及的基本操作、信息、事件和业务连续性规范。BPMN通过使用图表计划量 来展示业务流程，使其变得清晰明了，并使沟通变得更为容易。另外，它还能够表达业务流程中的条件、冲突与错误处理。
9.1. 创建流程表单、定义页面
创建一个设计页面（创建页面的时候需要勾选“工作流表单”），设计页面主要是画提交申请的要输入的一些信息，如请假提交请假单需要输入请假的开始结束时间、请假的事由。
编辑表单页：选中“BPMN summit”事件。
❶ 设计“提交保存数据”（提交表单）。
❷ 必须把保存后的业务数据id传给工作流（即必须拖一个“设计BPMN业务数据”的节点)。
❸ 后续流程页面表达式中需要用到的参数，需在表单“BPMN summit”事件中put出来。
创建流程定义页面，与表单进行绑定。流程定义页面只需要添加一个工作流组件，然后设置工作流组件的数据源。
9.2. CamundaEditor流程定义页面
❶ 新增流程。
❷ 设计流程，拖拽任务等。
❸ 选择对应的业务流程表单。
❹ 选中用户任务节点，选择审批人等。
选中连线，设置表达式。
最后部署流程。
10. 公共属性
10.1. 基础
10.1.1. ID
ID作为控件的唯一标识符，系统会为每个控件在拖动到画布上的时候自动产生。ID在整个页面设计及运行的过程中保持不变，在页面运行过程中，或者代码控制页面的时候，用来寻找控件的最佳的属性。
10.1.2. Text & Text ID
该项用来定义某个控件的显示标题信息。
Text用于显示标题，Text ID用于显示标题的国际化设定。在实际使用中，两者至少要设定一个，否则控件将没有标题。在同时设定的情况下，ID的优先级将高于Text。如果从ID中无法获取到标题，才会从Text中获取值。
10.2. 权限
| 加入图片 |
权限主要用于在项目部署的时候，生成对应的按钮权限，所以该属性为按钮独有的。
系统共有两个设置权限的地方，一个是在按钮上，一个是在菜单编辑的地方。通过菜单按钮中“一键生成权限”， 系统会根据菜单的结构，自动扫描所有的页面设计，并生成权限对象，供用户在用户组或者角色中进行配置。
10.3. 代码中如何定义某个组件参与权限管控
1.以按钮为例，平台定义了一个接口 IComponentHasPermission ,当某个组件需要加入权限的时候，首先需要实现此接口
public class LumosButton extends Button implements IHasData , IComponentHasPermission {
private static final long serialVersionUID = -2034119229329555787L;
private Object data = null;
@Override
public Object getData() {
return data;
}
@Override
public void setData(Object data) {
this.data = data;
}
}2.另外，当给组件写Render的时候，还是以按钮为例，代码如下:
public class ButtonRender extends WidgetWithPermissionRender implements IInputWidgetRender, IDataLoadableWidgetRender {
private static final long serialVersionUID = -3834818069891154783L;
private Button com = new LumosButton();
}可以看到上述代码中，继承了WidgetWithPermissionRender,WidgetWithPermissionRender的类图如下:
也就是说如下方代码所示,如需要实现权限管控，需要实现getComponentWithPermission()方法注册需要控制权限的组件
public abstract class WidgetWithPermissionRender extends WidgetRender {
@Override
public void applyProperties() {
super.applyProperties();
Component component = getComponentWithPermission();
if (display.getWidgetRunningModel().equals(WidgetRunningModel.RUNNING)) {
WidgetPropertiesHolder property = widgetData.getProperty(WidgetPropertyNameConstant.BUTTON_PERMISSION);
if (property != null) {
String permissionName = (String) property.getValue();
if (!Strings.isNullOrEmpty(permissionName)) {
SecuredInfo securedInfo = new SecuredInfo();
securedInfo.setRequiredAuthentication(true);
securedInfo.setRequiredPermission(permissionName);
component.setVisible(SecuredUtils.isSecure(securedInfo));
}
}
}
}
/**
* 需要控制权限的具体组件
*
* @return
*/
protected abstract Component getComponentWithPermission();
}10.4. Java代码写的界面如何加入权限
1.继承BasePcView 或 BaseMobileView 并添加进二次开发的菜单中 2.还是继续沿用@Secured注解（注意：不能有循环依赖的情况）
10.5. 属性扩展
除了内置的属性, 平台也提供了扩展。 如需扩展，创建一个enum并实现IWidgetProperty接口即可。
public interface IWidgetProperty {
String getName();
String getNameKey();
default ComponentGroup getGroup() {
return ComponentGroup.EXTEND;
}
default int getOrder() {
return 100;
}
String getId();
}以Mes中的Route添加“是否可读”属性为例：
public enum MesWidgetPropertyNameConstant implements IWidgetProperty {
ROUTE_WIDGET_READONLY("lumos.designer.basic.type.routegraph.readonly", "Readonly", ComponentGroup.COMPONENT, 1);
private String name;
private ComponentGroup group;
private String nameKey;
private int order;
MesWidgetPropertyNameConstant(String nameKey, String name, ComponentGroup group, int order) {
this.name = name;
this.nameKey = nameKey;
this.group = group;
this.order = order;
}
@Override
public String getName() {
return this.name;
}
@Override
public String getNameKey() {
return this.nameKey;
}
@Override
public ComponentGroup getGroup() {
return this.group;
}
@Override
public int getOrder() {
return this.order;
}
@Override
public String getId() {
return name();
}
}
11. 组件介绍
11.1. Basic类控件
Basic控件主要有：
11.1.1. Button
按钮组件允许用户执行操作。它有几种不同的样式变体，除了文本标签外，还支持图标。
点击时禁用与快捷键属性为按钮组件特殊属性：
-
点击时禁用为true代表按钮点击后会置灰，为false代表按钮点击后不会置灰；
-
快捷键属性，选择快捷键后在使用过程中可以直接使用快捷键也能达到点击按钮的效果。
11.1.2. Anchor
超链接组件，用于点击后跳转页面
超链接目标，是指定链接的页面在浏览器窗口中的打开方式
-
TOP，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
-
DEFAULT，在当前环境中打开一个链接
-
BLANK，打开父环境中的链接，如果没有父环境，则打开当前环境中的链接
-
PARENT，在最上层父环境中打开一个链接，如果没有父环境则打开当前环境中的链接
-
SELF，在新的未命名环境中打开一个链接
超链接地址，是即将跳转的页面链接
11.1.4. MenuBar
菜单栏组件是带有分层下拉菜单的水平按钮栏。菜单项可以触发操作、打开菜单或用作切换。
悬停展开与菜单栏文字颜色为菜单栏特有属性：
-
悬停展开为true代表鼠标悬停在菜单栏时会展开下一级菜单，为false则不展开需点击菜单栏才能显示下一级菜单；
-
菜单栏文字颜色就是用于设置菜单栏文字的颜色。
11.1.5. PaginationObjectListGrid
表格组件是分页式对象列表，一般用于显示页面数据，目前支持分页显示且也支持将分页拿掉。
-
Card属性，为true代表为该组件添加阴影效果，相反则不添加。
-
是否显示分页属性，为true代表显示分页相反则不显示。
-
分页大小属性，显示分页的基础上设置分页大小，代表一个页面显示多少条数据。
-
多选属性，支持页面多条数据勾选。
-
是否显示序号列属性，为true代表显示序号列相反则不显示。
11.1.9. Column
表格列组件可以配置列对齐、冻结（固定位置）、分组、页眉和页脚、可见性和宽度。可以允许用户调整列的大小和重新排序。
-
自动设置宽度属性，为true代表该column会根据表格中column数自适应调整宽度，如果为false则宽度固定。
-
允许排序属性顾名思义支持该列排序。
-
尾部内容属性，输入数据会在页面表格尾部显示输入的值。
-
颜色支持，表达式输入要显示颜色的数据如想要表格中姓“m10”物料数据显示颜色，则表达式输入partNumber == "m10"，partNumber是当前列的别名，当前列值为m10 时，则显示选择的颜色。（注意：表达式标点符号是英文输入法下的符号，当前列的值等于某个数据用 partNumber == "m10" ，当前的值包含某个字符表达式用 partNumber.contains("m"))
11.1.19. DataPermission
数据权限组件，主要用于设置用户允许查看哪些部门的数据，及设置用户允许被哪个部门查看数据。
-
需要在一个用户表Grid的点击事件中获取Grid的组件值并设置给DataPermission。
-
添加数据权限，指用户可以查看哪些部门的数据，为此给予权限。
-
用户写入数据可查看方，指用户写的数据可以被哪个部门查看，给该部门权限。
11.2. input类控件
Input控件主要有：
11.2.2. Customfield
自定义组件，主要用于解决多个input控件放在一个布局里，input控件输入不同长度的文本后，文字和输入框之间的距离不一致的问题。将input控件放入使用自定义组件中， input组件文本拿掉，自定义组件输入相应的文本。
11.2.3. Text Area
大文本输入组件，针对多行文本、大文本类型数据（CLOB）的输入和编辑。
-
值变更监听模式属性，用于设置组件事件的触发模式，当选择timeout时，需设置值变更超时时间，超时后触发事件。
11.2.5. Combo Box
下拉框组件，表示带有下拉列表的选择控件，通过单击控件上的箭头可显示或隐藏下拉列表。ComboBox 是支持过滤、支持延迟加载、支持自定义条目的选项列表，适用于大型选项集。
下拉框组件具有允许用户输入的特有属性，开启后，允许用户在下拉列表选择基础上，自由输入新的自定义选项。
11.2.7. Select
选择组件，允许用户从叠加层中显示的选项列表中选择一个值，可以通过单击控件上的箭头、向上/向下箭头快捷键来打开选项列表。Select 是简单的选择列表，不支持过滤、延迟加载或自定义值输入。
11.2.8. level linkage
国家省市区联动组件，用于显示国家-省-市-区（县）多层级数据。
级别设置：选择级别，下拉框就显示对应级别的数据，如级别选择国家，预览的时候下拉框则显示不同的国家名称。设置的时候需要按照顺序一级一级往下设置，如国家 没设置，直接设置省，则预览的时候下拉框拿不到省的数据。
11.2.9. Date Picker
日期组件，允许用户通过键入或从日历叠加层中进行选择来输入日期。
-
最小日期和最大日期属性，用来限制日期选择器的有效输入范围，未在范围内的日期将在日历叠加层中置灰禁用。
-
时区设置属性，可以根据所选区域来改变日期显示格式，如时区设置为“中文 (中国)”时，日期显示为“2021/9/30”；时区设置为“英文 (美国)”时，日期显示为“9/30/2021”。
-
显示周数属性与一周起始日属性为一组属性，需要同步使用。在一周的第一天设置为星期一时，显示周数有效，可以在日历叠加层中启用周数。
11.2.10. Date Time Picker
日期时间组件，是一个用于选择日期和时间的输入字段。
该组件仅比日期组件增加时间的选择，两者属性基本一致，这里不再赘述，相关属性请参考Date Picker。
11.2.11. Time Picker
时间组件，用于输入或选择特定时间，可以使用键盘直接输入时间，也可以从叠加层中显示的一组预定义选项中选择一个值。
-
最小日期和最大日期属性，用来将输入限制在特定范围内，未在范围内的时间不可选。
-
时区设置属性，可以根据所选区域来改变时间显示格式，如时区设置为“中文 (中国)”时，时间显示为“上午12:00”；时区设置为“英文 (美国)”时，时间显示为“12:00 AM”。
11.2.12. Long Field
整型组件，仅允许输入整数，默认为long类型，若需要输入的整数类型为integer，请添加LongToInteger转换器。
整型组件具有最小值和最大值属性，用来设置数字字段的有效输入范围。
11.2.13. Number Field
用于小数类型的输入和编辑，其属性与Long Field组件一致，请参考Long Field。
11.2.17. Password Field
密码框组件，是用于输入密码的输入组件。默认情况下，输入以圆点（·）形式密文显示，可以使用可选的显示按钮进行切换。
-
最小长度和最大长度属性，用于设置密码可输入长度。
-
One Password属性，用于显示或隐藏确认密码输入栏位，当开启时，仅有一个密码输入框；当关闭后，将出现密码栏和确认密码栏两个输入框。
11.2.18. Upload
上传组件，是用于上传文件的组件，它显示了每个文件的上传进度和状态，可以使用上传按钮或通过拖放来上传文件。
-
文件路径，上传文件的url。
-
文件类型属性，可以将上传配置为仅接受特定格式的文件，如输入“xlsx”后，所上传文件格式将被限制为“xlsx”，其余格式文件添加后，系统会给出相应提示并限制其上传。
-
文件上传限制大小（M）属性，用来限制所上传文件的大小，以M为单位定义，默认情况下为100M，所上传文件超过大小后，系统将给出相应提示。
-
File Max Files，设置上传文件的个数，代表可连续上传文件，超过设置的数量则不可以继续上传。
11.2.19. Download
下载组件目前可以使用且支持两种方法：一是调用media的api方法，输入media表里对应的ID；二是用户自定义，输入下载文件的路径，注意这里的路径一定是项目里的文件路径。
11.2.21. Advanced Search
高级搜索，用于对目标对象的高级查询，可根据需要增加一个或多个搜索条件，并按需保存条件、设置默认查询条件。该组件创建后，在页面中以按钮样式显示，需在其基本样式中设置过滤目标和显示区域后方可使用。
-
过滤目标属性，用于指定被高级查询的目标对象。通常为已绑定数据源的表格，需在下拉框中勾选所对应的表格组件ID。
-
显示区域属性，用于指定显示高级搜索过滤器内容的区域，可以选用HorizontalLayout、 VerticalLayout等作为显示区域。
11.2.23. Rich Editor
编辑器组件，用于对多文本格式的输入和编辑，它允许使用粗体、斜体、标题、列表、图像、链接等来设置文本的格式和样式。
Input类组件公共属性：
1）转换器属性，用于输入字段类型的转换，如选择LongToInteger转换器，将long类型转换为integer类型。
2）必填设置属性，用于定义输入字段是否为必需项，开启后，该字段用项目符号字符标记为必填字段。
3）清除按钮属性，用于选择是否显示清除按钮。开启后，当输入字段不为空时，将显示清除按钮。清除按钮对于搜索和过滤字段很有用，能够帮助用户一键清除字段的当前值。
4）占位符属性，用于在文本字段为空时，显示对预期输入值的简短描述。
5）设置只读属性，用于使组件无法修改
| 输入类组件需合理放置进布局中，先为其父级布局配置数据源，才能为组件本身绑定数据源。 |
| Combo Box、List Box、Multi Combox、Select组件通常需要同时绑定两部分数据源，一部分用于设置其取值和设值方法，一部分用于设置其可选列表的取值，如下图所示。 |
11.3. Layout类控件
Layout控件主要有：
11.3.1. HorizontalLayout
水平布局组件将零部件并排放置在一行中。默认情况下，它具有未定义的宽度和高度，这意味着它的大小由它包含的组件决定。
-
水平对齐方式属性定义子项水平方向对齐方式。
-
子项对齐方式属性定义子项在器的当前行的侧轴（纵轴）方向上的对齐方式。
-
垂直对齐方式属性定义子项垂直方向对齐方式。
11.3.2. VerticalLayout
垂直布局组件将构件从上到下放置在柱中。默认情况下，它具有100%宽度和未定义的高度，这意味着它的宽度受其父组件的约束 ，其高度由它包含的组件确定。
-
水平对齐方式属性定义子项水平方向对齐方式。
-
子项对齐方式属性定义子项在器的当前行的侧轴（纵轴）方向上的对齐方式。
-
垂直对齐方式属性定义子项垂直方向对齐方式。
11.3.3. Card
卡片布局能够让多个组件共享同一个显示空间，共享空间的组件之间的关系就像一叠牌，组件叠在一起，初始时显示该空间中第一个添加的组件，通过CardLayout类 提供的方法可以切换该空间中显示的组件。
11.3.4. FormLayout
表单布局允许构建具有多列的响应表单，并将输入标签放置在输入的顶部或侧面。
-
响应流布局属性，minwidth代表列的最小宽度，column代表表单一行有几列。
-
子元素标题位置属性，TOP代表标题在值的上方，LEFT代表标题在值的左方。
11.3.5. FlexLayout
类似 Flexbox 的布局，用于在子元素的可选可换行的行或列中布置子元素。
-
水平对齐方式（justify-Model）属性用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐，
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
-
垂直对齐方式（align-items）属性用于控制项目在纵轴排列方式，为stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余 图片中均为60px。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反。
center使用最多，自然不会陌生，在纵轴中心位置排列。
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列。
注意，常理来说justify-Model与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会 交换，也就是justify-Model处理纵轴，align-items处理横轴。
11.3.6. SplitLayout
拆分布局组件是一个具有两个内容区域和它们之间的可拖动拆分句柄的组件。
-
分离位置属性，设置拆分布局中两块区域的宽度。
-
方向属性，设置拆分布局中两块区域显示的对齐方式，Horizontal代表垂直对齐显示，Vertical代表水平对齐显示。
11.4. Chart类控件
chart控件主要有：
11.4.1. AreaChart
区域图组件，类似于折线图只是它们填充了Y轴上直线和某个阈值之间的区域。阈值取决于图表类型。除了基本类型外，还支持用于 样条曲线插值和范围的图表类型组合。
Areachart 除chart公共属性外，还包含图表响应属性和描边属性，详见下方属性说明。
-
图表响应属性（Chart Responsive），使图表大小能随屏幕变化而变化，包含以下子属性：
1）断点（Breakpoint），是原始配置对象将被响应式配置对象覆盖的最大屏幕宽度。
2）选项（Options），希望在现有默认配置对象上覆盖的新配置对象，通过添加注释进行配置。
注释（Annotations），可以在特定数据点或轴值上编写自定义文本，包含以下子属性：
位置（Position），是将注释放在图表后面还是前面，可填写front或back。
x 轴注释（XAxisAnnotations），是绘制在图表 x 值上的垂直线，显示样式可参考
图 XAxisAnnotations。
y 轴注释（YAxisAnnotations），是在 y 轴上绘制的一条水平线以及一个描述性文本标签，具体样式可参考 图 YAxisAnnotations。
点注释（PointAnnotation），在点的顶部绘制一个标记，同时对x 和 y 点进行注释，具体样式可参考
图 PointAnnotation。
-
描边(Stroke)
定义一条线，文本或元素轮廓颜色。
描边基本属性：
1）是否显示(Is Show)：数据曲线是否显示（默认不显示）。
2）曲线(Curve)：设置描边曲线类型，分别有smooth(曲线),straight(直线)，stepline(折线)几种选项。
3）线帽(Linecap)：定义上下文中线的端点（butt：默认值，端点是垂直于线段边缘的平直边缘；round：端点是在线段边缘处以线宽为直径的半圆； square：端点是在线段边缘处以线宽为长，以一半线宽为宽的矩形。） 属性定义不同类型的开放路径的终结。
4）宽度(Width)：定义描边曲线的宽度。
5）描边颜色(Stroke Colors)：定义描边曲线的颜色。
6）点划线范式(Dash Array)：用于创建虚线；该属性由一系列数字组成，这些数字必须用逗号隔开。属性中如果包含空格，不作为分隔符。每个数字定 义了实线段的长度，分别是按照绘制、不绘制这个顺序循环下去。
11.4.2. ScatterChart
散点图显示一组未连接的数据点，指的是自由给定的X和Y坐标，因此DataSeries或DataProviderSeries通常是散点图 中最有意义的数据系列类型。其属性介绍详见 chart 公共属性。
11.4.3. BarChart
柱状图，使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度，另一个轴代表相应的数据。
其除公共属性外，还包含描边属性，关于描边属性的详细介绍，参见[chart-stroke]。
11.4.4. BubbleChart
气泡图对于以 3 维方式显示数据很有用。在气泡图中，数据点用气泡表示。它是用一个数据系列绘制的，每个系列都包含一组三个值。气泡图是散点图的一种形式，其数据点替换为气泡。
其属性介绍详见 chart 公共属性。
11.4.5. DonutChart
环状图用来表现不同类目的数据在总和中的占比，相比于饼图，它中间空余的部分可以用来显示一些额外的文字等信息，因而也是一种常用的图表类型。
因其属于饼图中的一种，故无需 x 轴、 y 轴属性。且相较其他图表类型，环状图的图表图例默认显示，无需额外配置，因此，其也没有图表图例属性。其特有包含属性为图表响应属性，关于该属性描述，参见[chart-responsive]。
11.4.6. RadarChart
雷达图可以在同一坐标系内展示多指标的分析比较情况。它是由一组坐标和多个同心圆组成的图表。
其除公共属性外，还包含描边属性，关于描边属性的详细介绍，参见[chart-stroke]。
11.4.7. chart公共属性
-
chart数据源
报表数据的呈现，取的是Series数据源下的数据，一个报表可以有多个Series数据源。
拿区域图作列：
1）新增Series数据源，输入Series名称（注意一定要填）
2）选择Series类型
3）选择数据源类型，数据源类型有SQL和API，如果选择SQL则需要填写SQL语句（SQL查询的一定得是数字类型的数据，其他类型不显示），如果选的是API则需要选择API调用的服务
4）也可以调用第三方的数据源数据（第三方数据源数据来源于二次开发——系统配置与模板——数据源页面信息），选好数据源后同样在下方SQL框中填写查询的SQL语句
5）如果存在多个Series数据源，再点击上面的“添加Series”按钮继续重复以上操作
-
X 轴属性（Xaxis）
X 轴属性是对于设置X 轴相关样式的分组，X 轴通常是水平的，代表对数据系列的迭代，包含有 X 轴类型、最小值、最大值等子属性。
1）X 轴类型（Xaxis Type），包含categories、datetime、numeric三种可选类型，‘categories’类目轴，适用于离散的类目数据，可在下方总类目（categories）中添加类目标签来进行显示；‘datetime’时间轴，在轴中启用日期/时间模式；‘numeric’数字轴，x 轴显示对于线性刻度的数值。
2） 最小值属性（Min），要为 x 轴设置的最低数字，超出此数字的图形将被剪掉。
3） 最大值属性（Max），要为 x 轴设置的最高数字，超出此数字的图形将被剪掉。
4） 范围（Range），填写范围值后，最小值将根据最大值和所填写范围值进行动态更新，取 x 轴的最大值，减去提供的范围值来得到最小值。
5） 位置（Position），用来更改x 轴的位置，可以将x 轴放在图表底部（bottom）或放在图表顶部（top）。
6） 漂浮（Floating），设置此选项会将x 轴移出绘图区域。
7） X 轴边框属性（Xaxis Border），是对于边框类属性的分组，包含以下子属性：
是否显示属性（Is Show），用来选择是否在 x 轴上绘制水平边框。
颜色属性（Color），用于设置水平边框的颜色。
x轴偏移量（OffsetX），设置x 轴边界的左偏移量。
y轴偏移量（OffsetY），设置x 轴边界的顶部偏移。
描边宽度（Stroke Width），用于设置水平边框线的宽度。
8） 刻度属性（Xaxis Ticks），是对于x 轴刻度类属性的分组，包含以下子属性：
是否显示属性（Is Show），开启后可在 x 轴上绘制刻度以指定间隔。
边框类型属性（Border Type），用于选择轴刻度的显示样式。
颜色属性（Color），用于设置刻度记号的颜色。
高度属性（Height），用于设置刻度标号的高度。
x轴偏移量（OffsetX），设置刻度的左偏移量。
y轴偏移量（OffsetY），设置刻度的顶部偏移。
9） X轴标题（Xaxis Title），用来设置x 轴标题的文本、样式等，包含以下子属性：
文本（Text），为 x 轴指定一个标题，默认情况下该标题将显示在轴标签下方。
x轴偏移量（OffsetX），设置 xaxis 标题的左偏移量。
y轴偏移量（OffsetY），设置 xaxis 标题的顶部偏移量。
X轴标题样式（Xaxis Title Style），包含颜色、字体大小、css类子属性。颜色（Color），用于设置x 轴标题颜色；字体大小（FontSize），用于设置x 轴标题的字体大小；css类（CssClass），是给 x 轴标题的自定义 Css 类。
10）总类目（Categories），用于添加标签类目信息，当x 轴类型选择为categories时，x 轴标签将取categories中所添加值。
11） X轴标签（Xaxis Labels），用于调整x 轴标签样式的一组属性，包含以下子属性：
是否显示（Is Show），用于选择是否在 x 轴上显示标签。
始终旋转（Is Rotate Always），是始终旋转标签还是仅在文本不适合可用宽度时旋转。
隐藏重叠标签（Hide Over Lapping Labels），当标签太近并开始相互重叠时，此选项可防止标签重叠。
显示重复的标签（Show Duplicates），默认情况下，不会显示重复标签以防止日期时间系列中的值出现拥塞。如果需要在 x 轴标签中显示相同的值，请启用此选项。
修剪（Trim），当标签显示区域无法容纳标签文本且关闭旋转时，开启此属性将以“···”形式修剪文本长度。
旋转角度（Rotate），x 轴标签的旋转角度。
最小高度（Min Height），标签的最小高度。
最大高度（Max Height），标签旋转时的最大高度。
x轴偏移量（OffsetX），设置标签的左偏移量。
y轴偏移量（OffsetY），设置标签的顶部偏移量。
格式化（Format），根据格式说明符格式化日期时间值。
格式化程序（Formatter），允许用户对x 轴标签应用自定义格式设置函数。该函数接受 3 个参数，第一个是默认格式 value ，第二个是原始格式 timestamp ，第三个参数出现在日期时间 xaxis 中，它包括一个 dateFormatter 。
时间格式化（Date Time Formatter），当x 轴标签为日期时间值时，标签显示格式将基于此设置自动生成默认时间刻度，默认使用以下说明符：
年（Year），年份的格式说明符，常见有：“yyyy”，“yy”，“y”形式。
月（Month），月份的格式说明符，常见有：“MMMM”，“MMM”，“MM”，“M”形式。
日（Day），月份日期的格式说明符，常见有：“dddd”，“ddd”，“dd”，“d”形式。
时（Hour），一天中的小时的格式说明符，常见有：“hh”，“h”，“HH”，“H”形式。
分（Minute），一天中的分钟的格式说明符，常见有：“mm”，“m”形式。
秒（Second），一天中的秒的格式说明符，常见有：“ss”，“s”形式。
标签样式（Labels Style），用于改变x 轴标签的颜色、字体等，包含以下子属性：
数据标签（Data Labels），通过“+”或“-”按钮来添加或删除x 轴标签的颜色，可使每个数据标签以不同颜色显示。
字体大小（FontSize），用于设置x 轴标签显示文本的字体大小，默认单位为 px。
字体（FontFamily），用于设置x 轴标签显示文本的字体，提供系统内置字体用于选择。
css类（CssClass），用于添加自定义 Css 类。
-
Y轴属性（Yaxis）
Y轴属性是对于设置Y 轴相关样式的分组，Y 轴通常是垂直的，代表数据系列中的值，包含有 是否显示、相反、对数等子属性。
1） 是否显示（Is Show），是否显示y 轴。
2） 相反（Is Opposite），启用后，将在图表右侧显示y 轴。
3） 对数（Is Logarithmic），存在大范围值时的非线性标度，开启后，y 轴将以对数刻度进行缩放。
4） 强制完美比例（Is Force Nice Scale），如果设置为true，即使提供了最小值/最大值，y 轴刻度也会强制生成漂亮的四舍五入数字。如果需要设置最小值/最大值并希望它保持不变，请将其关闭。
5） 漂浮（Floating），设置此选项会将y 轴移出绘图区域。
6） series名称（Series Name），在多 y 轴图表中，可以通过seriesName将具有相同属性的数据源name分为一系列，用于计算 y 轴的比例。
7） 点数（Tick Amount），要显示的刻度间隔数。
8） 最小值属性（Min），要为 y 轴设置的最小数字，超出此数字的图形将被剪掉。
9） 最大值属性（Max），要为 y 轴设置的最大数字，超出此数字的图形将被剪掉。
10） 漂浮数值（Decima ls In Float），当 y 轴中有浮动值时要显示的分数值。
11） 标签样式（Yaxis Labels），用于调整y 轴标签样式的一组属性，包含以下子属性：
是否显示（Is Show），用于选择是否在 y 轴上显示标签。
最小宽度（Min Width），y 轴标签的最小宽度。
最大宽度（Max Width），y 轴标签的最大宽度。
x轴偏移量（OffsetX），设置标签的左偏移量。
y轴偏移量（OffsetY），设置标签的顶部偏移量。
旋转角度（Rotate），将 y 轴文本标签从其中心旋转到特定角度。
对齐组合框（AlignComboBox），用于选择 y 轴标签的对齐方式，可选left、center、right。
内边距（Padding），用于设置 y 轴标签和图表边框之间的距离。
格式化程序（Formatter），为 yaxis 值应用自定义函数。
样式（Yaxis label style），包含图例标签颜色、字体大小、字体、css类子属性。图例标签颜色（Chart Legend Label Color），用于设置y 轴标签颜色；字体大小（FontSize），用于设置y 轴标签的字体大小；字体（FontFamily），用于设置y 轴标签的字体样式；css类（CssClass），是给标签元素的自定义 CSS 类。
12） Y 轴边框属性（Yaxis Border），是对于边框类属性的分组，包含以下子属性：
是否显示属性（Is Show），用来选择是否在 y 轴上显示绘制垂直边框。
图例标签颜色属性（Chart Legend Label Color），用于设置轴边框的颜色。
x轴偏移量（OffsetX），设置y 轴边界的左偏移量。
y轴偏移量（OffsetY），设置y 轴边界的顶部偏移。
13） 刻度属性（Yaxis Ticks），是对于y 轴刻度类属性的分组，包含以下子属性：
是否显示属性（Is Show），开启后可在 y 轴上显示绘制刻度以指定间隔。
颜色属性（Color），用于设置刻度标号的颜色。
宽度属性（Width），用于设置刻度线的宽度。
x轴偏移量（OffsetX），设置刻度的左偏移量。
y轴偏移量（OffsetY），设置刻度的顶部偏移量。
14） Y轴标题（Yaxis Title），用来设置y 轴标题的文本、样式等，包含以下子属性：
文本（Text），为 y 轴指定一个标题，默认情况下该标题将显示在轴标签下方。
旋转角度（Rotate），将 y 轴标题旋转 90度 或 -90度。
x轴偏移量（OffsetX），设置 yaxis 标题的左偏移量。
y轴偏移量（OffsetY），设置 yaxis 标题的顶部偏移量。
Y轴标题样式（Yaxis Title Style），用于改变y 轴标题的颜色、字体等，包含以下子属性：
颜色（Color），y 轴标题的前景色。
字体大小（FontSize），用于设置y 轴标题显示文本的字体大小，默认单位为px。
字体（FontFamily），用于设置y 轴标题显示文本的字体，提供系统内置字体用于选择。
css类（CssClass），用于给 y 轴标题添加自定义 Css 类。
-
图表标题（Chart Title）
1）标题（Title)：图表标题是说明性的文本,可以自动与坐标轴对齐或在图表顶部。
2）对齐(Chart Align)：图表标题对齐方式，有居左、居中、居右选择。
3）外边距(Chart Margin)：标题文本垂直间距，也就是与图表顶部边缘的距离。
4）X轴偏移量(OffsetX)：图表标题左偏移量。
5）Y轴偏移量(OffsetY)：图表标题右偏移量。
6）漂浮(Floating)：浮动选项将从图表区域中取出标题文本，并使其浮动在图表顶部。
7）标签颜色(Labels Color)：图表标题文本的颜色。
8）标签大小(Labels Font Size)：图表标题文本的大小。
-
图表副标题（Chart SubTitle）
1）标题内容（Title）：图表副标题是说明性的文本。
2）对齐(Chart Align)：图表标题对齐方式，有居左、居中、居右选择。
3）外边距(Chart Margin)：副标题文本垂直间距，也就是与图表顶部边缘的距离。
4）X轴偏移量(OffsetX)：图表副标题左偏移量。
5）Y轴偏移量(OffsetY)：图表副标题右偏移量。
6）漂浮(Floating)：浮动选项将从图表区域中取出副标题文本，并使其浮动在图表顶部。
7）标签颜色(Labels Color)：图表副标题文本的颜色。
8）标签大小(Labels Font Size)：图表副标题文本的大小。
-
图表标签（Chart Labels）
图表标签是图表函数的一个选项，指定图表元素使用的标签。
-
图表颜色(Chart Color)
图表系列的颜色。
-
数据标签（Data Labels）
1）是否启用(Is Enabled)： 确定是否显示数据标签，为true显示相反则不显示。
2）文本锚(TextAnchor)：文本相对于dataLabel绘图位置的对齐方式。
3）X轴偏移量(OffsetX)：数据标签左偏移量。
4）Y轴偏移量(OffsetY)：数据标签右偏移量。
5）样式——字体(FontSize)：数据标签字体设置。
6）样式——字体大小(FontFamily)：数据标签字体的大小设置。
-
图表图例(Chart Legend)
图表图例是图表中用不同形状、颜色、文字等标示不同数据列，通过点击标示可以显示或隐藏该数据列。
1）图例基础属性：
图例显示(Legend Show)：是否显示或隐藏图例。
显示单Series(ShowForSingleSeries)：即使只有1条数据，也显示图例。
显示空Series(ShowForNullSeries)：允许隐藏特定图例（如果其系列包含所有空值），如数据源的值全为空，则可以隐藏特定图例。
显示零Series(ShowForZeroSeries)：允许隐藏特定图例（如果其系列包含所有0值），如数据源的值全为0，则可以隐藏特定图例。
漂浮(Floating)：浮动选项将从图表区域中取出图例，并使其浮动在图表上方。
位置(position)：图例的可用位置选项 。有Top、Bottom、Left、Right几种选择。
水平对齐(HorizontalAlign)：水平对齐的可用选项，有Left、Center、Right几种选择。
字体大小(fontSize)：设置图例文本元素的字体大小。
字体(fontFamily)：设置图例文本元素的字体。
宽度(width)：设置图例的宽度。
高度(height)：设置图例的高度。
X轴偏移量(OffsetX)：设置图表图例左偏移量。
Y轴偏移量(OffsetY)：设置图表图例右偏移量。
2）标记属性：
标记尺寸(Markers Sizes)：标记点的大小。
标记颜色(Markers color)：标记点的填充颜色。
标记离散点(Markers DiscretePoint)——Series索引(SeriesIndex)：数据源序号。
标记离散点——数据点索引(DataPointIndex)：未知。
标记离散点——填充颜色(fillColor)：设置填充颜色。
标记离散点——描边色(strokeColor)：设置描边色。
标记离散点——尺寸(size)：设置大小。
描边色(Stroke Color)：标记点的描边颜色。
描边宽度(Stroke Width)：标记点的笔划大小。
描边透明度(Stroke Opacity)：标记周围边框的不透明度。
填充透明度(Fill Opacity)：标记填充颜色的不透明度。
形状组合框(Shape ComboBox)：标记的形状。（正方形或圆）
半径(Radius)：标记的边界半径。
X轴偏移量(OffsetX)：设置标记左偏移量。
Y轴偏移量(OffsetY)：设置标记右偏移量。
图例悬停标记尺寸(Hover Size)：标记处于活动状态时的固定大小。
图例悬停标记尺寸偏移量(Hover sizeOffset)：与固定大小不同，此选项采用原始markers.size 并基于它增加/减少值。因此，如果markers.size: 6, markers.hover.sizeOffset: 3将在悬停时使标记的大小为 9"。
3）项目边距(Item Margin)：
水平(horizontal)：单个图例项的水平边距。
垂直(vertical)：单个图例项的垂直边距。
4） 容器边距(Container Margin)：未知
5）点击项目时(On Item Click)，切换series数据可见性：为true隐藏series数据，相反则显示。
6）标签，是否使用系列颜色：为true使用数据源对应的颜色，相反不使用。
11.5. 组件扩展
除了内置的组件, 平台也提供了扩展。 如需扩展，需要实现以下步骤：
-
创建Wrapper并注册
-
创建Render并注册
-
创建Action及Actor并注册。
@Component
public class MesWidgetComponentRegistrar implements ApplicationRunner {
@Override
public void run(ApplicationArguments args) {
ComponentWrapperLibrary.registerComponent(new RouteWidgetWrapper());
WidgetRenderFactory.registerComponentRender(LumosRouteWidget.class, RouteWidgetRender.class);
ActorFactory.register(TextAction.class, TextActor.class);
}
}12. 代码控制页面
通过Meper设计的页面，除了可以在页面中设定页面加载、数据源的绑定外，实施人员也可以通过代码控制页面。也就是说可以使用Meper单单做一个页面设计器，然后通过代码控制后端逻辑。这样可以完全将页面设计和后台控制逻辑分开。
例如：实施者可以在Meper中设定各个组件要显示的国际化，权限，表格（以及各个栏位的数据源定义），然后再代码中直接从数据库获取数据加载进页面即可。后续如果有调整页面的必要，比如直接增加一个Column显示额外信息 那么可以直接在页面中调整即可，不需要再调整代码。
系统中有两个入口类来完成这样的功能 BaseViewModel 和 BaseDialogViewModel，在实施者完成ViewModel的代码后，需要将该Java类定义的完整路径写入PageEditor中，如下图所示：
| 待补充 |
12.1. BaseViewModel
一切页面的基类
public abstract class BaseViewModel {
private WidgetRunningModel runningModel = WidgetRunningModel.PREVIEW;
/**
* 页面初始化后，自动会被调用。用户可以在此方法中进行数据的初始化
*/
public abstract void init();
public void showAsDialog(String popupName, String popupRevision, String eventName, EventListener eventListener) {
LumosPopupDialog lumosPopupDialog =
new LumosPopupDialog(popupName, Strings.isNullOrEmpty(popupRevision) ? "1" : popupRevision, runningModel);
lumosPopupDialog.registerEventListener(eventName, eventListener);
lumosPopupDialog.show();
}
public LumosPopupDialog createDialog(String popupName, String popupRevision) {
return new LumosPopupDialog(popupName, Strings.isNullOrEmpty(popupRevision) ? "1" : popupRevision,
new ActionContext(), runningModel);
}
public WidgetRunningModel getRunningModel() {
return runningModel;
}
public void setRunningModel(WidgetRunningModel runningModel) {
this.runningModel = runningModel;
}
}如上代码示例，该类提供的一个核心方法为 createDialog， 也就是说，如果页面有需要显示弹出框的需要，可以直接调用该方法创建一个弹出框页面并直接调用弹出框的getViewModel方法，进行数据的设定，然后显示。
12.2. BaseDialogViewModel
一切弹出框的基类
public abstract class BaseDialogViewModel extends BaseViewModel {
private LumosPopupDialog dialog;
public void updateDialogResult(ConfirmResult.Result result, Object value) {
getDialog().ifPresent(item -> {
item.setRunningResult(new ConfirmResult(result, value));
});
}
public void updateDialogResult(ConfirmResult.Result result) {
getDialog().ifPresent(item -> {
item.setRunningResult(new ConfirmResult(result));
});
}
public void updateDialogResult(Object value) {
getDialog().ifPresent(item -> {
item.setRunningResult(new ConfirmResult(value));
});
}
public void closeDialog() {
getDialog().ifPresent(LumosPopupDialog::close);
}
public Optional<LumosPopupDialog> getDialog() {
return Optional.of(dialog);
}
public void setDialog(LumosPopupDialog dialog) {
this.dialog = dialog;
}
public abstract void onDialogOpen();
}通过DialogViewModel，可以很方便的获取Dialog，反之通过Dialog，可以很方便的获取属于该Dialog的一个ViewModelClass。
通过该类，可以很方便的对Dialog进行操作，如获取，打开，关闭一个窗体等，
12.3. Widget
一个将页面设计和后台代码组件建立关系的关键注解，在Meper解析完成后，会根据该注解为ViewModel类中的控件进行赋值。
@Target({ElementType.FIELD})
@Retention(RetentionPolicy.RUNTIME)
public @interface Widget {
/**
* widget 的id定义
*
* @return
*/
String value();
}样例：
public class UserViewModel extends BaseViewModel {
@Widget(value = "ID_BUTTON_ADD")
private Button btnAdd;
@Widget(value = "ID_GRID_grid")
private PaginationObjectListGrid grid;
@Override
public void init() {
}
}如上的代码中，在UserViewModel初始化完成后，btnAdd和grid变量中，会被Meper放入值，用户直接使用即可。
13. CSS 样式定制化
系统中针对所有的控件，如按钮，输入框，表格等，都有内定的CSS样式，实施者只需要拖拽组件到页面上，不用特别关心样式问题，就可以了保证页面整体的风格统一。
但是在某些情况下，用户需要修改到部分样式，写自己的css文件。可以通过一下方式进行：
-
定义css文件，放到所在app项目的资源路径下，以resources/META-INF/resources/frontend作为根路径，如下图所示：
-
在springboot的配置文件中，配置css的路径地址，如下图所示
lumos.page.style = ./styles/style.css -
在style.css中加入你需要的样式定义，例如：
html { --lumos-header-bg-color: #00263B; /*头部背景色*/ --lumos-header-toogle-btn-border-color: #3D4341; /*缩起按钮边框色*/ --lumos-header-toogle-btn-bg-image: url('../img/toggle_menu.png'); /*缩起按钮图标*/ --lumos-sidebar-bg-color: #00263B; /*背景色*/ --lumos-dialog-header-bg-color: #F5F5F5; /*弹框头部背景色*/ --lumos-grid-cell-height: 34px; --lumos-grid-font-size: 12px; --lumos-button-height: 30px; --lumos-button-color: #333333; }
13.1. CSS 变量
系统抽取了很多的CSS变量，用户可以便捷的通过这些css变量做很多到快速的样式调整，如改变按钮的样式，颜色，边框；又比如该表页面顶部菜单的颜色背景，Logo等。 预定义的一些变量，你可以在你css中给这些变量重新赋值，达到覆盖的效果。
系统默认使用vaadin自带的lumo主题，你可以在下面链接中找到对其的详细介绍
例如：以下为lumo主题中定义的部分变量：
html {
Size
--lumo-size-xs: 1.625rem
--lumo-size-s: 1.875rem
--lumo-size-m: 2.25rem
--lumo-size-l: 2.75rem
--lumo-size-xl: 3.5rem
Space
--lumo-space-xs: 0.25rem
--lumo-space-s: 0.5rem
--lumo-space-m: 1rem
--lumo-space-l: 1.5rem
--lumo-space-xl: 2.5rem
Font Size
--lumo-font-size-xxxl: 2.5rem
--lumo-font-size-xxl: 1.75rem
--lumo-font-size-xl: 1.375rem
--lumo-font-size-l: 1.125rem
--lumo-font-size-m: 1rem
--lumo-font-size-s: 0.875rem
--lumo-font-size-xs: 0.8125rem
--lumo-font-size-xxs: 0.75rem
...
}13.2. 样式设计
基础样式
-
Theme Variants
vaadin组件本身有一些设计好样式供我们使用，可叠加使用多个。具体详见：
-
width/height
配置元素的宽度，默认值 “auto”，可使用 px、em、% 等单位。
-
height
配置元素的高度，默认值 “auto”，可使用 px、em、% 等单位。
-
min-width
配置元素的最小宽度。默认值 “0”，可使用 px、em、% 等单位。
-
min-height
配置元素的最小高度。默认值 “0”，可使用 px、em、% 等单位。
-
max-width
配置元素的最大宽度。默认值 “none”，可使用 px、em、% 等单位。
-
max-height
配置元素的最大高度。默认值 “none”，可使用 px、em、% 等单位。
布局相关
-
Margin
配置元素外边距，有上下左右 4 个值
-
Padding
配置元素内边距，有上下左右 4 个值
-
Spacing
配置子元素之间是否需要间距。 默认值为 `--lumo-spce-m`（可详见css变量定义部分），此属性是Layout的特有属性，如：HorizontalLayout、VerticalLayout。
-
justify-content
配置元素在主轴（水平方向）上的对齐方式。 默认值：flex-start
-
align-items
配置元素在交叉轴（垂直方向）上的对齐方式。 默认值：stretch
-
Alignment
同align-items，仅适用于Layout及HorizontalLayout两个布局。
-
Align Right
在父容器中是否右对齐，仅适用于HorizontalLayout布局下的子项目。
-
Css Properties
自定义样式，最终以内嵌样式作用于元素。
-
flex-direction
FlexLayout的特有属性，配置主轴的方向（即项目的排列方向）。 默认值：row
-
flex-wrap
FlexLayout的特有属性，配置弹性项目是否需要换行。 默认值：row
-
Flex Grow
FlexLayout的特有属性，配置在相同的容器中，项目相对于其余弹性项目的增长量。 默认值：0
-
Flex Shrink
FlexLayout的特有属性，配置固定在相同的容器中，项目相对于其余弹性项目的收缩量。 默认值：1
-
Flex Basis
FlexLayout的特有属性，配置弹性项目的初始长度。 默认值：auto
外观相关
-
border-style
配置元素的边框样式。
-
border-width
配置元素的边框宽度。
-
border-radius
配置元素的边框圆角大小。
-
border-color
配置元素的边框颜色。
-
background-color
配置元素的背景颜色。 颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）。
-
background-image
配置元素的背景图片。 默认情况，背景图像位于元素的左上角，并在水平和垂直方向上重复。
-
background-repeat
配置是否及如何重复背景图像。 默认情况，背景图像在水平和垂直方向上重复。
-
background-position
配置背景图像的起始位置。 默认情况，背景图像在水平和垂直方向上重复。
-
background-origin
配置 background-position 属性相对于什么位置来定位。
-
background-size
配置背景图像的尺寸。
-
background-attachment
配置背景图像是否固定或者随着页面的其余部分滚动。
字体相关
-
Text Color
配置元素字体颜色。
-
Text Font
配置元素字体样式，包括是否加粗，下划线，斜体。
-
font-family
配置元素的字体。
-
font-size
配置元素的字体大小。
-
text-align
配置元素中的文本的水平对齐方式。
组件特有属性
-
按钮
-
Shortcut Key
按钮的特有属性，配置按钮的快捷键。
-
Shortcut Modifier
按钮的特有属性，配置按钮的组合快捷键。
-
Disable On Click
按钮的特有属性，配置按钮单击时是否禁用。
-
Icon
配置元素的图标。
-
Icon Type
配置元素的图标类型。
-
-
输入组件
-
Required
配置元素是否必填。
-
Placeholder
配置元素的缺省值。
-
Clear Button
输入值后是否显示清除按钮。
-
Input Length
输入值的最大长度及最小长度。
-
-
日期/时间选择组件
-
Show Week Numbers
日期选择控件及时间选择控件特有属性，配置是否显示周。
-
Locale
日期选择控件及时间选择控件特有属性，配置区域。
-
Time Range
日期选择控件及时间选择控件特有属性，配置时间范围。
-
First Day of Week
日期选择控件特有属性，配置一周的起始日。
-
-
Advance Search Field
-
Display Area
配置元素的显示区域。
-
Filter Target
配置元素的过滤目标。
-
-
Search Field
-
Search Page
配置元素用于哪个页面。
-
Search Object
配置元素过滤的对象。
-
-
Password Field
-
Password Length
配置密码的最大长度。
-
One Password
配置元素是否允许只输入一次密码。
-
-
ComboBox
-
Items DataSource
配置元素的数据源。
-
Allow Custom Value
配置元素是否允许使用用户手动输入。
-
-
FormLayout
-
Form Responsive Steps
配置此布局中子项目排列的响应方式。 例如： 配置column=2，minWidth=100px，则表示当FormLayout宽度大于100px时，子项目将按两列显示。 配置column=3，minWidth=200px，则表示当FormLayout宽度大于200px时，子项目将按三列显示。
-
-
Dialog
-
Resizable
配置用户是否可以调整对话框的大小。
-
Draggable
配置是否允许用户拖动对话框。
-
-
Grid
-
Grid Multiple Choice
配置表格是否为多选模式。
-
-
Grid Column
-
Header
配置表格列的标题。
-
Auto Width
配置启用或禁用此列的自动宽度。
-
Sortable
配置表格列的是否允许用户手动排序。
-
-
Tab Sheet
-
Tab Sheet Closable
配置Tab是否允许用户关闭。
-
Orientation
配置Tab的排列方向。
-
-
Menu Bar
-
Open on Hover
配置打开根级别菜单时子菜单的响应事件。 true：子菜单在悬停时打开；false：子菜单通过单击时打开。
-
MenuBar Text Color
配置菜单的字体颜色。
-