创建界面
界面由部件组成,部件彼此之间都有关系,这些关系如同一颗树。在实际编程中,这些部件的存储方式也是树形结构。那么,创建界面就是将需要展示的元素组织成树形结构然后用特定的语言描述 出来。
LCUI 支持使用 XML 标记语言描述界面,相比用 C 语言这种编程语言创建界面,无论是编写还是阅读都更简单。LCUI 对 XML 内容的要求是第一行必须是 <?xml version="1.0" encoding="UTF-8" ?>
,最外层必须有 <lcui-app>
标签,界面相关部件的标签必须写在在 <ui>
标签内。
首先,在 app 目录下新建 todolist.xml
文件,内容如下:
app/todolist.xml
<?xml version="1.0" encoding="UTF-8" ?>
<lcui-app>
<ui>
</ui>
</lcui-app>
然后,在 src 目录内新建 main.c 文件,内容如下:
src/main.c
#include <LCUI.h>
#include <LCUI/main.h>
int main(int argc, char **argv)
{
ui_widget_t *pack;
lcui_init();
pack = ui_load_xml_file("todolist.xml");
if (!pack) {
return -1;
}
ui_root_append(pack);
ui_widget_unwrap(pack);
ui_widget_set_title(ui_root(), L"Todo list");
return lcui_main();
}
第一行包含 LCUI 的头文件。第二行的 LCUI/main.h
提供了跨平台的入口函数实现代码,让 main 函数始终程序的入口。
在 main 函数中,先是初始化了 LCUI,让 LCUI 的各项功能准备工作。然后加载 xml 文件,对加载结果做判断,无效时返回 -1。之后将加载的部件追加到根部件,由于该部件仅充当容器,其内部的子部件才是我们需要的,还需要调用 ui_widget_unwrap()
展开该容器部件以将其内部的子部件追加到根部件内。接着设置根部件的标题,该标题会同步到主窗口上。最后调用 lcui_main()
运行主循环,让程序进入持续工作的状态。
结合之前分析的界面需求,界面中的所有元素可被组织成以下树形结构:
- 主界面
- 标题
- 任务数
- 三个状态筛选按钮
- 输入框
- 任务列表
看上去非常简单,似乎剩下的工作就是将它转换成 XML 代码。然而根据实际的布局需求、交互需求以及编程便利性上的考虑,这个树形结构还需要调整。接下来将会讲述如何调整树形结构,以及如何使用标签描述每个界面元素。