AWTK中的界面描述数据

AWTK可以直接加载XML格式的和二进制格式的界面描述数据，从性能和资源开销的角度考虑，二进制格式是更好的选择，AWTK提供了工具将XML格式转换成二进制格式的界面描述数据，也提供了将QT的UI文件和微软的RC文件转换成AWTK XML格式的界面描述文件的工具，其工作流程如下：

AWTK界面描述文件介绍 - 图1

AWTK的UI Builder还在意淫之中，打算用AWTK本身来开发，可能需要等到2018年底了，目前可以使用Qt Designer或微软的VC来做界面(主要生成各个控件的坐标)，再转换成AWTK XML UI文件，适当的编辑之后，转换成AWTK二进制的UI数据。

一、界面描述数据的使用方法

1.创建XML格式的界面描述文件

AWTK XML界面描述数据非常紧凑和直观：

  • name 是控件的名称，创建完成之后可以用widget_look_up函数找到指定名称的控件。
  • x x坐标
  • y y坐标
  • w 宽度
  • h 高度
  • text 文本
  • value 值

x/y/w/h 可以使用AWTK的layout参数。

  1. <window name="main" x="0" y="0" w="320" h="480">
  2.   <button name="inc" x="10" y="5" w="40%" h="30" text="Inc"/>
  3.   <button name="dec" x="right:10" y="5" w="40%" h="30" text="Dec"/>
  4.   <image name="img" x="10" y="230" w="100" h="100"/>
  5.   <label name="" x="10" y="40" w="80" h="30" text="Left"/>
  6.   <label name="" x="100" y="40" w="80" h="30" text="Center"/>
  7.   <label name="" x="200" y="40" w="80" h="30" text="Right"/>
  8.   <progress_bar name="bar1" x="10" y="80" w="168" h="30" value="40"/>
  9.   <progress_bar name="bar2" x="260" y="80" w="30" h="118" value="20" vertical="true"/>
  10.   <check_button name="c1" x="10" y="150" w="80" h="30" text="Book"/>
  11.   <check_button name="c2" x="100" y="150" w="80" h="30" text="Food"/>
  12.   <radio_button name="r1" x="10" y="200" w="80" h="30" text="Book"/>
  13.   <radio_button name="r2" x="100" y="200" w="80" h="30" text="Food"/>
  14.   <radio_button name="r3" x="190" y="200" w="80" h="30" text="Pencil" value="true"/>
  15.   <button name="dialog" x="10" y="260" w="40%" h="30" text="Dialog"/>
  16.   <button name="dialog2" x="right:10" y="260" w="40%" h="30" text="Dialog2"/>
  17. </window>

2.预览XML格式的界面描述文件

XML UI文件写好后，可以用预览工具预览。如：

  1. ./bin/preview_ui demos/assets/raw/ui/main.xml

3.转换成二进制格式的界面描述文件

对XML预览的效果满意之后，把它转换成二进制的格式：

  1.  ./bin/xml_to_ui window1.xml window1.data

为了方便在没有文件系统的嵌入式系统中使用，直接生成常量数据，和程序一起编译。如：

  1.   1 const unsigned char ui_window1[] = {
  2.   2 0x07,0x00,0x00,0x00,0xdb,0x02,0x00,0x00,0x77,0x69,0x6e,0x64,0x6f,0x77,0x31,0x00,0x64,0x61,0x74,0x61,
  3.   3 0x00,0x00,0x00,0x00,0x12,0x12,0x22,0x11,0x01,0x00,0x02,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
  4.   4 0x00,0x00,0x00,0x00,0x40,0x01,0x00,0x00,0xe0,0x01,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x6d,0x61,0x69,
  5.   5 0x6e,0x00,0x00,0x01,0x00,0x0a,0x00,0x00,0x00,0x01,0x00,0x0a,0x00,0x00,0x00,0x05,0x00,0x00,0x00,0x28,
  6.   6 0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x69,0x6e,0x63,0x00,0x74,0x65,0x78,0x74,
  7.   7 0x00,0x49,0x6e,0x63,0x00,0x00,0x00,0x01,0x00,0x0a,0x00,0x03,0x00,0x01,0x00,0x0a,0x00,0x00,0x00,0x05,
  8.   8 0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x64,0x65,0x63,0x00,
  9.   9 0x74,0x65,0x78,0x74,0x00,0x44,0x65,0x63,0x00,0x00,0x00,0x01,0x00,0x0b,0x00,0x00,0x00,0x00,0x00,0x0a,
  10.  10 0x00,0x00,0x00,0xe6,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,
  11.  11 0x69,0x6d,0x67,0x00,0x00,0x00,0x01,0x00,0x09,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x28,0x00,
  12.  12 0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x00,0x74,0x65,0x78,0x74,
  13.  13 0x00,0x4c,0x65,0x66,0x74,0x00,0x00,0x00,0x01,0x00,0x09,0x00,0x00,0x00,0x00,0x00,0x64,0x00,0x00,0x00,
  14.  14 0x28,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x00,0x74,0x65,
  15.  15 0x78,0x74,0x00,0x43,0x65,0x6e,0x74,0x65,0x72,0x00,0x00,0x00,0x01,0x00,0x09,0x00,0x00,0x00,0x00,0x00,
  16.  16 0xc8,0x00,0x00,0x00,0x28,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,
  17.  17 0x00,0x00,0x74,0x65,0x78,0x74,0x00,0x52,0x69,0x67,0x68,0x74,0x00,0x00,0x00,0x01,0x00,0x0d,0x00,0x00,
  18.  18 0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0xa8,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,
  19.  19 0x61,0x6d,0x65,0x00,0x62,0x61,0x72,0x31,0x00,0x76,0x61,0x6c,0x75,0x65,0x00,0x34,0x30,0x00,0x00,0x00,
  20.  20 0x01,0x00,0x0d,0x00,0x00,0x00,0x00,0x00,0x04,0x01,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,
  21.  21 0x76,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x62,0x61,0x72,0x32,0x00,0x76,0x61,0x6c,0x75,0x65,0x00,
  22.  22 0x32,0x30,0x00,0x76,0x65,0x72,0x74,0x69,0x63,0x61,0x6c,0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x00,0x01,
  23.  23 0x00,0x0f,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0x96,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,
  24.  24 0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x63,0x31,0x00,0x74,0x65,0x78,0x74,0x00,0x42,0x6f,0x6f,0x6b,
  25.  25 0x00,0x00,0x00,0x01,0x00,0x0f,0x00,0x00,0x00,0x00,0x00,0x64,0x00,0x00,0x00,0x96,0x00,0x00,0x00,0x50,
  26.  26 0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x63,0x32,0x00,0x74,0x65,0x78,0x74,0x00,
  27.  27 0x46,0x6f,0x6f,0x64,0x00,0x00,0x00,0x01,0x00,0x10,0x00,0x00,0x00,0x00,0x00,0x0a,0x00,0x00,0x00,0xc8,
  28.  28 0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x72,0x31,0x00,0x74,
  29.  29 0x65,0x78,0x74,0x00,0x42,0x6f,0x6f,0x6b,0x00,0x00,0x00,0x01,0x00,0x10,0x00,0x00,0x00,0x00,0x00,0x64,
  30.  30 0x00,0x00,0x00,0xc8,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,
  31.  31 0x72,0x32,0x00,0x74,0x65,0x78,0x74,0x00,0x46,0x6f,0x6f,0x64,0x00,0x00,0x00,0x01,0x00,0x10,0x00,0x00,
  32.  32 0x00,0x00,0x00,0xbe,0x00,0x00,0x00,0xc8,0x00,0x00,0x00,0x50,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,
  33.  33 0x61,0x6d,0x65,0x00,0x72,0x33,0x00,0x74,0x65,0x78,0x74,0x00,0x50,0x65,0x6e,0x63,0x69,0x6c,0x00,0x76,
  34.  34 0x61,0x6c,0x75,0x65,0x00,0x74,0x72,0x75,0x65,0x00,0x00,0x00,0x01,0x00,0x0a,0x00,0x00,0x00,0x01,0x00,
  35.  35 0x0a,0x00,0x00,0x00,0x04,0x01,0x00,0x00,0x28,0x00,0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,
  36.  36 0x00,0x64,0x69,0x61,0x6c,0x6f,0x67,0x00,0x74,0x65,0x78,0x74,0x00,0x44,0x69,0x61,0x6c,0x6f,0x67,0x00,
  37.  37 0x00,0x00,0x01,0x00,0x0a,0x00,0x03,0x00,0x01,0x00,0x0a,0x00,0x00,0x00,0x04,0x01,0x00,0x00,0x28,0x00,
  38.  38 0x00,0x00,0x1e,0x00,0x00,0x00,0x6e,0x61,0x6d,0x65,0x00,0x64,0x69,0x61,0x6c,0x6f,0x67,0x32,0x00,0x74,
  39.  39 0x65,0x78,0x74,0x00,0x44,0x69,0x61,0x6c,0x6f,0x67,0x32,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,};

4.使用二进制格式的界面描述文件

在程序中引用，并放入资源管理器中：

  1. #include "res/ui/window1.data"
  2. ...
  4. assets_manager_add((const asset_info_t*)ui_window1);

在需要打开该窗口时，调用window_open函数(对话框用dialog_open):

  1.   widget_t* win = window_open(name);
  3.   widget_child_on(win, "ok", EVT_CLICK, on_ok, win);
  4.   widget_child_on(win, "cancel", EVT_CLICK, on_cancel, win);

二、将Qt的UI文件转成AWTK UI XML文件(目前不成熟)。

转换工具在bin/qt_to_xml目录下，使用方法：

  1. Usage: ./bin/qt_to_xml in_filename out_filename
  2.    Ex: ./bin/qt_to_xml demo1.ui demo1.xml