In Qt Safe Renderer, the safety-critical UI elements are implemented as QML Types. To include these to your application, you must add them to UI Files (.ui.qml).

You can use Qt Design Studio for designing an application UI that contains both safety-critical and non-safety elements in the .ui.qml files. This topic introduces the Qt Safe Renderer related functionality in Qt Design Studio.

UI Files in Qt Design Studio

Create a new UI file (.ui.qml file) in Qt Design Studio as follows:

1. Select File > New File > Qt Quick Files > QtQuick UI File.
2. Select Choose.
3. In Component name, type the name for the component, that is, the .ui.qml file.
4. Select Finish.

Add Qt Safe Renderer safety-critical QML types to the UI Files as follows:

1. In Components, type safe to the search field to find the Qt Safe Renderer components. Those should appear under QT SAFERENDERER (1).
2. Drag and drop components to the Form Editor (2).
3. The QML code is automatically genereted to Text Editor. import Qt.SafeRenderer 2.0 indicates you are using Qt Safe Renderer 2.0 components on your application (3).

For more information how to use Qt Design Studio, see Qt Design Studio Manual.

Adding UI Files to Project

The Indicators example demonstrates how you can add UI files (.ui.qml) to your project in Qt Creator. When you add a new UI file, do as follows:

• Update the SAFE_QML variable in project file (.pro) with a path and name of your .ui.qml file. For example, if your UI file is under the Indicators example directory: SAFE_QML = $$PWD/MainForm.ui.qml $$PWD/MyTest.ui.qml.
• In main.cpp, read the generated layout data as follows: static QSafeLayoutResourceReader layout("/layoutData/MyTest/MyTest.ui.srl");

You can add the UI files to your project's tree directory as follows:

1. In the Edit mode, select your application.
2. In the context menu, select Add Existing Files and browse to your UI file.
3. Select Open.

For more information about how to work with Qt Safe Renderer in Qt Creator, see Enabling Qt Safe Renderer in Project.