Overview of UI Development

ArkTS: A Comprehensive Guide for Application Development

Introduction to ArkTS

ArkTS is HarmonyOS's preferred primary language for application development, specifically designed to enhance the capabilities of TypeScript (TS) for building robust and efficient applications. It extends the core features of TypeScript to provide a more streamlined and powerful development experience, particularly for UI development and state management.

Key Features of ArkTS

• Declarative UI Description: ArkTS allows developers to describe UI elements in a straightforward and intuitive manner, making it easier to define the structure and behavior of the user interface.
• Custom Components: Developers can create custom components tailored to their specific needs, promoting code reuse and modularity.
• Dynamic UI Element Expansion: ArkTS supports the dynamic addition and modification of UI elements, enabling more interactive and responsive user interfaces.
• State Management: A cornerstone of the declarative development paradigm, state management in ArkTS provides a clear and efficient way to update the UI based on changes in data. This is achieved through various decorators and state management mechanisms.

Layout

Layout is a fundamental aspect of UI design, defining how components are positioned and arranged within the interface. The ArkUI framework offers a variety of layout options to meet different design requirements:

• Basic Layouts: These include linear, stacked, flexible, relative, and grid layouts, which provide a solid foundation for structuring UI components.
• Complex Layouts: For more advanced needs, the framework also supports lists, grids, and carousels, enabling the creation of dynamic and interactive interfaces.

Components

Components are the building blocks of any UI, and ArkTS provides a rich set of both system and custom components:

• System Components: These are built-in components provided by the framework, such as buttons, radio buttons, progress bars, and text. They can be easily customized using chain calls to set their rendering effects.
• Custom Components: Developers can create custom components by combining system components, allowing for greater flexibility and reusability. This modular approach enables independent development and reuse of different parts of the UI.

Page Routing and Component Navigation

Navigating between multiple pages and components is a common requirement in application development. ArkTS supports page routing and component navigation through various mechanisms:

• Page Routing: This allows developers to define routes for different pages, enabling smooth transitions between them.
• Component Navigation: Navigation components, such as tab bars, can be used to implement navigation within a page.

Graphics

The Ark development framework provides extensive support for displaying various types of images and custom drawing:

• Image Display: Supports different image formats and provides options for custom drawing.
• Custom Drawing: Developers can draw shapes, fill colors, render text, apply transformations, and clip areas to create custom graphics.

Animation

Well-designed animations can significantly enhance the user experience. ArkTS offers a rich set of animation capabilities:

• Built-in Animation Effects: These are provided for common UI components.
• Property Animations: Allow for smooth transitions between different states.
• Explicit Animations: Enable developers to define custom animations.
• Custom Transition Animations: Support the creation of unique animation trajectories.
• Animation APIs: Provide low-level control for advanced animation needs.

Interaction Events

Interaction events are crucial for enabling user interactions with the UI. The Ark framework supports a wide range of events:

• General Events: These include touch, mouse, keyboard, and focus events.
• Gesture Events: Based on general events, gesture events include taps, long presses, drags, pinches, rotations, and swipes.

Customization Capabilities

ArkTS provides powerful customization capabilities, allowing developers to tailor the UI to their specific needs:

• Custom Combinations: Combine multiple components to create complex UI structures.
• Custom Extensions: Extend existing components to add new functionality.
• Custom Nodes: Create custom nodes for unique UI elements.
• Custom Rendering: Customize the rendering process to achieve specific visual effects. // xxx.ets import { webview } from '@kit.ArkWeb'; import { BusinessError } from '@kit.BasicServicesKit'; import { picker } from '@kit.CoreFileKit';

@Entry
@Component
struct WebComponent {
controller: webview.WebviewController = new webview.WebviewController();

build() {
Column() {
Web({ src: $rawfile('local.html'), controller: this.controller })
.onShowFileSelector((event) => {
console.log('onShowFileSelector invoked');
const documentSelectOptions = new picker.DocumentSelectOptions();
documentSelectOptions.fileType = ['image/jpeg', 'image/png']; // Limit to image files
documentSelectOptions.maxCount = 1; // Allow only one file to be selected
let uri: string | null = null;
const documentViewPicker = new picker.DocumentViewPicker();
documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
uri = documentSelectResult[0];
console.info('documentViewPicker.select succeeded, uri is: ' + uri);
if (event) {
event.result.handleFileList([uri]);
}
}).catch((err: BusinessError) => {
console.error(Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message});
});
return true;
})
}
}
}

Features

High Development Efficiency and Good Development Experience

• Concise Code: ArkTS allows developers to describe UI elements in a way that is close to natural semantics, reducing the need for boilerplate code.
• Data-Driven UI Changes: Developers can focus on handling business logic, as the framework takes care of updating the UI based on data changes.
• Good Development Experience: The interface is code, enhancing the programming experience and making it more intuitive.

Superior Performance

• Declarative UI Frontend and Backend Separation: The UI backend is built using C++, providing high performance and efficient rendering.
• Language Compiler and Runtime Optimization: Features like unified bytecode, efficient FFI, AOT compilation, engine minimization, and type optimization ensure optimal performance.

Easy and Rapid Ecosystem Advancement

• Leveraging Mainstream Language Ecosystem: ArkTS can leverage the existing TypeScript ecosystem, allowing for rapid development and integration.
• Neutral and Friendly Language: The language is designed to be neutral and friendly, with support from standard organizations for gradual evolution.

Overall Architecture

Declarative UI Frontend

The frontend provides the basic language specifications for the UI development paradigm and offers built-in UI components, layouts, and animations. It also supports various state management mechanisms and provides interfaces for application developers.