Creating a custom QML element with Qt
(Created page with '{{CodeSnippet |id= |platform=S60 5th Edition<br>Maemo |devices=Nokia 900 |category=Qt |subcategory=Qt Quick |creationdate=June 16, 2010 |keywords=QML, QDeclarativeItem }} ==Over…') |
m (Removing non-existing category) |
||
| Line 179: | Line 179: | ||
The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding few new properties and overwriting the paint method. The Qt class was registered as QML type and it was then used in Qt Quick application. | The custom QML element <tt>Line</tt> was created with Qt by deriving the class <tt>QDeclarativeItem</tt>, adding few new properties and overwriting the paint method. The Qt class was registered as QML type and it was then used in Qt Quick application. | ||
| − | [[Category:Qt]][[Category:Code Examples | + | [[Category:Qt]][[Category:Code Examples]][[Category:Code Snippet]] |
Revision as of 08:59, 18 June 2010
Article Metadata
Tested with
Compatibility
Maemo
Article
Contents |
Overview
This snippet shows how to create a custom QML element with Qt. Sometimes the elements provided by the Declarative module are not enough and new element must be implemented.
In the example below we create a Line element which simply draws a line. The coordinates of the lines beginning and end must be given. It is also possible to adjust the color, pen width and smoothing of line.
Preconditions
- Qt 4.7 or higher is installed on your platform.
Source
qmlapp.pro
QT += core gui declarative
TARGET = qmlapp
TEMPLATE = app
SOURCES += main.cpp
HEADERS += line.h
OTHER_FILES += ui.qml
The new element is derived from QDeclarativeItem which gives us the functionality of QML Item such as x, y, width and height. We declare the new properties with macro Q_PROPERTY and tell which methods to use when properties are read and updated. The paint method handles the painting of our custom element. Finally, at the end of header, we declare class Line as QML type.
line.h
#ifndef LINE_H
#define LINE_H
#include <QDeclarativeItem>
#include <QPainter>
class Line : public QDeclarativeItem
{
Q_OBJECT
Q_PROPERTY(int x1 READ x1 WRITE setX1);
Q_PROPERTY(int y1 READ y1 WRITE setY1);
Q_PROPERTY(int x2 READ x2 WRITE setX2);
Q_PROPERTY(int y2 READ y2 WRITE setY2);
Q_PROPERTY(QColor color READ color WRITE setColor);
Q_PROPERTY(int penWidth READ penWidth WRITE setPenWidth);
public:
Line(QDeclarativeItem *parent = 0) :
QDeclarativeItem(parent), m_x1(0), m_y1(0), m_x2(0), m_y2(0), m_color(Qt::black), m_penWidth(1)
{
// Important, otherwise the paint method is never called
setFlag(QGraphicsItem::ItemHasNoContents, false);
}
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
QPen pen(m_color, m_penWidth);
painter->setPen(pen);
if(smooth() == true) {
painter->setRenderHint(QPainter::Antialiasing, true);
}
painter->drawLine(m_x1, m_y1, m_x2, m_y2);
}
// Get methods
int x1() const { return m_x1; }
int y1() const { return m_y1; }
int x2() const { return m_x2; }
int y2() const { return m_y2; }
QColor color() const { return m_color; }
int penWidth() const { return m_penWidth; }
// Set methods
void setX1(int x1) { m_x1 = x1; update(); }
void setY1(int y1) { m_y1 = y1; update(); }
void setX2(int x2) { m_x2 = x2; update(); }
void setY2(int y2) { m_y2 = y2; update(); }
void setColor(const QColor &color) { m_color = color; }
void setPenWidth(int newWidth) { m_penWidth = newWidth; }
protected:
int m_x1;
int m_y1;
int m_x2;
int m_y2;
QColor m_color;
int m_penWidth;
};
QML_DECLARE_TYPE(Line)
#endif // LINE_H
In the main.cpp we register the C++ type Line in the QML system with the name Line to the library CustomComponents with version number 1.0.
main.cpp
#include "line.h"
#include <QApplication>
#include <QDeclarativeView>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
qmlRegisterType<Line>("CustomComponents", 1, 0, "Line");
QDeclarativeView view;
view.setSource(QUrl("./ui.qml"));
view.setResizeMode(QDeclarativeView::SizeRootObjectToView);
#if defined(Q_WS_S60) || defined(Q_WS_MAEMO)
view.showMaximized();
#else
view.setGeometry(100,100, 800, 480);
view.show();
#endif
return a.exec();
}
In the QML document we import the CustomComponents library which contains the Line element.
ui.qml
import CustomComponents 1.0
import Qt 4.7
Rectangle {
property bool evenClick : false
anchors.fill: parent; color: "lightsteelblue"
Line {
id: diagonalLine
anchors.fill: parent
Behavior on x1 { NumberAnimation { duration: 1000 } }
Behavior on y1 { NumberAnimation { duration: 1000 } }
Behavior on x2 { NumberAnimation { duration: 1000 } }
Behavior on y2 { NumberAnimation { duration: 1000 } }
x1: parent.x + 20; y1: parent.height / 2
x2: parent.width - 20; y2: parent.height / 2
color: "tomato"; penWidth: 3; smooth: true
}
MouseArea {
anchors.fill: parent
onClicked: {
if(evenClick) { diagonalLine.x1 = mouseX; diagonalLine.y1 = mouseY }
else { diagonalLine.x2 = mouseX; diagonalLine.y2 = mouseY }
evenClick = !evenClick
}
}
}
Postconditions
The custom QML element Line was created with Qt by deriving the class QDeclarativeItem, adding few new properties and overwriting the paint method. The Qt class was registered as QML type and it was then used in Qt Quick application.
