Skip to content

Latest commit

 

History

History
172 lines (130 loc) · 7.99 KB

README.md

File metadata and controls

172 lines (130 loc) · 7.99 KB
Raw

awtk-mvvm

一、MVVM

MVVM(Model-View-ViewModel) 是分离用户界面和业务逻辑的经典模式。

分离用户界面和业务逻辑的好处：

  • 让用户界面可以独立变化。
  • 方便为业务逻辑编写单元测试程序。
  • 方便 UI 设计师和程序员的分工和合作。

MVVM 相比 MVP 和 MVC 的优势：

  • 使用更简单。
  • 分离更彻底。
  • 声明式的编程更容易维护。

MVVM 的核心思想有两个：

  • 通过数据绑定实现 View 与 Model 之间的数据交换。
  • 通过命令绑定实现 View 事件与 Model 行为之间的关联。

二、AWTK-MVVM

AWTK-MVVM 是一套为 AWTK 用 C 语言开发，并支持各种脚本语言的 MVVM 框架，实现了数据绑定、命令绑定和窗口导航等基本功能，使用 AWTK-MVVM 开发应用程序，无需学习 AWTK 本身的 API，只需学习绑定规则和 Model 的实现方式即可。与其它 MVVM 框架相比，其特点有：

  • 代码小。
  • 性能高。
  • 内存开销小。
  • 隔离更彻底。
  • 可移植到其它 GUI。
  • 支持多种编程语言（目前支持 C/JS)。

三、使用方法

本文以 Linux/MacOS 为例，Windows 可能会微妙差异，请酌情处理。

3.1 获取 awtk 并编译

git clone https://github.com/zlgopen/awtk.git
cd awtk
scons

3.2 获取 awtk-mvvm 并编译

awtk 和 awtk-mvvm 须处于同一级目录

  • 获取 awtk-mvvm
git clone https://github.com/zlgopen/awtk-mvvm.git
cd awtk-mvvm
git clone https://github.com/jerryscript-project/jerryscript.git 3rd/jerryscript/jerryscript
cd 3rd/jerryscript/jerryscript
git reset --hard 3737a28eafd580a2bee2794e4f5edd0c0471a0c6

当前适配的 jerryscript 的 SHA-1 为 3737a28eafd580a2bee2794e4f5edd0c0471a0c6；如果更新 jerryscript 为最新的代码，则可能会有兼容问题。

  • 生成资源
python ./scripts/update_res.py all
  • 编译 PC 版本
scons

完整的命令行参数可通过如下命令查看：

scons help
  • 编译 LINUX FB 版本（请先编译 awtk-linux-fb）
scons LINUX_FB=true
  • 运行 demos
./bin/demo1
  • 注意事项

(1) 如果不需要 JS，请修改 SConstruct，注释掉下面这行代码，然后重新编译：

os.environ['WITH_JS'] = 'true'

(3) 如果启用了 WITH_JS 和 WITH_JS_SNAPSHOT, 那么更新 JS 后，需重新编译生成 mvvm_factory_gen 工具，之后使用该工具重新生成 tools/mvvm_factory_gen/mvvm_factory.js 的快照，再重新编译 mvvm。

四、文档

五、示例

  • 基本示例
C DEMO JS DEMO CPP DEMO 说明
demo1 jsdemo1 cppdemo1 数据绑定基本用法
demo2 jsdemo2 cppdemo2 trigger 参数的用法
demo3 jsdemo3 cppdemo3 converter 参数的用法
demo4 jsdemo4 cppdemo4 显式更新 (Trigger=Explicit) 的用法
demo5 jsdemo5 cppdemo5 validator 参数的用法
demo6 jsdemo6 cppdemo6 命令绑定的基本用法
demo7 jsdemo7 cppdemo7 以计算器为例的综合用法
demo8 jsdemo8 cppdemo8 以 shape 编辑为例的综合用法
demo9 jsdemo9 cppdemo9 多窗口的基本用法
demo10 jsdemo10 cppdemo10 定时器的基本用法
demo11 jsdemo11 cppdemo11 一个视图多个 ViewModel 的用法
demo12 jsdemo12 cppdemo12 多窗口之间参数传递
demo13 jsdemo13 cppdemo13 列表渲染的基本用法 (v-for)
demo14 jsdemo14 (no) 快捷键的基本用法
demo15 jsdemo15 (no) combox 数据联动
demo16 jsdemo16 (no) 动态界面
demo17 jsdemo17 (no) 控制控件的可见性
demo18 jsdemo18 (no) 复杂属性值的表示方法
demo19 jsdemo19 (no) 控制动画启停
demo20 (no) (no) 串口读取数据
demo21 (no) (no) 操作系统设置的基本用法（无需编写代码）
demo22 (no) (no) 通过 sub view model 操作系统设置的基本用法（无需编写代码）
demo23 (no) (no) 动态系统设置（无需编写代码）
demo24 (no) (no) 复杂的系统设置（无需编写代码）
demo25 (no) (no) 系统设置增删改查（无需编写代码）
demo26 (no) (no) 让配置生效
demo27 (no) (no) 组合 view model
demo28 (no) (no) 表达式综合应用
demo29 (no) (no) 扩展 app_conf 的命令
demo30 (no) (no) 发送按键事件和设置属性
demo31 (no) (no) 嵌套 view model
demo32 (no) (no) 一个 view model 多个 model 的用法
demo33 (no) (no) 演示 navigate 命令以及 Args 的基本用法
demo34 (no) (no) 演示模型触发界面更新。
demo35 jsdemo35 (no) 条件渲染的基本用法
demo36 (no) (no) 自定义导航器处理插件，以及 MVVM 窗口和非 MVVM 窗口的交互
demo37 (no) (no) 集成硬件外设
demo38 (no) (no) 无 GUI 情况集成硬件外设
demo39 (no) cppdemo39 列表渲染的过时用法 (v-for-item)
demo40 jsdemo40 (no) 多个语言互译与主题切换
demo41 jsdemo41 (no) 屏保的使用方法
demo_count_down (no) (no) 控件定时器使用方法
demo_file (no) (no) 读写文件。
demo_conf (no) (no) 读写配置。