cutehmi/doc/using-qt-creator-in-design-mode.md

0001 # Using Qt Creator in "Design" mode
0002
0003 Qt Creator is a great IDE, which can help you a lot when designing QML applications. In order to be able to use CuteHMI components
0004 in "Design" mode, in a similar fashion as on the screenshot below, you need to set up only few things.
0005
0006 ![Design mode](images/design_mode.png)
0007
0008 First thing to acknowledge is that "Design" mode may not work with `Debug` build type. This is because Qt Creator underneath uses
0009 release version of Qt libraries to render QML components. On Windows Qt Creator will give you an error message that you can not mix
0010 debug and release version of libraries. So, to avoid troubles set build type to `Release`, when dealing with "Design" mode.
0011
0012 After that you need to build CuteHMI, so that libraries and QML extensions are available. CuteHMI build framework sets paths for
0013 you, so there shouldn't be a need to set [qmlImportPaths property](https://doc.qt.io/qbs/porting-to-qbs.html#qml-import-path).
0014
0015 Next go to `Tools -> Options... -> Qt Quick`, then select `Qt Quick Designer` tab. In `QML Emulation Layer` group change `Use
0016 fallback emulation layer` option to `Use QML emulation layer that is built with the selected Qt`.
0017
0018 ![QML Emulation Layer group](images/qml_emulation_layer.png)
0019
0020 You may need to restart Qt Creator to make it adjust to directories containing newly available QML extensions, which you have
0021 successfully built.
0022
0023 After that you should be able to use QML components provided by CuteHMI in "Design" mode. Generic documentation on how to use QML
0024 extensions with Qt Creator is available
0025 [here](https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules)
0026