directory

  • preface

  • The body of the

  • All premise: register hongmeng Developer account

  • Preview the Codelab component as a whole

      1. Obtaining project source code
      1. Open the DevEco IDE
      1. Run the sample program

  • TabList and Tab components

      1. Design layout
      1. Creating an execution class
      1. Association home page
      1. To run the program

  • conclusion

preface

Huawei Hongmeng System is the hope of domestic mobile terminal mobile phone system (not limited to mobile terminal). Although I cannot participate in its research and development, I still want to contribute to the promotion of a wave. Therefore, I always pay attention to its development, such as some periodic breakthroughs and the launch of new major functions.

The body of the

Hongmeng system has been released for so long, and many functions are in the process of improvement.

The system platform will certainly have a lot of wheels for you, and today we’ll take a look at one — the Codelab layout component.

The focus of today’s discussion will also be on the layout component.

All premise: register hongmeng Developer account

This is something that a lot of people overlook, especially those of you who are used to Android development.

This is something I didn’t expect. I originally thought hongmeng System developers would be able to directly develop for mobile terminals, just like Android. Instead, the Hongmeng team chose the same strategy as Apple, requiring a developer account.

This reminds me of “exorcism sword spectrum” in the first type to give a person’s feeling, but the first type of Hongmeng is: want to develop, must register first!

However, one thing Hongmeng has over Apple is free registration.

Registered address: developer.huawei.com/consumer/cn…

The service address page is as follows:

Preview the Codelab component as a whole

Specific steps:

1. Obtain the project source code

Get Codelab toolset start application engineering ComponentCodelab, you can get the source code from the following address.

Gitee Warehouse address: gitee.com/openharmony…

Github repository address: github.com/huaweicodel…

You can choose the location you like to download it. I usually use Github more, so I use the github warehouse address.

2. Open the DevEco IDE

Open huawei’s DevEco Studio integrated development environment, and open our Clone ComponentCodelab sample project.

After opening the project, the interface is as shown in the picture below:

A quick look at the IDE interface shows that it is very similar to Android Studio. If you’ve played Android Studio, you should be familiar with DevEco Studio.

3. Run the sample program

Next, we have two ways to run the program, which are virtual machine mode and physical device mode, which are described below.

1) Running the simulator

1.1 Choose Tools > HVD Manager to open the virtual Device Manager.

After clicking on it, we can see the supported virtual devices, including mobile Phone, TV TV, Tablet, Wearable device, Car. From here, we can also see that Hongmeng system is positioned as the whole Internet of things, and its layout is much larger and far away than Android and apple’S iOS, which is also what Google and Apple are worried about. Hence the rumor that Apple is planning to build its own car.

1.2 Select a P40 device and click the Start button.

At this time, there will be an additional P40 device in our device list, so we choose this virtual device.

1.3 Click Run ‘Entry’ to start the application.

After the program runs successfully, the interface is as shown below:

From the figure above, we can see some of the basic components of Codelab, such as TabList and Tab components, ListContainer components, RadioContainer components, and so on.

The deviceType property of config.json in the configuration file is “TV”. The result is as follows:

You can also choose wearable devices. The interface is as follows:

2) Physical device running

1.1 Click Build >Build App(s)/Hap(s)>Build Debug Hap(s) to Build the Hap package.

The first step is to create the Hap package, similar to Android’s APK.

1.2 Click Run> Run ‘entry’ to Run the Hap package.

From the above examples, we can see that The Hongmeng system can basically achieve the purpose of using a set of code for multiple platforms.

TabList and Tab components

We know that Tablist is one of the more common components of mobile applications to maximize space utilization. Tablist displays the contents of multiple tabs in the same location. Tab indicates a Tab. Subtabs are usually placed above the content area to show the different categories. The page signature should be concise and clearly describe categories of content such as pictures, video, and audio.

Let’s take a look at the TabList and Tab components using an example.

Specific steps:

1. Design the layout

In the SRC/main/resources/base/layout directory new layout file tab_list. XML, the main use Tablist components in the layout file, and set its style.

Specific code reference is as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:top_margin="15vp" ohos:orientation="vertical"> <TabList ohos:id="$+id:tab_list" ohos:top_margin="10vp" ohos:tab_margin="24vp" ohos:tab_length="140vp" ohos:text_size="20fp" ohos:height="36vp" ohos:width="match_parent" ohos:layout_alignment="center" ohos:orientation="horizontal" ohos:text_alignment="center" ohos:normal_text_color="#999999" ohos:selected_text_color="#afaafa" ohos:selected_tab_indicator_color="#afaafa" ohos:selected_tab_indicator_height="2vp"/> <Text ohos:id="$+id:tab_content" ohos:width="match_parent" ohos:height="match_parent" ohos:text_alignment="center" ohos:background_element="#70dbdb" ohos:text_color="#2e2e2e" ohos:text_size="16fp"/> </DirectionalLayout>Copy the code

2. Create an execution class

In SRC/main/Java/com/huawei/codelab/slice directory TabListSlice. New Java file, inherited from AbilitySlice.

Member variables are defined, layouts are loaded, components are initialized, and click events are bound within the class.

Example code:

package com.huawei.codelab.slice; import com.huawei.codelab.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.TabList; import ohos.agp.components.Text; public class TabListSlice extends AbilitySlice { private TabList tabList; private Text tabContent; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_tab_list); initComponent(); addTabSelectedListener(); } private void initComponent() { tabContent = (Text) findComponentById(ResourceTable.Id_tab_content); tabList = (TabList) findComponentById(ResourceTable.Id_tab_list); initTab(); } private void initTab() { if (tabList.getTabCount() == 0) { tabList.addTab(createTab("Image")); tabList.addTab(createTab("Video")); tabList.addTab(createTab("Audio")); tabList.setFixedMode(true); tabList.getTabAt(0).select(); tabContent.setText("Select the " + tabList.getTabAt(0).getText()); } } private TabList.Tab createTab(String text) { TabList.Tab tab = tabList.new Tab(this); tab.setText(text); tab.setMinWidth(64); tab.setPadding(12, 0, 12, 0); return tab; } private void addTabSelectedListener() { tabList.addTabSelectedListener(new TabList.TabSelectedListener() { @Override public void onSelected(TabList.Tab tab) { tabContent.setText("Select the " + tab.getText()); } @Override public void onUnselected(TabList.Tab tab) { } @Override public void onReselected(TabList.Tab tab) { } }); }}Copy the code

3. Associate the home page

In SRC/main/Java/com/huawei/codelab/slice/MainAbilitySlice Java onClick method of adding associated jump logic.

The specific code is as follows:

@Override 
public void onClick(Component component) { 
    String className = ""; 
    switch (component.getId()) { 
        case ResourceTable.Id_tab_list: 
            className = "com.huawei.codelab.slice.TabListSlice"; 
            break; 
        default: 
            break; 
    } 
    abilitySliceJump(className); 
}
Copy the code

4. Run the program

Use virtual machine to run the above program, enter the program home page, click TabList and Tab on the home page, you can see the TabList page, click the different Tab (picture, video, audio) on the top of the page, the page content will be synchronized change.

The effect is as follows:

  1. Picture TAB

  1. Video TAB

  1. Audio TAB

If it is a TV device, the renderings are shown as follows:

  1. Picture TAB

  1. Video TAB

  1. Audio TAB

If it is a wearable device, the renderings are shown as follows:

conclusion

We can see that the API of Hongmeng System is improving day by day, and many basic functions are also improving step by step. Our Hongmeng System has a broader stage.

Today, we’ve focused on the Codelab layout component, and look forward to seeing more tools coming. I will continue to follow the development of Hongmon OS.

Go Huawei, go Hongmeng!