1) 進入行顯示元件中“申請”顯示塊，添加一個普通行為處理元件（快捷鍵“a”），改名為“<On Click>”，雙擊進入後，從元件欄點選放入一個移動頁面元件（右側元件欄->Display->Page Dialog）,改名為“申請頁”；同樣方式在行顯示元件中“審批”塊下放入一個“審批頁”，在“查看”下放一個“查看頁”。此時在瀏覽器中可看到各塊並點每一塊可進入下屬頁面。後續的開發主要在這三個頁面中進行。

2) 進入“申請頁”，進入頭部，將右邊不用的一個默認放置的“Button”按鈕刪除，將左側“Close”按鈕改名（快捷鍵“F2”）為“返回”。

退出頭部，進入內容元件（<>Content），放入一個按鈕（右側元件欄->Display->Button）命名為“提交申請”，進入按鈕中的<On Click>元件，在其中點選放入一個Model Dialog彈窗元件，改名為“提交申請”並參考電腦端提交申請窗口一樣進行其中的設計或復用電腦端的彈窗（需註意如果復用則每個地方顯示屬性是一樣的，建議電腦端與移動端顯示的窗口分開設計，實際開發的案例文件中我們也是單獨開發了一個“提交申請”彈窗）。

另在內容元件中“提交申請”按鈕外，放入一個復雜表格元件（右側元件欄->Display->Table）；參考電腦端采購管理中訂單表格中的設置，將表格內<>Body Row中顯示元件分別改名為“序號”、“品名”、“數量”（復用“序號”後改名）、“日期”。

3) 進入“審批頁”，同樣在頭部中，將右邊不用的一個默認放置的“Button”按鈕刪除，將左側“Close”按鈕改名為“返回”。

退出頭部進入內容元件，放入兩個按鈕，分別改名“批準”“不批準”。添加一個行元件（右側元件欄->Display->Row），為行元件添加樣式屬性（html.style），值為“text-align:center;”，雙擊進入行元件放一個文本顯示元件（右側元件欄->Display->Text Display）,雙擊進入後添加一個字符符串常量並命名為“待審批項目”，同時用實線箭頭將字符常量與顯示的<Value>相連，這樣會有一個居中顯示的文字在頁面中：

下方復用“申請頁”中的表格。

4) 進入“查看頁”，同樣在頭部中，將右邊不用的一個默認放置的“Button”按鈕刪除，將左側“Close”按鈕改名為“返回”。

退出頭部進入內容元件，放入一個行元件（右側元件欄->Display->Row），為行元件添加樣式屬性（html.style），值為“text-align:center;”，雙擊進入行元件放一個文本顯示元件（右側元件欄->Display->Text Display）,雙擊進入後添加一個字符串常量並命名為“待采購項目”，同時用實線箭頭將字符常量與顯示的<Value>相連；下方復用“申請頁”中的表格。

以上基本完成了移動端的界面設計。可以在瀏覽器進行操作測試一下各個頁面及彈窗。

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