Archived:Creating a custom custom line editor from QLineEdit

Jump to: navigation, search

Revision as of 07:45, 2 March 2012

This example shows how to derive our own Line Widget from QLineEdit. QLineEdit is a one-line text editor. A line edit allows the user to enter and edit a single line of plain text with a useful collection of editing functions, including undo and redo, cut and paste, and drag and drop.

Archived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (based on C++ for the Qt UI) deprecated.

Article Metadata

Tested with

SDK: Qt 4.6.2, Qt 4.7

Devices(s): Emulator

Compatibility

Platform(s): S60 5th Edition

Article

Keywords: QLineEdit

Created: skumar_rao (21 Nov 2010)

Last edited: hamishwillee (02 Mar 2012)

Implementation

We will derive a class named QCustomEditLine

class QCustomEditLine : public QLineEdit
 
QCustomEditLine::QCustomEditLine(QWidget *parent) : QLineEdit(parent)

Add a function to take the default text once we get it we will refresh the control to re-draw.

emptyMessage = msg;
drawEmptyMsg = text().isEmpty();
update();

Derive paintEvent( QPaintEvent *ev ) to draw the text that we want to show when there is no text is entered.

QPainter p(this);
QFont f = font();
f.setItalic(true);
p.setFont(f);
 
QColor color(palette().color(foregroundRole()));
color.setAlphaF(0.5);
p.setPen(color);
 
QStyleOptionFrame opt;
initStyleOption(&opt);
QRect cr = style()->subElementRect(QStyle::SE_LineEditContents, &opt, this);
cr.setLeft(cr.left() + 2);
cr.setRight(cr.right() - 2);
 
p.drawText(cr, Qt::AlignLeft|Qt::AlignVCenter, emptyMessage);

control the drawing to show the default text when control is focused out and blank it when cointrol focused in.

Now we are ready to add to our widget. To use do the following:

m_lineout = new QCustomEditLine(this);
m_lineout->setEmptyMessage("Enter you Email Address");

qcustomeditline.h

#ifndef QCUSTOMEDITLINE_H
#define QCUSTOMEDITLINE_H
 
#include <QtGui>
 
class QCustomEditLine : public QLineEdit
{
    Q_OBJECT
public:
    QCustomEditLine(QWidget *parent = 0);
    virtual ~QCustomEditLine();
 
public:
    void setEmptyMessage( const QString &msg );
 
protected:
    void paintEvent( QPaintEvent *ev );
    void focusInEvent( QFocusEvent *ev );
    void focusOutEvent( QFocusEvent *ev );
 
private:
    QString emptyMessage;
    bool drawEmptyMsg;
};
 
#endif // QCUSTOMEDITLINE_H

qcustomeditline.cpp

#include "qcustomeditline.h"
 
QCustomEditLine::QCustomEditLine(QWidget *parent)
                : QLineEdit( parent ){
 
 
}
 
QCustomEditLine::~QCustomEditLine() {
 
}
 
void QCustomEditLine::setEmptyMessage( const QString &msg ) {
    emptyMessage = msg;
    drawEmptyMsg = text().isEmpty();
    update();
}
 
void QCustomEditLine::paintEvent( QPaintEvent *ev ) {
    QLineEdit::paintEvent( ev );
 
    if ( text().isEmpty() ) {
        QPainter p(this);
        QFont f = font();
        f.setItalic(true);
        p.setFont(f);
 
        QColor color(palette().color(foregroundRole()));
        color.setAlphaF(0.5);
        p.setPen(color);
 
        QStyleOptionFrame opt;
        initStyleOption(&opt);
        QRect cr = style()->subElementRect(QStyle::SE_LineEditContents, &opt, this);
        cr.setLeft(cr.left() + 2);
        cr.setRight(cr.right() - 2);
 
        p.drawText(cr, Qt::AlignLeft|Qt::AlignVCenter, emptyMessage);
    }
}
 
void QCustomEditLine::focusInEvent( QFocusEvent *ev ) {
    if ( drawEmptyMsg ) {
        drawEmptyMsg = false;
        update();
    }
    QLineEdit::focusInEvent( ev );
}
 
void QCustomEditLine::focusOutEvent( QFocusEvent *ev ) {
    if ( text().isEmpty() ) {
        drawEmptyMsg = true;
        update();
    }
    QLineEdit::focusOutEvent( ev );
}

Reference

QLineEdit

@@ Line 1: / Line 1: @@
-{{Archived|timestamp=20120302032925|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (based on {{Qapiname|QWidget}}) is deprecated.}}
+[[Category:MeeGo]][[Category:Symbian]][[Category:Qt C++ UI]]
-[[Category:QWidget UI]]
+{{Abstract|This example shows how to derive our own Line Widget from {{Qapiname|QLineEdit}}.}}  {{Qapiname|QLineEdit}} is a one-line text editor. A line edit allows the user to enter and edit a single line of plain text with a useful collection of editing functions, including undo and redo, cut and paste, and drag and drop.
+{{Archived|timestamp=20120302032925|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (based on C++ for the Qt UI) deprecated.}}
 {{ArticleMetaData <!-- v1.2 -->
 |sourcecode= <!-- Link to example source code (e.g. [[Media:The Code Example ZIP.zip]]) -->
 |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 |devices= Emulator
-|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
+|sdk= Qt 4.6.2, Qt 4.7
 |platform= S60 5th Edition
 |devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
@@ Line 22: / Line 23: @@
 |creationdate= 20101121
 |author= [[User:Skumar rao]]
-<!-- The following are not in current metadata -->
-|subcategory= Qt GUI
 }}
-==Overview==
-{{Abstract|This example shows how to derive our own Line Widget from [http://doc.qt.nokia.com/4.7/qlineedit.html#details QLineEdit]}}.
-The [http://doc.qt.nokia.com/4.7/qlineedit.html#details QLineEdit] widget is a one-line text editor. A line edit allows the user to enter and edit a single line of plain text with a useful collection of editing functions, including undo and redo, cut and paste, and drag and drop.
-==Prerequisites==
-* Qt 4.6.2 or above (tested ok with 4.7 too)  [[Qt SDK]] with latest Update will do just fine
-* A Qt & Data enabled device [Optional] we will use Qt Nokia SDK's Simulator.
 ==Implementation==
@@ Line 43: / Line 34: @@
 QCustomEditLine::QCustomEditLine(QWidget *parent) : QLineEdit(parent)</code>
-add a function to take the default text once we get it we will refresh the control to re-draw.
+Add a function to take the default text once we get it we will refresh the control to re-draw.
+<code cpp>
-    <code cpp>
+emptyMessage = msg;
-	emptyMessage = msg;
+drawEmptyMsg = text().isEmpty();
-    drawEmptyMsg = text().isEmpty();
+update();
-    update();</code>
+</code>
-derive {{Icode|paintEvent( QPaintEvent *ev )}} to draw the text that we want to show when there is no text is entered.
+Derive {{Icode|paintEvent( QPaintEvent *ev )}} to draw the text that we want to show when there is no text is entered.
-        <code cpp>
+<code cpp>
-	QPainter p(this);
+QPainter p(this);
-        QFont f = font();
+QFont f = font();
-        f.setItalic(true);
+f.setItalic(true);
-        p.setFont(f);
+p.setFont(f);
-        QColor color(palette().color(foregroundRole()));
+QColor color(palette().color(foregroundRole()));
-        color.setAlphaF(0.5);
+color.setAlphaF(0.5);
-        p.setPen(color);
+p.setPen(color);
-        QStyleOptionFrame opt;
+QStyleOptionFrame opt;
-        initStyleOption(&opt);
+initStyleOption(&opt);
-        QRect cr = style()->subElementRect(QStyle::SE_LineEditContents, &opt, this);
+QRect cr = style()->subElementRect(QStyle::SE_LineEditContents, &opt, this);
-        cr.setLeft(cr.left() + 2);
+cr.setLeft(cr.left() + 2);
-        cr.setRight(cr.right() - 2);
+cr.setRight(cr.right() - 2);
-        p.drawText(cr, Qt::AlignLeft|Qt::AlignVCenter, emptyMessage);</code>
+p.drawText(cr, Qt::AlignLeft|Qt::AlignVCenter, emptyMessage);</code>
 control the drawing to show the default text when control is focused out and blank it when cointrol focused in.
-now we are ready to add to our widget. to use for example
+Now we are ready to add to our widget. To use do the following:
-    <code cpp>
+<code cpp>
-    m_lineout = new QCustomEditLine(this);
+m_lineout = new QCustomEditLine(this);
-    m_lineout->setEmptyMessage("Enter you Email Address");</code>
+m_lineout->setEmptyMessage("Enter you Email Address");
+</code>
@@ Line 179: / Line 171: @@
 ==Reference==
-* More on [http://doc.qt.nokia.com/4.7/qlineedit.html#details QLineEdit]
+* {{Qapiname|QLineEdit}}
-* SDK
---[[User:Skumar rao|Skumar rao]] 09:27, 21 November 2010 (UTC)[[Category:MeeGo]] [[Category:Symbian]]

Wiki

Wiki Resources

Main Platforms

Other

Natural Languages

Toolbox

Namespaces

Variants

Views

Actions

Contents