-
从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("window_open")}" v-on:window_close="{fscript, Args=print("window_close")}" 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"
}
}
}
8.7 add: 如果要启用jerryscript, 比如用来写一些model脚本,直接在designer项目Sconstruct下加这么一行即可,不需要CV任何文件过去。
ARGUMENTS['WITH_JERRYSCRIPT'] = 'true'