作者

UI-Editor用户文档

目录

1. 引言... 4

1.1. 目的... 4

1.2. 读者对象... 4

1.3. 参考资料... 4

1.4. 术语与缩写解释... 4

2. 界面组成及功能介绍... 5

2.1. 菜单及工具栏... 5

2.2. UI层次结构区... 5

2.3. UI预览区... 7

2.4. 属性设置区... 7

2.5. 图层预览区... 9

2.6. 资源列表... 10

2.7. 控件ID重新排列... 11

2.8. 生成资源... 11

3. 简单UI工程示例... 11

4. 其他问题... 15

1. 引言

1.1. 目的

介绍UI-Editor的使用方法，方便方案商进行应用层UI二次开发，减少方案开发时间和产品上市时间

1.2. 读者对象

应用UI的开发人员

1.3. 参考资料

[1] NOYA方案界面风格SPEC_V1.4.doc

[2] 应用平台架构设计说明书.doc

1.4. 术语与缩写解释

缩写、术语 | 解释
场景 | 表示应用中一个场景，程序中有自己的消息循环，每个场景都有唯一窗口与它对应。
窗口 | 场景下唯一的窗口，与GUI的窗口定义一致，窗口下可放置资源组、图片区、字符串
资源组 | 场景中一个可以放置图片区域、字符串、子资源组的区域。
图片区域 | 画面中的一块区域，可以叠放置至少一张图片，放置的图片的坐标、大小都是一样的。
字符串 | 用来显示文本的区域

2. 界面组成及功能介绍

如图1所示，整个界面由标题栏、菜单栏、工具栏、工作区组成。工作区又由：UI层次结构区、UI预览区、属性设置区、图层预览区、资源列表区5个部分组成。

2.1. 菜单及工具栏

用户可通过菜单及工具栏进行文件及UI层次资源的相关操作。

2.2. UI层次结构区

1) 显示当前打开的UI工程的树形层次结构，可同时打开多个UI。

Ø 每个UI的树根是当前UI工程；

Ø 每个UI工程下至少有一个场景（Scene）；

Ø 每个场景下有且只有一个窗口(Window)，下面可添加任意个数的资源组、图片、字符串；

Ø 资源组下面可添加子资源组、图片区、字符串，…… 资源组的级数不限；

Ø 图片下可添加多个图层，但至少要有一个，每个图层放置一张图片，所有图层只能放同样分辨率的图片；

2) 通过拖动，可以移动或者复制（拖动时按住CTRL键）某项到某个资源组下面，从而改变他们的父子关系。移动的项须满足下面约束：

Ø 必须移动/复制到资源组下面

Ø 不能移动/复制到它的子孙资源组下面

Ø 可以跨场景移动/复制

Ø 跨UI工程只能复制

3) 可以通过菜单栏、工具栏，或者右击菜单上的“上移”，“下移”操作选择项，改变兄弟关系。

4) 通过菜单栏、工具栏，或者右击菜单上“删除”操作时，删除当前选择项及它的子项。下面情况不允许删除选择项：

Ø 要删除的项为工程下最后一个场景

Ø 要删除的项为场景下唯一的窗口

2.3. UI预览区

当在UI层次结构树中选中具体的某项时，预览区会显示当前选择项的预览结果。可以在预览区进行选择、拖动、删除等操作。拖动不能超过父亲资源组的范围。

Ø 若选择的项是场景，则显示：该场景下所有的资源组、图片、字符串

Ø 若选择的项是资源组/图片区/字符串，则显示：父亲资源组、兄弟项、子孙项。注意：并不显示祖父资源组及其下面的项，方便用户知道该选择项所属的资源组，以及它能移动的范围。

Ø 若选择的项是图片区，则显示的是当前图层的图片，可以通过UI层次结构图改变当前图层。

2.4. 属性设置区

1) 工程属性：设置显示语言、屏幕分辨率、case目录、应用类型、资源的头文件路径、资源文件路径。

2) 场景属性：设置屏幕旋转，按键映射

3) 窗口/资源组属性：窗口和资源组的属性一样，设置坐标、宽高、透明度、背景色、使用背景色与否、是否可见。

窗口/资源组的“可见”属性会传递到其子项，即：如果它不可见，则其子项也不可见（即使其属性是“可见”）；如果它可见，其子项可见性取决于它自己的“可见”属性。

4) 图片区属性：设置图片坐标、当前图层的路径、是否可见。

如果需要更换当前图层图片的路径，“点击浏览”选择本地磁盘的任意目录下的图片，如果选择的图片不在资源列表中则添加到列表中；如果图片不在case的子目录下，也不在UI工程所在目录的子目录下，则将图片拷贝到UI工程所在目录的resource目录下。

5) 字符串属性：设置字符串坐标、宽高、显示模式、字体高度、背景色、前景色、对齐方式、资源ID、是否滚动、滚动方式，是否可见。

如果需要更换资源ID，点击“点击编辑”弹出当前已添加的字符串资源列表的对话框，选择所需要的字符串资源ID。

2.5. 图层预览区

预览当前图片区的所有图层及其路径，只有当在UI层次结构或者UI预览区里选择了图片区之后，才会有预览。图层预览区不能做任何操作。

2.6. 资源列表

资源列表是当前UI工程里所添加的图片、字符串资源列表。当需要更给某个图片（字符串）ID时，先在UI层次结构区或者UI预览区点击选定该图片（字符串），然后双击资源列表的某一项，就可以将该项的ID设为图片（字符串）的ID。

可通过右击菜单添加文件、添加目录、删除选择、清空列表等操作

添加/删除资源满足：

Ø 添加的资源ID总是在当前列表的ID最后后面

Ø 资源ID号必须连续，中间不能空缺，删除资源后，排在后面的资源ID往前移

1) 图片资源

列表右边列是资源名字、ID号、路径；列表左边是当前右边选择项的预览。

路径的前面”$CASE”表示该是相对case的路径，否则是相对UI工程的路径

当打开某个UI工程时，UI-Editor会导入该工程最后一次保存的列表，如果列表中某个路径的图片无法找到，则该行以红色背景显示。

图片列表项也可以通过图片属性页面添加（见图片属性一节）

2) 字符串资源列表

列表右边是资源名字、ID号、字符串的英文，中文，繁体表示；左边是搜索方式、搜索值。

2.7. 控件ID重新排列

无论是否有删除操作，新增控件的ID总是递增，当删除操作很多时，控件的ID很不连续，如果需要保持ID号连续，使用控件ID重新排列功能，将UI层次结构中的资源ID按从上往下重新排列。

2.8. 生成资源

将资源列表中的图片、字符串生成Noya固件需要的res文件及其头文件。每个UI工程都可以有自己的资源，添加/删除了图片及字符串资源之后，需要重新生成res文件。

3. 简单UI工程示例

1) 文件菜单à新建UI，弹出创建UI工程的对话框，输入工程名、保存路径、Case目录，点击确定。

2) 点击Scene00_Window，添加资源组ResourceBox02，将ResourceBox02修改背景色，拖到中间，拉大到合适大小，然后添加图片PicRegion03，字符串String04。

3) 此时由于图片和字符串的资源ID是无效的，若点击“保存”，则会弹出sty文件无法保存的错误信息，因为sty文件要放到Noya机子上去读取，ID不能无效。但是这个不影响hello.ui文件的保存，用户仍然可以退出UI-Editor之后再打开它。

4) 在资源列表区，右击菜单à添加目录，浏览到case目录的resource（也可以添加任意目录），点击确定。Resource目录及其子目录下面所有的图片、字符串资源已经添加到列表中。

5) 点击PicRegion03，添加图层，分别点击两个图层，在资源列表区选择ID号为11和15的两幅图片（注意：同一图片区下，不同图层图片的宽高一定要相同），在图层预览区可以看到这两幅图片的预览。

6) 点击String04，在字符串资源列表中双击ID号为5的字符串，在UI预览区可以看到添加的字符串中文内容（具体显示的语言由工程属性页里的语言设置决定）。

7) 点击保存，此时提示保存成功，在UI工程目录生成了风格文件hello.sty，UI资源的宏定义头文件hello_sty.h。

8) 工程菜单à生成资源，将资源列表中的图片和字符串资源生成res文件及其头文件，res及其头文件的路径可以在工程设置页里面修改。

9) 如果控件ID有变动，需要重新编译系统，最后跟生成的res文件、sty文件用固件打包工具生成固件，下载到小机子上运行。

4. 其他问题

1) 资源的id一直递增，亦即：如果进行了删除、重新添加操作之后，即使资源树结构一致，但是资源id永远不会为原来的值，这时需要进行“重新排列id”操作，对资源树按照从上往下重新排列。

2) 如果修改了资源树形结构（即有添加、删除操作）、资源id被修改，需要重新编译代码。