画画一样开发软件 申请审批管理系统开发案例1.2

3) 在分页元件中，点鼠标右键添加一个新分面显示元件（右键->Add Element->Pane）,（注意优先用右键添加元件内子元件，如果没有时再从右侧元件栏中添加）

分页元件中添加新页面

4) 对分页显示元件，以及三个内部显示块进行重命名以方便查看及后续管理维护：

* 用鼠标选中某元件，点F2，或右键改名（右键->Rename)，然后会弹出重命名框：

元件重命名框

* 重命名有两个输入框，第一个是当前使用名，第二个是全局名；当此元件在项目中多次从左侧项目文件夹中拖入时，全局名不变，当前名会默认加序号以区分；当从右侧元件先项栏点选放置更多相同元件时，同一模块父元件内的全局名和当前名会都不同，系统认为使用了一个新的元件。

* 弹窗中的两个输入框中间勾选框选中时（Keep the model...前的选框），更改当前名称会同时更改全局名称；

* 除一些符号元件外（如当前项目中），所有放进开发区的元件都可用以上方式进行重命名，当然如果对项目结构很了解或结构简单，也可以不做重命名（重命名本身在项目中会加大工作量，正常情况下非显示的部分只需进行拖放连线两类操作就可以完成开发）；

* 元件名称如果带有“”，其符号内的英文名是系统要执行的底层代码的一部分，这类名称是固定不变的，改动会造成软件编译及运行错误；

* 对于由命名的名称来做导航显示名称及常量信息显示的元件，必须要以用户界面要显示的文本来重命名，比如对分页显示内部的三个块的命名会在客户浏览器上显示为三个分页名称。

5) 将当前开发区中电脑端内元件全部重命名：

分页显示改名为“申请审批管理”，内部三个显示块改名：“Pane1”->“员工申请”;“Pane2”->“主管审批”；“Pane3”->“采购管理”;“Navigation Bar”->“分页导航”或不变：

分页元件名称修改

* 保存后，查看元件在左侧项目文件夹中位置（鼠标左击选中“采购管理”或某元件->右键->Show in Respository Explorer),则显示上图中左侧文件目录中对应的位置，用这个方式找到其对应的位置后，可以做复用拖放等操作。

* 打开浏览器，将自动刷新显示改动的结果：三个分页面及对应中文名称。

6) 员工申请页中提交申请按钮、提交信息弹窗、取消申请按钮、申请信表格设计：

* 双击员工申请页，进入此页编辑，添加一个按钮（右侧元件栏->Display->Button）,点选后再在开发区页面左上角点击放入，依次放两个按钮并在放入时命名为“提交申请”、“取消申请”（或按F2进行重命名），再添加一个简单表格显示元件（右侧元件栏->Display->Simple Table）并改名为“申请信息”：

申请页内设计

浏览器显示：

浏览器员工申请页显示效果

* 双击“提交申请”按钮，再双击其内部元件，添加一个弹窗元件（右侧元件栏->Display->Modal Dialog）将其重命名为“提交申请信息”，双击它再双击“Body”的显示元件，删除默认的一个“LABEL”元件，然后在“Body”的显示元件中添加以下3个元件（右侧元件栏->Display->Text Labeled FieldSelection Labeled FieldNumber Labeled Filed）,将三者重命名为“品名：”、“紧急性：”、“数量：”：

申请提交“表单”设计

* 双击进入“紧急性：”元件，再双击进入“Selection”元件，放入三个字符串常量（右侧元件栏->Constants->Text）分别在放入同时命名“一般”、“紧急”、“请选择”，点右侧元件栏最上面实线箭头（右侧元件栏->顶部->Flow，也可以按键盘快捷键"f"，注意快捷键在英文输入法且小写输入时才可有效调用），然后在开发区中先点“一般”，再点“”元件，完成常量传值给显示对象的处理流程；同样用箭头也将“紧急”与“”元件相连；将“请选择”与“

”元件相连：

多选元件中先项设定

* 双击“Selection Field”等元件的外部，直到“提交申请信息”弹窗，双击进入“Footer”，会发现弹窗自带的“Close”“Save Channges”两个按钮，将它们重命名（快捷键“F2”）为“取消”“提交”按钮。

打开浏览器中刷新后点击“提交申请”按钮显示如下：

提交申请框默认显示效果

* 以上显示中的各元件位置布局等属于CSS样式处理的内容，会有单独讲解。也可以自学在元件属性值中定义，下面会有涉及。