開發工具中的顯示元件對應的是用戶前端設計部分，默認分為模板顯示元件和元件選項板中的顯示元件兩部分，第一部分是新建一個項目時自動生成的最底層的顯示塊，如我們新建時選新移動應用模板時，自動生成三個顯示塊：手機端顯示塊、平板端顯示塊和電腦端顯示塊：

Mobile View：是手機端顯示的塊，在這個塊中開發的內容將會在手機、PDA等小屏設備中顯示給用戶；其中默認自帶了一個基本的設計，包括第一個顯示頁Page1（類似於手機APP打開時第一眼看到的頁面），下腳菜單欄（類似微信等APP下部各功能切換用的功能），以及一個用於當前頁面變量存放的數據變量（可忽略，無需管理，切換功能中用到）：

需註意的是，如果像微信等APP中，需要放四個功能主頁面，則在上圖開發區Mobile View顯示塊中右鍵->Add Element->Page,即可添加三個新頁面，重命名（選中頁面按“f2”）每個頁面後，自動生成底部的頁面菜單及功能名稱，同時顯示各頁面時，頁面名稱也在頂部顯示，且試運行可以切換各頁面進行測試。底部功能菜單及頭部都可以在屬性中或CSS文件中進行樣式設計，也可以添加一些圖標，讓菜單為為圖標加文字的效果。

Tablet View：設計在這個顯示塊中的內容人在平板等設備是打開時自適應顯示，其中的默認設計與手機端一致，不同的是默認的顯示頁中，帶有左側菜單及右側內容塊顯示元件，很符合常規平板設計中的左菜單右內容布局。同時這個設計也是可以作為左右兩欄顯示框架設計的範例學習用於電腦端的類似設計：

與手機端一樣，在頁面中會有更多的一些默認的設計，這個只是為了更靈活設計一些功能及效果，初期可完全忽略，如果有具體的用戶功能需求時，才有必要使用。默認設計中也有我們會在第二部分提到的各類顯示元件如List清單內容顯示件，如果不需要，可以刪除，重新放置自己想要的其他顯示元件完成自己的定制設計。

Desktop View：是電腦端顯示塊，這個塊中默認什麽都沒有，需要開發者自己來添加及從零開發，或從已有項目中復用之前的設計來修改使用：

第二部分是開發平臺中元件選項工具欄下的顯示元件，這些元件包括了全部可用到的前端顯示基本元件，每個都有自己的顯示特色及默認的功能，且大多可以互相套用：

這些基本顯示元件包括：內容顯示塊（pane）元件、行顯示元件（Row）、列顯示元件（Column）、工具欄元件（Tool bar）、按鈕組元件（Button Group）、按鈕元件（Button）、圖片顯示元件（Image）、標簽顯示元件（Label）、表單無件（Form）、字符輸入框元件（Text Field）、多行文本輸入框元件（Text Area）、密碼輸入框元件（Password Field）、數字輸入框元件（Number Field）、日期輸入框元件（Date Field）、下拉選擇菜單元件（Selection Field）、文件上傳框元件（File Field）、勾選框元件（Check Box）、放射效果多選項按鈕元件（Radio Button Group）、放射效果單項勾選元件（Radio Button）、帶標簽字符輸入框元件（Text Labeled Field）、帶標簽數字輸入框元件（Number Labeled Field）、帶標簽日期輸入框元件（Date Labeled Field）、帶標簽下拉選擇菜單元件（Selection Labeled Field）、帶標簽勾選框元件（Check Box with label）、字符顯示元件（Text Display）、數字顯示元件（Number Display）、日期顯示元件（Date Display）、時間顯示元件（Date and Time Display）、鏈接顯示元件（Link）、組合元件（Group）、列表或清單元件（List）、子頁面元件（Page Dialog）、彈窗顯示元件（Modal Dialog）、分頁面顯示元件（Tabbed Pane）、左右可調大小兩欄顯示元件（Split Pane）、簡單表格顯示元件（Simple Table）、復雜表格顯示元件（Table）、通用顯示塊元件（HTML Tag）、超文本內容顯示元件（HTML Display）、富文本編輯顯示元件（HTML Editor）。

後面的文章我們將對這些顯示元件進行功能及使用說明。

畫畫一樣開發軟件 顯示元件介紹-總述