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

3) 在分頁元件中，點滑鼠右鍵添加一個新分面顯示元件（右鍵->Add Element->Pane）,（注意優先用右鍵添加元件內子元件，如果沒有時再從右側元件欄中添加）

4) 對分頁顯示元件，以及三個內部顯示塊進行重命名以方便查看及後續管理維護：

* 用滑鼠選中某元件，點F2，或右鍵改名（右鍵->Rename)，然後會彈出重命名框：

* 重命名有兩個輸入框，第一個是當前使用名，第二個是全局名；當此元件在項目中多次從左側項目文件夾中拖入時，全局名不變，當前名會默認加序號以區分；當從右側元件先項欄點選放置更多相同元件時，同一模塊父元件內的全局名和當前名會都不同，系統認為使用了一個新的元件。

* 彈窗中的兩個輸入框中間勾選框選中時（Keep the model...前的選框），更改當前名稱會同時更改全局名稱；

* 除一些<>符號元件外（如當前項目中<Desktop View>），所有放進開發區的元件都可用以上方式進行重命名，當然如果對項目結構很了解或結構簡單，也可以不做重命名（重命名本身在項目中會加大工作量，正常情況下非顯示的部分只需進行拖放連線兩類操作就可以完成開發）；

* 元件名稱如果帶有「<>」，其符號內的英文名是系統要執行的底層代碼的一部分，這類名稱是固定不變的，改動會造成軟體編譯及運行錯誤；

* 對於由命名的名稱來做導航顯示名稱及常量信息顯示的元件，必須要以用戶界面要顯示的文本來重命名，比如對分頁顯示內部的三個塊的命名會在客戶瀏覽器上顯示為三個分頁名稱。

5) 將當前開發區中電腦端內元件全部重命名：

分頁顯示改名為「申請審批管理」，內部三個顯示塊改名：「Pane1」->「員工申請」;「Pane2」->「主管審批」；「Pane3」->「採購管理」;「Navigation Bar」->「分頁導航」或不變：

* 保存後，查看元件在左側項目文件夾中位置（滑鼠左擊選中「採購管理」或某元件->右鍵->Show in Respository Explorer),則顯示上圖中左側文件目錄中對應的位置，用這個方式找到其對應的位置後，可以做復用拖放等操作。

* 打開瀏覽器，將自動刷新顯示改動的結果：三個分頁面及對應中文名稱。

6) 員工申請頁中提交申請按鈕、提交信息彈窗、取消申請按鈕、申請信表格設計：

* 雙擊員工申請頁，進入此頁編輯，添加一個按鈕（右側元件欄->Display->Button）,點選後再在開發區頁面左上角點擊放入，依次放兩個按鈕並在放入時命名為「提交申請」、「取消申請」（或按F2進行重命名），再添加一個簡單表格顯示元件（右側元件欄->Display->Simple Table）並改名為「申請信息」：

瀏覽器顯示：

* 雙擊「提交申請」按鈕，再雙擊其內部<On Click>元件，添加一個彈窗元件（右側元件欄->Display->Modal Dialog）將其重命名為「提交申請信息」，雙擊它再雙擊「<>Body」的顯示元件，刪除默認的一個「LABEL」元件，然後在「<>Body」的顯示元件中添加以下3個元件（右側元件欄->Display->Text Labeled FieldSelection Labeled FieldNumber Labeled Filed）,將三者重命名為「品名：」、「緊急性：」、「數量：」：

* 雙擊進入「緊急性：」元件，再雙擊進入「Selection」元件，放入三個字元串常量（右側元件欄->Constants->Text）分別在放入同時命名「一般」、「緊急」、「請選擇」，點右側元件欄最上面實線箭頭（右側元件欄->頂部->Flow，也可以按鍵盤快捷鍵"f"，注意快捷鍵在英文輸入法且小寫輸入時才可有效調用），然後在開發區中先點「一般」，再點「<Options>」元件，完成常量傳值給顯示對象的處理流程；同樣用箭頭也將「緊急」與「<Options>」元件相連；將「請選擇」與「<Placeholder>」元件相連：

* 雙擊「Selection Field」等元件的外部，直到「提交申請信息」彈窗，雙擊進入「Footer」，會發現彈窗自帶的「Close」「Save Channges」兩個按鈕，將它們重命名（快捷鍵「F2」）為「取消」「提交」按鈕。

打開瀏覽器中刷新後點擊「提交申請」按鈕顯示如下：

* 以上顯示中的各元件位置布局等屬於CSS樣式處理的內容，會有單獨講解。也可以自學在元件屬性值中定義，下面會有涉及。