README.md
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
23
24## Directory Structure<a name="section161941989596"></a>
25
26```
27/foundation/graphic/ui
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│ │ ├── dfb
40│ │ ├── general
41│ │ ├── gpu_vglite
42│ │ └── software_zlite
43│ ├── events # Events
44│ ├── font # Fonts
45│ ├── imgdecode # Image management
46│ ├── layout # Page layout
47│ ├── themes # Theme management
48│ ├── window # Window management adaptation layer
49│ └── window_manager
50│ └── dfb
51├── interfaces # APIs
52│ ├── innerkits # APIs between modules
53│ │ └── xxx # Sub-module APIs
54│ └── kits # External APIs
55│ │ └── xxx # Sub-module APIs
56├── test # Test code
57│ ├── framework
58│ │ ├── include # Header files for the test framework
59│ │ └── src # Source code for the test framework
60│ ├── uitest # Display effect test (The executable program is in foundation/graphic/wms/test:sample_ui.)
61│ │ └── test_xxx # Specific UI effect test
62│ └── unittest # Unit testing
63│ └── xxx # Unit testing for a specific UI component
64└── tools # Test and simulation tools (simulator projects and resource files)
65 └── qt # Qt project
66```
67
68## Constraints<a name="section119744591305"></a>
69
70Platform Constraints
71
72- The Windows platform supports only Qt and OHOS IDE.
73- 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.
74
75## Compilation and Building<a name="section137768191623"></a>
76
77```
78# Generate the libui.so file in the out directory of the product folder through GN compilation.
79hb build -T //foundation/graphic/ui:lite_ui -f #build libui.so
80hb build -T //foundation/graphic/wms/test:sample_ui -f # build UI demo
81hb build -T //foundation/graphic/ui/test/unittest:lite_graphic_ui_test -f # build TDD testcases
82
83# To compile the Qt library, see the Qt simulator project at graphic/ui/tools/qt/simulator/simulator.pro.
84```
85
86## Description<a name="section1312121216216"></a>
87
88### Component Description<a name="section66002422015"></a>
89
90Components are classified into basic components and container components.
91
92- Basic components: Implement only a single function, such as **Text**, **Button**, **Image**, and **List**.
93- Container components: Hold and combine child components to implement complex functions.
94
95**Figure 2** Graphics subsystem components<a name="fig1594213196218"></a>
96
97
98### Usage<a name="section129654513264"></a>
99
100For details about how to use components and APIs of graphics, see the examples provided in **foundation/graphic/ui/test/uitest**.
101
102- The Qt project can be debugged in the Windows environment. [User Guide](https://gitee.com/openharmony/graphic_ui/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)
103
104 Project file path:
105
106 ```
107 graphic/ui/tools/qt/simulator/simulator.pro
108 ```
109
110- For other debugging environments, you can run **foundation/graphic/wms/test:sample\_ui**.
111
112 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.
113
114
115## Repositories Involved<a name="section1371113476307"></a>
116
117[Graphic subsystem](https://gitee.com/openharmony/docs/blob/master/en/readme/graphics.md)
118
119[graphic_wms](https://gitee.com/openharmony/graphic_wms/blob/master/README.md)
120
121[graphic_surface](https://gitee.com/openharmony/graphic_surface/blob/master/README.md)
122
123**graphic_ui**
124
125[graphic_utils](https://gitee.com/openharmony/graphic_utils/blob/master/README.md)
