移植awtk-mvvm到Awtk Designer项目

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 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 <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'
posted @ 2025-07-06 15:04  另一种开始  阅读(22)  评论(0)    收藏  举报