On June 25, DevEco Studio released version 2.2 Beta1, featuring two new features: low code development and remote realtime. Here’s a look.

Highlight 1: Low code development for JS framework

Low Code development is a visual interface development approach for THE JS framework that is added to DevEco Studio 2.2 Beta1. It follows HarmonyOS JS development specifications and features rich page editing capabilities. Developers can complete interface development and JS logical association in low code pages by dragging and copying components, which greatly reduces the cost of developers to get started and improves the efficiency of user interface development.

Website development specification: developer.harmonyos.com/cn/docs/doc…

Developers can in the project “JS > Pages directory, click the right mouse button, choose New > JS Visual” to create a low code page.

When a low-code page is created (as shown in Figure 1), the system automatically generates the corresponding Visual and JS files, which have the same directory structure. Among them, visual file stores the data model of the low code page, double-click the file can open the low code page for visual development. The JS file describes the behavior logic of the low code page, defining all the logical relations used in the page, such as data, events and so on.

Note: When using low-code page development, the corresponding directory of its associated JS file, namely js>default> Pages >page, cannot contain HML or CSS files, otherwise the compilation will report an error.

Figure 1 Creating a low-code page illustration

The interface after the successful creation of the low-code page is shown in Figure 2, which consists of five parts: component bar, component tree, canvas, function panel and attribute style bar. Developers in the low code page related operations, will be saved to the Visual file.

Figure 2. Low code page

1. Low code page composition: ① Component bar (UI Control)

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

② Component Tree

Located in the lower left of the low-code page, the component tree gives developers a visual view of the component hierarchy, summary information, and error messages. Developers select components in the component tree to quickly locate components within the canvas.

• The search box: Enter the control type, such as Image, in the search box. All components of Image type are displayed in the component tree.

• A drop-down box: Click the drop-down box of a nested component to show/hide child components within the nested component in the component tree.

• The eye icon: Click the eye icon of a non-nested component, the component will be hidden in the canvas, the eye icon becomes; Click the icon again and the component will reappear in the canvas with the eye icon changed back; Click the eye icon of the nested component, and both the component and its children will be hidden/shown in the canvas.

• In this paper, information: For Div, Image and other components, the summary information bar displays the component ID; For components that can set Text content, such as Text, Button, Input and Span, the summary information bar displays the corresponding Text content.

• Error message: If a component has an error, a red dot appears on the right of the component. Click the red dot to display detailed error information about all components. Error messages range from data binding to method binding errors.

③ Canvas

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

④ Function Panel

Above the canvas is the function pane, which contains the canvas enlarge/shrink button, undo/redo button, show/hide component virtual border button, and transcoding button.

⑤ Attributes & Styles

Located on the right side of the low-code page, developers can select a component in the canvas and modify its properties, styles, and binding events in the properties style bar. When setting Properties and binding Events, developers can directly associate data and methods in JS files within a low-code page, thus defining the business logic of a low-code page.

• Properties: Properties that set the basic identity and appearance characteristics of the component. Attributes such as component ID, If, etc.

• General: Used to set general styles such as Width, Height, Background, Position, Display, etc.

• Feature: used to set component-specific styles, such as FontSize styles that describe text text sizes.

• Flex: used to set the Flex layout style.

• Events: Binds related events to the component and sets the callback function for the bound events.

• Dimension: used to set the Padding, Border, Margin, and other styles associated with the box model.

• Grid : Used to set Grid Grid layout styles. This icon only appears when the Div component’s Display is set to Grid.

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

① Support the real-time preview of visual files

When a developer changes the layout of a low-code page, the preview shows the effect of the changes in real time, improving the efficiency of interface development and design (see Figure 3).

Figure 3 Real-time preview effect diagram

② Support multi-language ability

In order to meet the needs of developers to develop multilingual versions, the low-code page has introduced multilingual capabilities, which can be used by developers through defining resource files and referencing resources (see Figure 4). Step 1: Place the language resource file in the specified I18N folder. Step 2: In the attribute style bar of the low-code page, use the $T method to reference the resource. The system will display the content in the resource file of the corresponding language according to the current language environment and the specified resource path. To meet the needs of developers in multiple languages.

FIG. 4 Multi-language function setting diagram

Highlight 2: New remote real machine

DevEco Studio 2.2 Beta1 has released a remote true server to address the challenges faced by developers in accessing HarmonyOS real server resources.

Remote real machine is a real device resource deployed in the cloud. Compared with remote simulator, the interface rendering and operation experience of remote real machine are smoother, and the running effect of application on the device, such as performance and mobile network environment, can be verified better.

Currently, only Phone and Wearable devices are supported. 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 the use of Remote real computer resources (as shown in Figure 5).

Tip: Developers need to sign their applications in order to debug and run them on the remote real phone.

FIG. 5 Schematic diagram of remote real machine

In addition to the above two new features, DevEco Studio 2.2 Beta1 has made a number of improvements on the basis of the original.

enhancements

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

Follow Distributed Emulator enhancements that enable this feature by default do not require manual activation in DevEco Labs.

Follow HiTrace Log tracking analysis capability improved, new support for Timeline view and Events view.

Problem solved

Strategies solves the problem of the preview interface (text, image, etc.) being scaled when the screen density set by the determiner catalog is not consistent with the real device.

Strategies for Using a remote simulator Solve the problem of prompting for real name authentication and prompting for real name authentication after completing the authentication.

Strategies solves the problem of remote emulator appearing list with a small probability and not being able to find the device.

Strategies for Strategies Solves the problem of a small probability of not finding a running emulator while running an application using a remote emulator.

Iteration and upgrade, only to serve every you, DevEco Studio is willing to work with developers to create infinite possibilities together.