awtk踩坑记录三：移植awtk-mvvm到Awtk Designer项目

• 从github下载并编译awtk, awtk-mmvm

  awtk: https://github.com/zlgopen/awtk/tree/master

  awtk-mvvm: https://github.com/zlgopen/awtk-mvvm

• 用awtk-designer新建项目并打开项目目录

• 首先修改project.json，使其awtk和awtk-mvvm指向上个步骤下载的路径，这样做的目的是使得designer编译调用正确的awtk路径，我的路径是转到d/devtools, 应根据情况自行修改:

{"name": "awtk_mvvm_practice_review2","entry": "home_page","awtkRoot": "d:/Devtools/awtk","awtkMvvmRoot": "d:/Devtools/awtk-mvvm",...
}

• 修改Sconstruct，通过ARGUMENTS启用mvvm：

import os
import scripts.app_helper as appCUSTOM_WIDGET_LIBS = []DEPENDS_LIBS = CUSTOM_WIDGET_LIBS + []ARGUMENTS['WITH_MVVM'] = 'true'
helper = app.Helper(ARGUMENTS)
APP_SRC = os.path.normpath(os.path.join(os.getcwd(), 'src'))
APP_CPPPATH = [os.path.join(APP_SRC, 'common'),os.path.join(APP_SRC, 'view_models'),
]helper.set_deps(DEPENDS_LIBS).add_cpppath(APP_CPPPATH).call(DefaultEnvironment)SConscriptFiles = ['src/SConscript', 'tests/SConscript']
helper.SConscript(SConscriptFiles)

• 在src新建view_models文件夹，并将gen脚本放入，原版是sh脚本，这里照顾我windows上powershell的需要改成了ps脚本，这个脚本用于生成view_model代码，需要指定index.js, gen_vm_array.js和gen_vm.js的路径，index.js在awtk目录下，而gen_vm_array.js和gen_vm.js在awtk-mvvm目录下：

gen.ps1

node D:/Devtools/awtk/tools/idl_gen/index.js idl.json ../common
node D:/Devtools/awtk-mvvm/tools/view_model_gen/gen_vm_array.js idl.json
node D:/Devtools/awtk-mvvm/tools/view_model_gen/gen_vm.js idl.json

原版gen.sh

node ../../../awtk/tools/idl_gen/index.js idl.json ../common
node ../../../awtk-mvvm/tools/gen_vm_array.js idl.json
node ../../../awtk-mvvm/tools/gen_vm.js idl.json

• 修改src, 将common下的navigator.h和navigator.c删掉, src下其他所有文件删除对navigator.h头文件引用, 因为mvvm库里也有和窗口导航有关的重名API, 容易引发冲突

• 修改application.c，加入

  #include "mvvm/mvvm.h"
  static ret_t mvvm_app_init(void) {mvvm_init();return RET_OK;
  }static ret_t mvvm_app_deinit(void) {mvvm_deinit();return RET_OK;
  }
  

  并在application_init和application_deinit引用:

  /*** 初始化程序*/
  ret_t application_init(void) {mvvm_app_init();custom_widgets_register();application_on_launch();if (strlen(APP_SYSTEM_BAR) > 0) {navigator_to(APP_SYSTEM_BAR);}if (strlen(APP_BOTTOM_SYSTEM_BAR) > 0) {navigator_to(APP_BOTTOM_SYSTEM_BAR);}view_model_factory_register("temperature", temperature_view_model_create);return navigator_to(APP_START_PAGE);
  }/*** 退出程序*/
  ret_t application_exit(void) {application_on_exit();log_debug("application_exit\n");mvvm_app_deinit();return RET_OK;
  }

• 自此移植就差不多了, 现在尝试放一个数据绑定的例子, 修改home_page.xml:

  <window v-model="temperature" v-on:window_open="{fscript, Args=print(&quot;window_open&quot;)}" v-on:window_close="{fscript, Args=print(&quot;window_close&quot;)}" name="home_page"><slider name="slider" x="133" y="179" w="214" h="16" v-data:value="{value}" value="40"/><label name="label" x="160" y="124" w="160" h="28" v-data:text="{value}" text="Label"/>
  </window>
  

  在src文件夹的common里写一个Temperature.h:

  /*** File:   temperature.h* Author: AWTK Develop Team* Brief:  temperature** Copyright (c) 2020 - 2020  Guangzhou ZHIYUAN Electronics Co.,Ltd.** This program is distributed in the hope that it will be useful,* but WITHOUT ANY WARRANTY; without even the implied warranty of* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the* License file for more details.**//*** History:* ================================================================* 2020-01-23 Li XianJing <xianjimli@hotmail.com> created**/#ifndef TEMPERATURE_H
  #define TEMPERATURE_H#include "tkc/types_def.h"BEGIN_C_DECLS/*** @class temperature_t** @annotation ["model"]* 温度控制器。**/
  typedef struct _temperature_t {/*** @property {double} value* @annotation ["readable", "writable"]* 值。*/double value;
  } temperature_t;END_C_DECLS#endif /*TEMPERATURE_H*/

  跳转到view_models文件夹执行gen脚本, 生成temperature_view_model.h和temperature_view_model.c, 以及idl.json.

application.c 中 include mmvm.h 并在application_init中注册temperature的model:

#include "mvvm/mvvm.h"
#include "./view_models/temperature_view_model.h"
...
ret_t application_init(void) {mvvm_app_init();custom_widgets_register();application_on_launch();if (strlen(APP_SYSTEM_BAR) > 0) {navigator_to(APP_SYSTEM_BAR);}if (strlen(APP_BOTTOM_SYSTEM_BAR) > 0) {navigator_to(APP_BOTTOM_SYSTEM_BAR);}view_model_factory_register("temperature", temperature_view_model_create);return navigator_to(APP_START_PAGE);
}

编写完成, 编译运行:

python ./scripts/update_res.py all
scons AWTK_ROOT='d:/devtools/awtk'
bin/demo.exe

部署到web的build.json:

{"name": "awtk_mvvm_project_template","version": "1.0","assets": "res/assets","author": "AWTK Develop Team","copyright": "Guangzhou ZHIYUAN Electronics Co.,Ltd.","themes":["default"],"web": {"app_type": "c","assets": "design","includes":[".","src","src/common","src/view_models","D:/Devtools/awtk-mvvm/","D:/Devtools/awtk-mvvm/src"],"sources": ["src/*.c","src/*/*.c","D:/Devtools/awtk-mvvm/src/mvvm/*.c","D:/Devtools/awtk-mvvm/src/mvvm/base/*.c","D:/Devtools/awtk-mvvm/src/mvvm/awtk/*.c","D:/Devtools/awtk-mvvm/src/mvvm/view_models/*.c"],"config": {"fontScale": "0.8","defaultFont": "sans"}}}