三、集成開發環境界面介紹
通過本節你將了解 iVX 在線集成開發環境 界面，快速建立對 在線集成開發環境 的認識。
文章目錄
- 三、集成開發環境界面介紹
- 3.1 界面區域
- 3.2 舞臺
- 3.3 組件工具欄
- 3.4 對象樹/素材面板
- 3.5 屬性面板
- 3.6 菜單面板
- 3.7 邏輯工具面板
- 3.8 輔助工具
3.1 界面區域
在線集成開發環境 界面分為以下幾個區域：
- 舞臺
- 組件工具欄
- 對象樹/素材面板
- 素材面板
- 屬性面板
- 菜單欄
- 邏輯工具欄
- 輔助工具
以下將創建一個默認設置的 WebApp 對 在線集成開發環境 界面的主要區域進行介紹。
3.2 舞臺
創建一個默認設置的 WebApp 應用后，在出現的窗口中間的白色區域即為舞臺：
在 舞臺 中可以編輯當前應用的 UI 界面，該舞臺與 Photoshop 等主流圖像處理軟件中的 “畫布” 類似，它定義了項目的編輯區域，所有對界面的編輯和創作都在這一區域通過可視化的方式進行編輯。
3.3 組件工具欄
在 在線集成開發環境 界面中，最左側區域為 組件欄 ：
在 組件欄 中的小圖標則是組件，這些組件都有特定的功能和用法；例如需要在 舞臺區 中添加圖片，需要在組件欄中找到圖片組件，點擊后即可添加至 舞臺區 中。
了解 iVX 組件的功能及使用方法是 iVX 進行開發的基礎。iVX 組件豐富，包括基礎網頁應用、小程序應用、小游戲應用的基礎元素組件以及一些的動效組等。iVX 組件并不只限于 UI 元素，還包括后臺組件，可編輯的邏輯、服務、數據庫等，具體的使用方式在該教程中將會詳細講解。
iVX 組件在不同類型應用下略有不同，但基礎組件相同。若出現不會使用的組件，想要了解其功能，我們可以通過鼠標懸浮任意一個組件幾秒，點擊其出現的 “查看詳情” 即可查看該組件的使用文檔。
3.4 對象樹/素材面板
對象樹 是當前項目中包括前后臺所有對象的管理窗口，以樹狀結構對組件進行可視化的展示，位于 在線集成開發環境 界面的最右側：
通過對 對象樹 對象進行操作，可以實現對選中對象的屬性更改；例如調整對象之間的層級關系、復制、刪除對象、對象重命名、搜索對象、為對象添加動畫、添加數據庫、添加服務等操作。具體操作將在之后教程中詳細講解。
3.5 屬性面板
當我們通過 對象樹 或 舞臺 任意點選一個對象時，可以看到組件欄右側將對應顯示該對象的屬性面板：
一般情況下對象擁有多種屬性，比如表示位置信息的 X 與 Y 坐標、尺寸屬性寬度與高度等；在屬性欄中可以編輯這些屬性改變當前對象的外觀或者對應功能。
3.6 菜單面板
菜單面板位于 在線集成開發環境 界面 的頂部，主要分為左、中、右三個區域：
菜單欄 左側主要功能為文件操作、文件保存、后端資源管理、前端資源管理：
菜單欄 中部主要功能為對項目的發布、預覽以及配置：
菜單欄 右側主要功能為項目的對其操作、等間距操作、舞臺（畫布）大小操作、輔助線可視設置以及舞臺縮放大小設置：
3.7 邏輯工具面板
邏輯工具面板 位于 對象樹 窗格右側，用于為對象添加事件、自定義函數、動作組、服務等交互邏輯功能：
3.8 輔助工具
當我們在使用中遇到任何問題時，都可以通過查看文檔、教學視頻或直接求助于客服來解答疑問：
客服系統可通過右下角的幫助按鈕進行訪問：
