๐ *Gen AI Engineer (Production Focused)* ๐ก What is QML?
QML (Qt Modeling Language) is a declarative markup language used primarily for designing user interfaces. It is a core part of the Qt framework, a popular toolkit used to build cross-platform applications ๐ฑ๐ฅ๏ธ (desktop, mobile, and embedded systems).
๐งฉ The Concept: Think of QML as a hybrid between JSON and CSS, but with the ability to embed JavaScript directly into it for handling logic. Instead of writing hundreds of lines of complex C++ code to build a graphical interface, QML allows you to describe what the UI should look like in a highly readable, hierarchical format.
โญ Key Characteristics of QML
- ๐ฏ Declarative: You describe the final state of the UI (e.g., “I want a red rectangle with text inside”) rather than the step-by-step programming instructions to draw it.
- ๐ Property Binding: If you link a property (like the width of a box) to a variable, the UI will automatically update ๐ whenever that variable changes.
- โก JavaScript Integration: You can write standard JavaScript functions right inside QML to handle interactive elements like button clicks or animations.
๐ป A Simple QML Example
Here is a basic example of a QML application that creates a window, sets a background color, displays some text, and includes a clickable button.
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 300
title: "My First QML App"
// The main background area
Rectangle {
anchors.fill: parent
color: "lightblue"
// Centered text
Text {
anchors.centerIn: parent
text: "Hello, QML!"
font.pixelSize: 24
color: "darkblue"
}
// A button at the bottom
Button {
text: "Click Me"
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 20
// JavaScript logic for the click event
onClicked: {
console.log("The button was clicked!")
}
}
}
}๐ Breaking Down the Example
- ๐ฆ
importstatements: These pull in the necessary Qt libraries.QtQuickprovides the basic visual elements (likeRectangleandText), andQtQuick.Controlsprovides pre-built UI components (likeButton). - ๐งฑ Objects (
ApplicationWindow,Rectangle,Text): Every block in QML is an object. They are nested inside one another to create a hierarchy. TheRectangleis a child of theApplicationWindow. - โ๏ธ Properties (
width,color,text): Inside the curly braces{}, you define the properties of that specific object. - โ Anchors (
anchors.centerIn,anchors.bottom): QML uses an anchoring system for layout. Instead of giving exact X and Y coordinates, you tell elements to anchor themselves relative to theirparentor sibling objects. - ๐ก Signals and Handlers (
onClicked): When an event happens (a signal), a handler reacts to it. Here,onClickedexecutes a small piece of JavaScript to log a message to the console.
๐ก QML เฐ เฐเฐเฑ เฐเฐฎเฐฟเฐเฐฟ?
QML (Qt Modeling Language – เฐเฑเฐฏเฑเฐเฐฟ เฐฎเฑเฐกเฐฒเฐฟเฐเฐเฑ เฐฒเฐพเฐเฐเฑเฐตเฑเฐเฑ) เฐ เฐจเฑเฐฆเฐฟ เฐชเฑเฐฐเฐงเฐพเฐจเฐเฐเฐพ เฐฏเฑเฐเฐฐเฑ เฐเฐเฐเฐฐเฑโเฐซเฑเฐธเฑโเฐฒเฐจเฑ (UI) เฐกเฐฟเฐเฑเฐจเฑ เฐเฑเฐฏเฐกเฐพเฐจเฐฟเฐเฐฟ เฐเฐชเฐฏเฑเฐเฐฟเฐเฐเฑ เฐกเฐฟเฐเฑเฐฒเฐฐเฑเฐเฐฟเฐตเฑ เฐฎเฐพเฐฐเฑเฐเฐชเฑ เฐฒเฐพเฐเฐเฑเฐตเฑเฐเฑ. เฐเฐฆเฐฟ เฐเฑเฐฐเฐพเฐธเฑ-เฐชเฑเฐฒเฐพเฐเฑโเฐซเฐพเฐฐเฐฎเฑ เฐ เฐชเฑเฐฒเฐฟเฐเฑเฐทเฐจเฑโเฐฒเฐจเฑ ๐ฑ๐ฅ๏ธ (เฐกเฑเฐธเฑเฐเฑโเฐเฐพเฐชเฑ, เฐฎเฑเฐฌเฑเฐฒเฑ เฐฎเฐฐเฐฟเฐฏเฑ เฐเฐเฐฌเฑเฐกเฑเฐกเฑ เฐธเฐฟเฐธเฑเฐเฐฎเฑโเฐฒเฑ) เฐฐเฑเฐชเฑเฐเฐฆเฐฟเฐเฐเฐกเฐพเฐจเฐฟเฐเฐฟ เฐเฐชเฐฏเฑเฐเฐฟเฐเฐเฑ เฐชเฑเฐฐเฐธเฐฟเฐฆเฑเฐง เฐเฑเฐฒเฑโเฐเฐฟเฐเฑ เฐ เฐฏเฐฟเฐจ Qt เฐซเฑเฐฐเฑเฐฎเฑโเฐตเฐฐเฑเฐเฑโเฐฒเฑ เฐชเฑเฐฐเฐงเฐพเฐจ เฐญเฐพเฐเฐ.
๐งฉ เฐญเฐพเฐตเฐจ: QMLเฐจเฐฟ JSON เฐฎเฐฐเฐฟเฐฏเฑ CSSเฐฒ เฐเฐฒเฐฏเฐฟเฐเฐเฐพ เฐญเฐพเฐตเฐฟเฐเฐเฐตเฐเฑเฐเฑ, เฐ เฐฏเฐฟเฐคเฑ เฐฒเฐพเฐเฐฟเฐเฑโเฐจเฐฟ เฐจเฐฟเฐฐเฑเฐตเฐนเฐฟเฐเฐเฐกเฐพเฐจเฐฟเฐเฐฟ เฐฆเฑเฐจเฐฟเฐฒเฑ เฐจเฑเฐฐเฑเฐเฐพ เฐเฐพเฐตเฐพเฐธเฑเฐเฑเฐฐเฐฟเฐชเฑเฐเฑ (JavaScript)เฐจเฑ เฐชเฑเฐเฐฆเฑเฐชเฐฐเฐเฑ เฐธเฐพเฐฎเฐฐเฑเฐฅเฑเฐฏเฐ เฐเฐเฐเฑเฐเฐฆเฐฟ. เฐเฑเฐฐเฐพเฐซเฐฟเฐเฐฒเฑ เฐเฐเฐเฐฐเฑโเฐซเฑเฐธเฑโเฐจเฑ เฐฐเฑเฐชเฑเฐเฐฆเฐฟเฐเฐเฐกเฐพเฐจเฐฟเฐเฐฟ เฐตเฐเฐฆเฐฒ เฐเฑเฐฆเฑเฐฆเฑ เฐธเฐเฐเฑเฐฒเฐฟเฐทเฑเฐเฐฎเฑเฐจ C++ เฐเฑเฐกเฑ เฐฐเฐพเฐฏเฐกเฐพเฐจเฐฟเฐเฐฟ เฐฌเฐฆเฑเฐฒเฑเฐเฐพ, UI เฐเฐฒเฐพ เฐเฐเฐกเฐพเฐฒเฑ เฐ เฐคเฑเฐฏเฐเฐค เฐธเฑเฐฒเฐญเฐเฐเฐพ เฐ เฐฐเฑเฐฅเฐฎเฐฏเฑเฐฏเฑเฐฒเฐพ, เฐเฑเฐฐเฐฎเฐพเฐจเฑเฐเฐค เฐเฐเฑเฐคเฐฟเฐฒเฑ (hierarchical format) เฐตเฐฟเฐตเฐฐเฐฟเฐเฐเฐกเฐพเฐจเฐฟเฐเฐฟ QML เฐฎเฐฟเฐฎเฑเฐฎเฐฒเฑเฐจเฐฟ เฐ เฐจเฑเฐฎเฐคเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ.
โญ QML เฐฏเฑเฐเฑเฐ เฐฎเฑเฐเฑเฐฏ เฐฒเฐเฑเฐทเฐฃเฐพเฐฒเฑ
- ๐ฏ เฐกเฐฟเฐเฑเฐฒเฐฐเฑเฐเฐฟเฐตเฑ (Declarative): UIเฐจเฐฟ เฐเฑเฐฏเฐกเฐพเฐจเฐฟเฐเฐฟ เฐฆเฐถเฐฒเฐตเฐพเฐฐเฑ เฐชเฑเฐฐเฑเฐเฑเฐฐเฐพเฐฎเฐฟเฐเฐเฑ เฐธเฑเฐเฐจเฐฒเฑ เฐเฐเฑเฐเฑ เฐฌเฐฆเฑเฐฒเฑ, UI เฐฏเฑเฐเฑเฐ เฐคเฑเฐฆเฐฟ เฐธเฑเฐฅเฐฟเฐคเฐฟ เฐเฐฒเฐพ เฐเฐเฐกเฐพเฐฒเฑ (เฐเฐฆเฐพเฐนเฐฐเฐฃเฐเฑ, “เฐจเฐพเฐเฑ เฐฒเฑเฐชเฐฒ เฐเฑเฐเฑเฐธเฑเฐเฑ เฐเฐจเฑเฐจ เฐเฐฐเฑเฐฐเฐเฐฟ เฐฆเฑเฐฐเฑเฐเฐเฐคเฑเฐฐเฐธเฑเฐฐเฐ เฐเฐพเฐตเฐพเฐฒเฐฟ” เฐ เฐจเฐฟ) เฐฎเฑเฐฐเฑ เฐตเฐฟเฐตเฐฐเฐฟเฐธเฑเฐคเฐพเฐฐเฑ.
- ๐ เฐชเฑเฐฐเฐพเฐชเฐฐเฑเฐเฑ เฐฌเฑเฐเฐกเฐฟเฐเฐเฑ (Property Binding): เฐฎเฑเฐฐเฑ เฐเฐ เฐชเฑเฐฐเฐพเฐชเฐฐเฑเฐเฑเฐจเฐฟ (เฐฌเฐพเฐเฑเฐธเฑ เฐตเฑเฐกเฐฒเฑเฐชเฑ เฐฒเฐพเฐเฐเฐฟเฐฆเฐฟ) เฐเฐ เฐตเฑเฐฐเฐฟเฐฏเฐฌเฑเฐฒเฑโเฐเฐฟ เฐฒเฐฟเฐเฐเฑ เฐเฑเฐธเฑเฐคเฑ, เฐ เฐตเฑเฐฐเฐฟเฐฏเฐฌเฑเฐฒเฑ เฐฎเฐพเฐฐเฐฟเฐจเฐชเฑเฐชเฑเฐกเฐฒเฑเฐฒเฐพ UI เฐเฐเฑเฐฎเฑเฐเฐฟเฐเฑโเฐเฐพ เฐ เฐชเฑโเฐกเฑเฐเฑ เฐ เฐตเฑเฐคเฑเฐเฐฆเฐฟ ๐.
- โก เฐเฐพเฐตเฐพเฐธเฑเฐเฑเฐฐเฐฟเฐชเฑเฐเฑ เฐเฐเฐเฐฟเฐเฑเฐฐเฑเฐทเฐจเฑ (JavaScript Integration): เฐฌเฐเฐจเฑ เฐเฑเฐฒเฐฟเฐเฑโเฐฒเฑ เฐฒเฑเฐฆเฐพ เฐฏเฐพเฐจเฐฟเฐฎเฑเฐทเฐจเฑโเฐฒ เฐตเฐเฐเฐฟ เฐตเฐพเฐเฐฟเฐจเฐฟ เฐจเฐฟเฐฐเฑเฐตเฐนเฐฟเฐเฐเฐกเฐพเฐจเฐฟเฐเฐฟ เฐฎเฑเฐฐเฑ QML เฐฒเฑเฐชเฐฒเฑ เฐจเฑเฐฐเฑเฐเฐพ เฐชเฑเฐฐเฐพเฐฎเฐพเฐฃเฐฟเฐ เฐเฐพเฐตเฐพเฐธเฑเฐเฑเฐฐเฐฟเฐชเฑเฐเฑ เฐซเฐเฐเฑเฐทเฐจเฑโเฐฒเฐจเฑ เฐฐเฐพเฐฏเฐตเฐเฑเฐเฑ.
๐ป เฐเฐ เฐธเฐพเฐงเฐพเฐฐเฐฃ QML เฐเฐฆเฐพเฐนเฐฐเฐฃ
เฐเฐ เฐตเฐฟเฐเฐกเฑเฐจเฑ เฐธเฑเฐทเฑเฐเฐฟเฐเฐเฐฟ, เฐฌเฑเฐฏเฐพเฐเฑโเฐเฑเฐฐเฑเฐเฐกเฑ เฐฐเฐเฐเฑเฐจเฑ เฐธเฑเฐเฑ เฐเฑเฐธเฐฟ, เฐเฑเฐเฐค เฐเฑเฐเฑเฐธเฑเฐเฑโเฐจเฐฟ เฐชเฑเฐฐเฐฆเฐฐเฑเฐถเฐฟเฐเฐเฐฟ, เฐเฑเฐฒเฐฟเฐเฑ เฐเฑเฐฏเฐเฐฒ เฐฌเฐเฐจเฑโเฐจเฑ เฐเฐฒเฐฟเฐเฐฟ เฐเฐเฐกเฑ QML เฐ เฐชเฑเฐฒเฐฟเฐเฑเฐทเฐจเฑ เฐฏเฑเฐเฑเฐ เฐชเฑเฐฐเฐพเฐฅเฐฎเฐฟเฐ เฐเฐฆเฐพเฐนเฐฐเฐฃ เฐเฐเฑเฐเฐก เฐเฐเฐฆเฐฟ.
QML
import QtQuick 2.15
import QtQuick.Controls 2.15
ApplicationWindow {
visible: true
width: 400
height: 300
title: "My First QML App"
// เฐชเฑเฐฐเฐงเฐพเฐจ เฐฌเฑเฐฏเฐพเฐเฑโเฐเฑเฐฐเฑเฐเฐกเฑ เฐชเฑเฐฐเฐพเฐเฐคเฐ
Rectangle {
anchors.fill: parent
color: "lightblue"
// เฐฎเฐงเฑเฐฏเฐฒเฑ เฐเฐจเฑเฐจ เฐเฑเฐเฑเฐธเฑเฐเฑ
Text {
anchors.centerIn: parent
text: "Hello, QML!"
font.pixelSize: 24
color: "darkblue"
}
// เฐฆเฐฟเฐเฑเฐตเฐจ เฐเฐ เฐฌเฐเฐจเฑ
Button {
text: "Click Me"
anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter
anchors.bottomMargin: 20
// เฐเฑเฐฒเฐฟเฐเฑ เฐเฐตเฑเฐเฐเฑ เฐเฑเฐธเฐ เฐเฐพเฐตเฐพเฐธเฑเฐเฑเฐฐเฐฟเฐชเฑเฐเฑ เฐฒเฐพเฐเฐฟเฐเฑ
onClicked: {
console.log("The button was clicked!")
}
}
}
}
๐ เฐเฐฆเฐพเฐนเฐฐเฐฃ เฐตเฐฟเฐถเฑเฐฒเฑเฐทเฐฃ
- ๐ฆ
importเฐธเฑเฐเฑเฐเฑโเฐฎเฑเฐเฐเฑโเฐฒเฑ: เฐเฐตเฐฟ เฐ เฐตเฐธเฐฐเฐฎเฑเฐจ Qt เฐฒเฑเฐฌเฑเฐฐเฐฐเฑเฐฒเฐจเฑ เฐคเฑเฐธเฑเฐเฑเฐตเฐธเฑเฐคเฐพเฐฏเฐฟ.QtQuickเฐชเฑเฐฐเฐพเฐฅเฐฎเฐฟเฐ เฐฆเฑเฐถเฑเฐฏ เฐ เฐเฐถเฐพเฐฒเฐจเฑ (RectangleเฐฎเฐฐเฐฟเฐฏเฑTextเฐตเฐเฐเฐฟเฐตเฐฟ) เฐ เฐเฐฆเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ, เฐฎเฐฐเฐฟเฐฏเฑQtQuick.Controlsเฐฎเฑเฐเฐฆเฑ เฐจเฐฟเฐฐเฑเฐฎเฐฟเฐเฐเฐฟเฐจ UI เฐญเฐพเฐเฐพเฐฒเฐจเฑ (Buttonเฐตเฐเฐเฐฟเฐตเฐฟ) เฐ เฐเฐฆเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ. - ๐งฑ เฐเฐฌเฑเฐเฑเฐเฑเฐเฑโเฐฒเฑ (
ApplicationWindow,Rectangle,Text): QMLเฐฒเฑเฐจเฐฟ เฐชเฑเฐฐเฐคเฐฟ เฐฌเฑเฐฒเฐพเฐเฑ เฐเฐ เฐเฐฌเฑเฐเฑเฐเฑเฐเฑ. เฐเฐเฐฆเฐพเฐจเฐฟเฐเฑเฐเฐเฐฟ เฐฒเฑเฐชเฐฒ เฐเฐเฐเฐกเฐ เฐฆเฑเฐตเฐพเฐฐเฐพ เฐเฐ เฐเฑเฐฐเฐฎเฐพเฐจเฑเฐเฐค เฐจเฐฟเฐฐเฑเฐฎเฐพเฐฃเฐพเฐจเฑเฐจเฐฟ (hierarchy) เฐเฐฐเฑเฐชเฐฐเฑเฐธเฑเฐคเฐพเฐฏเฐฟ. เฐเฐเฑเฐเฐกRectangleเฐ เฐจเฑเฐฆเฐฟApplicationWindowเฐฏเฑเฐเฑเฐ เฐเฑเฐฒเฑเฐกเฑ. - โ๏ธ เฐชเฑเฐฐเฐพเฐชเฐฐเฑเฐเฑเฐฒเฑ (
width,color,text): เฐตเฐเฐเฐฐ เฐเฑเฐเฐกเฐฒเฑเฐเฐฐเฐฃเฐพเฐฒ{}เฐฒเฑเฐชเฐฒ, เฐฎเฑเฐฐเฑ เฐ เฐจเฐฟเฐฐเฑเฐฆเฐฟเฐทเฑเฐ เฐเฐฌเฑเฐเฑเฐเฑเฐเฑ เฐฏเฑเฐเฑเฐ เฐชเฑเฐฐเฐพเฐชเฐฐเฑเฐเฑเฐฒเฐจเฑ (เฐฒเฐเฑเฐทเฐฃเฐพเฐฒเฐจเฑ) เฐจเฐฟเฐฐเฑเฐตเฐเฐฟเฐธเฑเฐคเฐพเฐฐเฑ. - โ เฐฏเฐพเฐเฐเฐฐเฑเฐฒเฑ (
anchors.centerIn,anchors.bottom): เฐฒเฑเฐ เฐตเฑเฐเฑ เฐเฑเฐธเฐ QML เฐฏเฐพเฐเฐเฐฐเฐฟเฐเฐเฑ เฐธเฐฟเฐธเฑเฐเฐฎเฑโเฐจเฑ เฐเฐชเฐฏเฑเฐเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ. เฐเฐเฑเฐเฐฟเฐคเฐฎเฑเฐจ X เฐฎเฐฐเฐฟเฐฏเฑ Y เฐเฑเฐเฐฐเฑเฐกเฐฟเฐจเฑเฐเฑโเฐฒเฐจเฑ เฐเฐตเฑเฐตเฐกเฐพเฐจเฐฟเฐเฐฟ เฐฌเฐฆเฑเฐฒเฑเฐเฐพ, เฐตเฐพเฐเฐฟ เฐชเฑเฐฐเฑเฐเฐเฑ (parent) เฐฒเฑเฐฆเฐพ เฐคเฑเฐฌเฑเฐเฑเฐเฑเฐตเฑเฐฒ (sibling) เฐเฐฌเฑเฐเฑเฐเฑเฐเฑโเฐฒเฐเฑ เฐธเฐพเฐชเฑเฐเฑเฐทเฐเฐเฐพ เฐคเฐฎเฐจเฑ เฐคเฐพเฐฎเฑ เฐฏเฐพเฐเฐเฐฐเฑ เฐเฑเฐธเฑเฐเฑเฐฎเฐจเฐฟ เฐฎเฑเฐฐเฑ เฐเฐฒเฐฟเฐฎเฑเฐเฐเฑเฐธเฑโเฐเฑ เฐเฑเฐฌเฑเฐคเฐพเฐฐเฑ. - ๐ก เฐธเฐฟเฐเฑเฐจเฐฒเฑเฐธเฑ เฐฎเฐฐเฐฟเฐฏเฑ เฐนเฑเฐฏเฐพเฐเฐกเฑเฐฒเฐฐเฑเฐธเฑ (
onClicked): เฐเฐ เฐเฐตเฑเฐเฐเฑ เฐเฐฐเฐฟเฐเฐฟเฐจเฐชเฑเฐชเฑเฐกเฑ (เฐเฐ เฐธเฐฟเฐเฑเฐจเฐฒเฑ), เฐฆเฐพเฐจเฐฟเฐเฐฟ เฐเฐ เฐนเฑเฐฏเฐพเฐเฐกเฑเฐฒเฐฐเฑ เฐธเฑเฐชเฐเฐฆเฐฟเฐธเฑเฐคเฑเฐเฐฆเฐฟ. เฐเฐเฑเฐเฐก, เฐเฐจเฑเฐธเฑเฐฒเฑโเฐเฑ เฐฎเฑเฐธเฑเฐเฑ เฐฒเฐพเฐเฑ เฐเฑเฐฏเฐกเฐพเฐจเฐฟเฐเฐฟonClickedเฐเฐ เฐเฐฟเฐจเฑเฐจ เฐเฐพเฐตเฐพเฐธเฑเฐเฑเฐฐเฐฟเฐชเฑเฐเฑโเฐจเฑ เฐเฐเฑเฐเฐฟเฐเฑเฐฏเฑเฐเฑ เฐเฑเฐธเฑเฐคเฑเฐเฐฆเฐฟ.
