Project anatomy

A ArkTS application is organized as a multi-level tree of configuration and source files:

• AppScope/app.json5 – global settings for the whole application.
• entry/ – the primary module; when built it becomes an installable HAP package.
• entry/src/main/ets/ – ArkTS source code.
• entry/src/main/ets/entryability/ – the UIAbility that starts the app.
• entry/src/main/ets/entrybackupability/ – optional extension for backup & restore.
• entry/src/main/ets/pages/ – individual UI pages.
• entry/src/main/resoucres/ – images, strings, layouts, media, etc.
• entry/src/main/module.json5 – module-level manifest (device capabilities, permissions, etc.).
• entry/build-profile.json5 – compiler options and target definitions for the module.
• entry/hvigorfile.ts – modulee build script.
• entry/obfuscation-rules.txt – ProGuard-style obfuscation rules.
• entry/oh-package.json5 – package metadata (name, version, entry point, dependencies).
• oh_modules/ – third-party dependencies.
• build-profile.json5 (root) – project-wide build settings.
• hvigorfile.ts (root) – project build script.
• oh-package.json5 (root) – global configuration.

Writing your first screen

@Entry
@Component
struct WelcomePage {
  @State greeting: string = 'Hello World';

  build() {
    Stack() {
      Text(this.greeting)
        .id('welcomeText')
        .fontSize(48)
        .fontWeight(FontWeight.Medium)
        .align(Alignment.Center)
    }
    .width('100%')
    .height('100%')
  }
}

Adding navigation

// WelcomePage.ets
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WelcomePage {
  @State greeting: string = 'Hello World';

  build() {
    Column({ space: 24 }) {
      Text(this.greeting)
        .fontSize(48)
        .fontWeight(FontWeight.Medium)

      Button('Next')
        .type(ButtonType.Capsule)
        .fontSize(28)
        .fontColor('#FFFFFF')
        .backgroundColor('#007AFF')
        .width('50%')
        .onClick(() => {
          router.pushUrl({ url: 'pages/Detail' })
            .then(() => console.info('Navigated to Detail'))
            .catch((err: BusinessError) =>
              console.error(`Navigation failed: ${err.code} ${err.message}`)
            );
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

Creating a second page

Add the new page to the route table in main_pages.json:

{
  "src": [
    "pages/WelcomePage",
    "pages/Detail"
  ]
}

// Detail.ets
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct Detail {
  @State subtitle: string = 'Welcome to the second page';

  build() {
    Column({ space: 24 }) {
      Text(this.subtitle)
        .fontSize(36)
        .fontWeight(FontWeight.Regular)

      Button('Back')
        .type(ButtonType.Capsule)
        .fontSize(24)
        .backgroundColor('#007AFF')
        .width('50%')
        .onClick(() => {
          try {
            router.back();
            console.info('Returned to WelcomePage');
          } catch (err) {
            const error = err as BusinessError;
            console.error(`Back navigation failed: ${error.code} ${error.message}`);
          }
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}