Analysis of key features of OpenHarmony 3.1 Release version - what are the new capabilities of the ArkUI framework?

ArkUI is a set of UI development framework, which provides the necessary capabilities for developers to develop application UI. With the release of OpenAtom OpenHarmony (hereinafter referred to as "OpenHarmony") 3.1 Release (hereinafter referred to as v3.1), the ArkUI framework has also added many new capabilities. Let's take a look at the new capabilities.
Overview of new capabilities of ArkUI framework <br>This version update mainly improves the ability of ArkUI framework to develop large-scale applications . As shown in Figure 1, the blue modules are the new/enhanced capabilities of this new version of ArkUI framework, which include: Canvas, OffscreenCanvas, XComponent components, Web components, keyboard and mouse, and eTS compilation and packaging and real-time preview capabilities.

 图1 ArkUI框架新增能力概览图

Every new capability is added to enable developers to develop more efficiently and conveniently. Let’s take a look at the convenience these new capabilities will bring.
In order to facilitate everyone's understanding, the new capabilities are divided into the following three categories: new declarative Canvas drawing capabilities, new hybrid development capabilities, and enhanced UI development capabilities.
Added Declarative Canvas Drawing Capability <br>New Declarative Canvas Drawing Capability includes Canvas component and OffscreenCanvas component.
● Canvas component: In order to facilitate developers to implement custom UI effects by drawing, the v3.1 version adds the Canvas drawing capability.
● OffscreenCanvas component: In order to meet the developer's off-screen drawing development scenarios, the v3.1 version adds the off-screen drawing capability.
With the Canvas drawing capability, the v3.1 version ported Lottie's animation library based on Canvas for developers to use, which will be described in detail later.

New Hybrid Development Capability <br>New Hybrid Development Capability includes XComponent and Web Components.
● XComponent: In order to facilitate developers to build C++/TS applications on the OpenHarmony system to meet application development scenarios such as games and maps, v3.1 provides XComponent and its supporting NDK (native development kit, native development kit). ).
● Web components : In order to meet the needs of developers to load and access HTML5 web pages in applications, v3.1 focuses on building web components and provides rich APIs to support data interaction between HTML5 pages and TS pages.

Enhanced UI development capability <br>Enhanced UI development capability includes enhanced unified interaction between keyboard and mouse components and enhanced eTS compilation, packaging and real-time preview capabilities of the development tool chain.
● Keyboard and mouse: The new version also focuses on improving the operation experience of unified interaction. Developers can support users to use keyboard and mouse for UI interaction without complicated adaptation.
● eTS compilation and packaging and real-time preview : In order to meet the requirements of unified setting of various state styles, the v3.1 version provides the @Style decorator, which optimizes the compilation performance and preview performance of the toolchain, and supports large-scale applications with various files. compile.
After reading these new capabilities, you may be curious, how are they used? Let's take a look at how to use these new capabilities.

Added declarative Canvas drawing capability

Introduction to Declarative Canvas <br>First of all, let's introduce the drawing capabilities provided by Declarative Canvas. In order to make better use of the existing Web Canvas ecosystem, the v3.1 version provides a standard W3C Canvas drawing interface (as shown in Figure 2). The rich drawing methods allow developers to efficiently draw rectangles, texts, images, etc.
Note: Since OffscreenCanvas and Canvas have the same drawing interface, they both follow the w3c standard, so they will not be repeated here.

Usage <br>The following is an example to show you the basic usage of Canvas components in the declarative development paradigm.
Figure 3 is the effect of three images superimposed, the top image covers the bottom image. By using the drawImage(x, y, width, height) method to set the image coordinates and size in turn, the image drawn later will automatically cover the original image, so as to achieve the effect of image overlay display.

As shown in the code below, a canvas is first created in the Column() component, and the canvas is declaratively described by combining built-in components and property methods.
Then obtain the imperative drawing object through RenderingContext(), and associate the declarative UI interface with the imperative drawing well.
Finally, use the imperative syntax directly through the onReady callback method to use the drawing object to draw on the canvas.

 @Entry
@Component
struct IndexCanvas  {
// 然后，获取绘图对象
    private ctx: RenderingContext = new RenderingContext(this.settings);
// 列出所要用到的图片
    private img: ImageBitmap = new ImageBitmap("common/bg.jpg");
    build() {
        Column() {
            // 首先，创建canvas画布
            Canvas(this.ctx)
                .width(1500)
                .height(900)
                .backgroundColor('#ffff00')
                // 最后，开始绘制
                .onReady(() => {
                    this.ctx.drawImage( this.img, 400, 200, 540, 300);
                    this.ctx.drawImage( this.img, 500, 300, 540, 300);
                    this.ctx.drawImage( this.img, 600, 400, 540, 300);
                })
        }
        .width('100%')
        .height('100%')
    }
}

Declarative Canvas-based Lottie animation support

introduce
Lottie is a commonly used animation format in the industry. It supports rendering through Canvas. The OpenHarmony team has transformed the Lottie library for everyone and named it lottie-ohos-ets. Developers can directly reference the library and bind Canvas components to display animations.
Instructions
The use of Lottie animation is mainly divided into the following four steps:
Step 1 : Prepare Lottie files and add them as resources (you can use AE tools to make and export JSON files)

Step 2: Introduce Lottie-ohos-ets support library
import lottie from 'lottie-ohos-ets'
Step 3: Bind the Lottie animation to the Canvas

 Canvas(this.context)
       .onAppear(() => {
          //  随Canvas布局自动加载动画
          let anim = lottie.loadAnimation({
            container: this.context,
            renderer: ‘canvas’,
            name:‘animation’,
            path: ‘common/lottie/ventilation_1.json’
          })
        })

Step 4 : Display the animation

Add hybrid development capabilities

C++/TS hybrid development capability based on XComponent
Introduction <br>In the process of application development, many scenarios cannot be directly implemented by UI combination. For example, applications such as games and maps need to rely on C++ and SDK for independent rendering, and applications such as cameras and video players need to use The camera is previewed, so the framework needs to provide a component that can be drawn on the C++ side, so the v3.1 version introduces the XComponent component, which can support C++/TS hybrid development.
As shown in Figure 4, the system is divided into application layer, framework layer and system service layer, and the blue modules are newly added capabilities. The v3.1 version provides declarative XComponent components in the framework layer for developers to use in application pages.

How to use <br>In the application layer, developers can use the standard library provided by the system NDK to develop application dynamic libraries. The standard library provides standard EGL/OpenGLES interfaces for application drawing, which can support the direct introduction and use of third-party SDKs. Combined with the interface provided by XComponent of the framework layer, C++ can be rendered.
The C++/TS hybrid development based on XComponent components is mainly divided into the following steps:
Step 1: The first is to develop the C++ dynamic library. Based on the NDK compilation tool, the CPP file written by the developer is compiled into a .so file.
The developer only needs to import the header file and overwrite the OnSurfaceCreate method to draw to use the OpenGLES interface provided by the NDK to realize the drawing effect. code show as below:

 // C++ 渲染模块
#include <ace/xcomponent/native_interface_xcomponent.h>
#include <EGL/egl.h>
#include <GLES/gl.h>
#include <stdio.h>
// NDK
void OnSurfaceCreate(OH_NativeXComponent* component, void* nativewindow)  {
         mEglWindow = static_cast<EGLNativeWindowType>(nativewindow);
    mEGLSurface = eglCreateWindowSurface
        (mEGLDisplay, mEGLConfig, mEglWindow, winAttribs);
    // GLES Logic……
    eglSwapBuffers(display, eglsurface);
}

Step 2: Then load the dynamic library through the XComponent component. Call the TS interface, control the C++ logic through the TS, and pass in the data and events to render the C++ logic.
The use of XComponent components is also extremely simple, and the loading can be realized by setting the parameters corresponding to the dynamic library name. code show as below:

 XComponent({ id: 'xcomponentId', type: 'texture',  libraryname: 'mynativerender'})

HTML5/TS hybrid development capability based on web components

Introduction <br>Some application development scenarios are to embed web pages in applications. The web pages may be local pages or web pages, and data transfer between HTML5 pages and native components is required. For the above development scenarios, the v3.1 version provides HTML5/TS hybrid development capabilities based on Web components.
Instructions
The use of web components is mainly divided into the following steps:
Step 1: First prepare the HTML5 page file or network address in advance
Step 2 : Then load the HTML5 page with Web Components
Step 3: Finally, the content of the page can be displayed. Here is an example to show you the steps of using the Web component to load the page. As shown in Figure 5, this is a common web component usage scenario. First, prepare the network address https://openharmony.cn and arrange the web components and other components in a vertical layout on the same page, and then use the web components to pass the src specifies the home page link and loads the page, and finally the page is built.


Web components also provide the ability to interact with HTML5 pages and native TS pages. It can support executing JavaScript methods defined in HTML5 pages in native component pages, and can also support using JavaScript objects injected in native pages in HTML5 pages. Due to the limited space, the above capabilities will not be introduced here. Developers can access community development documents and build web applications with stronger capabilities based on the examples of the runJavaScript method and the registerJavaScriptProxy method.
community development documentation
https://gitee.com/openharmony/docs/blob/master/en-us/application-dev/reference/arkui-ts/ts-basic-components-web.md
Enhanced UI development capability <br>The unified interaction capability of keyboard and mouse components is enhanced In the v3.1 version, the ArkUI framework has enhanced the unified interaction capability, which simplifies application development. As shown in Figure 6, the v3.1 version unifies the mouse and keyboard at the component level, and shields the differences in input device types through the same event callback, so developers do not need to care about specific input device types.

The eTS compilation and packaging and real-time preview of the development tool chain<br>The development tool chain DevEco Studio has also been enhanced with the v3.1 version update. The enhanced tool has realized the ability to support the compilation of large-scale applications with various files and has sub-second High-level real-time preview effect, component bidirectional preview capability, and real-time viewing of component properties, and the real-time viewing effect is on par with the industry. Developers are welcome to update the latest DevEco Studio for experience.
Finally, I will introduce the new decorator @Style provided by the v3.1 version. This decorator can set styles uniformly and reuse styles. At the same time, the v3.1 version provides a one-time setting interface for polymorphic effects, which can maximize the reuse of style settings. As shown in Figure 7, three styles are defined on the left through @Style, and then set to the UI component through the stateStyles property method on the right to achieve the three effects shown in Figure 8, namely the normal state effect, the pressed state effect and the Disable status effects.


Conclusion <br>The above is all the introduction of the new capabilities of the ArkUI framework in this issue. Welcome everyone to try it out. At the same time, the ArkUI framework will further improve the dynamic layout capabilities and launch related capabilities such as cross-OS platform deployment in the future. Please look forward to it!