Overview of UI Development (Cangjie Declarative Development Paradigm)

Note:

Currently in the beta phase.

The ArkUI development framework based on the Cangjie declarative development paradigm is a minimalist, high-performance, cross-device UI development framework that provides essential capabilities for building application UIs, including:

• Cangjie

  Cangjie language is the primary application development language, covering declarative UI description, custom components, dynamic UI element extension, state management, and rendering control in application development. As a distinctive feature of the Cangjie development paradigm, state management follows declarative programming principles, offering developers clear page update and rendering pipelines through versatile decorators. State management encompasses both UI component states and application states, enabling developers to comprehensively handle data updates and UI rendering. For foundational knowledge about Cangjie language, refer to Introduction to Cangjie Language for more information.

• Layout

  Layout is a fundamental UI element that defines component positioning. The ArkUI framework provides various layout methods, including basic linear, stack, flex, relative, and grid layouts, as well as more complex list, grid, and carousel layouts.

• Components

  Components are essential UI elements that form the visual interface. Those provided by the framework are called system components, while those defined by developers are called custom components. Built-in system components include buttons, radio buttons, progress bars, text, etc. Developers can chain method calls to configure rendering effects of system components. System components can be combined into custom components, modularizing pages into independent UI units for separate creation, development, and reuse, enhancing engineering efficiency.

• Page Routing and Component Navigation

  Applications may contain multiple pages, with navigation between them achieved through page routing. Within a page, component navigation (e.g., tabs) can be implemented using navigation components.

• Graphics

  The ArkUI framework supports displaying various image types and provides extensive custom drawing capabilities, including shape drawing, color filling, text rendering, transformations, clipping, and image embedding.

• Animation

  Animation is a key UI element. Well-designed animations significantly enhance user experience. The framework offers rich animation capabilities, including built-in component animations, property animations, explicit animations, custom transition animations, and animation APIs. Developers can create custom animation trajectories using encapsulated physical models or animation APIs.

• Interaction Events

  Interaction events are essential for UI-user interaction. The ArkUI framework provides various events, including general touch, mouse, keyboard, and focus events, as well as gesture events derived from them. Gesture events include single gestures (tap, long press, drag, pinch, rotate, swipe) and composite gestures combining single gestures.

• Customization Capabilities

  Customization capabilities empower developers to tailor UI interfaces, including custom composition, extension, nodes, and rendering.

Features

• High Development Efficiency and Excellent Developer Experience

  • Concise Code: UI is described using near-natural semantics, freeing developers from framework implementation details.

  • Data-Driven UI Changes: Developers focus on business logic. When UI changes, they only need to modify data—UI updates are handled by the framework.

  • Enhanced Developer Experience: UI-as-code improves programming workflow.

• Superior Performance

  • Layered Declarative UI Frontend and Backend: The C++-based UI backend provides foundational components, layouts, animations, events, state management, and rendering pipelines.

  • Compiler and Runtime Optimizations: Unified bytecode, efficient FFI (Foreign Function Interface), AOT (Ahead Of Time), minimized engine footprint, and type optimizations.

• Rapid Ecosystem Advancement: Leverages mainstream language ecosystems, maintains language neutrality, and evolves through standardization bodies.

Development Process

When developing applications with the UI framework, the main workflow includes:

Task	Description	Guides
Learn Cangjie	Covers basic syntax, state management, and rendering control.	- Basic Syntax - State Management - Rendering Control
Develop Layout	Introduces common layout methods.	- Common Layouts
Add Components	Explains usage of common system components.	- Common Components - Custom Components
Use Text	Describes text components like input fields and rich text.	- Text - Text Display - Text Input - Rich Text
Use Dialogs	Covers dialog scenarios and usage.	- Dialogs - Popup - Menu Control - Global Custom Dialogs - Fixed-Style Dialogs - Tooltips - Modal Pages - Instant Feedback
Display Graphics	Explains image display, custom shapes, and canvas drawing.	- Shapes - Canvas
Use Animation	Demonstrates animation scenarios for components and pages.	- Animation - Property Animation - Implement Property Animation - Transition Animation - Enter/Exit Transition - Modal Transition - Component Animation - Animation Curves - Traditional Curves - Animation Smoothing - Blur - Shadow - Color - Frame Animation
Bind Events	Introduces event concepts and usage of general and gesture events.	- Interaction Events - Event Distribution - Touch Events - Keyboard/Mouse Events - Focus Events
Use Mirroring	Explains mirroring concepts and usage.	- Mirroring
Theme Settings	Describes application- and page-level theme configuration.	- Dark/Light Mode Adaptation

General Rules

• Default Units

  Length parameters default to vp (virtual pixels). This applies to Int32 inputs and Int64/Float64 values in the Length type.

• Invalid Value Handling

  For invalid inputs:

  • If the parameter has a default value, the default is used.

  • If no default exists, the associated property or API is ignored.

Precautions

Time-consuming operation

If time-consuming tasks such as reading files are executed on the UI main thread or in tasks scheduled via spawn(main), it may cause the UI main thread to be blocked, leading to interface delays, stuttering, dropped frames, or even freezing.

In application development practice, redundant and time-consuming operations should be avoided on the UI main thread to improve interface response speed and overall smoothness.