Huawei has officially released the DevEco Studio version 2.2 Beta 1. The latest update brings two new features, low-code development, and remote real phone. The following is an introduction to the update.

Highlight 1: Low-code development for JS framework

Low-code development is a new visual interface development method for JS framework added by DevEco Studio 2.2 Beta1. It follows the HarmonyOS JS development specification and has rich page editing functions. Developers can complete interface development and JS logic association on low-code pages by dragging and copying components, which greatly reduces the developer’s hands-on cost and improves the efficiency of user interface development.

Official website development specifications:

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-js-overview-0000000000500376

Developers can click the right mouse button under the directory “js>pages” in the project and select New> JS Visual to create a new low-code page.

When creating a low-code page (as shown in Figure 1), the system will automatically generate the corresponding visual file and js file, and the directory structure of the two files is the same. Among them, the visual file stores the data model of the low-code page. Double-click the file to open the low-code page for visual development. The js file describes the behavior logic of the low-code page, and defines all the logical relationships used in the page, such as data, events, etc.

Note: When using low-code page development, the same level directory of the associated js file, that is, js>default>pages>page directory cannot contain hml or css files, otherwise the compilation error will be reported.

Demonstration of creating low-code pages

The interface after the low-code page is successfully created is shown in Figure 2, which consists of five parts: component bar, component tree, canvas, function panel, and attribute style bar. The relevant operations performed by the developer on the low-code page will be saved in the visual file.

Low code page

1. Low-code page composition:

① Component bar (UI Control)

Located at the upper left of the low-code page, select the component in the component bar and drag it to the middle canvas to add a component.

② Component Tree

Located at the bottom left of the low-code page, developers can visually see the hierarchical structure, summary information, and error prompts of the components through the component tree. The developer selects the component in the component tree to realize the rapid positioning of the component in the canvas.

Search boxHongmeng HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Enter the control type in the search box, such as “Image”, and all the components of the “Image” type are displayed in the component tree.

Drop-down boxHongmeng HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Click the drop-down box of the nested component to show/hide the sub-components in the nested component in the component tree.

Eye icon HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Click the eye icon of a non-nested component, the component will be hidden in the canvas, and the eye icon will changeHongmeng HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine; click the icon again, the component will reappear in the canvas, and the eye icon will change backHongmeng HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine; click the eye of the nested component The icon, the component and its sub-components will be hidden/displayed in the canvas at the same time.

Summary information: For components such as Div and Image, the summary information bar displays the ID of the component; for components such as Text, Button, Input, and Span that can set the text content, the summary information bar displays the corresponding text content.

Error promptHongmeng HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: When the component has an error, a small red dot appears on the right side of the component, click the small red dot with the mouse, and detailed error information of all components appears. The scope of error information includes: data binding and method binding errors.

③ Canvas

Located in the middle of the low-code page, developers can visually edit the components in this area, such as drag and drop, copy, cut, paste, etc., so as to achieve the needs of quickly editing the UI interface.

④ Function panel (Panel)

Above the canvas is the functional panel area, including canvas zoom in/out buttons, undo/redo buttons, show/hide component virtual border buttons, and code conversion buttons.

⑤ Attributes & Styles

It is located on the right side of the low-code page. After selecting the component in the canvas, the developer can modify the component’s properties, style and binding events in the property style bar. When setting properties (Properties) and binding events (Events), developers can directly associate the data and methods in the js file in the low-code page, thereby defining the business logic of the low-code page.

Properties – HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: It is used to set the properties of the component’s basic identification and appearance display characteristics. Such as component ID, If and other attributes.

General -HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Used to set general styles such as Width, Height, Background, Position, and Display.

Feature-HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: used to set the unique style of the component, such as the FontSize style that describes the size of the text.

Flex -HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Used to set Flex layout related styles.

Events -HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Bind related events to the component, and set the callback function of the bound event.

Dimension-HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Used to set Padding, Border, Margin and other styles related to the box model.

Grid -HarmonyOS development essential tool, Huawei DevEco Studio 2.2 Beta 1 released: support low-code development, remote real machine: Used to set Grid layout related styles. This icon will only appear when the Div component’s Display is set to Grid.

2. Low-code development also supports real-time preview and multi-language functions:

Support real-time preview of visual files

When developers modify the page layout through low-code pages, the previewer can present the modified design effect in real time, improving the efficiency of interface development and design (as shown in Figure 3).

Support multi-language ability

In order to meet the development needs of developers for multi-language versions, low-code pages have introduced multi-language capabilities. Developers can use multi-language capabilities by defining resource files and referencing resources in two steps (as shown in Figure 4). Step 1: Place language resource files in the designated i18n folder. Step 2: In the attribute style column of the low-code page, use the $t method to reference the resource, and the system will display the content in the resource file of the corresponding language according to the current locale and the specified resource path. Meet the development needs of developers in multi-language versions.

Highlight 2: New remote real machine

In order to solve the problem that it is difficult for developers to obtain the resources of the HarmonyOS real device, DevEco Studio 2.2 Beta1 has launched a remote real device.

The remote real device is a real device resource deployed in the cloud. Compared with the remote simulator, the remote real device’s interface rendering and operating experience are smoother, and it can also better verify the running effect of the application on the device, such as performance, mobile phone Network environment, etc.

Currently, the remote real phone only supports two device types: Phone and Wearable. Developers can open the device list by clicking “Tools> Device Manager”, click the Remote Device tab, log in to the real-name account, and apply for remote real-device resources (as shown in Figure 5).

Reminder: Developers need to sign the application if they want to debug and run the application on the remote real machine

in addition to the above two new features, DevEco Studio 2.2 Beta1 has also made a lot of optimizations on the original basis. The specific optimization points are as follows:

Enhanced features

HarmonyOS SDK adds API Version 6 interface, Stage is Beta.

The distributed simulator function is enhanced, this feature is enabled by default, and there is no need to manually enable it in DevEco Labs.

HiTrace log tracking and analysis capabilities have been enhanced, with new support for timeline view and events view.

Solve the problem that the preview interface (text, image, etc.) will be zoomed when the screen density of the qualifier directory setting is inconsistent with the real device.

Solved the problem that real-name authentication is required when using the remote simulator. After the real-name authentication is completed, it still prompts that real-name authentication is required.

Solved the problem that the remote simulator could not find the device in the list with a small probability.

Solved the problem that there was a small probability that the running simulator could not be found when using the remote simulator to run the application.

(Via)