Time for action – a simple analog clock application

Create a new Qt Quick UI project. To create a clock, we will implement a component representing the clock needle and we will use instances of that component in the actual clock element. In addition to this, we will make the clock a reusable component; therefore, we will create it in a separate file and instantiate it from within main.qml:

import QtQuick 2.0

Clock {
  id: clock
  width:  400
  height: 400
}

Then, add the new QML file to the project and call it Clock.qml. Let's start by declaring a circular clock plate:

import QtQuick 2.0

Item {
  id: clock

  property color color: "lightgray"

  Rectangle {
    id: plate

    anchors.centerIn: parent
    width: Math.min(clock.width, clock.height)
    height: width
    radius: width/2
    color: clock.color
    border.color: Qt.darker(color)
    border.width: 2
  }
}

If you run the program now, you'll see a plain gray circle hardly resembling a clock plate:

The next...