{"id":20834542,"url":"https://github.com/apriorit/minimalqml","last_synced_at":"2025-10-09T08:20:54.430Z","repository":{"id":145107396,"uuid":"107388755","full_name":"apriorit/MinimalQml","owner":"apriorit","description":"Minimal Qt Qml project built with CMake.","archived":false,"fork":false,"pushed_at":"2025-03-07T22:10:36.000Z","size":451,"stargazers_count":27,"open_issues_count":0,"forks_count":11,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T08:46:44.692Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CMake","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/apriorit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-18T09:47:15.000Z","updated_at":"2025-03-07T22:10:17.000Z","dependencies_parsed_at":"2025-01-18T21:38:59.337Z","dependency_job_id":null,"html_url":"https://github.com/apriorit/MinimalQml","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/apriorit/MinimalQml","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apriorit%2FMinimalQml","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apriorit%2FMinimalQml/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apriorit%2FMinimalQml/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apriorit%2FMinimalQml/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apriorit","download_url":"https://codeload.github.com/apriorit/MinimalQml/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apriorit%2FMinimalQml/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001101,"owners_count":26082991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T00:19:37.065Z","updated_at":"2025-10-09T08:20:54.414Z","avatar_url":"https://github.com/apriorit.png","language":"CMake","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\n\nThis guide aims to create a simple Qt application with Qt Quick graphical user \ninterface. The tutorial uses CMake as the project format and C++ as the language \nof source code. The application created is simple in design and consists of sole \nwindow.\n\nQtQuick is a user interface library for creating declarative\nuser interfaces that are separated from programming logic. This framework is\nimplemented as a part of the Qt library set. QML is a user interface \nspecification and programming language.\n\nCMake is the project generator for many platforms and build systems. The CMake build system uses  \nthe unified file format and is able to generate makefiles, Visual Studio \nsolutions, and projects for many other build systems from the same project file.\nYou can check out some [CMake examples](https://cmake.org/examples/) on the official website if you want to learn more.\n\nQt6 version in a separate branch: https://github.com/apriorit/MinimalQml/tree/qt6\n\n## Prerequisites\n\nIn order to develop an application using CMake with Qt QML,\nwe first need to make sure that we have all the necessary tools.\n\nCompiling and running the sample project requires GCC, CMake, GNU Make and the Qt \ndevelopment libraries with Qt Quick enabled. This tutorial specifies how to \ninstall pre-compiled packages from standard repositories.\n\n## Environment Setup\n\n### Debian-based Systems\n\nThe following instructions apply to:\n\n* Ubuntu 18.04\n* Ubuntu 16.04\n* Debian 9\n\n```\nsudo apt-get install -y \\\n    build-essential \\\n    cmake \\\n    qtbase5-dev \\\n    qtdeclarative5-dev \\\n    qml-module-qtquick2 \\\n    qml-module-qtquick-controls\n```\n\n### RedHat-based Systems\n\nThe following instructions apply to:\n\n* Fedora 22 and higher\n\n```\nsudo dnf install -y \\\n    gcc gcc-c++ make \\\n    cmake \\\n    qt5-qtquickcontrols \\\n    qt5-qtbase-devel \\\n    qt5-qtdeclarative-devel \\\n    qt5-qtquickcontrols2-devel\n```\n\n* CentOS 7\n\n```\nsudo yum install -y \\\n    gcc gcc-c++ make \\\n    cmake \\\n    qt5-qtquickcontrols \\\n    qt5-qtbase-devel \\\n    qt5-qtdeclarative-devel \\\n    qt5-qtquickcontrols2-devel\n```\n\n## Directory Structure\n\nThe directory of the project is laid out as follows:\n\n```\n$ tree\n.\n├── CMakeLists.txt\n└── src\n    ├── CMakeLists.txt\n    ├── main.cpp\n    ├── main.qml\n    └── qml.qrc\n \n1 directory, 5 files\n```\n\nAll source files for the project go in `src`, and main project specifications \nin CMake format go in `CMakeLists.txt`. Larger projects tend to be \norganised in sub-directories for modules, executables and libraries, each with \nits individual sub-directory and `CMakeLists.txt` file.\n\n## Main Window GUI File\n\nWith this example, we start with the declarative file for the user interface, which is specified in \n`src/main.qml`. The code below creates a small window without any controls:\n\n[src/main.qml](src/main.qml)\n\nThe next code imports all necessary modules. The exact version of `QtQuick` is not \nthe same as the version of the Qt framework used. `QtQuick.Controls` library \ncontains some basic controls for the user interface.\n\n```\nimport QtQuick 2.0\nimport QtQuick.Controls 1.0\n```\n\nMain application window is represented with the `ApplicationWindow` control in the \nQt Quick library. \n\n```\nApplicationWindow\n{\n...\n}\n```\n\nThere are four attributes of the main window that specify its size and title. \nThe `visible` aattribute specifies that the window should\nbe shown right after launch.\n\n```\nvisible: true\nwidth: 640\nheight: 480\ntitle: qsTr(\"Minimal Qml\")\n```\n\n## QML Resource File\n\nNext, let’s look at the QML resource file for an application that consists of sole QML file \nnamed `main.qml`. The file is written in XML with the `RCC` element as root and `qresource` as \nthe element for group of resources. This project contains only one group that's\nroot (i.e. `/`). Larger projects may contain additional `qresource` elements for \neach resource subgroup (e.g. `customControls`, `customWindows`, etc.).\n\n[src/qml.qrc](src/qml.qrc)\n\n## Application Code\n\nThe main entry point of the application provides the C++ code for displaying Qt \nQuick user interface.\n\n[src/main.qml](src/main.cpp)\n\nThe following code constructs a standard object for a Qt application:\n\n```\nQApplication app(argc, argv);\n```\n\nIn the next section, the QML parsing object is initiated for the application. This object \nreceives the string with the address of the main QML resource as the construction \nparameter. In this case, `qrc:/main.qml` is the address specified in the `qml.qrc` \nfile. `qrc` is the default prefix for the QML resource, and `/main.qml` references the \nresource named `main.qml` in the root resource directory (`/`).\n\n```\nQQmlApplicationEngine engine;\nengine.load(QUrl(QStringLiteral(\"qrc:/main.qml\")));\n```\n\nThe `exec` method starts the Qt application:\n\n```\nreturn app.exec();\n```\n\n## Project Files\n\nNow we’ll show you how to deploy a Qt Quick application using the CMake project\nformat.\n\nLet’s look at the main project file. The first line sets the minimum version of CMake \nfor the project. It then includes the Qt5 framework into the application \nas well as the `src` subdirectory so that CMake will search \nfor the project file (`CMakeLists.txt`) there.\n\n[CMakeLists.txt](CMakeLists.txt)\n\nThis is the project file for the executable:\n\n[src/CMakeLists.txt](src/CMakeLists.txt)\n\nThe header files of the Qt project should be included into the project so that the\nmakefiles generated will specify them in the corresponding compilation \ncommands. There Qt5Widgets stands the header files for the Qt Framework and \nQtQml invokes special files for QML functions.\n\n```\ninclude_directories(${Qt5Widgets_INCLUDE_DIRS} ${QtQml_INCLUDE_DIRS})\n```\n\nThe definitions as well as the Qt include files should be specified in the makefile \ncompilation commands.\n\n```\nadd_definitions(${Qt5Widgets_DEFINITIONS} ${QtQml_DEFINITIONS}\n                ${${Qt5Quick_DEFINITIONS}})\n```\n\nThe Qt framework requires the code to be created from the Qt resource files. \nThis is achieved using the special `qt5_add_resources` command. The QML resource \nfile path relative to this file is passed as an argument:\n\n```\nqt5_add_resources(QT_RESOURCES qml.qrc)\n```\n\nFor Qt projects with graphical user interface, the compiler should receive \nspecial parameters in order to compile:\n\n```\nset(CMAKE_CXX_FLAGS \"${CMAKE_CXX_FLAGS} ${Qt5Widgets_EXECUTABLE_COMPILE_FLAGS}\")\n```\n\nQt programs require several additional compilation steps for [moc](https://doc.qt.io/qt-5/moc.html),\n[rcc](https://doc.qt.io/qt-5/rcc.html) and [uic](https://doc.qt.io/qt-5/uic.html). \n\n```\nset(CMAKE_AUTOMOC ON)\nset(CMAKE_AUTORCC ON)\nset(CMAKE_AUTOUIC ON)\n```\n\nThe name of the project that will be used as the name of the compiled executable,\nis specified using the `set` command, which receives the name of a variable (i.e. \n`PROJECT`) and it's value.\n\n```\nset(PROJECT \"MinimalQml\")\n```\n\nThe `project` command sets the current project within the CMake file and receives \nthe value of the variable defined above:\n\n```\nproject(${PROJECT})\n```\n\nThe compiler flags for compiling C++ sources are set below. These flags set \nvery strict compilation rules and help to detect and locate a lot of \npotential issues during compilation.\n\n```\nset(CMAKE_CXX_FLAGS \"${CMAKE_CXX_FLAGS} -Wall -Werror -std=c++11 \n    -fstrict-aliasing -pedantic-errors -pedantic -Wno-deprecated-declarations \n    -Wno-unused-variable\")\n```\n\nThere are also conditional commands in the CMake. The code below \ndetects if there are `HEADERS` in the project. If the header files were not previously set, \nthe `file(GLOB ... .h)` command creates a list of all header files in the \ncurrent directory and passes them as header files of the current project. The \nsame applies to the `.cpp` sources that are stored in the `SOURCES` variable if \nthat was not defined.\n\n```\nif(NOT DEFINED HEADERS)\n    file(GLOB HEADERS ${CMAKE_CURRENT_SOURCE_DIR}/*.h)\nendif()\n \nif(NOT DEFINED SOURCES)\n    file(GLOB SOURCES ${CMAKE_CURRENT_SOURCE_DIR}/*.cpp)\nendif()\n```\n\nThe `source_group` definition creates a group of files that are placed in some \nbuild systems (e.g. project sub-directories in Visual Studio).\n\n```\nsource_group(\"Header Files\" FILES ${HEADERS})\nsource_group(\"Source Files\" FILES ${SOURCES})\n```\n\nThis command states that the project results in an executable file. The first \nparameter receives the name of an executable file (which in this case is the same as the name\nof the project). The rest of the arguments are project sources, \nheaders, and compiled Qt resources.\n\n```\nadd_executable(${PROJECT} ${HEADERS} ${SOURCES} ${QT_RESOURCES})\n```\n\nThe set of libraries that will be linked with the executable above is set with \nthe `target_link_libraries` command. Like the command above, it receives the name \nof project's executable and a list of libraries. In this case, the project uses only\nQt framework libraries.\n\n```\ntarget_link_libraries(${PROJECT}\n    Qt5::Widgets\n    Qt5::Qml\n    Qt5::Quick\n    )\n```\n\n## Building Project\n\nNow it’s time for building with CMake.\n\nYou can build your program using the commands below. CMake takes a directory \nwith the main project's `CMakeLists.txt` file as an argument. Then it \ncreates build files for GNU make, which builds an executable.\n\n```\ncd \u003cPathToProject\u003e\nmkdir build \u0026\u0026 cd build\ncmake ..\nmake\n```\n\nAfter a successful build, the binary `MinimalQml` will end up in `build/src/`.\n\n```\n./src/MinimalQml\n```\n\n## Working on a Project with Qt Creator\n\nYou can probably avoid working with Qt Creator by creating a Qt QML C++ plugin with CMake,\nbut we prefer going the traditional route.\n\nIf you want to know more about Qt Creator, you can find the [official manual](http://doc.qt.io/qtcreator/).\nNow, let’s look into how we can use Qt Creator with our Qt CMake example project.\n\nGo to the *Welcome* tab *(1)* in the main window and select *Open Project* *(2)*.\n\n![Qt Creator Welcome Page](img/qt101.png)\n\nIn the dialog box that opens, locate the `CMakeLists.txt` file in the project’s root directory.\n\n![Opening Project File](img/qt102.png)\n\nNext, select the version of *Qt framework* that you’ll use to \ncompile the project. If you have multiple frameworks installed,\nit’s possible to select several.\n\n![Selecting Qt Frameworks](img/qt103.png)\n\nAfter opening the project its directory structure will be visible in the *Projects* \npanel in Qt Creator.\n\n![Opened Qt Project](img/qt104.png)\n\nThe C++ source files are treated as usual by the editor.\n\n![Editing C++ File](img/qt105.png)\n\nQRC resource files are opened as a resource tree.\n\n![Opened QRC Resource File](img/qt106.png)\n\nFrom the resource tree, you can open QML files for the project.\n\n![Editing QML File](img/qt107.png)\n\n## Links\n\n* Qt Documentation \n  * [Qt QML](https://doc.qt.io/qt-5/qtqml-index.html)\n  * [Qt Quick](https://doc.qt.io/qt-5/qtquick-index.html)\n  * [QML Applications](https://doc.qt.io/qt-5/qmlapplications.html)\n* CMake\n  * [CMake Documentation](https://cmake.org/documentation/)\n  * [CMake Tutorial](https://cmake.org/cmake-tutorial/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapriorit%2Fminimalqml","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapriorit%2Fminimalqml","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapriorit%2Fminimalqml/lists"}