# 界面布局

当用户在页面列表中点击“设计”，将会在新的标签页进入该页面设计状态，进入设计器，设计器整体布局如下图所示：

editor1

如图中所示，整体Meper的设计页面分为5个区域：

# 组件大纲

componentlist1

组件大纲会将所有添加到该页面的组件以树状结构罗列出来，树状结构表明了组件的层次，在同一个父组件下，从上到下，表示组件的加入顺序，靠上的表示最先加入父容器。

除此之外，用户可以在组件树中选中一个节点，并进行上移，下移以及删除操作。当用户做对应的操作的时候，区域3中的组件也将同步做相应的变化。

各节点的显示如图中 1 所示，显示的规律为首先显示控件的类型，然后“- >” 后显示他的别名和ID。

用户可以观察图中 2 的眼睛，现在的状态代表组件是显示的，眼睛上带斜线则代表控件被隐藏。

组件库会随着后续版本发布而逐渐丰富，争取涵盖所有常用的组件

componentlibrary1

组件库支持检索，用户输入组件的名称，将会模糊查询系统中支持的组件，将符合条件的组件罗列出来，供用户选择。

系统支持以下两种方式进行组件添加：

不管是拖动组件，还是双击添加，只有在父容器支持的组件才会被加入。比如一个Column组件不能加入到除Grid之外的组件中，如果用户拖动到一个Layout中那么将没有任何效果，拖动失败。

如图所示，目前组件库分为四大类（后面章节会对各个组件进行介绍，这里仅仅对分类做大致介绍）：

Basic 基础控件，如表格，按钮，column，Label等组件
Input 所有输入类型的组件，如text field，password field，combo box，Radio Button， Check Box等等
Layout 所有布局类型的组件，如VerticalLayout，HorizontalLayout，FormLayout等。这些组件内部可以再放入其他的组件
Extend 所有已经创建的页面在此显示，用户可以直接将页面拖入当前设计页面中。该功能对于结构化设计页面比较有用。例如：对于一个CRUD页面，用户可以将顶部的ToolBar设计为一个页面，然后拖入到其他页面中，保证所有页面样式的统一。

将另外页面拖入当前页面后，会将原来页面所有的“样式属性”信息带入新的页面，用户只能在新页面中定义原来页面的事件，数据源等信息

样式信息会每次在页面初始化的时候，从原有页面去读取，所以尽管将原有页面拖入到新的页面中，用户依然可以通过修改原有页面的样式属性，在新页面中进行体现。比如颜色，大小等。

attribute

属性编辑分为如下五部分：

基本样式
针对组件所有的显示属性进行设定，如size，背景，padding（内边距），margin（外边距），显示文本，标题等等。
数据源
设定组件加载数据时所需要的数据源的相关设定，如表格加载数据时是来自于系统表，还是自定义表，还是通过SQL直接拿值等。另外对于一些组件的备选项也在这里设定，如combo box，list box等组件下拉框里面的值也在可以在这里进行设定。
事件
针对各个组件支持的事件，来定义事件触发时应该激发的动作，如按钮的点击事件，页面的加载事件等。
parameter
设置传参的参数（包含参数类型、参数对象、变量名称），当前页面引用由其他页面传过来的值。

参数类型支持系统表、自定义表、以及常用的数据类型（Long、String、Boolean等）

attribute