1. 首页
  2. 全部文档
  3. 开发案例手册
  4. 申请审批管理系统(9节)
  5. 电脑端界面设计

电脑端界面设计

第一部分:电脑端用户界面框架及显示内容设计

(不含界面美工设计及图标)

  • 界面设计内容
    • 设计三个分页显示,分别是:申请单提交页、管理者审批页、采购处理页。
    • 申请单提交页界面设计元件包含“提交申请”、“取消申请”两个显示按钮,在“提交申请”中放一个弹窗显示元件(其中包括文本录入元件-物品名称用、数字录入元件-物品数量用、及下拉选项元件-是否紧急用),表格显示元件(显示申请的信息列表)等。

用新移动应用模板新建一个项目

  • 设计内容:新建项目、删除不用的默认模板
  • 通过菜单File->New->Tersus Project,打开以下项目新建窗口:

新建项目窗口操作步骤:
1. 第一个输入框输入项目名称,注意名称用英文或汉字拼音,我们取名管理审批的首字母“glsp”,大小写都可以(服务器布署时的配置文件中名称与此命名的大小写应完全一致,这个在项目布署中会有说明)
2. 第二个是模板选择框,选最新主流模板New Mobile Appicaiton(新移动应用)
3. 点下方Finish按钮,系统会生成以下结构的一个新项目显示如下

  • 其中左侧项目目录是平台生成的,开发过程中添加的元件会在其中列出
  • 中间开发区中有三个基本显示块,是手机端,是平板端 、是电脑端,在不同设备中打开时,系统会自动识别硬件的类型来显示对应块中的内容
  • 如果不想要某一个或两个块,则直接用鼠标单击选中某个,右键选删除(右键->“Remove Element/Model…”)或点击键盘上删除按钮进行删除,此时会有如下提示:

* 若点Yes,则此元件会从当前开发区及左侧项目目录中同时删除
* 如果点No,则删除当前开发区中的此元件,但此元件依旧在项目目录和后台项目文件夹中
* 点Cancel不做任何处理
注意点一:以上删除方式适用于开发中所有已点选放置或拖放进开发区的元件(拖放复用的无件不显示提示框)
注意点二:很多元件在项目中是可以复用的,也就是其他地方用的时候可以不再从右侧元件选项栏点选放入,而是直接从项目文件夹拖入,这样项目文件夹中内容可以较小(相当于项目代码减少),也就是项目文件通过复制来精简大小;某些内容如“0”、“请选择”文本常量、提示框元件这些在很多地方会复用到,所以可以从元件栏点选放置一次,然后在整个项目中复用
  • 我们删除平板端显示块后的开发区显示如下:

  • 以上是示是删除后用鼠标选中往中间移动过位置的效果。注意:所有元件都可以用鼠标选中、拖放移动及选中某个角进行大小拖放

电脑端中设计用户界面

  • 设计内容:电脑端主框架采用分页页面、分页页为各功能页如提交或审批、各页面中按钮、信息显示表、各表格中的显示列设计

设计分页页面

设计内容:添加分页面元件,页面添加及标题命名

  • 在开发区中鼠标双击放大并激活电脑端显示块,进行这部分开发(画画)处理,如果想退出此块到外面,双击此块外部的父层显示块;另一种放大缩小显示块的方法是按住键盘Control键滑动鼠标轮进行处理
  • 放大进入电脑端显示块后,是一个空白的子显示块,我们先在其中放一个分页显示元件,先找到(右侧元件栏->Didplay->Tabbed Pane)并点击选中,然后在电脑端显示块中某个位置再单击完成元件放置。然后双击进入分页显示元件内部,分页显示元件默认有两个页面(pane1、pane2)元件加一个显示导航栏元件(Navigation Bar),记得分页显示元件放入显示元件后,首先进行一次项目保存

* 保存:请点击菜单栏左上角保存按钮即可,在项目开发过程中可随时保存最近开发内容
* 保存前,左侧项目文件夹的名称带“\*”号,保存后不带
* 如果想退回前一个开发状态或退回后再重做前面的一个开发活动,则可以点击菜单栏上图中间靠右处的Undo和Redo箭头处理
* 对于分页显示元件,保存后,可以对分页显示组中的块进行移动,移动Pane2放右侧,就可以看到Pane1全部;上面的“Navigation Bar”是页面导航栏,显示每个分页名称

本地运行查看结果

  • 此时点上图中菜单栏右半侧中部绿色三解运行图标,可以在浏览器中看到目前为止设计的内容:

  • 运行后,软件会在开发平台默认设定的浏览器中运行,上图是谷歌浏览器的显示(注意我们课程视频中是在苹果机上录的,是显示的苹果Safari浏览器),更改默认浏览器可在菜单->窗口->首选项中常规栏的web浏览器下设置:

 * 开发过程中每次保存后,浏览器页面会自动刷新显示最新保存的开发结果
 * 所有显示元件的上下左右相互对应顺序将直接影响其在用户端浏览器运行时显示的上下左右相对位置。可尝试将pane2拖放到pane1前,保存,再刷新查看浏览器来测试对应显示相对位置的功能

添加子元件方式添加更多分页页面

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

重命名元件

  • 对分页显示元件,以及三个内部显示块进行重命名以方便查看及后续管理维护
  • 用鼠标选中某元件,点F2,或右键改名(右键->Rename),然后会弹出重命名框:

重命名操作说明:
  * 重命名有两个输入框,第一个是当前使用名,第二个是全局名;当此元件在项目中多次从左侧项目文件夹中拖入时,全局名不变,当前名会默认加序号以区分;当从右侧元件先项栏点选放置更多相同元件时,同一模块父元件内的全局名和当前名会都不同,系统认为使用了一个新的元件
  * 除了需要显示在用户界面中的名称类名称用汉字外,逻辑处理等其他元件不建议用汉字命名,可以用拼音字母等命名
  * 弹窗中的两个输入框中间勾选框选中时(Keep the model...前的选框),更改当前名称会同时更改全局名称
  * 所有放进开发区的元件都可用以上方式进行重命名,当然如果对项目结构很了解或结构简单,也可以不做重命名(重命名本身在项目中会加大工作量,正常情况下非显示的部分只需进行拖放连线两类操作就可以完成开发)
  * 元件名称如果带有“<>”,其符号内的英文名是系统要执行的底层代码的一部分,这类名称是固定不变的,改动会造成软件编译及运行错误;
  * 对于由命名的名称来做导航显示名称及常量信息显示的元件,必须要以用户界面要显示的文本来重命名,比如对分页显示内部的三个块的命名会在客户浏览器上显示为三个分页名称
  • 将当前开发区中电脑端内元件全部重命名:
    分页显示改名为“申请审批管理”,内部三个显示块改名:“Pane1”->“员工申请”;“Pane2”->“主管审批”;“Pane3”->“采购管理”;“Navigation Bar”->“分页导航”或不变:

  * 保存后,查看元件在左侧项目文件夹中位置(鼠标左击选中“采购管理”或某元件->右键->Show in Respository Explorer),则显示上图中左侧文件目录中对应的位置,用这个方式找到其对应的位置后,可以做复用拖放等操作
  * 打开浏览器,将自动刷新显示改动的结果:显示三个分页面及对应中文名称

员工申请页界面内容

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

  • 浏览器自动刷新显示:

申请提交“表单”设计
  • 双击“提交申请”按钮,再双击其内部元件,添加一个弹窗元件(右侧元件栏->Display->Modal Dialog)将其重命名为“提交申请信息”,双击它再双击“Body”的显示元件中添加以下3个元件(右侧元件栏->Display->Text Labeled Field\Selection Labeled Field\Number Labeled Filed),将三者重命名为“品名:”、“紧急性:”、“数量:”:

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


下拉元件中先项设定

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

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

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

主管审批页界面设计

  • 设计内容:申请内容表格复用(复用员工审请页表格)、批准、不批准按钮显示设计
  • 在TERSUS开发平台中,复制元件有两种方式,一种是右键->Copy,然后在需放置的位置点右键->Paste(Reuse)即可;另一种是选中要复制的元件,然后右键->Show in Respository Explorer,就会在左侧项目目录文件中显示元件在文件中的位置,选中拖放到开发区域中的新位置即可完成复用。将员工申请页中的“申请信息”表在此用以上任意方式复用一个
  • 在主管审批页中放入两个按钮(右侧元件栏->Display->Button),分别命名为“批准”“不批准”

浏览器刷新后显示如下:

采购管理页中界面设计

  • 设计内容:供应商信息的上传按钮、上传弹窗、供应商信息表格、申请内容表格复用、需求转采购单按钮、采购单表格设计
  • 在采购管理面中,放入一个新的分页显示元件(右侧元件栏->Display->Tabbed Pane),先保存后命名名为“采购事务管理”(快捷键“F2”),将其中的显示块pane1、pane2分别重命名(快捷键“F2”)为“供应商管理”、“采购单管理”:

上传供应商信息表格数据设计
  • 在“供应商管理”分页下,先添加一个按钮(右侧元件栏->Display->Button),命名为“上传供应商”,再添加一个新的简单表格(右侧元件栏->Display->Simple Table),命名为“供应商信息表”;双击进入“上传供应商”元件,双击其内部元件,添加一个弹窗(右侧元件栏->Display->Modal Dialog)命名为“供应商信息上传”,双击进入弹窗及内部的“Display->File Field)

  • 同上面一样重命名弹窗下面Footer中两个按钮(快捷键“F2”)为“取消”(Close)和“批量上传”(Save Changes)

  • 浏览器自动刷新后显示开发内容:

订单信息窗口设计
  • 在“采购单管理”分页下,将员工申请页中的“申请信息”表在此也复用一个(找到表,右键->Show in Respository Explorer,选中左侧项目目录文件中已变灰显示的元件拖放到新位置),再添加一个按钮(右侧元件栏->Display->Button),命名为“转为订单”,双击进入后再双击进入“<On Click>”元件,添加一个弹窗元件(右侧元件栏->Display->Modal Dialog)并命名为“录入订单”,双击其进入再双击进入“Display->Selection Labeled Field/Number Labeled Field)命名为“供应商:”和“单价:”,退出并进入“<>Footer”,将“Close”按钮改名为“取消”,“Save Changes”按钮改名为“转为订单”:

刷新显示转为订单按钮等新设计
  • 退出到“采购单管理”分页,添加一个复杂表(右侧元件栏->Display->Tabl)放入在“转为订单”按钮下方,命名为“订单信息表”,浏览器刷新后显示效果如下:

申请信息简单表格中子元件设置

  • 设计内容:简单表中显示内容的添加命名
简单表格显示信息列及列名称设计
  • 双击“员工申请”页,双击之前添加的“申请信息”表格,表格中有个“Data”数据元件(此元件不能改名),其中放了数据类型元件,将其中默认的“Number”数据类型元件重命名为“序号”;将“Date and Time”删除,添加文本/数字/日期数据类型(右侧元件栏->Data Types->Text/Number/Text/Date/Text)放入并命名为“品名”、“数量”、“申请状态”、“申请日期”和“紧急性”。整个设计如下:

保存过程中自动验证开发逻辑
  • 在保存时,会弹出一个提示框,其中英文信息指出有一个问题,请查看验证(Validation)栏详情,点确认后,下面验证栏出现信息,其中信息如下:

验证信息内容:
  “Root Model”指问题所在元件名称
  “Package ID”指问题所在元件在项目文件夹和目录中的位置
  “Problem”是问题是什么(当前是说缺一个元件)
  “Details”是问题详细说明(上图中这个是说默认有“Date and Time”这个元件,现在没有了)
  单击这个问题行,然后会在开发区中跳出具体问题对应的显示界面
问题说明:
  我们这个问题是因为前面删除了日期时间元件,这是个默认有的元件但被我们删除了,所以弹不出元件但没其他问题
  在验证结果栏选中此行问题信息,直接点右验证栏右上角的一个眼镜带叉号的忽略错误符号。然后将开发区中弹出的问题显示界面关闭(开发区此项头部名称门旁有个叉号点击关闭)
  • 忽略问题后重新保存,在浏览器中刷新查看结果:

  • 可以查看在主管审批页面及采购管理下采购单管理下的复用的表格也显示这样子了;同样方式更改“采购管理”分页下“供应商管理”分页中的表格,改为以下效果并查看结果:

订单信息表复杂表格中显示元件的添加及命名

  • 设计内容:订单信息显示表格中的列设计和列名命名
表格中信息列及列名称设计
  • 在“采购单管理”页面下选中“订单信息表”元件,双击进入,双击“Body Row”,其中默认放了Text,Number,Date等显示元件,注意区别于简单表格中的元件,这里不是数据类型元件。将Number改名为“申请序号”并放在相对其他元件左上的位置,让它第一个显示,Text改名为“供应商”放在序号后面,其后复用一个Text命名为“详情”,其后放“Date”改名为“订单日期”,然后复用一个Number,命名为“单价”,最后再复用一个Number,命名为“总价”:

表格属快,显示样式调整

  • 设计内容:设计表格宽度大小的样式属性
为元件添加属性
  • 选中“订单信息表”,在开发区下部属性栏位点属性栏右上角第二个图标(Add Property),在弹窗内输入本地样式的属性名称“html.style”

添加属性值
  • 属性框会出现一行新属性,在“html.style”属性对应的shared栏中输入样式属性值“width:800px”,意思是表格宽度是800像素;在其他两个表格属性下查看并更改宽度为600px(简单表格默认是400px);

  • 浏览器刷新显示:

* 以上是显示元件样式设计的方式之一,样式在软件设计中就是style,样式名称也是标准的一些标签,建议查看我们相关介绍文档或在网络查学更多信息,我们在TERSUS无代码开发平台上的样式设计会用到以下几个:width;height;margin;padding;float;color;backgrond-color;font-size;font-weight;display;inline-height;text-align;部分框架设计用到了calc等其他标签会在示例项目中说明
* 属性设定一定要用英文,属性名称大小写要区分
* 系统中大量共用的样式可以用样式类(style class)进行统一定义并在多个元件上用属性名称“html.styleClass”来传入类的名称进行样式管理,比如以上点选放置或拖放过来的元件,大多都有这个样式类属性值。在学习掌握一些技能知识后,可以自己在项目文件夹中web文件夹下找到对应的类定义进行个性化调整。比如对表格头部、表格内的显示间距,选中时的背景色等都是用类进行统一控制并且是可随意调整的
* TERSUS无代码开发中的样式与有代码开发中的样式管理完全一样,对于CSS样式及我们所用的LESS样式框架我们会有一篇文章详细介绍,属于设计开发中的前端UI美工部分