• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# JS UI Framework<a name="EN-US_TOPIC_0000001087318673"></a>
2
3-   [Introduction](#section11660541593)
4-   [Directory Structure](#section179173014915)
5-   [Usage](#section1711605017917)
6-   [Repositories Involved](#section1599816111011)
7
8## Introduction<a name="section11660541593"></a>
9
10The OpenHarmony JS UI framework provides basic, container, and canvas UI components and standard CSS animation capabilities. It supports the web-development-like programming paradigm.
11
12-   **Web-development-like paradigm**
13
14    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.
15
16
17**Figure  1**  JS UI framework<a name="fig15956152211427"></a>
18
19
20![](figures/en-us_image_0000001077953992.png)
21
22The JS UI framework consists of the application, framework, engine, and porting layers.
23
24-   **Application**
25
26    Contains applications with Feature Abilities \(FAs\) developed with the JS UI framework. The FA application in this document refers to the application with FAs developed using JavaScript.
27
28-   **Framework**
29
30    Parses UI pages and provides the Model-View-ViewModel \(MVVM\), page routing, custom components and more for front end development.
31
32-   **Engine**
33
34    Accomplishes animation parsing, Document Object Model \(DOM\) building, layout computing, rendering command–based building and drawing, and event management.
35
36-   **Porting Layer**
37
38    Abstracts the platform layer to provide interfaces for the interconnection with the OS. For example, interconnections of events, rendering pipelines, and lifecycles.
39
40
41## Directory Structure<a name="section179173014915"></a>
42
43The source code of the framework is stored in  **/foundation/ace**. The following shows the directory structure.
44
45```
46/foundation/ace
47├── ace_engine                       # JS UI framework
48├── ace_engine_lite                  # JS UI framework for the mini system and above
49└── napi                             # JS APIs for extending the native development module
50```
51
52## Usage<a name="section1711605017917"></a>
53
54-   JavaScript FA development directory
55
56After a project is created, its  **js**  directory is displayed.
57
58**Figure  2**  Development directory<a name="fig343917486112"></a>
59![](figures/development-directory.png "development-directory")
60
61The  **i18n**  directory stores JSON files for various locales. A  **pages**  subfolder contains multiple pages and each consists of  **.hml**,  **.css**, and  **.js**  files.
62
63-   **main \> js \> default \> i18n \> en-US.json**: defines the variables displayed on pages in English. Similarly,  **zh-CN.json**  defines the page content in Chinese.
64
65    ```
66    {
67      "strings": {
68        "hello": "Hello",
69        "world": "World"
70      }
71    }
72    ```
73
74-   **main \> js \> default \> pages \> index \> index.hml**: describes the layout of the  **index**  page, components used on the page, and the hierarchy of these components. For example, there is a text component for displaying  **Hello World**.
75
76    ```
77    <div class ="container">
78      <text class ="title">
79        {{ $t('strings.hello') }} {{title}}
80      </text>
81    </div>
82    ```
83
84-   **main \> js \> default \> pages \> index \> index.css**: defines the style of the  **index**  page. For example, the following  **index.css**  code snippet describes how  **container**  and  **title**  will be displayed on the page:
85
86    ```
87    .container {
88      flex-direction: column;
89      justify-content: center;
90      align-items: center;
91    }
92    .title {
93      font-size: 100px;
94    }
95    ```
96
97-   **main \> js \> default \> pages \> index \> index.js**: defines the service logic on the  **index**  page, such as data binding and event processing. In this example, the string  **World**  is assigned to  **title**.
98
99    ```
100    export default {
101      data: {
102        title: '',
103      },
104      onInit() {
105        this.title = this.$t('strings.world');
106      },
107    }
108    ```
109
110
111## Repositories Involved<a name="section1599816111011"></a>
112
113JS UI framework
114
115ace\_ace\_engine
116
117ace\_ace\_engine\_lite
118
119ace\_napi
120
121