项目编辑器

​

APP编辑器是用于开发应用的界面，主要由以下几个部分组成：

• 项目导航栏（Toolbar）配置项目设置
• 画布（Frame）项目组件排版布局
• 配置面板（Action editor）
• 数据工作区（Data workspace）
• 组件列表（Insert）
• 组件配置（Inspect）

​

项目导航栏

项目导航栏位于APP编辑器顶部，主要用于配置项目，可以用于：

• 点击左侧ILLA图标回到主页
• 查看项目信息与项目保存状态
• 显示/隐藏项目左侧、右侧、下方面板
• 调整项目缩放比例
• 显示项目当前所有开发者
• 提示项目当前Bug情况
• 将项目分享给其他开发者
• 运行项目

​

更多功能敬请期待我们正在马不停蹄地更新更多功能，敬请期待：

• 从json中导入项目
• 复制项目
• 以json格式导出项目
• 选择需要的项目版本
• 查看编辑历史
• 重新加载所有Queries

​

画布

画布是项目中编辑项目图形界面的区域， 您可以在右侧的组件面板中拖拽组件进入画布中；也可以选中已放入画布的组件，用鼠标拖拽修改组件的位置与大小。

当您在拖拽组件或修改组件大小时，画布背景会显示出虚线标注的方格，帮助您更好的将组件在画布中整齐排列。 当您在拖拽组件的过程中遇到重叠的问题，ILLA Builder会优先放置您移动的组件，自动帮您把遮挡的组件移开。

​

预览模式

预览模式的切换按钮位于画布右上角， 点击后编辑器会进入预览模式，左右下侧的面板会被隐藏，画布中的组件会无法修改，所有组件将会按照1:1的大小呈现在您面前。

支持的浏览器

我们推荐您在Google Chrome中打开ILLA Builder

​

配置面板

配置面板位于画布下方，是您书写代码用于与资源交互数据的区域。 您可以在该区域查找已创建Action、选择当前Action资源、书写查询语句、设置Transformer。您可以在配置面板中编辑查询语句，当您更新了查询语句后，项目编辑器会自动更新您的查询结果。

在输入SQL查询语句时，您可以选择使用SQL模式通过纯代码进行编辑，也可以选择GUI模式在我们给出的查询框架下进行修改，快速完成Action编辑。

​

Action列表

Action列表位于配置面板的左侧，您可以在此处查找需要使用的Action，在配置面板中进行修改。您还可以在此处新建Action，详细过程请参考创建Action

​

数据工作区

数据工作区位于画布左侧的面板中，您可以在此处查看编辑器中的组件、Action以及全局状态，所有的状态信息会以Json的格式展示在工作区中。您也可以通过在工作区中选中数据进行编辑， 或是点击更多设置按钮对选中数据进行删除处理。

​

组件列表

组件列表位于画布右侧的面板中，您可以将其中的组件通过鼠标拖拽的方式将组件移动到画布中。 您可以按照组件类型寻找需要的组件，或是通过搜索的方式，快速找到需要的组件。

​

组件配置

组件配置页面位于画布右侧的面板中， 当您在画布或数据工作区中选中一个组件时，右侧的面板会自动转换至组件配置页面。 您可以在该页面中设置变量、更新组件名称、创建事件处理器或是执行组件删除Action。 面对不同组件时，组件的配置面板也会有不同的设置，用于更改不同的组件内容。