OpenHarmony Open Source Harmony Learning Introduction – Application Development Using eTS ​​Grammar Example Project Explanation

OpenHarmony Open Source Harmony Learning Introduction – Application Development Using eTS ​​Grammar Example Project Explanation

1. Create a sample project:

(1) First, create a sample project through the IDE. Create Project.

By the way, unlike the development IDE of HarmonyOS, the IDE of OpenHarmony does not need to log in to a Huawei account. The disadvantage is that there are no more advanced functions such as online simulators.

(2) Select the first one and create an empty Ability template project, Empty Ability.

This sample project is very simple and will use a simple layout to display Hello World using a text component.

This Feature Abiltiy template was developed for phones and tablets to display the basic Hello World functions

(3) Configure the relevant parameters of the project. The schematic diagram on the right is the display effect of the project.

Notable among these parameters are:

project type，
Divided into Application and Atomic Service. The former is an application, and the latter is a card service, similar to a quick application. When configuring, we choose the former, Application.
· Application: An installation-required app. Access the app by touching the app icon on the home screen. · Atomic service: An atomic service in the form of an installation-free app without an app icon on the home screen. Access the service via the service widget, OneHop, or QR code scanning.

Compile API，
The compiled SDK here we choose API 8, because 9 is still in the trial stage and is unstable.
The SDK of API 9 is now in trial and may be unstable

Model，
The framework model structure is currently FA by default. API 9 has a new type, the Stage model, but the IDE has not been updated yet. To understand the basic concepts, see this blog. ="OpenHarmony Open Source Harmony Learning Introduction – Basic Concept Understanding of Ability, FA and Stage

Enable Super Visual，
Enable super vision. A low-code, drag-control programming method, which is immature at present, and will not be enabled yet.
In Super Visual mode, you can develop your services and apps quickly through the drag-and-drop functionality

UI Syntax，
Select eTS. The explanation will use eTS. For the measurement of the two syntax choices, see the previous blog. ="OpenHarmony Open Source Harmony Learning Introduction – Environment Installation Configuration and Unable to Install eTS Problem Solving

Show in Service Center，
Choose not to enable. Whether it is displayed in the service center or not will be discussed later. For now, let's look at the most basic example.
Selecting this option will create a snapshot of the app snippet and a default service widget.

OK, everything is fine, click Finish.

2. Familiar with project structure and basic functions of IDE:

As long as students with application development experience, the use of this IDE can be said to be very low cost, except for the shortcut keys, which are a bit disgusting. Whether it is a Debug or a run project, or a terminal command execution, the code writing is similar to AndroidStudio, VSCode, and XCode.

The structure of the entire project is clear and simple. It contains the core code of the core business of the project, entry, which can be regarded as the entry folder of the startup project. Here are the code classes of the business project.

The following node_modules is the project dependency management library of npm. We can use some convenient plug-ins on npm to integrate and install, just use npm install xxx.
This is also relatively lacking at present. For the reference installation of npm packages, there is no unified management file. When the project is developed by multiple people, it is best to maintain a readme of the code npm reference package in the project. Like Flutter development, dependencies will be downloaded uniformly in the .yaml file for easy management. When it comes to Dart development of Flutter, in fact, OpenHarmony's eTS is very similar, both of which are declarative development.

package.json
{
  "name": "myapplication",
  "version": "1.0.0",
  "ohos": {
    "org": "huawei",
    "buildTool": "hvigor",
    "directoryLevel": "project"
  },
  "description": "example description",
  "repository": {},
  "license": "ISC",
  "dependencies": {
    "hypium": "^1.0.0",
    "@ohos/hvigor": "1.0.6",
    "@ohos/hvigor-ohos-plugin": "1.0.6"
  }
}

build-profile.json5
{
  "app": {
    "signingConfigs": [],
    "compileSdkVersion": 8,
    "compatibleSdkVersion": 8,
    "products": [
      {
        "name": "default",
        "signingConfig": "default",
      }
    ]
  },
  "modules": [
    {
      "name": "entry",
      "srcPath": "./entry",
      "targets": [
        {
          "name": "default",
          "applyToProducts": [
            "default"
          ]
        }
      ]
    }
  ]
}

The relevant parameters set by the above two items are not used at present, and will be explained later. Seeing the name and meaning, you can probably feel the outline first.

To run the project, you need to pay attention to two points. First, you must select the entry for entry. Second, to set up automatic signature.

The run project requires the use of a development board or tablet equipped with the OpenHarmony system. There is no emulator for this IDE. However, it is also possible to debug the interface without a device. Click to open the UI interface class such as index, and then click the previewer on the right. Compared with Android Studio, the preview has the function of click operation, which is very convenient. However, in some more complex rendering interfaces, the preview cannot be used. speak.

3. Description of the project business code:

(1) First of all, the business code we are concerned about needs to expand the mian folder, app.ets and pages-index.ets under ets-MainAbility

app.ets

export default {
  onCreate() {
    console.info('Application onCreate')
  },
  onDestroy() {
    console.info('Application onDestroy')
  },
}

The code for app.ets is simple. Is the host class of MainAbility. It is equivalent to Application in android development. The sample project only logs the life cycle.

index.ets

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

index.ets is the business implementation class we see the helloworld effect of the interface.
First we need to notice that
@Entry, in eTS this tag represents the current tag class, which can be used as an interface push or back. Equivalent to Activity or Fragment in Android.

@Component, in eTS this tag represents the currently marked class, which can be called as a component in the build function.

@State, if the value of the variable changes, it will automatically trigger the build redraw, and change the component in the build function to use the message.

The core is the build function. Students who know Android compose or Flutter will feel very familiar and friendly. This fish scale typography is one of the characteristics of declarative development.

Next, let's disassemble the three components used for nesting, namely Row, Column and Text.

Row is horizontal layout, Column is vertical layout, Text is text.

Row() {
 
    }
    .height('100%')

     Column() {

      }
      .width('100%')
      
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)

For the use of UI components, please refer to the official component description:Declarative development paradigm based on TS extensions

Welcome to learn OpenHarmony together.