漫谈windows桌面客户端的UI框架

图形化的界面可能是目前最友好最成熟的人机交互信息的载体。用户界面是否友好，是否能够快速与第三方的 C++ 应用、Web 应用集成，可不可以最大化利用公司现有的开发人员等因素决定着产品能否够快速的推向市场并占领市场。本文我们探讨一下当前主流的一些 UI 框架。

DirectUI – 一种界面开发思想

在桌面客户端开发中，使用最多的技术莫过于纯 Native 开发。这种开发方式可以实现最好的性能，可以比较容易的与第三方的 C++ 应用集成。灵活性强，安装包体量小也是其优点。但如果采取这种开发方式，不可避免会造成开发难度大，周期长。
Native 开发的一种方式就是，基于 DirectUI 开发一套界面库。其核心思想是指将所有的界面控件都绘制在一个窗口上，这些控件的逻辑和绘制方式都必须自己进行编写和封装，而不是使用 Windows 的原生控件，所以这些控件都是无句柄的（Windowsless）。
DirectUI 取名自微软的一个窗口类名“DirectUIHWND”，意为 Paint on parent dc directly。 即子窗口不以窗口句柄的形式创建，只是逻辑上的窗口，绘制在父窗口之上。DirectUI 技术广泛的应用于 Window 系统，MediaPlayer 播放器，即时通讯工具 MSN Messager。
DirectUI 技术的实现步骤和难点：

  1. 窗口的子类化，截获窗口的消息。
  2. 封装自己的控件，并将自己的控件绘制到该窗口上
  3. 封装窗口的消息，并分发到自己的控件上，让自己的控件根据消息进行相应和绘制
  4. 根据不同的行为发送自定义消息给窗口，以便程序进行调用。
  5. 一般窗口上控件的组织使用 XML 来描述

一个完善的 DirectUI 库有一些优势是 Win32 控件方式难以实现的。例如基于 DirectUI 的界面可以完全换肤 ，有着更高的效率，容易实现更加绚丽的动态效果。
采用 基于 DirectUI 开发 UI 库 的软件有：

  • 迅雷 7–XLGraphic

迅雷7.png

  • 腾讯 QQ2009

腾讯QQ2009.png

duIlib – 小巧灵活的皮肤引擎

Duilib 是一款被众多知名软件广泛使用的，开源的 directui 界面库。
Duilib 界面库的出现解决了使用传统 MFC 界面库开发软件不美观、界面细节处理不好、使用硬编码、开发效率低下、生成程序体积大等问题。而且传统 MFC 界面美化库大都使用 HOOK 等对系统影响比较大的技术，可能会导致系统不稳定或者引发其他错误。而 Duilib 界面库完全基于 GDI 在窗口上自绘，无其他依赖，未使用特殊或危险的系统调用，能够很好的解决传统 MFC 界面的一系列问题。
采用 duilib 做为界面库的软件有：

  • 酷我音乐

酷我音乐.png

  • 百度杀毒

百度杀毒.png

  • 360 卫士

360卫士.png

具体参考 duilib 基础篇：酷我音乐和开发
但是 duilib 存在着一些缺陷（以下摘自 duilib 的作者在知乎的回答）：

  • 首先承认 duilib 开发人员能力不足吧，在项目开发、文档编写、宣传推广、构建社区方便存在非常大的不足。
  • duilib 项目定位也是迎合互联网桌面软件小而美的趋势发展起来的。并不适用于所有软件产品的 ui，这和 mfc、qt 这种大而全的 ui 库是有区别的
  • duilib 毕竟只是一个开源工具性产品，除了 ui 开发人员，其他人关注的少也是正常的。而且 duilib 代码一般是被编译进其他软件里面，非专业人士一般不会知道也不会关注这个软件界面用什么做的

MFC – 历史遗留的古老框架

MFC 的主要优点是可以用面向对象的方法来调用 Windows API，以及能够更加便捷地开发应用程序。MFC 将很多应用程序开发中常用的功能自动化，并且提供了文档框架视图结构和活动文档这样的便于自定义的应用程序框架。同时，在 Visual C++ 内部也内建了很多对 MFC 的例如类向导这样的支持以减少软件开发的时间。
MFC 这个框架里面有不少值得学习的设计思想，比如撇开语言提供给的 RTTI（当时 C++ 不支持 RTTI），消息映射，Command 路由等等，GUI 方面用框架的类对象封装 Win32 SDK 的 native 对象。其中 MFC 中最最频繁的一个思想就是各种“表（table）驱动”
虽然 MFC 的源代码对用户是完全开放的，但是 MFC 的一些封装过程过于复杂，以致于新用户很难迅速掌握 MFC 的应用程序框架，以及在调试中定位问题的位置。同时，很多 MFC 对象不是线程安全的，致使在跨线程访问 MFC 对象时需要编写额外的代码。另外，MFC 的很多类依赖于应用程序向导生成的代码，使得在使用 Visual C++ 中其他类型的应用程序向导生成的工程中添加 MFC 支持的难度大大增加。MFC 开发界面想做得好看一些十分困难，引用第三方基于 MFC 的界面库代码也是比较混乱。自始至终 MFC 最广为诟病的一个缺点就是“臃肿不堪”。
MFC 更加适合开发一些不在乎分发的软件程序。也就一些历史包袱比较重且行业水平也就那样的机械、军工行业或者部分院校还在使用。
C++ 之父 Bjarne Stroustrup 对 MFC 的评价，部分片段：

毫无疑问，MFC 是迄今为止被广泛运用的最糟糕的基础库。它违反了一个好的 C++ 设计应该遵循的大多数原则。它严重地扭曲了许多程序员对于“什么是 C++”的看法！
C++ 往往被以“很不理想”的方式使用着，MFC 就是一个典型的例子，它甚至还达不到 80 年代中期对一个良好的 OO 设计的看法！我所说的“不理想”，是指没有达到它所能达到的可维护性的设计（通常这是由于对设计决策的糟糕的分解、低劣的封装以及对概念的拙劣表达而造成的），而并非指在外部压力下要尽快把项目赶出来的个体程序员或团队的“不理想”。

曾经使用 MFC 的软件有：

  • 瑞星杀毒

瑞星杀毒.png

Qt – 跨平台的软件开发工具包

Qt 一直以来被许多用户作为跨平台客户端开发的首选，其功能强大、支持的操作系统丰富、与 C++ 结合紧密，其在某些特定领域(如嵌入式领域、军工、安防监控领域等)非常受欢迎。
digia 接手 QT 后开发出了安卓和 IOS 版本的 QT，实现了开发一套程序可以在全平台运行。但目前不建议使用 QT 开发安卓和 IOS 应用，坑还比较多但肯定会越来越完善。

QT 框架优势

  • 优良的跨平台特性
  • 面向对象
  • 丰富的 API
  • 支持 2D/3D 图形渲染，支持 OpenGL
  • 大量的开发文档
  • XML 支持
  • 事件处理的便捷（灵活的信号槽机制）
  • Qt 架构健壮，性能强大

由于功能的全面，也导致了一些问题：

  • Qt 的库比较大
  • 编译速度慢
  • 网络模块特性和性能不是很高

采用 Qt 的软件有很多：

  • 著名的跨平台图型环境 KDE Plasma 4著名的跨平台图型环境 KDE Plasma 4.png
  • 战网 的登录界面

战网 的登录界面.png

  • Opera
    Opera.png

  • WPS Office

  • WPS Office.png

WPF – 新的 Windows 桌面应用开发模式

WPF（Windows Presentation Foundation）是微软推出的基于 Windows Vista 的用户界面框架，属于.NET Framework 3.0 的一部分。它提供了统一的编程模型、语言和框架，真正做到了分离界面设计人员与开发人员的工作；同时它提供了全新的多媒体交互用户图形界面。
WPF 其实不仅仅是图形引擎而已，它将给 Windows 应用程序的开发带来一次革命，因为新的架构提供了一种全新的开发模式。当然对于普通用户而言，最直观的就是界面越来越漂亮，看起来越来越舒服了；但对于开发人员而言，界面显示和代码将更好的得到分离，这与从前的桌面应用程序开发有很多不同（界面设置和代码是融合在一起的），这是比较具有革命性的改变之一。
程序人员与美工人员明确分工，美工人员可以使用 Expression Studio 中套装工具可视化的设计界面。然后交给程序开发组中的 XAML 就可以。让程序人员直接套用到开发环境，不需要想页面怎么切了。
对与 WPF 最重要的特色，矢量图的超强支持 。兼容支持 2D 绘图，比如矩形、自定义路径，位图等。文字显示的增强，XPS 和消锯齿。三维强大的支持。包括 3D 控件及事件，与 2D 及视频合并打造更立 体效果。渐变、使用高精确的（ARGB）颜色，支持浮点类型的像素坐标。这些对 GDI+ 远远不及的。
灵活、易扩展的动画机制！.Net Framework 3.0 类库提供了强大的基类，只需继承就可以实现自定义程序使用绘制。接口设计非常直观，完全面向对象的对象模型。使用对象描述语言 XAML。使用开发工具的可视化编辑。
您可以使用任何一种.Net 编程语言（C#，VB NET 等开发语言）进行开发。XAML 主要针对界面的可视化控件描述，成生进会分析成.cs 或.vb 文件，并最后将编译为 CLR 中间运行语言。

WPF 优势

  • WPF 制作的界面更加美观，漂亮。
  • WPF 开发模式更加科学，可以实现开发和界面设计分离

WPF 缺点

  • 开发的程序执行效率不是很高。
  • 学习成本比较高

采用 WPF 的软件：

  • 腾讯 概念版 QQ
    在实现 IM 的基础功能外，QQ 概念版全面实现了多点触摸操作，还推出了动感相框、动态背景、多 Tab 聊天窗口、3D 交互、矢量界面。

  • Microsoft Visual Studio 2010Microsoft Visual Studio 2010.png

多平台通用的 UMP

在 Windows 10 中，微软首次引入了 UWP（通用 Windows 平台）的概念，让开发者只需一次编写，就能让程序在电脑和手机等多种设备上运行。同时，由于所有 UWP 应用均需要通过应用商店审核，也解决了传统 EXE 软件安装繁琐、权限过高、卸载残留的弊病。
有兴趣可以了解什么是 UWP

CEF – 兼容 HTML5 的浏览器控件

Chromium Embedded Framework (CEF)是个基于 Google Chromium 项目的开源 Web browser 控件（俗称谷歌亲儿子），支持 Windows, Linux, Mac 平台， 其包含 C/C++ 程序接口，能够完美的与 C++ 库集成，完善的支持 Html5 Web 页面开发，并且可以通过修改编译选项和源代码后编译的方式来实现剪裁 CEF 和提供原 CEF 没有的功能，定制自己的窗口类型。
优点：

  • CEF 可以通过编译和修改源代码的方式来定制
  • 可以通过 C++ 控制窗口类型，支持透明窗口
  • 能够使用最新的 CEF 来兼容最新的 Javascript 标准和 CSS，或者固定 CEF 的版本来支持 Windows XP
  • 底层与 C++ 集成容易•可以使用 Javascript 来开发 UI，C++ 实现大计算量的任务

缺点：

  • 与操作系统相关的功能，如读取注册表、写文件等功能，需要 C++ 实现，增加了一些 C++ 开发的工作量
  • 不经过裁剪的 CEF，安装包会过大
  • 对于要实现透明窗口和集成大量的 C++ 模块的应用，CEF 是个不错的选择。

CEF 的典型应用场景包括：

  • 嵌入一个兼容 HTML5 的浏览器控件到一个已经存在的本地应用。
  • 创建一个轻量化的壳浏览器，用以托管主要用 Web 技术开发的应用。
  • 有些应用有独立的绘制框架，使用 CEF 对 Web 内容做离线渲染。
  • 使用 CEF 做自动化 Web 测试。

采用 CEF 的软件：

  • 各种浏览器
    各种浏览器.png
  • GitHub Client (on Windows)
    GitHub Client (on Windows).png

Electron – 用前端的知识来开发桌面应用

Electron（原名为 Atom Shell）是 GitHub 开发的一个开源框架。 它允许使用 Node.js（作为后端）和 Chromium（作为前端）完成桌面 GUI 应用程序的开发。具体可以参阅 electron 官网
随着 PC 机不断提升的机器性能以及 H5 标准的发展，利用 JS 语言依靠 Browser 为载体的 B/S 体系软件，有着很强的交互表现力，使用 Html/JS 作为 UI 的开发语言，可以十分高效快速的完成各种复杂界面（尤其是各种动画效果）开发。目前 Electron 已成为开源开发者、初创企业和老牌公司常用的开发工具。
一个基础的 Electron 包含三个文件：

  • package.json（元数据）
  • main.js（代码）
  • index.html（图形用户界面）

框架由 Electron 可执行文件（Windows 中为 electron.exe、macOS 中为 electron.app、Linux 中为 electron）提供。开发者可以自行添加标志、自定义图标、重命名或编辑 Electron 可执行文件。
采用 Electron 的软件：

  • VSCode

Atom.png

  • Atom

Atom.png