1# UI<a name="EN-US_TOPIC_0000001123180295"></a>
2
3-   [Introduction](#section11660541593)
4-   [Directory Structure](#section161941989596)
5-   [Constraints](#section119744591305)
6-   [Compilation and Building](#section137768191623)
7-   [Description](#section1312121216216)
8    -   [Component Description](#section66002422015)
9    -   [Usage](#section129654513264)
10
11-   [Repositories Involved](#section1371113476307)
12
13## Introduction<a name="section11660541593"></a>
14
15The graphics UI module implements a system-level graphics engine.
16
17This module provides the UIKit APIs for application development. You can use the APIs to add animations, manage layouts, transform images, process events, and operates on rich UI components.
18
19The graphics UI directly calls the HAL API or uses the client provided by the Window Manager Service \(WMS\) to interact with the hardware to complete operations such as event response and image drawing.
20
21**Figure  1**  Graphics subsystem architecture<a name="fig1358754417214"></a>
22![](figures/graphics-subsystem-architecture.png "graphics-subsystem-architecture")
23
24## Directory Structure<a name="section161941989596"></a>
25
26```
27/foundation/arkui/ui_lite
28├── frameworks                  # Framework code
29│   ├── animator                # Animator module
30│   ├── common                  # Common module
31│   ├── components              # Components
32│   ├── core                    # UI main processes (such as rendering and task management)
33│   ├── default_resource
34│   ├── dfx                     # Maintenance and test
35│   ├── dock                    # Driver adaptation layer
36│   │   └── ohos                # OHOS platform adaptation
37│   ├── draw                    # Drawing logic
38│   ├── engines                 # Drawing engines
39│   ├── events                  # Events
40│   ├── font                    # Fonts
41│   ├── imgdecode               # Image management
42│   ├── layout                  # Page layout
43│   ├── themes                  # Theme management
44│   ├── window                  # Window management adaptation layer
45│   └── window_manager
46│       └── dfb
47├── interfaces                  # APIs
48│   ├── innerkits               # APIs between modules
49│   │   └── xxx                 # Sub-module APIs
50│   └── kits                    # External APIs
51│   │   └── xxx                 # Sub-module APIs
52├── test                        # Test code
53│   ├── framework
54│   │   ├── include             # Header files for the test framework
55│   │   └── src                 # Source code for the test framework
56│   ├── uitest                  # Display effect test (The executable program is in foundation/window/window_manager_lite/test:sample_ui.)
57│   │   └── test_xxx            # Specific UI effect test
58│   └── unittest                # Unit testing
59│       └── xxx                 # Unit testing for a specific UI component
60└── tools                       # Test and simulation tools (simulator projects and resource files)
61    └── qt                      # Qt project
62```
63
64## Constraints<a name="section119744591305"></a>
65
66Platform Constraints
67
68-   The Windows platform supports only Qt and OHOS IDE.
69-   For the support of other platforms, see the  **graphic**  tag in  **vendor/hisilicon/\[product\_name\]/config.json**. If the  **graphic**  tag does not exist, it indicates that the product does not have the graphics subsystem.
70
71## Compilation and Building<a name="section137768191623"></a>
72
73```
74# Generate the libui.so file in the out directory of the product folder through GN compilation.
75hb build -T //foundation/arkui/ui_lite:ui_lite -f  #build libui.so
76hb build -T //foundation/indow/window_manager_lite/test:sample_ui -f # build UI demo
77hb build -T //foundation/arkui/ui_lite/test/unittest:arkui_ui_lite_test -f # build TDD testcases
78
79# To compile the Qt library, see the Qt simulator project at arkui/ui_lite/tools/qt/simulator/simulator.pro.
80```
81
82## Description<a name="section1312121216216"></a>
83
84### Component Description<a name="section66002422015"></a>
85
86Components are classified into basic components and container components.
87
88-   Basic components: Implement only a single function, such as  **Text**,  **Button**,  **Image**, and  **List**.
89-   Container components: Hold and combine child components to implement complex functions.
90
91**Figure  2**  Graphics subsystem components<a name="fig1594213196218"></a>
92![](figures/graphics-subsystem-components.png "graphics-subsystem-components")
93
94### Usage<a name="section129654513264"></a>
95
96For details about how to use components and APIs of graphics, see the examples provided in  **foundation/arkui/ui_lite/test/uitest**.
97
98-   The Qt project can be debugged in the Windows environment. [User Guide](https://gitee.com/openharmony/arkui_ui_lite/wikis/%E5%BF%AB%E9%80%9F%E5%8A%A0%E5%85%A5/%E5%8A%A0%E5%85%A5%E6%8C%87%E5%BC%95)
99
100    Project file path:
101
102    ```
103    arkui/ui_lite/tools/qt/simulator/simulator.pro
104    ```
105
106-   For other debugging environments, you can run  **foundation/window/window_manager_lite/test:sample\_ui**.
107
108    After the building is successful, the executable program  **out/\[product\_name\]/dev\_tools/bin/sample\_ui**  is obtained. You can run the program in an environment to view the display effect of a specific component.
109
110
111## Repositories Involved<a name="section1371113476307"></a>
112
113[Graphic subsystem](https://gitee.com/openharmony/docs/blob/master/en/readme/graphics.md)
114
115[graphic_wms](https://gitee.com/openharmony/graphic_wms/blob/master/README.md)
116
117[graphic_surface](https://gitee.com/openharmony/graphic_surface/blob/master/README.md)
118
119**graphic_ui**
120
121[graphic_utils](https://gitee.com/openharmony/graphic_utils/blob/master/README.md)