UI Files

You can use Qt Creator wizards to create UI files that have the filename extension .ui.qml. The UI files can be edited in Form Editor. If you use Text Editor to add code that is not supported by Form Editor, Qt Creator displays error messages.

The following features are not supported:

  • JavaScript blocks
  • Other bindings than pure expressions
  • Signal handlers
  • States in other components than the root component
  • Root components that are not derived from QQuickItem or Item

The following components are not supported:

  • Behavior
  • Binding
  • Canvas
  • Component
  • Shader Effect
  • Timer
  • Transform
  • Transition

Supported Methods

Qt Creator supports most JavaScript functions that are supported by the QML engine, as well as a subset of Qt QML methods.

This section lists the functions that you can use in .ui.qml files.

JavaScript Functions

As a rule of thumb, pure functions are supported. They only depend on and modify states of parameters that are within their scope, and therefore always return the same results when given the same parameters. This makes it possible to convert and reformat property bindings without breaking the .ui.qml files.

The following JavaScript functions are supported:

  • charAt()
  • charCodeAt()
  • concat()
  • endsWith()
  • includes()
  • indexOf()
  • isFinite()
  • isNaN()
  • lastIndexOf()
  • substring()
  • toExponential()
  • toFixed()
  • toLocaleLowerCase()
  • toLocaleString
  • toLocaleUpperCase()
  • toLowerCase()
  • toPrecision()
  • toString()
  • toUpperCase()
  • valueOf()

In addition, all functions of the Math and Date objects are supported.

For more information, see List of JavaScript Objects and Functions.

Qt QML Methods

Qt Creator supports color methods, helper methods for creating objects of specific data types, and translation methods.

The following color methods are supported:

The following helper methods are supported:

The following translation methods are supported:

For more information about using the methods, see Qt QML Methods.

Using UI Files

You can edit the UI files in the Form Editor and Text Editor views. Components that are supposed to be used in code have to be exported as properties:

Item {
    width: 640
    height: 480

    property alias button: button

    Button {
        anchors.centerIn: parent
        id: button
        text: qsTr("Press Me")
    }
}

The property alias exports the button to the code that uses the form. You can use the (Export) button in Navigator to export a component as a property:

In the UI file where the component is used, you can use the button property alias to implement signal handlers, for example. In the following code snippet, the UI file is called MainForm.ui.qml:

MainForm {
    anchors.fill: parent
    button.onClicked: messageDialog.show(qsTr("Button pressed"))
}

You can also assign properties or define behavior or transitions.

To move from Form Editor or Navigator directly to the implementation of a component in the .qml file, right-click the component and select Go to Implementation in the context menu.

© 2021 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.