×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Creating a custom custom line editor from QLineEdit

From Nokia Developer Wiki
Jump to: navigation, search
skumar_rao (Talk | contribs)
(Created page with 'Category:Qt {{CodeSnippet |id= |platform= S60 5th Edition |devices= Emulator |category=Qt |subcategory= Qt GUI |creationdate=21 December 2010 |keywords=QLineEdit }} This exa…')
 
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(17 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Qt]]
+
{{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.}}
{{CodeSnippet
+
[[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Qt C++ UI]]
|id=
+
{{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.
|platform= S60 5th Edition
+
{{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
 
|devices= Emulator
|category=Qt
+
|sdk= Qt 4.6.2, Qt 4.7
|subcategory= Qt GUI
+
|platform= S60 5th Edition
|creationdate=21 December 2010
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|keywords=QLineEdit
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
 +
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= QLineEdit
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by= <!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= <!-- After significant update: [[User:username]]-->
 +
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 +
|creationdate= 20101121
 +
|author= [[User:Skumar rao]]
 
}}
 
}}
  
This example shows how to derive our own Line Widget from QLineEdit.
+
==Implementation==
  
=Pre Requirements=
+
We will derive a class named {{Icode|QCustomEditLine}}
  
* Qt 4.6.2 or above (tested ok with 4.7 too) Qt Nokia SDK with latest Update will do just fine
+
<code cpp-qt>
* A Qt & Data enabled device [Optional] we will use Qt Nokia SDK's Simulator.
+
class QCustomEditLine : public QLineEdit
  
we will derive a class named QCustomEditLine
+
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.
 +
<code cpp-qt>
 +
emptyMessage = msg;
 +
drawEmptyMsg = text().isEmpty();
 +
update();
 +
</code>
 +
 +
Derive {{Icode|paintEvent( QPaintEvent *ev )}} to draw the text that we want to show when there is no text is entered.
 +
 
 +
<code cpp-qt>
 +
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);</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 do the following: 
 +
 
 +
<code cpp-qt>
 +
m_lineout = new QCustomEditLine(this);
 +
m_lineout->setEmptyMessage("Enter you Email Address");
 +
</code>
 +
 
 +
 
 +
== qcustomeditline.h ==
 +
 
 +
<code cpp-qt>
 +
#ifndef QCUSTOMEDITLINE_H
 +
#define QCUSTOMEDITLINE_H
 +
 
 +
#include <QtGui>
  
<code cpp>
 
 
class QCustomEditLine : public QLineEdit
 
class QCustomEditLine : public QLineEdit
 +
{
 +
    Q_OBJECT
 +
public:
 +
    QCustomEditLine(QWidget *parent = 0);
 +
    virtual ~QCustomEditLine();
  
QCustomEditLine::QCustomEditLine(QWidget *parent) : QLineEdit(parent)</code>
+
public:
 +
    void setEmptyMessage( const QString &msg );
  
add a fuction to take the default text once we get it we will refresh the control to re-draw.
+
protected:
 +
    void paintEvent( QPaintEvent *ev );
 +
    void focusInEvent( QFocusEvent *ev );
 +
    void focusOutEvent( QFocusEvent *ev );
  
     <code cpp>
+
private:
emptyMessage = msg;
+
     QString emptyMessage;
 +
    bool drawEmptyMsg;
 +
};
 +
 
 +
#endif // QCUSTOMEDITLINE_H
 +
 
 +
</code>
 +
 
 +
== qcustomeditline.cpp ==
 +
 
 +
<code cpp-qt>
 +
 
 +
#include "qcustomeditline.h"
 +
 
 +
QCustomEditLine::QCustomEditLine(QWidget *parent)
 +
                : QLineEdit( parent ){
 +
 
 +
 
 +
}
 +
 
 +
QCustomEditLine::~QCustomEditLine() {
 +
 
 +
}
 +
 
 +
void QCustomEditLine::setEmptyMessage( const QString &msg ) {
 +
    emptyMessage = msg;
 
     drawEmptyMsg = text().isEmpty();
 
     drawEmptyMsg = text().isEmpty();
     update();</code>
+
     update();
+
}
derive paintEvent( QPaintEvent *ev ) to draw the text that we want to show when there is no text is entered.
+
  
        <code cpp>
+
void QCustomEditLine::paintEvent( QPaintEvent *ev ) {
QPainter p(this);
+
    QLineEdit::paintEvent( ev );
 +
 
 +
    if ( text().isEmpty() ) {
 +
        QPainter p(this);
 
         QFont f = font();
 
         QFont f = font();
 
         f.setItalic(true);
 
         f.setItalic(true);
Line 49: Line 144:
 
         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);
 +
    }
 +
}
 +
 
 +
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 );
 +
}
 +
</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
+
[[File:CustomLineEdit.JPG |201px]]  [[File:CustomLineEdit2.JPG |201px]]
  
    <code cpp>
 
    m_lineout = new QCustomEditLine(this);
 
    m_lineout->setEmptyMessage("Enter you Email Address");</code>
 
  
--[[User:Skumar rao|Skumar rao]] 09:27, 21 November 2010 (UTC)
+
==Reference==
  
[[File:CustomLineEdit.JPG | left]]  [[File:CustomLineEdit2.JPG | right]]
+
* {{Qapiname|QLineEdit}}

Latest revision as of 04:14, 11 October 2012

Archived.pngArchived: 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.

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.

Article Metadata
Tested with
SDK: Qt 4.6.2, Qt 4.7
Devices(s): Emulator
Compatibility
Platform(s): S60 5th Edition
Symbian
Article
Keywords: QLineEdit
Created: skumar_rao (21 Nov 2010)
Last edited: hamishwillee (11 Oct 2012)

Contents

[edit] 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");


[edit] 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

[edit] 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 );
}


CustomLineEdit.JPG CustomLineEdit2.JPG


[edit] Reference

This page was last modified on 11 October 2012, at 04:14.
169 page views in the last 30 days.
×