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 # Externel 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/ace_engine_lite/tree/master/frameworks/tools/qt/simulator) 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-subsystem.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)
