HarmonyOS development tool: Huawei DevEco Studio released a new version 2.2 Beta 1, with two new features which are low-code development and remote real phone. Let’s check what under this.

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.

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 HTML or CSS files, otherwise, the compilation error will be reported.

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.

Figure 2 Low code page:

1. 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.

2. 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 box:

• 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 box:

• Click the drop-down box of the nested component to show/hide the sub-components in the nested component in the component tree.

For the latest news, join us on our telegram channel: link below

Eye icon:

• Click the eye icon of a non-nested component, the component will be hidden in the canvas, and the eye icon will change
• Click the icon again, the component will reappear in the canvas, and the eye icon will change back
• 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 prompt

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.

3. 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.

4. 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.

5. 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

• 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

• Used to set general styles such as Width, Height, Background, Position, and Display.

Feature

• Used to set the unique style of the component, such as the font size style that describes the size of the text.

Flex

• Used to set Flex layout-related styles.

Events

• Bind related events to the component, and set the callback function of the bound event.

Dimension

• Used to set Padding, Border, Margin and other styles related to the box model.

Grid

• 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:

1. 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).

2. 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.

2. New remote real Phone:

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 phone.

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:

1. HarmonyOS SDK adds API Version 6 interface, Stage is Beta.
2. The distributed simulator function is enhanced, this feature is enabled by default, and there is no need to manually enable it in DevEco Labs.
3. HiTrace log tracking and analysis capabilities have been enhanced, with new support for timeline view and events view.

Problem Fixes:

1. Solve the problem that the preview interface (text, image, etc.) will be zoomed in when the screen density of the qualifier directory setting is inconsistent with the real device.
2. 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.
3. Solved the problem that the remote simulator could not find the device in the list with a small probability.
4. 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.

IF YOU LIKED OUR ARTICLE, YOU CAN FOLLOW US ON OUR GOOGLE NEWS AND TELEGRAM CHANNEL ALSO YOU CAN JOIN OUR DISCUSSION GROUP ON TELEGRAM.