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编辑器。

我们将会持续的为所有开发者带来更加易用的开发工具,欢迎各位开发者关注下载体验。


推荐阅读:
相关文章