畫畫一樣開發軟體申請審批管理系統開發案例1.1

03-12

開發總述：

我們通過開發一個審批管理系統來為開發平台的使用做一個完整的示例。開發過程會以視頻形式發布供大家學習參考。我們分步驟開發，從界面設計開始，先開發電腦端，後進行手機應用部分的開發。項目假設某公司想開發一套在線辦公用品申請管理軟體，員工可以在瀏覽器網頁端進行物品申請，如購買電腦、設備、筆等，主管人員可以進行審批批准或不批准處理，採購人員可以將已批准的申請轉為採購單記錄給供應商。我們的開發平台本身在菜單欄幫助下「幫助內容」中附了一個同樣的項目開發教程，但是那個是2010年做的，且基於傳統模板做的，與當前最主流的新移動應用模板有很多不同，很多技巧並不適合新項目開發，我們在此項目中也會加入一些幫助文檔中沒有的內容，包括UI界面設計等。此項目中使用的開發平台我們漢化菜單部分，開發平台菜單漢化請參考之前發布的文章及視頻。

注意：我們對申請審批系統的開發分為電腦端用戶界面框架設計、手機端用戶界面框架設計、電腦端申請提交、電腦端審批管理、電腦端採購訂單、手機端各功能等幾個部分。每個部分會有一個視頻配套學習參考。

每個部分下我們為文章編定序號以方便查看，比如題目中的「xx1.1」，前一個1是指此系列的第1部分。後一個1是指第1部分的第1篇文章。

第一部分：電腦端用戶功能結構框架設計（不含界面美工設計及圖標）

界面設計內容：

* 設計三個分頁顯示，分別是：申請單提交頁、管理者審批頁、採購處理頁。

* 申請單提交頁界面設計元件包含「提交申請」、「取消申請」兩個顯示按鈕，在「提交申請」中放一個彈窗顯示元件（其中包括文本錄入元件-物品名稱用、數字錄入元件-物品數量用、及下拉選項元件-是否緊急用），表格顯示元件（顯示申請的信息列表）等。

分步驟設計開發：

1、用最新模板新建一個項目：

通過菜單File->New->Tersus Project,打開以下項目新建窗口：

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)，記得分頁顯示元件放入顯示元件後，首先進行一次項目保存：