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

开发总述：

我们通过开发一个审批管理系统来为开发平台的使用做一个完整的示例。开发过程会以视频形式发布供大家学习参考。我们分步骤开发，从界面设计开始，先开发电脑端，后进行手机应用部分的开发。项目假设某公司想开发一套在线办公用品申请管理软件，员工可以在浏览器网页端进行物品申请，如购买电脑、设备、笔等，主管人员可以进行审批批准或不批准处理，采购人员可以将已批准的申请转为采购单记录给供应商。我们的开发平台本身在菜单栏帮助下“帮助内容”中附了一个同样的项目开发教程，但是那个是2010年做的，且基于传统模板做的，与当前最主流的新移动应用模板有很多不同，很多技巧并不适合新项目开发，我们在此项目中也会加入一些帮助文档中没有的内容，包括UI界面设计等。此项目中使用的开发平台我们汉化菜单部分，开发平台菜单汉化请参考之前发布的文章及视频。

注意：我们对申请审批系统的开发分为电脑端用户界面框架设计、手机端用户界面框架设计、电脑端申请提交、电脑端审批管理、电脑端采购订单、手机端各功能等几个部分。每个部分会有一个视频配套学习参考。

每个部分下我们为文章编定序号以方便查看，比如题目中的“xx1.1”，前一个1是指此系列的第1部分。后一个1是指第1部分的第1篇文章。







第一部分：电脑端用户功能结构框架设计（不含界面美工设计及图标）

界面设计内容：

* 设计三个分页显示，分别是：申请单提交页、管理者审批页、采购处理页。

* 申请单提交页界面设计元件包含“提交申请”、“取消申请”两个显示按钮，在“提交申请”中放一个弹窗显示元件（其中包括文本录入元件-物品名称用、数字录入元件-物品数量用、及下拉选项元件-是否紧急用），表格显示元件（显示申请的信息列表）等。

分步骤设计开发：

1、用最新模板新建一个项目：

通过菜单File->New->Tersus Project,打开以下项目新建窗口：

TERSUS新建一个软件项目

1) 第一个输入框输入项目名称，注意名称用英文或汉字拼音，我们取名管理审批的首字母“glsp”，大小写都可以（服务器布署时的配置文件中名称与此命名的大小写应完全一致，这个在项目布署中会有说明）；

2) 第二个是模板选择框，选最新主流模板New Mobile Appicaiton(新移动应用)；

3) 点下方Finish按钮，系统会生成以下结构的一个新项目显示如下：

新建项目后显示界面

* 其中左侧项目目录是平台生成的，开发过程中添加的元件会在其中列出；

* 中间开发区中有三个基本显示块，<Mobile View>是手机端，<Tablet View>是平板端 、<Desktop View>是电脑端，在不同设备中打开时，系统会自动识别硬件的类型来显示对应块中的内容。如果不想要某一个或两个块，则直接用鼠标单击选中某个，右键选删除(右键->“Remove Element/Model...”)或点击键盘上删除按钮进行删除，此时会有如下提示：

确认完全删除默认显示块

* 若点Yes，则此元件会从当前开发区及左侧项目目录中同时删除；

* 如果点No,则删除当前开发区中的此元件，但此元件依旧在项目目录和后台项目文件夹中；

* 点Cancel不做任何处理。

注意点一：以上删除方式适用于开发中所有已点选放置或拖放进开发区的元件（拖放复用的无件不显示提示框）；

注意点二：很多元件在项目中是可以复用的，也就是其他地方用的时候可以不再从右侧元件选项栏点选放入，而是直接从项目文件夹拖入，这样项目文件夹中内容可以较小(相当于项目代码减少)，也就是项目文件通过复制来精简大小；某些内容如“0”、“请选择”文本常量、提示框元件这些在很多地方会复用到，所以可以从元件栏点选放置一次，然后在整个项目中复用。

我们删除平板端显示块后的开发区显示如下：

保留手机端及电脑端默认显示块

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

2、电脑端中设计用户界面：

1) 在开发区中鼠标双击放大并激活电脑端显示块，进行这部分开发（画画）处理，如果想退出此块到外面，双击此块外部的父层显示块；另一种放大缩小显示块的方法是按住键盘Control键滑动鼠标轮进行处理。

放大进入电脑端显示块后，是一个空白的子显示块，我们先在其中放一个分页显示元件，先找到(右侧元件栏->Didplay->Tabbed Pane)并点击选中，然后在电脑端显示块中某个位置再单击完成元件放置。然后双击进入分页显示元件内部，分页显示元件默认有两个页面（pane1、pane2）元件加一个显示导航栏元件(Navigation Bar)，记得分页显示元件放入显示元件后，首先进行一次项目保存：

点选放入分页显示元件

* 保存：请点击菜单栏左上角保存按钮即可,在项目开发过程中可随时保存最近开发内容；

* 保存前，左侧项目文件夹的名称带“*”号，保存后不带；

* 如果想退回前一个开发状态或退回后再重做前面的一个开发活动，则可以点击菜单栏上图中间靠右处的Undo和Redo箭头处理；

* 对于分页显示元件，保存后，可以对分页显示组中的块进行移动，移动Pane2放右侧，就可以看到Pane1全部；上面的“Navigation Bar”是页面导航栏，显示每个分页名称。

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

运行后在浏览器端显示分页界面

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

设定测试运行的浏览器

* 开发过程中每次保存后，浏览器页面会自动刷新显示最新保存的开发结果；

* 所有显示元件的上下左右相互对应顺序将直接影响其在用户端浏览器运行时显示的上下左右相对位置。可尝试将pane2拖放到pane1前，保存，再刷新查看浏览器来测试对应显示相对位置的功能。

未完请看下节1.2，敬请关注我们专栏，会有更多案例指导及视频。