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

大家好，欢迎来到IT知识分享网。

• 从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 app CUSTOM_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, 容易引发冲突
• 8.7 add: 之前做法是直接在application.c自己写函数定义mvvm_app_init和mvvm_app_deinit分别封装mvvm_init和mvvm_deinit， 后来发现这样就没法用jerryscript了，其实awtk-mvvm是有官方的对这两个函数的封装了，这里已经修改，Sorry.

  将mvvm/src下的mvvm_app.inc拷贝到designer项目的src下，在application.c引用:

  mvvm_app.inc

  #include "mvvm/mvvm.h" #ifndef APP_SCRIPT_MAIN #define APP_SCRIPT_MAIN "app" #endif #ifndef APP_SCRIPT_VALUE_CONVERTER #define APP_SCRIPT_VALUE_CONVERTER "value_converter" #endif #ifndef APP_SCRIPT_VALUE_VALIDATOR #define APP_SCRIPT_VALUE_VALIDATOR "value_validator" #endif #ifndef MVVM_APP_GLOBAL_INIT #define MVVM_APP_GLOBAL_INIT() #endif /*MVVM_APP_GLOBAL_INIT*/ #ifndef MVVM_APP_GLOBAL_DEINIT #define MVVM_APP_GLOBAL_DEINIT() #endif /*MVVM_APP_GLOBAL_DEINIT*/ static inline ret_t mvvm_app_run_default_scripts(void) { 
        #ifdef WITH_JERRYSCRIPT if (mvvm_jerryscript_run(APP_SCRIPT_MAIN) != RET_OK) { 
        mvvm_jerryscript_run(APP_SCRIPT_VALUE_CONVERTER); mvvm_jerryscript_run(APP_SCRIPT_VALUE_VALIDATOR); } #endif /*WITH_JERRYSCRIPT*/ return RET_OK; } static ret_t mvvm_app_init(void) { 
        mvvm_init(); #ifdef WITH_IOTJS mvvm_iotjs_init(); #endif /*WITH_IOTJS*/ #ifdef WITH_JERRYSCRIPT mvvm_jerryscript_init(); #endif /*WITH_JERRYSCRIPT*/ return RET_OK; } static ret_t mvvm_app_deinit(void) { 
        #ifdef WITH_JERRYSCRIPT mvvm_jerryscript_deinit(); #endif /*WITH_JERRYSCRIPT*/ #ifdef WITH_IOTJS mvvm_iotjs_deinit(); #endif /*WITH_IOTJS*/ mvvm_deinit(); return RET_OK; } 

  并在application_init和application_deinit引用:

  #include "awtk.h" #include "mvvm/mvvm.h" #include "mvvm_app.inc" ret_t application_init(void) { 
        mvvm_app_init(); return navigator_to("books13"); } ret_t application_exit(void) { 
        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 <> 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" } } } 

8.7 add: 如果要启用jerryscript， 比如用来写一些model脚本，直接在designer项目Sconstruct下加这么一行即可，不需要CV任何文件过去。

ARGUMENTS['WITH_JERRYSCRIPT'] = 'true'