This paper describes about how to create QML Components and define properties, methods and signals. This paper also talks about how a component can be reused without any interference of C++.


QML has the ability to define your own QML components that suits the purpose of your application. The standard QML elements provide the essential components for creating a QML application; beyond these, you can write your own custom components that can be created and reused, without the use of C++.

Literature Review

Components are the building blocks of a QML project. When writing a QML application, whether large or small, it is best to separate QML code into smaller components that perform specific sets of operations, instead of creating mammoth QML files with large, combined functionality that is more difficult to manage and may contain duplicated code.


In this section we will go through the different steps with code demonstration to have better understanding.

Defining New Components:
A component is a reusable type with a well-defined interface, built entirely in QML. Any snippet of QML code can become a component, by placing the code in a file “<Name>.qml” where <Name> is the new component name, beginning with an uppercase letter. These QML files automatically become available as new QML element types to other QML components and applications in the same directory.

Sample code:

// Button.qml
import QtQuick 1.0

Rectangle {
width: 100; height: 100
color: “red”

MouseArea {
anchors.fill: parent
onClicked: console.log(“Button clicked!”)

Now this component can be reused by another file within the same directory. Since the file is named Button.qml, the component is referred to as Button:

// application.qml
import QtQuick 1.0

Column {
Button { width: 50; height: 50 }
Button { x: 50; width: 100; height: 50; color: “blue” }
Button { width: 50; height: 50; radius: 8 }

Discussion and Conclusion

QML Provides a key concept of creating a custom component that is reusable without any interference of C++. It avoids code repetition by separating code in to small components that perform specific sets of operation, instead of writing in one qml and making code more complex.

For any technical support or queries feel free to write to us at or to know more about our expertise please visit our page on Qt Embedded Application Development