Building the First ArkTS Application (Stage Model)

Creating your native HarmonyOS (NEXT/5.0+) application structure

Create an ArkTS project

1. If you are opening DevEco Studio for the first time, click Create Project to create a project. If you already have a project open, select File > New > Create Project in the menu bar to create a new project.

2. Select Application Development (in this example, Application Development is used as an example, and Atomic Service corresponds to Meta Service Development), select Empty Ability, and click Next to configure the following step.

1. On the Configure Project page, select 5.0.0(12) for Compatible SDK, and keep other parameters set by default.

1. Click Finish, the tool will automatically generate sample code and related resources, and wait for the project to be created.

ArkTS Project Directory Structure (Stage Model)

• AppScope > app.json5: For details about the global configuration of the app, see the app.json5 configuration file.

• entry: The HarmonyOS project module compiles, builds, and generates a HAP package.

  • src > main > ets: for storing ArkTS source code.

  • src > main > ets > entryability: the entry point for the application/service.

  • src > main > ets > entrybackupability: the application provides extended backup recovery capabilities.

  • SRC > Main > Ets > Pages: Pages included in the application/service.

  • src > main > resources: used to store resource files used by the application/service, such as graphics, multimedia, strings, and layout files. For more information about resource files, see Resource Classification and Access.

  • src > main > module.json5: module configuration file. It mainly contains the configuration information of the HAP package, the configuration information of the application/service on a specific device, and the global configuration information of the application/service. For more information about the configuration file, see module.json5 configuration file.

  • build-profile.json5: current module information, compile information configuration items, including buildOption, targets configuration.

  • hvigorfile.ts: module-level compilation build task script.

  • obfuscation-rules.txt: obfuscation rule file. After obfuscation is enabled, the code will be compiled, obfuscated, and compressed when the release mode is used to protect code assets. For more information, see Enabling Code Obfuscation.

  • oh-package.json5: This parameter describes the package name, version, entry file (type declaration file), and dependencies.

• oh_modules: used to store three-way library dependency information.

• build-profile.json5: project-level configuration information, including signature signingConfigs, product configuration products, etc. The current runtime environment can be configured in products, which is HarmonyOS by default.

• hvigorfile.ts: engineering-level compilation build task scripts.

• oh-package.json5: mainly used to describe the global configuration, such as: dependency override (overrides), dependency rewriting (overrideDependencyMap) and parameterized configuration (parameterFile).

Build your first page

1. Use the text component.

   After the project is synchronized, in the “Project” window, click “entry > src > main > ets > pages” to open the “Index.ets to open the “Index.ets” file and write the pages.

   In this article, text or buttons are used to redirect/return the page, and the Row and Column components are used to form the layout. For more complex scenarios where elements are aligned, you can choose to use the RelativeContainer component for layout.

   An example of an "Index.ets" file is as follows:

// 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%')  
  }
}

1. Add a button.

   On top of the default page, we add a Button component that acts as a button in response to the user's click, so that it can jump to another page. An example of an "Index.ets" file is as follows:

// Index.ets
@Entry
@Component
struct Index {  
    @State message: string = 'Hello World'
  build() {    
    Row() {      
    Column() {        
      Text(this.message) 
. fontSize(50) 
. fontWeight(FontWeight.Bold)        
       Add buttons in response to user clicks        
       Button() {          
         Text('Next') 
. FontSize(30) 
. fontWeight(FontWeight.Bold)        
      } 
. type(ButtonType.Capsule) 
. margin({          
         top: 20        
        }) 
. backgroundColor('#0D9FFB') 
. width('40%') 
. height('5%')      
     } 
. width('100%')    
   } 
. height('100%')  
  }
}

1. In the side toolbar in the upper-right corner of the editing window, click Preview to open the previewer. The first page looks like this:

Building the second page

Creates a second page.

Create a new second page file. In the “Project” window, open “entry > src > main > ets”, right-click on the “pages” folder, select “New > ArkTS File”, name it ‘Second’, and click Enter. You can see the file directory structure as below:

1. • Developers

     Developers can also right click on the “pages” folder, select “New > Page > Empty Page”, name it “Second”, and click “Finish” to finish creating the second page. Click “Finish to finish creating the second page. This eliminates the need to manually configure the routing of the second page as described below.

   • Configure the routing of the second page. In the “Project” window, open “entry > src > main > resources > base > profile”, and in the main_pages.json file, under “src”, click “Finish”. In the main_pages.json file, under “src”,

     configure the route “pages/Second” for the second page. The example is as follows:

{  
 "src": [    
 "pages/Index",    
 "pages/Second"  
 ]
}

1. Add text and buttons.

   Refer to the first page, add a Text portlet, a Button port, etc., to the second page, and set the style. An example of a "Second.ets" file is as follows:

// Second.ets
@Entry
@Component
struct Second {  
@State message: string = 'Hi there'
  build() {    
   Row() {      
    Column() {        
     Text(this.message)          
.fontSize(50)          
.fontWeight(FontWeight.Bold)        
     Button() {          
       Text('Back')            
.fontSize(25)            
.fontWeight(FontWeight.Bold)        
     }        
.type(ButtonType.Capsule)        
.margin({          
        top: 20        
      })        
.backgroundColor('#0D9FFB')        
.width('40%')        
.height('5%')      
    }      
.width('100%')    
  }    
.height('100%')  
 }
}

Jumps between pages

Navigation between pages can be achieved through page routers. The page router finds the destination page based on the page URL and implements redirection. To use page routing, import the router module.

If you need to achieve better transition animations, we recommend using Navigation.

1. The first page jumps to the second page.

   On the first page, the jump button is bound to the onClick event, and when you click the button, you will be redirected to the second page. An example of an "Index.ets" file is as follows:

// Index.ets
Import the page routing module
import { router } from  '@kit. ArkUI';
import { BusinessError } from  '@kit. BasicServicesKit';

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

  build() {
    Row() {
      Column() {
        Text(this.message)
 . fontSize(50)
 . fontWeight(FontWeight.Bold)
        Add buttons in response to user clicks
        Button() {
          Text('Next')
 . FontSize(30)
 . fontWeight(FontWeight.Bold)
        }
 . type(ButtonType.Capsule)
 . margin({
          top: 20
        })
 . backgroundColor('#0D9FFB')
 . width('40%')
 . height('5%')
        The jump button is bound to the onClick event, and when you click it, you will be redirected to the second page
 . onClick(() => {
          console. info(`Succeeded in clicking the 'Next' button.`)
          Skip to page two
 router. pushUrl({ url: 'pages/Second' }). then(() => {
            console. info('Succeeded in jumping to the second page.')

 }). catch((err: BusinessError) => {
            console. error(`Failed to jump to the second page. Code is ${err.code}, message is ${err.message}`)
          })
        })
      }
 . width('100%')
    }
 . height('100%')
  }
}

1. The second page returns to the first page.

   On the second page, the back button is bound to the onClick event, and when the button is clicked, it returns to the first page. An example of a "Second.ets" file is as follows:

// Second.ets
Import the page routing module
import { router } from  '@kit. ArkUI';
import { BusinessError } from  '@kit. BasicServicesKit';

@Entry
@Component
struct Second {
  @State message: string = 'Hi there'

  build() {
    Row() {
      Column() {
        Text(this.message)
 . fontSize(50)
 . fontWeight(FontWeight.Bold)
        Button() {
          Text('Back')
 . FontSize(25)
 . fontWeight(FontWeight.Bold)
        }
 . type(ButtonType.Capsule)
 . margin({
          top: 20
        })
 . backgroundColor('#0D9FFB')
 . width('40%')
 . height('5%')
        The back button is bound to the onClick event, and when the button is clicked, it returns to the first page
 . onClick(() => {
          console. info(`Succeeded in clicking the 'Back' button.`)
          try {
            Go back to the first page
 router. back()
            console. info('Succeeded in returning to the first page.')
          } catch (err) {
            let code = (err as  BusinessError). code; 
            let message = (err as  BusinessError). message; 
            console. error(`Failed to return to the first page. Code is ${code}, message is ${message}`)
          }
        })
      }
 . width('100%')
    }
 . height('100%')
  }
}

1. Open the Index.ets file and click the button in the

previewer to refresh it. The effect is shown in the following figure:

Run the app on a real machine

1. Connect a real device with HarmonyOS to your computer. For specific guidance and requirements, see Using a Local Real Machine to Run Applications/Services.

2. Click File > Project Structure... > Project > SigningConfigs interface to check “Support HarmonyOS” and “Automatically generate signature”, and then click Click “Sign In” in the interface, and log in with your Huawei account. Wait for the automatic signature to complete, and then click “OK”. As shown in the picture below

1. In the toolbar in the upper right corner of the editing window, click

the Run button. The effect is shown in the following figure:

Congratulations on building your first ArkTS app based on the Stage model, so let's explore more HarmonyOS features.