01 网易 Duilib 框架概述

Duilib 是 Windows 系统下的开源的 DirectUI 界面库(遵循 BSD 协议),完全免费,可用于商业软件开发。

Duilib 可以简单方便地实现大多数界面需求,包括换肤、换色、透明等功能,支持多种图片格式,使用 XML 可以方便地定制窗口,能较好地做到 UI 和逻辑相分离,尽量减少在代码里创建 UI 控件。目前,Duilib 已经在国内有较为广泛的使用。

网易在研发网易易信 PC 版时引入 Duilib,经过多年开发和改进,由网易云信在2019年4月开源。github 地址:(https://github.com/netease-im/NIM_Duilib_Framework/)

网易 Duilib 使用 C++11 重写,在其原有基础上做了较大重构,搭配谷歌的基础组件 Base 库、基于 Chromium 的 WebView 框架 CEF 以及常用的 UI 组件,形成了一套功能强大、简单易用的完整桌面 UI 开发框架。

02 网易 Duilib 整体框架

2.1 整体组件架构

框架中提供了多线程模型、高精度定时器、基本的 xml 解析、zip 解压等功能;封装了一层渲染接口和全局样式资源的统一管理;并且对 DPI 适配、多语言、虚拟键盘、手写板等功能增加了支持;在上层提供了丰富的控件。

2.2 线程模型和消息队列

开发框架中集成了 Chromium 中 base 库的线程模型和消息队列,base 中包含了多种消息循环、异步操作接口。

网易 Duilib 框架中的 UI 消息循环、工作线程都完全依托 base 的线程模型。使用 base 的异步通信能力,我们可以将耗时的工作(如资源解析)放到辅助线程来减轻 UI 线程的压力。

同时,网易 Duilib 中的各种基础组件,都已经继承了 base 中的生命周期检测能力,每个任务在执行时都会先检查与之绑定的对象是否存活,确保多线程操作不会因野指针而导致崩溃。实际项目开发中,使用base的线程模型,我们可以非常简单做到 UI 线程、数据库线程、网络线程、其他工作线程之间的通信与交互,有效提升开发速度。

03 网易 Duilib 的功能特点

3.1 更加丰富的功能

网易 Duilib 框架提供了更加完整和丰富的功能,以满足不同真实业务场景的需求:

  • 丰富的控件、简易的布局
  • 灵活的控件组合、事件处理方式
  • 模块化支持
  • 优化渲染效率
  • 异形窗体支持
  • DPI 适配支持
  • 多国语言支持
  • 通用样式支持
  • 虚表控件支持
  • 虚拟键盘支持
  • 实用的多线程支持
  • CEF webview 支持
  • 控件动画、GIF 动画支持
  • 触控设备支持(Surface、Wacom)
  • 抽象渲染接口(为其他渲染引擎提供支持)

3.2 灵活的布局与组合

网易 Duilib 中,增加了控件与容器的尺寸自适应功能,免去繁琐的手写尺寸。同时增强了布局能力,搭配控件的一些定位属性,可以使用少量 xml 代码来完成更加强大的布局效果。

现在的 UI 库中,把布局、容器、控件等逻辑组件拆分开,让不同的布局可以与任意容器进行灵活的组件。并且弱化了容器与控件的区别,基础控件使用模版来编写,上层使用时可以让它继承不同的控件或模版,让控件本身也可以是容器:

typedef LabelTemplate<Control> Label;
typedef LabelTemplate<Box> LabelBox;
typedef ButtonTemplate<Control> Button;
typedef ButtonTemplate<Box> ButtonBox;
typedef CheckBoxTemplate<Control> CheckBox;
typedef CheckBoxTemplate<Box> CheckBoxBox;

基础控件继承了容器后,就可以拥有控件本身的行为+容器的组合能力。这样做的优点是如果一个基础组件在 UI 上无法满足需求,那么就让他成为容器去任意组合其他的 UI 组件,提升控件的表现能力。同时控件支持在 xml 中编写简单的事件处理逻辑,把一些功能简单的UI控制逻辑放在 xml 中。

3.3 功能强大的 web 展现组件:CEF WebView

CEF(Chromium Embedded Framework)是基于谷歌 Chromium 浏览器内核封装出的跨平台 web browser 组件。

CEF 内部有完整的一套消息循环,我们将网易 Duilib 框架中的 base 线程模型与 CEF 消息循环组合在一起。同时封装CEF的离屏渲染模式(OSR)、窗口模式为网易 Duilib 中的控件 CefControl、CefNativeControl,让 CEF 的 WebView 能力完整的嵌入到网易 Duilib 中。最后我们封装了js与native的通信能力 JsBridge。

如此,我们可以使用 CefControl、CefNativeControl 来做单纯的 web 展示控件,也可以以 WebView 为核心,网易 Duilib 为辅助,开发 web app。UI 层的展现都由 web 页面负责,底层的核心逻辑、数据库、网络等由 C++ 负责,web 与 C++ 使用 JsBridge 通信。

04 应用实例:有道精品课

有道精品课是网易旗下在线教育平台,教师通过在线直播的方式对学生授课,需要一个支持直播、聊天、课件分享、手写板、web、答题互动等功能的客户端让老师使用,因此有道精品课教师端应运而生。

老师可以使用有道精品课教师端进行 PPT、PDF、桌面共享、iPad 投屏、视频播放等多种直播方式 。老师也可以把讲课过程中画板上的板书和课件导出为 PDF 分享给学生。

我们需要让教师端满足各种直播需求的同时,保证开发的速度、易用性、扩展性。
另外,由于音视频、聊天等功能需要消耗大量 CPU 资源,这就要求客户端的 UI 本身只能占用较低的内存和 CPU 资源。基于以上需求,我们使用网易 Duilib 框架进行了有道精品课教师端的开发。

教师端的画板拥有丰富的功能:绘制各种图形图片、图形交互、书写文本、PPT解析、动画、导出 PDF、缩放等等。

画板支持的特性越复杂,就越需要消耗更多的 CPU。为了节省 CPU 资源,我们搭配网易 Duilib 框架中的渲染引擎,设计了6层缓存机制,让画板在支持丰富功能的同时保证极低的 CPU 占用率。

画板多层缓存

依托于网易 Duilib 框架的 UI 组件和渲染能力,教师端画板可以支持手写板笔迹、毛笔,支持绘制各种图形图片,支持画板缩放。

由于老师的课件大多为 PPT 编写,为了让老师授课更加方便,教师端支持导入 PPT。并且使用网易 Duilib 框架的动画能力,来支持展现 PPT 元素的动画,让老师方便播放动画或控制 PPT 元素。

配合网易 Duilib 框架的 WebView 能力,可以把 web 页面融入到画板里,既可以操作网页也可以写书板书,极大增强画板表现力。使用这样的能力,我们可以让教师端支持展现数学互动题、物理实验、化学实验等等内容。

05 不断优化迭代,与开发者同行

目前,我们已经将网易 Duilib 开源。

github 地址:
https://github.com/netease-im/NIM_Duilib_Framework/

欢迎大家使用并与网易 Duilib 同行。

计划在不久之后,我们将支持矢量图来增强 DPI 适配能力,增加更加丰富的动画(帧动画、属性动画、路径动画、特效动画)来提升 UI 库的表现力,并替换性能更好的 skia 渲染引擎。

未来,我们将持续迭代优化网易 Duilib 框架,不断的扩展它的功能。在 github 社区里,已经有很多的开发者参与到项目的迭代中。

欢迎更多开发者朋友的加入。

特别鸣谢:感谢自网易 Duilib 成立以来,为之贡献过以及仍在贡献代码的小伙伴们,包括但不限于 阳光、redrain、harrison 等。

撰文/ Redrain
编辑/ Ryan
来源/ 有道技术团队(ID: youdaotech)

网易 Duilib:功能全面的开源桌面 UI 开发框架相关推荐

  1. 开源邮件客户端_排名前6位的开源桌面电子邮件客户端

    开源邮件客户端 本文最初于2015年10月8日发布,并进行了更新以反映新信息和项目更改. 移动和Web技术仍然没有使桌面过时,尽管有一些常规的说法相反,但桌面客户端似乎并不会很快消失. 并且有充分的理 ...

  2. 谷歌开源的跨平台UI开发框架Flutter

    谷歌开源的跨平台UI开发框架Flutter Flutter是Google一个新的用于构建跨平台的手机App的SDK.写一份代码,在Android 和iOS平台上都可以运行.与React Native. ...

  3. “易+”开源网易易盾 GameSentry 正式开源,做游戏安全保障的尖兵利刃

    The First Line Of Defense - GameSentry 哨兵是守护安全的第一道防线,不停的监视着每一个外敌可能进行渗透的角落.网易易盾的 GameSentry 作为游戏安全战场上 ...

  4. 桌面提醒工具开源_7种开源桌面工具:下载我们的新电子书

    桌面提醒工具开源 Linux用户说选择是该平台的优势之一. 从表面上看,这听起来可能会自我夸大(或者自我贬低,具体取决于您的观点). 其他操作系统也提供了选择,但是一旦您查看了几乎所有您想在Linux ...

  5. 网易数帆发布自主开源计划,聚焦云原生生产落地

    10月21日,一年一度的网易数字+大会在杭州拉开帷幕,网易数帆在会上发布了围绕云原生生产落地的自主开源计划,在这一主题下开源的KubeDiag.KubeCube.Hango(函谷)等云原生项目,以及未 ...

  6. ElectronVite2MacUI 超精美仿macOS桌面UI管理框架|vue3+electron桌面后台

    Electron-Vite2-MacUI 基于vite2.x整合electron仿制mac桌面UI框架. 基于最新前端技术栈 vite2.3+electron13+vue3+element-plus+ ...

  7. Electron-Vite2-MacUI桌面管理框架|electron13+vue3.x仿mac桌面UI

    基于vue3.0.11+electron13仿制macOS桌面UI管理系统ElectronVue3MacUI. 前段时间有分享一个vue3结合electron12开发后台管理系统项目.今天要分享的是最 ...

  8. 一个功能强大的开源简历生成器,太炫了!

    OpenResume 是一个功能强大的开源简历生成器和简历解析器.目标是为每个人提供免费的现代专业简历设计,让任何人都能充满信心地申请工作. 核心优势 「实时UI更新」:当输入简历信息时,简历 PDF ...

  9. 麒麟操作系统1.0(openKylin)——我国首个开源桌面操作系统

    最近看到国产首个开源桌面操作系统"开放麒麟1.0"发布的消息,抱着激动的心情,用虚拟机安装了麒麟操作系统.并进行了体验.我们简单看下它具体是什么样子,话不多说,直接上图. 在经过一 ...

最新文章

  1. Model/View 教程
  2. 操纵浏览器历史记录 : popstate() 、 history.pushState() 、 window.history.pushState()
  3. 作者:张慧(1984-),女,中国科学院软件研究所助理研究员
  4. 深度学习能辨识壁画上的艺术元素吗?
  5. RabbitMQ详解(一)
  6. 三层构架和 MVC 不同?
  7. java导出excel超出65536条处理
  8. Arthas java性能调优/接口优化
  9. 微信小程序开发详细步骤
  10. Unity发布WebGL不显示中文字体问题
  11. iOS模拟器 定位失败或无法定位
  12. 阿里云盘正式上架,速度15MB/s!(附下载链接+阿里云盘邀请码)
  13. 【t006】三角形分形描绘问题
  14. C++ 高级程序设计
  15. 2022年更新宠物 鼠 鱼 十二生肖 宠物养殖系统区块源码
  16. 【读书笔记】Python网络爬虫从入门到实践(第2版)-唐松,爬虫基础体系巩固和常见场景练习
  17. selenium webdriver使用
  18. 不用熬夜了,买菜 App 抢菜插件开源!
  19. ros必备知识点3:rosbag话题的重命名与包的播放
  20. Python自动化学习笔记(八)——接口开发、发送网络请求、发送邮件、写日志...

热门文章

  1. 分组转发和路由选择基础
  2. 批准此iphone 前往已登录iCloud的其他设备来批准这台iPhone
  3. OpenCV分水岭分割算法2
  4. EVE-NG 上传IOL镜像
  5. Linux内存工具解析之RSS/VSS/USS/PSS区别于联系
  6. 测试分类 test catagory
  7. 【AGC035F】Two Histograms
  8. 大数据学习之路-Hive
  9. linux下使用python截图_linux多线程网页截图-python
  10. STM32驱动串口屏,STM32F103C8T6串口发送指令控制HMI串口屏