跳到主要内容
版本:Next 🚧

构建界面

让我们学习如何编译 TSX 代码,以及如何使用它为我们的应用程序构建界面。

编译 TSX

运行以下命令让 lcui-cli 编译 src 目录内的所有文件:

lcui compile src

运行完后会产生 .tsx.h 后缀名的文件,查看这些文件的内容可知它包含了组件的构建和资源加载函数。

补全组件实现

我们需要编写代码调用这些函数才能补全组件的完整实现,这些代码可写在图片查看界面的源文件中,如下所示:

#include "image-view.tsx.h"

typedef struct image_view {
image_view_refs_t refs;
} image_view_t;

void image_view_init(ui_widget_t *w)
{
image_view_t *view;

view = ui_widget_add_data(w, image_view_proto, sizeof(image_view_t));
image_view_load_template(w, &view->refs);
}

void image_view_destroy(ui_widget_t *w)
{
}

void ui_register_image_view(void)
{
image_view_load_resources();
image_view_init_prototype();
image_view_proto->init = image_view_init;
image_view_proto->destroy = image_view_destroy;
}

我们定义了组件的私有数据类型、初始化函数、销毁函数和注册函数。

image_view_t 是组件的私有数据类型,目前还只有一个 refs 成员,它的类型是 image_view_refs_t,包含 tsx 代码中各个元素的 $ref 属性所引用的组件实例。

在初始化函数中,为组件添加了类型为 image_view_t 的私有数据,然后调用 tsx 中的 image_view_load_template() 函数来构建组件的内容。该函数会修改传入的 refs 参数,将其中的各个组件指针指向对应的组件实例。

注册函数负责资源加载和组件原型初始化,image_view_proto 指向组件原型,我们需要将其中的 init 和 destroy 函数指针指向组件的初始化和销毁函数,以让 LCUI 在创建和销毁组件时调用它们。

使用组件

app.c 和 app.tsx 包含的是演示代码,对我们的程序并没有用,所以我们另外新建一个 main.c 文件:

#include <LCUI.h>
#include <LCUI/main.h>
#include "image-view.h"

int main(int argc, char **argv)
{
ui_widget_t *w;

lcui_init();
ui_register_image_view();
w = ui_create_widget("ImageView");
ui_root_append(w);
return lcui_main();
}

main() 函数中,我们先初始化了 LCUI,然后注册了 ImageView 组件,之后创建它并将其追加到根组件内,最后进入 LCUI 的主循环。