1# Using Qt Creator on Windows
2
3Qt Creator is a cross-platform integrated development environment that enables you to get started and perform application development operations efficiently and easily. The graphics framework provides a Qt Creator project for you to quickly get familiar with the graphics framework.
4
5This topic describes how to install Qt Creator and Git on the Windows PC, obtain the minimum code repository of the UI simulator, and build and run the project.
6
7## Software Installation
8
9You need to download and install QT Creator and Git.
10
11### Installing Qt Creator
12Download Qt from the official website [https://www.qt.io/offline-installers](https://www.qt.io/offline-installers).
13
14Select the following three components during the installation:
15
16![Select installation components](figures/graphic_lite_qt_install.png)
17
18### Installing and Configuring Git
19Download Git from the [official website](https://git-scm.com/).
20
21![Git official website](figures/graphic_lite_git_download.png "Git official website")
22
23Double-click the downloaded installation program and complete the installation as prompted.
24
25## Obtaining the Minimum Code Repository of the UI Simulator
26
27### Source Code Acquisition
28
29Run the following git commands to pull the minimum code repository of the UI simulator.
30
31```git
32git clone https://gitee.com/openharmony/arkui_ui_lite.git                        -b   master  foundation/arkui/ui_lite
33git clone https://gitee.com/openharmony/graphic_graphic_utils_lite.git           -b   master  foundation/graphic/graphic_utils_lite
34
35git clone https://gitee.com/openharmony/graphic_surface_lite.git                 -b   master  foundation/graphic/surface_lite
36git clone https://gitee.com/openharmony/window_window_manager_lite.git           -b   master  foundation/window/window_window_manager_lite
37
38git clone https://gitee.com/openharmony/third_party_zlib.git                     -b   master  third_party/zlib
39git clone https://gitee.com/openharmony/third_party_qrcodegen.git                -b   master  third_party/qrcodegen
40git clone https://gitee.com/openharmony/third_party_libpng.git                   -b   master  third_party/libpng
41git clone https://gitee.com/openharmony/third_party_libjpeg.git                  -b   master  third_party/libjpeg
42git clone https://gitee.com/openharmony/third_party_icu.git                      -b   master  third_party/icu
43git clone https://gitee.com/openharmony/third_party_harfbuzz.git                 -b   master  third_party/harfbuzz
44git clone https://gitee.com/openharmony/third_party_freetype.git                 -b   master  third_party/freetype
45git clone https://gitee.com/openharmony/third_party_bounds_checking_function.git -b   master  third_party/bounds_checking_function
46git clone https://gitee.com/openharmony/third_party_cJSON.git                    -b   master  third_party/cJSON
47git clone https://gitee.com/openharmony/third_party_giflib.git                   -b   master  third_party/giflib
48git clone https://gitee.com/openharmony/third_party_libjpeg-turbo.git            -b   master  third_party/libjpeg-turbo
49```
50
511. Create a source code project directory.
522. Right-click the new directory and choose **Git Bash Here**.
533. Copy and paste the preceding commands to the terminal, press **Enter**, and wait until the download is complete. Alternatively, create a **clone.bat** file in the directory, copy and save the preceding commands, double-click **clone.bat**, and wait until the download is complete.
54
55  ![Downloading source code](figures/graphic_lite_git_clone.png "Download source code")
56
57### Opening Qt Creator
58
591. Choose **File > Open File or Project**.
602. Select the project in the displayed dialog box.
61
62The path of the source code is as follows:
63```bash
64foundation/arkui/ui_lite/tools/qt/simulator/simulator.pro
65```
66
67Note: When you open the project for the first time, select only **minGW** in the **kits** list on the **Configure Project** page.
68
69![Opening a project](figures/graphic_lite_qt_project_open.png "Open project")
70
713. Click **Configure Project** to load the project.
72
73![Selecting minGW](figures/graphic_lite_qt_project_open2.png "Select minGW")
74
75### UI Test Application Running Entry
76
77Expand the project tree.
78
79```
80simulator
81  |-UITest
82    |-Sources
83      |-main.cpp
84```
85![Project tree](figures/graphic_lite_qt_project_run.png "Project tree")
86
87### Build
88
89Choose **Build > Build Project "simulator"**, or right-click the project tree and choose **Rebuild**.
90
91![Build](figures/graphic_lite_qt_project_build.png "Build")
92
93### Debugging
94
95Click the running triangle in the lower left corner to run the code, and click the debugging button to start debugging.
96
97![Running window](figures/graphic_lite_qt_project_debug.png "Running window")
98
99![Test UI](figures/graphic_lite_qt_project_demo.png "Test UI")
100