1.基本功能 1.基本功能
1.1.可视化布局配置 1.1. 可视化布局配置
可以在可视化布局中拖拽不同的控件来进行界面布局。
1.2. 修改按钮的显示文本 1.2. 修改按钮的显示文本
可以在可视化布局直接修改按钮的显示文本。
1.3. 配置输入框提示文本 1.3. 配置输入框提示文本
可以在可视化布局配置输入框提示文本。
2.配置方法 2.配置方法
2.1.可视化布局配置 2.1.可视化布局配置
2.1.1.工具栏
2.1.2.侧边栏（左侧）
2.1.3.侧边栏（右侧）
2.1.4.编辑区
编辑区展示页面的布局容器和控件
1.编辑模式下会显示容器的外框、展开/收缩按钮及容器的布局容器类型、页面布局元素类型、是否父栅格、样式名称等信息。点击展开/收缩按钮可展开、收起对应容器，点击是否父栅格标记可切换容器的是否父栅格属性。
2.布局模式会显示容器的外框，并且隐藏界面侧边栏。
3.预览模式下不显示容器外框等额外信息，并且隐藏界面侧边栏。预览模式下不可编辑。
4.如果当前页面没有布局信息，默认添加 DIV.module 和 DIV.container-fluid 容器。
5. 点击编辑区内的容器或控件，则选中当前元素，并在侧边栏属性面板显示当前选中的元素的属性信息。选中的元素会有红色外框标记，并在外框的右上角显示上移、下移、删除按钮。点击上移、下移按钮可以调整选中元素的顺序，点击删除按钮可以删除选中元素，如果容器元素包含子元素，子元素也会被删除。
6. 编辑区内的容器和控件可拖拽并释放到指定位置，如果当前指定位置可以释放，容器会显示为绿色虚线框和底色，并在释放位置显示蓝色指示线(如未显示，则释放到容器的最后位置)，否则显示为红色虚线框及底色。
7. TOOLBAR 配置：
1）如容器布局元素类型为 TOOLBAR,容器右上角会显示齿轮形状的设置图标。点击图标弹出设置面板。设置面板左侧显示所有方法定义，右侧显示已选取的方法按钮列表。已选取的方法在左侧列表显示为灰色。点击列表项可以选中/取消选中该列表项(同时按住ctrl键可多选)。
2）点击【>】按钮可以把左侧选中的方法添加到右侧列表，点击【>>】按钮可以把左侧列表的所有方法添加到右侧列表。
3）点击右上角的按钮调整列表中选中方法的顺序。
4）点击【<】按钮可以移除右侧列表中选中的方法，点击【<<】按钮可以清空右侧列表。
5）点击取消按钮关闭设置面板并放弃所做的设置操作。点击确定按钮关闭设置面板并接受所做的设置操作，右侧列表方法添加显示到 TOOLBAR 中（按钮）。
6）点击底部的【添加按钮组】可以配置按钮组。
8.GRID 配置：
1）如容器布局元素类型为 GRID，容器右上角会显示齿轮形状的设置图标。点击图标弹出设置面板，设置面板左侧显示所有属性定义，右侧显示已选取的字段（表格列）列表，及是否可见复选框，如果是操作列，同时显示方法名称。已选取的字段在左侧列表显示为灰色。点击列表项可以选中/取消选中该列表项(同时按住ctrl键可多选)。左侧列表下方显示方法定义下拉框。
2）点击【>】按钮可以把左侧选中的字段添加到右侧列表，点击【>>】按钮可以把左侧列表的所有字段添加到右侧列表。如方法定义下拉框中有选择方法，则添加为操作列。
3）点击右上角的按钮调整列表中选中方法的顺序。
4）点击【<】按钮可以移除右侧列表中选中的方法，点击【<<】按钮可以清空右侧列表。
5）点击取消按钮关闭设置面板并放弃所做的设置操作。点击确定按钮关闭设置面板并接受所做的设置操作，右侧列表字段添加显示到 GRID中（表格列）。
6）右侧列表的两列复选框可以设置字段是否可见和是否显示排序。
9.SEARCH_FORM/FORM_COLUMN配置：
1）如容器布局元素类型为 ELEMENT ，且查询条件类型为空，容器显示为FORM_COLUMN。如容器布局元素类型为 ELEMENT ，且查询条件类型不为空，容器显示为SEARCH_FORM。FORM_COLUMN与SEARCH_FORM容器右上角会显示齿轮形状的设置图标。点击图标弹出设置面板。设置面板左侧显示所有属性定义（已选取的字段显示为灰色），右侧显示已选取的字段（表格列）列表,按行、列进行显示。
2）调整可配置显示的行数及列数。
3）点击行列单元格可以选中该单元格(同时按住ctrl键可多选)。点击合并按钮可合并选中的单元格（必须为同一行中连续的单元格）。点击拆分单元格可拆分选中的单元格。
4）点击撤销、重做按钮可以执行撤销、重做操作。
5）左侧列表字段可以拖拽至右侧单元格中，可侧单元格中的字段可拖拽调整位置及顺序。鼠标移动到右侧的字段上会显示删除按钮，点击可删除该字段。
6）点击取消按钮关闭设置面板并放弃所做的设置操作。点击确定按钮关闭设置面板并接受所做的设置操作，并根据右侧列表显示的行列及字段在ELEMENT容器内添加相应的ROW、COL布局容器及控件。
7）选中左侧列表字段，再选择底部的区间类型，可以配置区间查询条件。
2.2. 修改按钮的显示文本 2.2. 修改按钮的显示文本
1.对象建模–业务对象–业务对象管理：编辑业务对象，进入可视化布局，选中要修改显示文本的按钮，在右侧属性列表的显示文本处修改按钮的显示文本。
2.重新生成代码。
2.3. 配置输入框提示文本 2.3. 配置输入框提示文本
1.对象建模–业务对象–业务对象管理：编辑业务对象，进入可视化布局，选中对应的输入框，在右侧属性列表的提示文本处输入要提示的内容。
2.重新生成代码。
3.常用扩展 3.常用扩展
3.1.跨列文本框对齐 3.1.跨列文本框对齐
说明
由于平台配置的栅格数只能为整数，为了满足一些控件的对齐要求，其标签占栅格数可能不为整数，此时需手动调整其css和html文件。
例子：备注付款的控件是单独一行，而其他行的控件是一行三列，要对齐控件，其标签占栅格数，其标签占栅格数应该是 4/3 格。由于栅格数只能配置为整数，所以需要使用自定义样式的方式来进行调整。
配置
1.为备注付款控件所在的 col 添加 class “label-11”，并在自定义样式中添加样式，定义标签与控件区域的宽度为 11.1111%(即4/3) 和 88.8888%。
2.此时控件基本对齐，但由于 col 的样式默认带有左右padding，导致还存在几个像素的差异，所以为这些控件的所在的容器 div 上添加一个 col-without-padding 的class，并设置样式，用于消除 col 的左右padding。
代码
css代码附录
.col-without-padding .row > .col-xs-1, .col-without-padding .row > .col-sm-1, .col-without-padding .row > .col-md-1, .col-without-padding .row > .col-lg-1, .col-without-padding .row > .col-xs-2, .col-without-padding .row > .col-sm-2, .col-without-padding .row > .col-md-2, .col-without-padding .row > .col-lg-2, .col-without-padding .row > .col-xs-3, .col-without-padding .row > .col-sm-3, .col-without-padding .row > .col-md-3, .col-without-padding .row > .col-lg-3, .col-without-padding .row > .col-xs-4, .col-without-padding .row > .col-sm-4, .col-without-padding .row > .col-md-4, .col-without-padding .row > .col-lg-4, .col-without-padding .row > .col-xs-5, .col-without-padding .row > .col-sm-5, .col-without-padding .row > .col-md-5, .col-without-padding .row > .col-lg-5, .col-without-padding .row > .col-xs-6, .col-without-padding .row > .col-sm-6, .col-without-padding .row > .col-md-6, .col-without-padding .row > .col-lg-6, .col-without-padding .row > .col-xs-7, .col-without-padding .row > .col-sm-7, .col-without-padding .row > .col-md-7, .col-without-padding .row > .col-lg-7, .col-without-padding .row > .col-xs-8, .col-without-padding .row > .col-sm-8, .col-without-padding .row > .col-md-8, .col-without-padding .row > .col-lg-8, .col-without-padding .row > .col-xs-9, .col-without-padding .row > .col-sm-9, .col-without-padding .row > .col-md-9, .col-without-padding .row > .col-lg-9, .col-without-padding .row > .col-xs-10, .col-without-padding .row > .col-sm-10, .col-without-padding .row > .col-md-10, .col-without-padding .row > .col-lg-10, .col-without-padding .row > .col-xs-11, .col-without-padding .row > .col-sm-11, .col-without-padding .row > .col-md-11, .col-without-padding .row > .col-lg-11, .col-without-padding .row > .col-xs-12, .col-without-padding .row > .col-sm-12, .col-without-padding .row > .col-md-12, .col-without-padding .row > .col-lg-12 {
padding-left: 0;
padding-right: 0;
}
.label-11 > label {
width: 11.1111%;
}
.label-11 > div {
width: 88.8888%;
}
html代码附录
<div class="col-md-9 col-xs-9 col-sm-9 col-lg-9 col-without-padding ">
<div class="col-md-12 col-xs-12 col-sm-12 col-lg-12 label-11 ">
<label for="paymentRemark" class="col-md-1 col-xs-1 col-sm-1 col-lg-1" > 付款备注：</label>