Issue 58

Destination: QML

Raluca Grigoriu
Associate Software Engineer @ Telenav


Many of us are searching for something. We are engaged in an infinite journey for which it is very hard to set a destination, but maybe this journey doesn't need an end, it just needs passion along the way.

Travelling throught the programming languages is not easy because we encounter many adventurous waypoints along the road. Sometimes, these waypoints represent an obstacle in our way or the view they offer is dissapointing, but it is those that fascinate us throught their simplicity and beauty that keep us going.

My journey has just started and I already found an intermediary point which made me take a break and look around: QML.

QML (Qt Meta Language or Qt Modeling Language) is a declarative language which allowes us to easily create graphical user interfaces. Qt Meta Language is part of the Qt Quick module which containes a QML API and a C++ API and it is mainly used to create the design for mobile applications.

The main objects QML offers are Item, Rectangle, Image, MouseArea, Flickable, Row, Column, Text. Each object has its own list of properties, but it also has access to the properties inherited from its parent.

The created object can be recognized by its id. The id is an essential property when we need to access our object and change its properties or when we want to connect two properties from different objects. Creating connected objects is impressively easy in QML which is implicit and very expressive.

We can place an object using the anchors properties. In the next example I used these properties to anchor the black rectangle under the blue one. Wherever we move the blue rectangle, the top of the black one will always remain under the blue ones bottom.

The alternative in other programming languages is to give absolute positions. For example:

Rectangle {
  id: blueRectangle
  x: 0
  y: 0

QML is more elegant but it also give us the posibility to set absolute positions.

You might think that this language is similar to JavaScript and CSS. QML objects are in fact JSON objects which support JavaScript.

If we look over the code that helped us create the first image, we can observe that we have two files:



Diamond.qml is a customized object which has a rotation and certain dimentions and main.qml contains some nested objects.

The first created object in main.qml is Window. Window defines the main screen where our objects will be displayed. Inside Window we defined a Row. In this case Window is the parent of the Row. The Row object is centered in parent and has its own dimensions. We can easily use Row to display inline elements without anchoring them.

When we instantiate our Diamond object, we are free to either append new properties or to overwrite the existing ones. In this way, we can notice that each Diamond object has its own color and id.

Elements can also be extended by back-end components in order to avoid complex behaviours in QML.

Experimenting is a bliss, we have to find our inner artist, let him satisfy his thirst for creation and embrace the charm of the unknown. Sometimes the mistery of the road makes us to keep going, not knowing exactly at what destination we will arrive to makes us curious and without even noticing it, we end up in the middle of the an adventure.

Like a painting or a melody can't be totally described with words, neither this language can be explained in a few phrases, it is your call if you want to set QML as an intermediary point in your journey.




  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • Connatix
  • BoatyardX
  • AboutYou
  • Telenav
  • .msg systems
  • Grab
  • Colors in projects