×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Customising QTreeView

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Remove platform specifier categories (only need specifier for Qt if there is some platform specific behaviour))
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
 
(8 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Qt]][[Category:UI]]
+
{{Archived|timestamp=20120613052857|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 (using C++ for the Qt app UI) is deprecated.}}
__NOTOC__
+
[[Category:Qt C++ UI]][[Category:UI]]
__NOEDITSECTION__
+
{{ArticleMetaData <!-- v1.2 -->
{{KBTS}}
+
|sourcecode= [[Media:CustomTreeView.zip]]
{{KnowledgeBase
+
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
|id=TSQ001336
+
|devices= Nokia 5800 XPressMusic
|platform=S60 5th Edition
+
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
|devices=Nokia 5800 XPressMusic
+
|platform= S60 5th Edition
|category=Qt
+
|devicecompatability= <!-- Compatible devices (e.g.: All* (must have GPS) ) -->
|subcategory=UI
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|creationdate= April 3, 2009
+
|signing= <!-- Empty or one of Self-Signed, DevCert, Manufacturer -->
|keywords=QTreeView
+
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= QTreeView
 +
|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= 20090403
 +
|author= [[User:Nokia Developer KB]]
 +
<!-- The following are not in current metadata -->
 +
|subcategory= UI
 +
|id= TSQ001336
 
}}
 
}}
  
Line 17: Line 31:
  
 
== Description ==
 
== Description ==
The <tt>QTreeView</tt> can be customised by overriding the virtual methods like {{Icode|drawRow()}} and {{Icode|drawBranches()}}. This article shows how to customise the tree view to show an image in the right-hand side of every tree view item.
+
The {{Icode|QTreeView}} can be customised by overriding the virtual methods like {{Icode|drawRow()}} and {{Icode|drawBranches()}}. This article shows how to customise the tree view to show an image in the right-hand side of every tree view item.
 
==Solution==
 
==Solution==
 
A custom class {{Icode|QCustomTreeView}} is created by inheriting from {{Icode|QTreeView}}
 
A custom class {{Icode|QCustomTreeView}} is created by inheriting from {{Icode|QTreeView}}
<code cpp>
+
<code cpp-qt>
 
  class QCustomTreeView : public QTreeView
 
  class QCustomTreeView : public QTreeView
 
  {
 
  {
Line 41: Line 55:
 
<b>QCustomTreeView class definition</b>
 
<b>QCustomTreeView class definition</b>
  
<code cpp>
+
<code cpp-qt>
 
  QCustomTreeView::QCustomTreeView( QWidget *parent )
 
  QCustomTreeView::QCustomTreeView( QWidget *parent )
 
  : QTreeView( parent )
 
  : QTreeView( parent )
Line 87: Line 101:
 
'''Using QCustomTreeView'''
 
'''Using QCustomTreeView'''
  
   <code cpp>
+
   <code cpp-qt>
 
   // Create an instance of the custom tree view
 
   // Create an instance of the custom tree view
 
   QCustomTreeView* customTree;
 
   QCustomTreeView* customTree;
Line 115: Line 129:
 
==Sample application==
 
==Sample application==
  
[[Image:CustomTreeView.zip]]
+
[[File:CustomTreeView.zip]]
  
[[Category:S60 5th Edition]][[Category:Technical Solution]]
+
[[Category:S60 5th Edition]][[Category:MeeGo Harmattan]] [[Category:Symbian]]
 +
[[Category:Code Examples]]

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 (using C++ for the Qt app UI) is deprecated.

Article Metadata
Code ExampleTested with
Devices(s): Nokia 5800 XPressMusic
Compatibility
Platform(s): S60 5th Edition
Symbian
S60 5th Edition
Article
Keywords: QTreeView
Created: User:Nokia Developer KB (03 Apr 2009)
Last edited: hamishwillee (11 Oct 2012)

Contents

[edit] Overview

This article explains how to customise the Qt tree view widget (QTreeView).

[edit] Description

The QTreeView can be customised by overriding the virtual methods like drawRow() and drawBranches(). This article shows how to customise the tree view to show an image in the right-hand side of every tree view item.

[edit] Solution

A custom class QCustomTreeView is created by inheriting from QTreeView

 class QCustomTreeView : public QTreeView
{
Q_OBJECT
public:
QCustomTreeView( QWidget *parent = 0 );
~QCustomTreeView();
protected:
// QTreeView’s virtual member
void drawRow( QPainter *painter,
const QStyleOptionViewItem &options,
const QModelIndex &index ) const;
// We can also override drawBranches() member
// void drawBranches( QPainter *painter,
const QRect &rect,
const QModelIndex &index ) const;
};

QCustomTreeView class definition

 QCustomTreeView::QCustomTreeView( QWidget *parent )
: QTreeView( parent )
{
}
 
// Overriding the QTreeView’s drawRow() member
void QCustomTreeView::drawRow( QPainter *painter,
const QStyleOptionViewItem &options,
const QModelIndex &index ) const
{
// Calling the base class method for drawing the normal
// parts of the item of the QTreeView.
QTreeView::drawRow( painter, options, index );
 
// Calculate a rect for the image on the right side of the item
// We can retrieve the parent and child index of the model index
// QModelIndex parent(index.parent());
// QModelIndex child(index.child(0,0));
// Use your own logic to decide for which items the image on the
// right side should be drawn
if(index.row() == 0) {
QImage image;
image.load("c:\\data\\red.bmp");
image.scaledToHeight(options.rect.height());
image.scaledToWidth(15);
 
// Drawing the image on the right side of the item
painter->drawImage( options.rect.topRight().x() - 50,
options.rect.topRight().y(), image );
}
if(index.row() == 1) {
QImage image;
image.load("c:\\data\\blue.bmp");
image.scaledToHeight(options.rect.height());
image.scaledToWidth(15);
 
// Drawing the image on the right side of the item
painter->drawImage( options.rect.topRight().x() - 50,
options.rect.topRight().y(), image );
}
}

Using QCustomTreeView

   // Create an instance of the custom tree view
QCustomTreeView* customTree;
customTree = new QCustomTreeView( this );
 
// Populate the model for tree view
QStandardItemModel* treeModel = new QStandardItemModel( this );
QStandardItem* item1 = new QStandardItem( QIcon("c:\\data\\610x.bmp"), "Item1" );
QStandardItem* item2 = new QStandardItem( QIcon("c:\\data\\Nokia-logo.bmp"), "SubItem1" );
QStandardItem* item3 = new QStandardItem( QIcon("c:\\data\\5.bmp"), "Item2" );
QStandardItem* item4 = new QStandardItem( "SubItem2" );
QStandardItem* item5 = new QStandardItem( "SubItem3" );
item1->appendRow( item2 );
item1->appendRow( item4 );
item1->appendRow( item5 );
treeModel->appendRow( item1 );
treeModel->appendRow( item3 );
 
customTree->setModel( treeModel );
 
customTree->setHeaderHidden( true );
customTree->setAnimated( true );
customTree->setGeometry( QRect( 0, 0, 400, 500 ) );


[edit] Sample application

File:CustomTreeView.zip

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