egret wing2.0 官方中文版【附教程】

egret wing是一款功能強大的Egret項目集成開發(fā)工具，使用Egret Wing可以快速構(gòu)建Egret項目的GUI，提升Egret項目的開發(fā)效率。它不僅可以通過可視化的方式創(chuàng)建、編輯和管理項目中的游戲用戶界面，同時可以進行TypeScript代碼的編寫和斷點調(diào)試等。

egret wing功能介紹

Egret Wing是基于Adobe Air開發(fā)構(gòu)建的，它提供了構(gòu)建GUI的可視化操作和所必須的相關(guān)工具。 Egret Wing可以在Microsoft Windows和Apple Mac OS上運行。

可使用Egret Wing構(gòu)建Egret項目

您可以構(gòu)建使用GUI擴展框架的Egret項目。同時您也可以創(chuàng)建自定義的EXML皮膚，然后通過Egret Wing的組件面板輕松訪問這些組件。同時也可以快速設(shè)置自定義皮膚與組件之間的皮膚組件對應關(guān)系。

用于加快Egret項目開發(fā)速度的功能

Egret Wing提供了在開發(fā)使用GUI擴展框架時所需要的功能。您可以執(zhí)行以下操作：

運行項目 — 使用Egret Wing運行項目，會自動為該項目在未占用端口上創(chuàng)建一個服務器，同時啟動默認瀏覽器或用戶設(shè)置的瀏覽器訪問該項目地址以運行項目。

管理項目、文件夾、文件和資源 — 創(chuàng)建、修改和刪除項目和資源，以及項目使用的插件與主題等。

自定義Egret Wing工作區(qū) — 根據(jù)個人的開發(fā)需求自定義工作區(qū)。例如，可以自定安排界面，將指定的工具放置到特定的布局中。同時Egret Wing也為您內(nèi)置了部分工作區(qū)。

Egret Wing入門

工作區(qū) 指界面面板的布局。開發(fā)者可以按照自己的喜好修改默認工作區(qū)的布局，同時也可以創(chuàng)建新的工作區(qū)。

文檔區(qū) 對Exml/ts等文件進行編輯的區(qū)域。

視圖模式 文檔區(qū)中針對Exml的顯示方式。其中有“源代碼”、“設(shè)計”和“預覽”。

視圖模式—源代碼 指文檔區(qū)中對某一個Exml皮膚進行文本查看的視圖模式。

視圖模式—設(shè)計 指文檔區(qū)中對某一個Exml皮膚進行可視化操作和編輯的視圖模式。

視圖模式—預覽 指文檔區(qū)中對某一個Exml皮膚進行預覽的視圖模式，在此模式下所有皮膚組件均有交互效果。

資源 指項目項目中的文件和文件夾。

項目 構(gòu)成Egret應用程序的所有資源都包含在項目中。要在Egret Wing中構(gòu)建和編輯GUI，必須先構(gòu)建一個項目。

Egret Wing的面板

“包資源管理器”面板

“包資源管理器”面板包含當前Egret Wing已經(jīng)載入的所有項目和資源。 在包資源管理器中工作時，可以設(shè)置某一項目的屬性配置，以及對任意資源進行復制、刪除、重命名等操作。

“組件”面板

組件面板包含當前項目中所有可以使用的組件列表，其種類為“控件”，“布局”，“自定義”。您可以通過拖拽的方式把在文檔區(qū)的設(shè)計視圖中創(chuàng)建組件。

“圖層”面板

該面板展示出當前文檔區(qū)正在編輯的Exml皮膚文件中所有組件的層級結(jié)構(gòu)。您可以通過該面板快速選中在文檔區(qū)中與之對應的組件。 您也可以通過該面板更直觀的調(diào)節(jié)文檔區(qū)中組件之間的層級結(jié)構(gòu)。

“控制臺”面板

控制臺面板會在解析/編譯/調(diào)試項目的時候顯示對應的錯誤信息。

“進度”面板

進度面板展示的是當前正在執(zhí)行編譯,運行等任務進度的面板。同時可以控制關(guān)閉該項目運行的服務器。

“資源庫”面板

資源庫面板中展示當前項目中所有可以被加載的資源，資源庫中的資源依賴于項目使用的資源插件。 您也可以通過拖拽的方式將資源庫面板中的資源拖拽到文檔區(qū)的設(shè)計視圖模式中以創(chuàng)建該UIAsset。

“狀態(tài)”面板

通過“狀態(tài)”面板可以方便查看Exml皮膚在不同狀態(tài)下的呈現(xiàn)效果。同時可以切換到不同狀態(tài)對Exml皮膚進行編輯。如：按鈕的normal, over, down, disabled四個狀態(tài)。

需要注意一點的是，“[所有狀態(tài)]”并非是Egret程序中可以看到的，是方便用戶使用Wing預覽狀態(tài)而設(shè)定，所以他并不會被編譯進程序里。在Egret程序中可以看到的是除了“[所有狀態(tài)]”以外的狀態(tài)。所以您在編輯的時候注意當前選中的狀態(tài)。

“屬性”面板

您可以通過“屬性”面板直接操作當前被選中組件的屬性。

同時屬性面板還有另一個模式“所有屬性”。方便您編輯組件的所有屬性。

egret wing更新日志

【新增】一鍵發(fā)布h5項目到金山云端

【新增】快捷鍵ctrl/command ＋滾輪縮放UI設(shè)計視圖

【修復】修復代碼提示，鼠標點擊選擇無效問題

【修復】修復某些情況文本內(nèi)容顯示不全

【修復】修復九宮格面板布局錯誤

【修復】修復scroller內(nèi)部的group可以拖拽的bug

【優(yōu)化】優(yōu)化代碼提示排序問題