This is the 26th day of my participation in the First Challenge 2022

Author: Nuts

Public account: “Big Front End Tour”

Huawei Cloud sharing expert, InfoQ contract writer, Ali Cloud expert blogger, 51CTO blog chief Experience officer, one of the open source project GVA, focusing on the sharing of big front-end technologies, including Flutter, applets, Android, VUE, JavaScript.

Without realizing it, we’ve tried a lot of development approaches

And the experience gave me some insight,

Ets to the target Flutter

Js to the small program

Java versus Android

But so far, I have not played hongmeng development in a low code way, today to experience.

Before we do, check it out

What is low code

Low code development is the ability to quickly generate applications with little or no code. In other words, enterprise application development is done in a “drag and drop” way.

HarmonyOS has a low code development style and extensive UI editing capabilities. The HarmonyOS visual layout helps reduce time costs and improve UI construction efficiency.

Low code development features include UI development that supports JS applications/services or services and development of service cards.

Develop applications or services with low code

There are two ways to develop applications or services with low code:

  • Create a new project that supports low code development and develop a UI interface for your application or service.
  • In existing projects, create JS Visual files to develop application or service UI interface.

Create new projects to support low code development

In the engineering template, the engineering module with low code development is provided. You can directly select an engineering template that supports low code development to develop the UI interface of the application or service. Currently, two engineering templates “Empty Ability” and “Sport and Health Ability” are supported. Supported device types include Phone, Tablet, and Wearable.

instructions

This feature is supported in DevEco Studio 3.0 Beta2 and later, and compileSdkVersion must be 7 or higher.

Let’s take creating an Empty Alibity project template as an example.

1 Open DevEco Studio and create a new project using Empty Ability.

2. Select Super Visual to develop applications/services with low code development functions. Click Finish to wait for project synchronization to complete.

After synchronization is complete, the low-code directory structure is automatically generated in the project directory.

  • Pages > index > index.js: logic description file of low-code pages, which defines all logical relations used in the page, such as data, events, etc. For details, see JS syntax Reference. If multiple low-code pages are created, multiple page folders and corresponding JS files will be generated in the Pages directory

  • Pages > index > index. Visual: Visual file storage low code page data model, double-click the file can open the low code page, visual development design. If multiple low-code pages are created, multiple page folders and corresponding Visual files will be generated in the Pages directory.

3 Open the page. Visual file to design and develop the visual layout of the page.

  • To use other controls that do not support visual layout during the low-code interface development, click after the low-code interface development is completeButton to convert a low-code interface to HML and CSS code.Pay attention to, the code conversion operation will delete the Visual file and its parent directory, and it is an irreversible process. After the code conversion, it cannot reverse generate the Visual file through HML/CSS file

  • For multi-device scenarios, click the device/mode switch button in the upper right corner of the canvasTo switch devices or modes.

Add JS Visual to existing projects to support low code development

In the existing HarmonyOS project, you can develop the UI of your application or service using low code by creating JS Visual files. The device type can be Phone, Tablet, Wearable device, and ompileSdkVersion must be 6 or later.

  1. In the open JS project, select the pages folder of the module, right click and choose New > JS Visual.

  2. In the dialog box that appears, enter JS Visual Name and click Finish.

    After JS Visual is created, a low-code directory structure is automatically generated in the project, as shown in the figure below.

Low code multilingual support

Low-code pages support multilingual capabilities, freeing application developers from having to develop multiple versions in different languages. Developers can use multilingual capabilities by defining resource files and referencing resources.

  1. Creates a multilingual resource file and string information in the specified I18N folder.

Low code screen adaptation

For screen fit issues, low code pages support two configuration approaches.

  • Specify designWidth to 720px. DesignWidth is the logical screen Width. All sizing styles (e.g., Width, FontSize) are scaled in proportion to designWidth and the actual screen Width. For example, when Width is set to 100px, on a screen with an actual Width of 1440 physical pixels, Width actually renders 200 physical pixels.
  • Set autoDesignWidth to true so that the designWidth field is ignored and components and layouts are scaled by screen density when rendered. Low-code pages only support scenes with resolution 1080*2340 (P40) and screen density 3, where 1px is equal to rendering 3 physical pixels. For example, if Width is set to 100px, Width will actually render at 300 physical pixels.

Low code development interface introduction

1: **UI Control: **UI Control bar, you can select the corresponding components and drag them to the Canvas to add controls.

2:Component Tree: component tree, in the low code development interface, it is convenient for developers to intuitively see the component hierarchy, summary information and error messages. Developers can quickly locate components in the canvas by selecting components in the component tree (the corresponding components in the canvas are selected synchronously). Click after componentorIcon to hide/show the corresponding component.

3: Panel: function Panel, including commonly used canvas zoom in and out, undo, show/hide component virtual border, device switch, mode switch, visual layout interface into HML and CSS files by one click, etc.

4: Canvas: in this area, developers can drag and pull components and other visual operations to build UI layout effects.

5: Attributes & Styles: Attribute Styles bar. After selecting the component in the canvas, you can configure the attribute Styles for that component in the property style bar on the right. Include:

  • Properties: the correspondingIcon: used to set the attributes of basic component identification and appearance features, such as component ID and If.

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

  • Feature: the correspondingIcon that sets component-specific styles, such as the FontSize style that describes the Text size of the Text component.

  • **Flex: ** correspondsIcon to set Flex layout related styles.

  • **Events: ** correspondsIcon to bind related events to the component and set the callback function for the bound event.

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

  • **Grid: ** correspondsIcon that sets Grid layout styles. This icon only appears when the Div component’s Display style is set to Grid.

  • **Atom: ** correspondsIcon for settingAtomic layoutRelated styles.

Low code development cases

The first page has a container, Text, and a Button, implemented through the Div, Text, and Button components.

  • Open the

    “Page. The visual”

    File, right-click the component in the canvas, and select Delete to Delete the original template component of the canvas. The operation is as follows:

  • Select the Div component in UI Control and drag it onto the canvas. Click the style icon in the properties style bar on the right

    (General), sets the Height of the Div component to 100% so that it fills the screen; Click the style icon in the properties style bar on the right

    (Flex), set the FlexDirection style of the Div component to Column so that the main axis of the Div is vertical; The Div component’s JustifyContent style was set to center, leaving its children centered on the spindle. Set the Div component’s AlignItems style to Center so that its children are centered on the cross axis. The operation is as follows:

  • Select the Text component in UI Control and drag it to the center area of the Div component. Click the properties icon in the properties style bar on the right

    (Properties), set the Content property of the Text component to “title”; Click the style icon in the properties style bar on the right

    (Feature), set the component’s FontSize style to 60px to enlarge its text; Set the TextAlign style of the component to Center so that the text of the component is centered. Select the Text component on the canvas and drag to enlarge it. The operation is as follows:

  • Select the Button component in UI Control and drag it under the Text component. Click the properties icon in the properties style bar on the rightSet the Value property of the Button component to “Next” and click the style icon in the Properties style bar on the right(Feature), set the component’s FontSize to 39px to enlarge its text; Select the Button component on the canvas and drag to enlarge it. The operation is as follows:

Create another page

  1. In the Project window, choose Entry > SRC > Main > JS > Default > Pages in the Project, right-click, and choose New > JS Visual. After creation, click “Confirm” button in the prompt box to create page2. Visual file directory structure is as follows

The second page has a container and Text, implemented by the Div, Text component.

Realize page hopping

  1. In the Project window, open “Entry > SRC > main > js > default > Pages > index> index.js” in the Project, and import the Router module. The router will find the target page according to the URI of the page. Thus realize the jump. Example code is as follows:
import router from '@system.router'; Export default {data: {title: "big front-end trip ", isHarmonyOS: true, next:" Next page ",}, switchTitle() {let that = this; that.title = that.isHarmonyOS ? "Hello World" : "Hello HarmonyOS"; that.isHarmonyOS = ! that.isHarmonyOS; }, launch() {router. Push ({uri:'pages/page2/page2', // specify the page to jump to})}}Copy the code

Open “Index.Visual” and select the Button component on the canvas. Click the event icon in the properties style bar on the right(Events), Click the input box of Click event, select launch event, and the operation is as follows:

3. Run the project using the preview or simulator again, and the effect is as shown below:

Ok, that’s all for today’s tutorial.