Go to file
wanglili12 d7465e782b FrameNode的addComponentContent接口添加isModifiable判断
(cherry picked commit from <gitee.com//openharmony/arkui_ace_engine/commit/18d8a583ce6cc190727aa209c5df85bcafeb5f32>
2024-08-12 07:13:22 +00:00
.gitee fix sheet wrapper layout 2024-08-01 09:42:20 +08:00
adapter add: format fix 2024-08-02 21:31:14 +08:00
advanced_ui_component !39357 给worker增加mock 2024-08-02 06:08:25 +00:00
build 关闭uicast宏 2024-08-02 15:40:48 +08:00
component_ext 独立编译整改 2024-08-01 07:53:45 +00:00
examples/components 添加Chip 组件示例 2024-07-12 13:53:33 +08:00
figures fix readme 2022-09-22 14:17:36 +08:00
frameworks FrameNode的addComponentContent接口添加isModifiable判断 2024-08-12 07:13:22 +00:00
interfaces !40026 挑单5.0Release:toast支持自定义文本颜色、背景色、背景模糊或阴影 2024-08-12 03:40:17 +00:00
test toast支持自定义文本颜色、背景色、背景模糊或阴影 2024-08-09 10:58:26 +08:00
.clang-format repeat feture 2024-06-17 10:59:23 +08:00
.gitattributes update OpenHarmony 2.0 Canary 2021-06-02 02:20:44 +08:00
.gitignore update event tool 2024-07-16 09:19:16 +08:00
ace_config.gni navigationt新增分栏模式动效 2024-07-18 03:14:47 +00:00
BUILD.gn 部件独立编译整改 2024-06-08 03:12:35 +00:00
bundle.json 独立编译整改 2024-08-01 07:53:45 +00:00
LICENSE update OpenHarmony 2.0 Canary 2021-06-02 02:20:44 +08:00
OAT.xml 示例代码工程升级API 12 2024-07-09 16:03:05 +08:00
README_zh.md ets to arkts 2022-10-14 17:33:20 +08:00
README.md 回退 'Pull Request !29318 : 测试用,请勿合入' 2024-03-23 08:18:17 +00:00
如何新增一个组件.md typo fix 2022-06-27 16:09:40 +08:00

JS UI Framework

Introduction

The OpenHarmony JS UI framework provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm.

  • Web-development-like paradigm

    The JS UI framework supports languages that are similar to those for web development, such as HTML and CSS. You can use them to describe the page layout and style, and use JavaScript conforming to the ECMAScript specification for page behavior. This paradigm allows you to avoid code for UI state switching. The view configuration information is intuitive.

Figure 1 Framework architecture

The JS UI framework consists of the application, framework, engine, and porting layers.

  • Application

    Contains apps with Feature Abilities FAs developed with the JS UI framework. The FA app in this document refers to the app with FAs developed using JavaScript.

  • Framework

    Parses UI pages and provides the Model-View-ViewModel MVVM, page routing, custom components and more for front end development.

  • Engine

    Accomplishes animation parsing, Document Object Model DOM building, layout computing, rendering command building and drawing, and event management.

  • Porting Layer

    Abstracts the platform layer to provide abstract interfaces to connect to the platform. For example, event interconnection, rendering pipeline interconnection, and lifecycle interconnection.

Directory Structure

The source code of the framework is stored in /foundation/arkui/ace_engine. The following shows the directory structure.

/foundation/arkui/ace_engine
├── adapter                       # Platform adaptation code
│   ├── common
│   └── ohos
├── frameworks                    # Framework code
│   ├── base                      # Basic libraries
│   ├── bridge                    # Bridging layer for frontend and backend components
│   └── core                      # Core components

When to Use

JS UI framework provides various UI components with rich functionalities and style definitions. You can use and reuse any component anywhere as needed. You can customize new components by combining existing ones to simplify development.

Available Components

Table 1 Components provided by the framework

Type

Components

Basic

button, text, input, label, image, progress, rating, span, marquee, image-animator, divider, menu, chart, option, picker, picker-view, piece, qrcode, select, slider, switch, toolbar, toolbar-item, toggle

Container

div, list, list-item, list-item-group, stack, swiper, tabs, tab-bar, tab-content, refresh, dialog, badge, panel, popup, stepper, stepper-item

Canvas

canvas

Grid

grid-container, grid-row, grid-col

Repositories Involved

JS UI framework

arkui_ace_engine

ace_engine_lite

arkui_napi