Netease Duilib Framework Overview
Duilib is an open source Directui interface library for Windows (under the BSD protocol). It is completely free and can be used for commercial software development.
Duilib can easily and easily implement most of the interface requirements, including skin, color, transparency, etc., support a variety of image formats, customize Windows with XML, keep UI and logic separate, and minimize the need to create UI controls in code. Duilib has been widely used in China.
Duilib was introduced by netease in the development of netease Easy Trust PC Edition. After years of development and improvement, Duilib was open sourced by netease Cloud Trust in April 2019. (making address: https://github.com/netease-im…
Netease Duilib is rewritten using C++11, and has been greatly rebuilt on its original basis. It is matched with the Base library of Google, CEF of WebView framework based on Chromium, and common UI components. Forming a powerful, easy to use complete desktop UI development framework.
Netease Duilib overall framework
Overall component architecture
The framework provides multi-threading model, high-precision timer, basic XML parsing, ZIP decompression and other functions; It encapsulates a layer of rendering interface and unified management of global style resources. It also adds support for DPI adaptation, multi-language, virtual keyboard, writing pad and other functions. Rich controls are provided at the top.
Threading models and message queues
The development framework integrates the thread model and message queue of the base library in Chromium. The base contains a variety of message loops and asynchronous operation interfaces.
The UI message loop and worker thread in netease Duilib framework are completely based on the thread model of Base. Using Base’s asynchronous communication capabilities, we can take the strain off the UI thread by putting time-consuming work, such as resource resolution, on the worker thread.
At the same time, the various basic components in netease Duilib have inherited the life cycle detection capability in Base. Each task will first check whether the object bound to it is alive, to ensure that the multi-threaded operation will not crash due to the wild pointer. In actual project development, we can easily communicate and interact among UI thread, database thread, network thread and other worker threads by using the thread model of Base, which can effectively improve the development speed.
Netease Duilib features
Rich features
The netease Duilib framework provides more complete and rich functionality to meet the needs of different real-world business scenarios:
- Rich controls, simple layout
- Flexible control combination, event handling mode
- Modular support
- Optimize render efficiency
- Alien form support
- DPI adaptation support
- Multilingual Support
- Common Style Support
- Virtual table controls are supported
- Virtual Keyboard Support
- Practical multithreading support
- CEF webview support
- Control animation, GIF animation support
- Touch device support (Surface, Wacom)
- Abstract rendering interface (support for other rendering engines)
Flexible layout and combination
Netease Duilib, added controls and container size adaptive function, eliminating tedious handwriting size. At the same time to enhance the layout ability, with some positioning attributes of the control, you can use a small amount of XML code to complete a more powerful layout effect.
Now UI library, the layout, container, control and other logical components are separated, so that different layout can be flexible with any container components. In addition, the difference between container and control is weakened. The basic control is written with a template. When the upper layer is used, it can inherit different controls or templates, and the control itself can also be a container:
typedef LabelTemplate<Control> Label;
typedef LabelTemplate<Box> LabelBox;
typedef ButtonTemplate<Control> Button;
typedef ButtonTemplate<Box> ButtonBox;
typedef CheckBoxTemplate<Control> CheckBox;
typedef CheckBoxTemplate<Box> CheckBoxBox;Once the underlying control inherits the container, it can have the behavior of the control itself + the ability to combine the container. The advantage of this is that if an underlying component does not meet the requirements in the UI, it becomes a container for any combination of other UI components to improve the performance of the control. At the same time, the control supports writing simple event processing logic in XML, and puts some simple function UI control logic in XML.
Powerful Web presentation component: CEF WebView
CEF (Chromium Embedded Framework) is a cross-platform Web Browser component encapsulated based on Google Chromium browser kernel.
There is a complete set of message loops within CEF, and we combined the base threading model in the netease Duilib framework with the CEF message loops. At the same time, it encapsulates the off-screen rendering mode (OSR) of CEF, CefControl and CefnativeControl in the window mode of netease Duilib, so that the WebView capability of CEF can be fully embedded in netease Duilib. Finally, we encapsulated JSBridge, the communication capability between JS and native.
So, we can use CefControl, CefnativeControl to do a simple Web display control, also can take WebView as the core, netease Duilib as the assistant, the development of Web APP. Web pages are responsible for the presentation of UI layer, while C++ is responsible for the core logic, database and network of the bottom layer. JSBridge is used to communicate between Web and C++.
Application example: youdao class
Youdao class is an online education platform owned by netease. Teachers teach students through live streaming, and a client that supports live streaming, chatting, courseware sharing, writing board, Web, question answering interaction and other functions is needed for teachers to use. Therefore, youdao class teacher app arises at the right moment.
Teachers can use the teacher end of youdao class for PPT, PDF, desktop sharing, iPad screen projection, video playback and other ways of live broadcasting. The teacher can also export the blackboard writing and courseware in the class to PDF and share with the students.
We need to get the teacher sideTo meet the needs of a variety of live broadcast at the same time, to ensure the speed of development, easy to use, expansibility.In addition, because audio, video, chat and other functions need to consume a lot of CPU resources, which requires the client UI itself can only occupy a low amount of memory and CPU resources. Based on the above requirements, we use netease Duilib framework to develop the teacher’s end of youdao quality course.
The teacher-side artboard has a wealth of functions: drawing all kinds of graphics and pictures, graphics interaction, writing text, PPT parsing, animation, PDF export, zoom, and so on.
The more complex the features supported by the artboard, the more CPU intensive it will be. To save CPU resources,We designed a 6-layer caching mechanism with the rendering engine in the netease Duilib framework.Let the artboard support rich features while maintaining a very low CPU usage.
Based on the UI components and rendering capabilities of the netease Duilib framework, the Teacher Sketchpad can support the handwriting of the Sketchpad, the brush, the drawing of various graphics and pictures, and the zooming-in of the Sketchpad.
Since most of the teachers’ courseware is prepared by PPT, in order to make it more convenient for the teachers to teach, the teachers support the import of PPT. And the animation ability of netease Duilib framework is used to support the animation of presenting PPT elements, so that teachers can easily play the animation or control the PPT elements.
With the WebView capability of the netease Duilib framework, you can integrate web pages into the artboard. You can either operate the web page or write on the blackboard.Greatly enhance the expressiveness of the artboard.Using this capability, we can allow teachers to support the presentation of interactive math problems, physics experiments, chemistry experiments, and so on.
Iterate and iterate with the developers
At present, we have to netease Duilib open source, making address: https://github.com/netease-im…
You are welcome to use and travel with netease Duilib.
In the near future, we plan to support vector graphics to enhance DPI adaptation, add richer animations (frame animation, attribute animation, path animation, effects animation) to enhance the UI library, and replace the better Skia rendering engine.
In the future, we will continue to iterate and optimize the netease Duilib framework and continue to expand its capabilities. In the GitHub community, many developers have been involved in the iteration of the project.
Welcome more developers to join us.
Special thanks: Thanks to everyone who has contributed and continues to contribute to netease Duilib since its inception, including but not limited to Sunshine, Resdrain, Harrison, etc.
Post/Drain Editor/Ryan Source/youdao Technical Team (ID: YouDaotech)