GUI和AWTK介绍

---

前言

GUI（图形化界面）目前在我们的生活中无处不在，以至于我们都很少关注到他为我们所带来的巨大改变，GUI出现于1970年一群天才之手，后伴随着PC由面向企业到面向个人的发展，再经乔布斯和比尔盖茨等发掘应用逐渐进入到大众视野。

AWTK是我们国产的GUI开源引擎，其代码干净利落，思路清晰，而且各种更新频繁，各种特性在不断的进行支持，同时对于开发者的支持做的也很好，经常碰到问题后在github上上午提问，下午可能就有答复了。

AWTK的作者是一位程序员界的大牛，在他的博客上记录了他程序员生涯的一些感悟以及所拥有的各种知识精华，其创作的专门用于培养程序员新人的《系统程序员成长计划》（在他的博客中可以看到），引导我在职业生涯的迷茫阶段，认识到了什么才是真正的程序员，以及程序员又该如何去思考去提升。这里对他表示非常感谢。
AWTK作者博客

1、GUI

1.1 简介

GUI（Graphical User Interface） ：图形化操作界面

CLI （Command-Line Interface）：命令行操作界面

GUI框架／引擎：即我们所使用的GUI开发库，借助GUI开发库开发者可以很方便的实现很多炫酷的功能。常用的GUI开发引擎例如：QT、AWTK、LVGL

1.2 GUI的出现

1970年GUI出现了：
美国施乐PARC实验室聚陇了美国绝大部分的计算机天才，据说全美100个计算机天才有58个在PARC，他们可以穿着睡衣和短裤来上班，没有固定位置，一切看心情。这个实验室研制出了图形化界面，鼠标（方便操作），以太网（方便互联互通）。

1970年代施乐PARC的开发人员

最早的GUI界面

1973年世界上第一台个人电脑Alto出现：
该年施乐公司的PARC研究中心研制出了第一台个人电脑阿尔托（Alto）的操作系统制作的计算机，该计算机具备了现在图形化界面的基本元素。

世界上第一台个人电脑Alto

Alto的艺术照

1.3 乔布斯和GUI

1976年：
乔布斯和沃兹尼亚克在自家车库中完成了APPLE1，并在当年成立了苹果公司

初代苹果电脑

1979年：
乔布斯带领核心团队拜访PARC，并因低价出售给施乐100万美元的苹果股票，而获取能够参观PARC在研究的项目的权力，从而接触到了GUI，乔布斯当时被这项富有创意的研究给震撼到，并很快意识到这将会改变个人计算机的竞争格局，然后回家偷偷摸摸自己搞了起来。

1980年：
APPLE２问世（使用的仍然是DOS系统，即命令行界面）

APPLE２电脑

1981年：
乔布斯邀请比尔盖茨来给自己正在研发的带有图形化界面的个人电脑Lisa开发应用软件，比尔盖茨被GUI这种全新的交互方式所震撼，然后回家偷偷摸摸自己搞了起来。

1983年：
APPLE Lisa问世。此时该个人计算机已具备GUI界面(Lisa为乔布斯女儿的名字)。

Lisa电脑

1984年：
苹果麦金塔电脑问世，真正的做到了将GUI推向世界，将电脑推向了普通家庭。

1.4 比尔盖茨和GUI

1985年：微软推出了图形化操作系统Windows 1.0，然后从此和乔布斯结怨

1990年：windows 3.0发布，由于在界面、人性化、内存管理等多方面的巨大改进，同时伴随着芯片处理能力每18个月翻一番的摩尔定律，一直困扰图形化界面的处理器能力不足问题得到了很大的改善，并最终获得了用户的认同。并且因其将windows公开，从而更进一步将GUI推向了世界。

1.5 苹果与微软

苹果和微软两个当前世界的巨头公司，同时受益于个人计算机的发展也都在已自己的方式去推动个人计算机的发展。

两家公司的创始人在早期电脑还是价格昂贵且需要专业人士操作的重型机器时，就在致力于将PC带入到寻常百姓家，使其成为人人都能够受益的产品。

在这个过程中苹果走的是直接制造整机的产品化路线，而微软采用的则是软件操作系统授权路线。当然这也和两个公司的最初起源也有关系，苹果公司起源于APPLE 1，乔布斯和沃兹在自家车库通过制作廉价简单的电脑主板进行售卖获得第一桶金，并创办了苹果，其后逐渐发展成为个人消费电子产品的龙头。

微软则起源于操作系统软件授权以及软件开发，据说比尔盖茨的第一桶金来自于和IBM的一次合作，当时IBM委托比尔盖茨为其开发操作系统，然后比尔盖茨花了一点小钱买下了当时的Dos系统，中间转手卖给了IBM，同时比尔盖茨要求IBM允许其将Dos系统继续授权给其它厂商，起初在1970年代个人PC市场的发展还很缓慢，市面上除了DOS仍然具有很多其他的操作系统，因此IBM对于这个提议没有考虑太多便同意了。可这个提议却让IBM后来后悔不已。
IBM的个人电脑销售比较好时，市面上就出现了很多的IBM兼容机也就是仿机，然后比尔盖茨通过像这些兼容机提供DOS系统的授权来获取利益。从而获得了第一桶金，这也奠定了微软后面的发展模式 。

苹果

苹果是一家同时制作软件和硬件的公司，或者说是一家制作产品的公司，由于乔布斯对产品有极致的要求，因此他觉得只有将软件和硬件都把握在自己手上，根据自己的软件需求制作合适的硬件，结合硬件的特性编写合适的软件，只有这样才能制作出超越当时大部分采用兼容机（软件公司提供软件，硬件公司提供硬件）方式运行的设备。

但是这种方式本身也限制了苹果的发展，因为相比较于微软的开放式操作系统，苹果虽然早早的在个人微机领域占据一定市场份额，但是由于其封闭式的操作系统，导致微软后来居上成为了PC行业的真正龙头。

期间苹果也尝试过授权自己的操作系统到其它公司的硬件上运行，但是乔布斯发现其它厂商生产出来的硬件很难将苹果的操作系统发挥到极致，而且硬件规格不同，系统运行出来的效果也大相径庭，最终出来的产品质量参差不齐，最终乔布斯不能忍受这种做法，将授权出去的软件又收了回来，继续采用自己的封闭式开发方式。虽然这种方式相比较于微软的开放式操作系统对世界的影响力更小，但是确确实实在另外一条道路上为我们带来了极致的产品。

微软

微软早期便是一家纯软件公司，盖茨主要是通过帮助IBM和苹果等PC行业巨头开发软件和操作系统而赚钱，后来他意识到图形化界面才是未来后，组建团队开发图形化操作系统windows,并在windows 3时展露头角，windows相比较于MAC OS晚出现了很多年，且在操作体验上确实更差一些，但是其由于采用的是开放式软件授权方式，自己不生产硬件，而是向硬件厂商授权windows的安全和使用权收费。通过这种方式微软的windows很快在当时霸占了微机市场，并持续到今天。

2.AWTK

2.1简介

** AWTK：**
AWTK全称为Toolkit AnyWhere，是ZLG倾心打造的一套基于C语言开发的GUI框架。旨在为用户提供一个功能强大、高效可靠、简单易用、可轻松做出炫酷效果的GUI引擎，并支持跨平台同步开发，一次编程，终生使用。

AWTK源码仓库：
主源码仓库：https://github.com/zlgopen/awtk
镜像源码仓库：https://gitee.com/zlgopen/awtk
稳定版整合包：https://pan.baidu.com/s/1_oRgj67M-I4kivk-YzwFWA 提取码：1cmi

AWTK演示：
https://awtk.zlg.cn/demos/awtk/demoui/index.html

这是一个网页版本的演示demo，通过该demo大家可以预览AWTK当前支持哪些控件以及哪些特性，
当然这个demo上的演示是比较基础的，AWTK本身还有很多强大的功能，这里建议大家去其官网或者github上查看。

2.2 AWTK的特点

• 高效。采用脏矩形裁剪算法，每次只绘制和更新变化的部分，极大提高运行效率
• 稳定。通过良好的架构设计、编程风格、单元测试、动态（valgrind）检查和 Code Review 保证其运行的稳定性
• GUI控件丰富
• 支持多种格式的动画（gif,lottie,rive），内置nanovg实现高质量的矢量动画
• 支持裸系统，无需 OS 和文件系统。字体、图片、窗体样式和界面描述数据都编译到代码中，以常量数- 据的形式存放，运行时无需加载到内存。
• 支持国际化（Unicode、字符串翻译和输入法等）。
• 可移植。支持移植到各种 RTOS 和嵌入式 Linux 系统，并通过 SDL 在各种流行的 PC/手机系统上运行
• 支持硬件 2D 加速（目前支持 STM32 的 DMA2D 和 NXP 的 PXP）和 GPU 加速（OpenGL/ OpenGLES/DirectX/Metal），充分挖掘硬件潜能。
• 采用 LGPL 协议开源发布，在商业软件中使用时无需付费。
• 支持多种语言开发（C++，lua、ptyhon、java等）
• 拥有界面设计工具 AWTK Designer，只需要拖拽就可以帮助生成对应的文件

2.3 AWTK的基础框架

控件模块：

控件是视图层的基本组成元素，即图形小组件，例如我们在设计界面时，界面中会包含各种各种按键，文本，滑动条等等，这些常用的图形小组件即控件，无论多么复杂的界面都是由这些控件组合二层。

基础控件：
基础控件是一些常用控件，例如按键和滑动条，一般一个GUI引擎在设计之初都会以首先实现这些基础控件为主。

扩展控件：
一些常用的功能更加强大更加绚丽的控件，其重要性不如基础控件，但是扩展控件一般是体现一个GUI引擎功能是否强大的一个标志

自定义控件：
当GUI引擎提供的控件不能满足开发者的需求时，开发者可根据需要实现自己的自定义控件，例如一个圆形调色器

容器：
容器是控件的一种，其本身不具备布局的效果，主要是用于辅助提示。

窗口：
一个界面的最底层控件即为窗口，创建的窗口有普通的window，还有overlay，dialog等等。

2.4 如何使用AWTK进行开发

这部分我建议还是直接去看AWTK官方提供的文档，那里写的更加清楚。
下面的这些素材来源于AWTK官方提供的文档。

HelloWorldDemo:

应用实现流程：

应用的主目录

编写UI界面

src目录和main

窗口初始化

响应按键事件

编译构建

3. 常用的GUI开发方式

MVC,MVP,MVVP它们本质上是就是三种逐渐迭代的分离界面和业务逻辑的设计模式。其迭代过程由MVC->MVP->MVVM

3.1 MVC

MVC是Model-View-Controller简称，它首次把系统分成Model，View和Controller这三部分，明确的把用户界面和业务逻辑分离开来。

M(Model):这里的Model就是业务逻辑的抽象，比如一个温控对象，它不仅包含当前的温度信息（数据），还包括设置温度，获取温度等方法。

V(View):View就是我们的界面上的控件，如button,label控件等。

C(Controller):控制器其实就是M和V的中间层，它主要作用就是从M获取数据，显示到V中，或者对V进行操作的时候通过调用View的事件函数，去对M进行操作。在GUI中就是控件的事件处理函数，比如一个显示当前温度，并可以通过按键设置温度的例子，这里我是使用的lua，GUI引擎使用的AWTK。

View层是界面，Model层是业务逻辑，Controller层用来调度View层和Model层，将用户界面和业务逻辑合理的组织在一起，起粘合剂的效果。所以Controller中的内容能少则少，这样才能提供最大的灵活性。

3.2 MVP

在MVP里，Presenter完全把Model和View进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View时候可以保持Presenter的不变，即重用。

M(Model):模型还是MVC中的模型，这里不再赘述。

V(View):视图还是MVC中的视图，但它不需要向模型注册改变的事件通知了，这个由呈现逻辑去做了。

Presenter：Controller变成了Presenter只是表面现象，最重要的是MVP对视图进行了抽象，呈现逻辑不再像控制器那样直接访问具体的视图了，而是通过视图的接口去访问视图，视图的接口是抽象的，可以有不同的实现，所以可以方便的Mock出一个视图，让编写呈现逻辑的单元测试程序成为可能。注意，这里视图的接口并不是通用的，每个视图都有一个独立的接口，有一个真正的实现和一个用于测试Mock的实现。

3.3 MVVM

把MVP模式这些规律找出来进行抽象，通过一些规则在视图和模型建立联系，也就是数据绑定和命令绑定，就形成了MVVM模式。
MVVM是Model-View-ViewModel简称。

在MVVM中：
模型(Model)。模型还是MVC中的模型，这里不再赘述。

视图(View)。视图还是MVC中的视图，但它不需要向模型注册改变的事件通知了，这个由数据绑定去做了。

视图模型(ViewModel)。 ViewModel不是Controller也不是Presenter，视图模型是视图还是模型？按MVVM的发明者John Gossman的话说，视图模型是视图眼中的模型。放大镜下的虫子还是虫子，所以视图眼中的模型还是模型。视图模型与视图没有直接关系，是可以为之编写单元测试的。

呈现逻辑Presenter去哪里了？
呈现逻辑从一行行代码变成了一条条数据绑定和命令绑定的规则，对规则的处理和解释成了MVVM框架或公用库，可以在多个项目中共享。

3.4 总结

MVC/MVP/MVVM它们的M都是model的意思，这部分是不变的。

MVC和MVP相比，MVC中的V是实际的ui控件对象，MVP中的V是ui控件对象的抽象（这样可以将view的变化限制在view层，类似于设计模式中的策略模式）。

这部分的内容来自于我的另外一篇博客《MVC,MVP,MVVM是什么》
这里为了方便大家观看我就直接将内容移过来了，更多的一些细节大家可以参考
https://github.com/zlgopen/awtk-mvvm/blob/master/docs/8.intro.md

4. 参考资料和文档

AWTK地址：

https://github.com/zlgopen/awtk

AWTK开发文档：

https://awtk.zlg.cn/docs/awtk_docs/AWTK_Guide/1.GettingStarted.html
https://awtk.zlg.cn/docs

AWTK帮助文档:

https://awtk.zlg.cn/docs/awtk_docs/HowTo/hardware_req.html#%E4%B8%80%E3%80%81cpu

AWTK移植和裁剪指南：

https://awtk.zlg.cn/docs/awtk_docs/AWTK_Porting_Tailoring/

用AWTK编写跨平台的代码

https://z.zlg.cn/articleinfo?id=852941

AWTK针对amr-linux平台的移植

https://github.com/zlgopen/awtk-linux-fb

AWTK生态介绍

https://github.com/zlgopen/awtk/blob/master/docs/awtk_ecology.md

如何评估GUI引擎的好坏

https://www.zhihu.com/question/422916505/answer/1493307726

Frame Buffer的使用

https://awtk.zlg.cn/docs/awtk_docs/AWTK_Porting_Tailoring/4.DisplayDevice.html#_4-1-%E8%AF%84%E4%BC%B0-framebuffer-%E6%95%B0%E9%87%8F

AWTK LCD接口的四种实现方式

https://zhuanlan.zhihu.com/p/264410597

AWTK的完整演示地址：

https://awtk.zlg.cn/demos

书籍：

《浪潮之巅》
《乔布斯传》

其它：

新闻和其他参考链接：
已记不清地址了。。

---