Egret Wing以全新形態開始內測。新版本發布Egret UI EditorEgret Coder兩款新工具,對於VSCode保留獨立IDE,新版本Egret UI Editor和Egret Coder取代了原有的Egret Wing。

此次內測包含以下內測版本軟體:

1、Launcher:啟動器。

2、UI Editor:可視化UI編輯器。

3、Coder:EUI項目創建,開發(Exml代碼自動補全與校對),調試,清理等功能。

完整介紹

一、EgretUI Editor

Egret UI Editor 脫離了VSCode , 成為了一款獨立的UI編輯器。我們著重優化了在可視化編輯過程中的操作體驗, 並且在可視化編輯區採用了全新的框架, 使其交互更加順暢與平滑,通過簡單的托拉拽即可編輯具有自適應布局的Exml皮膚。

相比於舊版本,我們新版本的Egret UI Editor 中在編輯器交互和預覽模式中增加了若干個新功能,具體如下:

可視化編輯器的交互:

1、著重優化對於mac的雙指操作。

2、支持無極縮放, 且縮放更加平滑。

3、顯示區域的位置不再依賴於滾動條。

4、所有交互過程增加了緩動。

5、超出skin範圍的控制項在編輯過程中依舊可以顯示全部,而舊版則不可以,詳情見下圖。

預覽模式新增的功能:

1、我們增加了對於不同設備中, 皮膚自動布局效果的查看。

2、交互過程平滑。

3、屏幕適配策略完全讀取用戶 EUI 項目中的真實參數。

除新增功能之外,Egret UIEditor 還具有如下功能:

1、具有資源管理器, 可通過文件名快速打開指定的Exml 皮膚。

2、資源管理器中對出了 Exml 以外的項目進行了屏蔽。

3、可在圖層面板中直接操作 Exml 皮膚中的層級關係。

4、支持多開 Exml 文件進行編輯, 並可高度自由的拖拽任意麵板的位置。

5、可在資源庫面板中直接拖拽項目的資源到 Exml皮膚中。

6、支持所有 EUI 基礎組件的創建, 編輯與渲染, 支持所有用戶自定義組件的創建和屬性編輯。

7、在對齊面板中可以對當前選中的多個控制項進行快捷對齊操作。

8、在屬性面板中, 我們放出了很多更常用的屬性到常用屬性里。

9、可視化編輯中, 我們著重優化了編輯區的渲染方式, 優化了交互體驗。

10、為皮膚預覽中增加了設備的選擇, 可查看當前控制項在不同設備下的自適應。

我們未來的產品功能規劃:

1、繼續改進和優化 UI 編輯器的交互體驗。

2、UI 動畫相關的支持。

3、探索新的數據綁定機制, 並增加數據綁定相關的支持。

二、EgretCoder

Egret Coder是對針對Egret EUI項目的VSCode支持插件,可針對Exml代碼進行自動補全與錯誤提示,同時集成了引擎主要命令的快捷調用入口,為Egret EUI項目在VSCode中debug提供了支持。

相比於舊版本,我們做了以下改進:

1、兩個工具的互動

EgretCoder 中增加了與 Egret UI Editor 的互動, 可以在 VSCode 裡面啟動它。

在 主菜單 > 查看 > 命令面板> 選擇下圖的命令。

2、錯誤提示優化

重複屬性的提示:例如下面第三行的 e:Image 節點有兩個 left 屬性

新版本可以正確提示,

而老版本沒有提示。

3、自動完成功能優化

重寫了解析代碼, 對代碼位置的判斷更為精確,。

例如正確識別代碼中的注釋:

新版本忽略了注釋中的 LoadingProgressBar 節點;

老版本沒有正確識別 LoadingProgressBar 節點是在注釋中。

屬性值中的空格後面的內容不會被識別為屬性名;

新版本會正確識別為屬性值。

老版本在屬性中添加一個空格, 就會識別為屬性名。

Egret Coder現在的功能:

1、Exml 文件代碼編輯功能:

A、語法高亮。

B、自動完成。

C、錯誤提示功能。

D、常用的代碼片段。

E、代碼格式化功能。

2、調用白鷺引擎命令

在 主菜單 > 查看 > 命令面板> 選擇下圖的命令或者點擊狀態欄的對應按鈕。

3、調試功能:

運行並調試白鷺項目。

我們未來的產品功能規劃:

1、繼續增強代碼編輯功能。代碼編輯是開發人員使用最頻繁的功能之一, 也是我們未來關注的重點之一。為了更大程度的提高大家的生產力, 我們會持續不斷的改進編輯功能, 改善使用體驗。

2、不斷改進工作流, 讓 Coder 可以更好的和白鷺家族的其他工具可以更契合的協同工作。取代 Wing 作為新的核心工具之一, Coder 也需要更多的打磨它與其他白鷺工具的協同體驗。

三、保留獨立的基礎IDE:VSCode

我們最早在做Egret Wing的時候是打算將其做成一款可以將代碼編輯和可視化編輯同時進行的工具,所以選擇基於VSCode上進行二次開發,但是在一段時間過後我們發現,基於VSCode會帶來許多問題,我們發現了這些問題並且一直努力嘗試修復。但最終因為VSCode歸屬不同的企業,我們無法完美的解決嵌入VSCode之後帶來的問題,最終決定將Wing從VSCode中獨立出來。

現在,開發者只需使用VSCode官方版本載入Egret Coder插件,這樣在編譯功能中就可以調用Egret的命令行,對於編輯器的使用者更加方便,在官方維護方面也可以更好的服務於開發者。

Egret Coder + Egret UI Editor內測版已經在Egret官方論壇發布,歡迎各位開發者點擊文末【閱讀原文】跳轉至下載貼查看新舊版本差別並下載新版工具體驗,與我們一起互動打磨更適合自己的UI編輯器。

我們將會持續的為所有開發者帶來更加易用的開發工具,歡迎各位開發者關注下載體驗。


推薦閱讀:
相关文章