QML UI Development

QML UI development is a quick and easy way to create a user interface for a display module with the Qt Modeling Language. You can edit UI code directly or use the Qt Creator design view for a simpler experience. You can incorporate JavaScript statements and functions into the QML code to manipulate objects and their properties and provide interactivity.

QML Design View

QML Design View is a visual editor for QML code. To access the Design View:

  1. Open Qt Creator.
  2. Open a QML project.
  3. Select a .qml file.
  4. Click the Design View button on the left-hand side.
  5. On the lower left side of the Design View, you will find the Qt Types menu. Objects from this list can be dragged to the component in the middle and be automatically added to the QML file.
  6. To delete an object, click to select it and press the Delete key.
  7. When a component is selected, its properties can be edited using the menus on the right-hand side, such as Geometry, Font, and Color.

Reach Technology has provided an additional set of QML Components. To use them in your project, copy the Content, Images, and Components folders into your project’s folder.

QML Syntax

QML is visually similar to JavaScript. However, it functions differently. Like HTML and XML, QML files are hierarchical. Everything is contained in a single root object, typically a Rectangle type. The root object contains child objects, which can, in turn, have their own child objects. Each object has separate properties, whose values can be changed. For instance, the color property takes a hexadecimal string, and the value property takes an integer. Often components will have image properties. Images can be changed and modified using an image editing program such as Adobe Photoshop or the free alternative GIMP.

QML uses JavaScript style comments.

QML takes advantage of Qt Signals and Slots. Signals can be broadcast and received by other components’ Slots. Custom Signals and Slots can be declared in a components’ QML file.

Copy to Clipboard

Reach QML Viewer

The QML Viewer has been modified to include additional functionality. The ‘console.write()’ function can be used to send messages to the display module’s TIO Agent program. The TIO Agent will then translate the messages and pass them to the microcontroller.

Resources