QtOnAndroid

QML Javascript

← QML | ● | QML Interactive UI Elements →

QML is based on Javascript, so it inherits the following properties from it:

  • One file is a class, that is a blueprint of an object
  • Each object can contain a set of property entries
  • Each property is defined by a “<property>: <value>” entry
  • Changes of the objects properties are automatically reflected in the uses elsewhere
  • Changes of an object’s property “<P>” triggers the observer pattern in “on<P>Changed:”
  • Each class can contain new elements of other class types via a “<Class> {}” entry

But QML extends Javascript as follows:

  • Predefined “Item {}”, “Rectangle {}”, “MouseArea {}”, “Text {}”, etc. classes which map to visible elements of the ui
  • Predefined “id” property which assigns an unique name to an object
  • Predefined “anchor” properties which place an element relative to its parent
  • Predefined “color” property to define the color of the background resp. text
  • Predefined “visible” property which enables an element or not
  • Each visible element is displayed by an OpenGL / OpenGL ES rendering backend
  • Full support for transparency via OpenGL
  • Extensions for ui animations

As an example a green rectangle that fills the entire available window or screen space with a child text element at the bottom left: 

Rectangle {
    id: top
    color: "green"

    Text {
        anchors.centerIn: parent
        font.pointSize: 10
        color: "white"
        text: "Size=" + top.width + "x" + top.height
    }
}

Screen shot of the above QML example:


← QML | ● | QML Interactive UI Elements →

Options: