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

第二部分、手機（包括PDA等）移動端用戶界面設計（含部分美工）：

手機等設備的移動端設計的思路與電腦端一樣，業務邏輯也完全一致，不同的是界面設計中有很多因小屏顯示需注意的事項。

• 界面設計內容：

* 打開首頁時三個顯示塊一排顯示，分別為「員工申請」、「主管審批」、「採購管理」

* 功能上，我們開發申請及審批兩部分，採購管理只做申請信息查看的功能

• 分步驟開發：

1、首頁顯示塊開發：

雙擊進入項目中移動端顯示塊「<Mobile View>」，注意這個顯示元件不可改名（<>符號的名稱不能改，是底層代碼的一部分），其中有默認的一個Page1頁面，改名為「申請審批管理」（快捷鍵「F2」），一個footer元件，不用處理但可改名，另有一個「Selected Page」數據類型元件，用於多頁面時顯示管理邏輯，無需處理。

* 雙擊進入「申請審批管理」頁面，默認的一些元件不建議刪除新建處理（如下圖中右側六個元件），因為直接調就可使用，其他可放置不理不影響新項目開發，但可以做為後續學習複雜開發的示例。雙擊進入頭部（Header），左右有兩個按鈕元件，我們用不到，所以可以刪除這兩個按鈕（選中直接按Delete鍵）；雙擊頭部外部退出頭部，再雙擊進入內容元件（<>Content元件）中，有個默認的List元件，這個元件我們也可不用，刪除它（選中直接按Delete鍵）

* 添加行顯示元件（右側元件欄->Display->Row）,雙擊進入並在行中放置三個顯示塊元件（右側元件欄->Display->Pane）；選中每個塊進行樣式屬性定義（在開發區下部屬性欄位點屬性欄右上角第二個圖標（Add Property），在彈窗內輸入本地樣式的屬性名稱「html.style」），樣式值設定為「display:inline-block;width:33.333%;min-height:130px;text-align:center;background-color:#aaa;」，注意三個塊是獨立元件需各個單獨定義同樣的樣式屬性,最後一個「#aaa」是網頁中定義的顏色號,中間的塊中顏色號改為#a2a2a2。

* 在以上一個塊中點選放入文本顯示元件（右側元件欄->Display->Text Display），用右鍵複製（Copy）這個文本顯示元件並在第二、三個塊中復用（右鍵選Paste(reuse)）。選中文本顯示元件，同上添加屬性名稱，樣式值為「inline-height:130px」,意思文字在高度為130像素的區域的中間位置顯示。

* 在行中第三個塊後面放置一個普通行為處理元件（右側元件欄->Basic->Action；也可在英文輸入法及非大寫輸入時按快捷鍵「a」，然後點擊要放入的位置快捷生成元件）可命名為「顯示標題」，在其中用右鍵添加一個父層行元件引用對象（右擊滑鼠->Add Ansestor Reference->Row），添加三個字元串常量（右側元件欄->Constants->Text）分別命名為「申請」、「審批」、「查看」，點選實線箭頭將三個常量分別傳值給行父層引用中三個塊內文本顯示元件的值（<Value>）中。這樣子首頁面完成界面設計。

小屏的瀏覽器中顯示如下：

推薦閱讀：