Building the First ArkTS Application in Stage Model on Oniro, OpenHarmony and HarmonyOS
Hello World, let's get started!
Creating an ArkTS Project
If you are opening DevEco Studio for the first time, click Create Project. If a project is already open, choose File > New > Create Project from the menu bar.
On the Choose Your Ability Template page, select Application (or Atomic Service, depending on your project), select Empty Ability as the template, and click Next.
To develop a native project, select the Native C++ template. For details about how to use other templates, see Introduction to Project Templates.
On the Create Project page, Compatible SDK indicates the earliest compatible API version. Choose 5.0.0(12) as an example and retain the default values for other parameters.
Click Finish. DevEco Studio will automatically generate the sample code and resources that match your project type. Wait until the project is created.
ArkTS Project Directory Structure (Stage Model)
AppScope > app.json5: global configuration of your application. For details, see app.json5 Configuration File.
entry: HarmonyOS project module, which can be built into a Harmony Ability Package (HAP).
src > main > ets: a collection of ArkTS source code.
src > main > ets > entryability: entry to your application/service.
src > main > ets > entrybackupability: the ability to back up and restore data.
src > main > ets > pages: a collection of pages contained in your application/service.
src > main > resources: a collection of resource files used by your application/service, such as graphics, multimedia, character strings, and layout files. For details about resource files, see Resource Categories and Access.
src > main > module.json5: module configuration file. This file describes the global configuration information of the application/service, the device-specific configuration information, and the configuration information of the HAP file. For details about the configuration file, see module.json5 Configuration File.
build-profile.json5: current module information and build configuration options, including buildOption and targets.
hvigorfile.ts: module-level build script.
obfuscation-rules.txt: obfuscation rule file. When obfuscation is enabled, the code will be compiled, obfuscated, and compressed during builds in release mode. For details, see Enabling Code Obfuscation.
oh-package.json5: describes the bundle name, version, entry file (type declaration file), and dependencies.
oh_modules: third-party library dependency information.
build-profile.json5: project-level configuration information, including signingConfigs and products. Under products, you can set runtimeOS to HarmonyOS (by default).
hvigorfile.ts: project-level build script.
oh-package.json5: global configuration, including overrides, overrideDependencyMap, and parameterFile.
Building the First Page
Use the Text component.
After the project synchronization is complete, in the Project window, choose entry > src > main > ets > pages to open the Index.ets file and compile the page.
In this document, texts and buttons are used to implement page redirection and return. You can use the Row and Column components to set up the page layout. In scenarios where more complex elements should be aligned, you can use the RelativeContainer component to set up the layout.
The sample code in the Index.ets file is shown below:
// Index.ets@Entry@Componentstruct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}}
Add a Button component.
On the default page, add a Button component to respond to user clicks and implement redirection to another page. The sample code in the Index.ets file is shown below:
// Index.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
// Add a button to respond 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%')
}
}
On the toolbar in the upper right corner of the editing window, click Previewer. Below is how the first page looks in the Previewer.
Building the Second Page
Create the second page.
Create the second page file: In the Project window, choose entry > src > main > ets, right-click the pages folder, choose New > ArkTS File from the shortcut menu, name the page Second, and click Finish. Below shows the created page in the pages folder.
NOTE
You can also right-click the pages folder, choose New > Page > Empty Page, name the page Second, and click Finish. In this way, there is no need to manually configure the route for the second page.
Configure the route for the second page. In the Project window, choose entry > src > main > resources > base > profile. In the main_pages.json file, set pages/Second under src. The sample code is as follows:
{
"src": [
"pages/Index",
"pages/Second"
]
}Add Text and Button components.
Add Text and Button components and set their styles, as you do for the first page. The sample code in the Second.ets file is shown below:
// 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(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
}
.width('100%')
}
.height('100%')
}
}
Implementing Page Redirection
You can implement page redirection through the page router, which finds the target page based on the page URL. Import the router module and then perform the steps below:
Navigation is recommended if you want to achieve better transition effects.
Implement redirection from the first page to the second page.
In the Index.ets file of the first page, bind the onClick event to the Next button so that clicking the button redirects the user to the second page. The sample code in the Index.ets file is shown below:
// Index.ets
// Import the router 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 a button to respond to user clicks.
Button() {
Text('Next')
.fontSize(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Next button so that clicking the button redirects the user to the second page.
.onClick(() => {
console.info(`Succeeded in clicking the 'Next' button.`)
// Go to the second page.
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%')
}
}
Implement redirection from the second page to the first page.
In the Second.ets file of the second page, bind the onClick event to the Back button so that clicking the button redirects the user back to the first page. The sample code in the Second.ets file is shown below:
// Second.ets
// Import the router 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(30)
.fontWeight(FontWeight.Bold)
}
.type(ButtonType.Capsule)
.margin({
top: 20
})
.backgroundColor('#0D9FFB')
.width('40%')
.height('5%')
// Bind the onClick event to the Back button so that clicking the button redirects the user back to the first page.
.onClick(() => {
console.info(`Succeeded in clicking the 'Back' button.`)
try {
// Return 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%')
}
}
Open the Index.ets file and click
in the Previewer to refresh the file. The figure below shows the effect.
Running the Application on a Real Device
Connect a real device running HarmonyOS to your computer. For details, see Running Your App/Service on a Local Real Device.
Choose File > Project Structure > Project > Signing Configs, select Support HarmonyOS and Automatically generate signature, click Sign In, and log in with your HUAWEI ID. Wait until the automatic signature is complete, and click OK. The figure shown below is displayed.
On the toolbar in the upper right corner of the editing window, click
to run the project. The figure below shows the effect.
Congratulations! You have finished developing your first ArkTS application based on the stage model.