移植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) 收藏舉報

刷新頁面返回頂部

另一種開始

移植awtk-mvvm到Awtk Designer項目

awtk踩坑記錄三：移植awtk-mvvm到Awtk Designer項目

公告