How to create collapsing type contact list

[The Storm]

Hi all,

I'm trying to create a nice contact list for a chat program and I very like the contact list like in Skype and some other chat clients that when you click on some contact he will expand giving you more options to do with it and info. I wonder how it can be done, what classes I need to use and how actually I can make similar effect. I will be very happy if You can give me some instructions how to do it.

Regards,
The Storm

[wysota]

Currently only possible way to reliably mimic the effect is to make the "expansion" part of the item a subitem of the base item and make the view a tree. Then you need to reimplement QTreeView::drawTree to make it look good.

[Kostanev]

Hello all,

This is really good idea. I'm sorry for this question, but can someone give me a litle example how to do this ?

Thanks!

[wysota]

Which part?

[The Storm]

For me this part is not very clear

to make the "expansion" part of the item a subitem of the base item and make the view a tree

If you can give a simple example what actually I must reimplent and change(except the painter part) it will be very nice.

[wysota]

You must implement your list as a tree. For that you need to use QTreeView instead of QListView. Each contact should consist of two items - one is the basic stuff only and the other is everything that is not in the first one. So looking at skype, you'd place the icon and the contact name in the first item and things like photo, phone number, action icons, address, etc. in the second one. Then make the second one child of the first one and you'll see what I mean. A mockup:

QTreeWidget *tw = new QTreeWidget;
for(int i=0;i<10;i++){
  QTreeWidgetItem *basic = new QTreeWidgetItem(tw);
  basic->setText(0, "name");
  basic->setIcon(0, QPixmap(":/online.png"));
  QTreeWidgetItem *extra = new QTreeWidgetItem(basic);
  extra->setText(0, "Some extra data for a contact");
}
tw->show();

QTreeWidget *tw = new QTreeWidget;
for(int i=0;i<10;i++){
  QTreeWidgetItem *basic = new QTreeWidgetItem(tw);
  basic->setText(0, "name");
  basic->setIcon(0, QPixmap(":/online.png"));
  QTreeWidgetItem *extra = new QTreeWidgetItem(basic);
  extra->setText(0, "Some extra data for a contact");
}
tw->show();

To copy to clipboard, switch view to plain text mode 

[The Storm]

Thanks but you are using QTreeWidget, must I use it too or to use QTreeView ?

[wysota]

No, you can use QTreeView. QTreeWidget is a convenience widget - I don't need to create a model to use it, I just wanted to show you the concept.

[The Storm]

Ok I inherited QTreeView and added some items using the QStandardItemModel, they show up well but my reimplementation of drawTree() is not called at all, but paintEvent() is called non-stop... So I can't customize this thing at all.

[wysota]

Check if the signature of the method is correct.

[The Storm]

Sorry I'm a bit noob, what signature I must check and how? Sorry for all those questions but I really want to do it.

[wysota]

The signature of the method you reimplement. It should be exactly the same as the original method:

void MyTreeView::drawTree ( QPainter * painter, const QRegion & region ) const{
//...
}

void MyTreeView::drawTree ( QPainter * painter, const QRegion & region ) const{
//...
}

To copy to clipboard, switch view to plain text mode 

Note the "const" keyword at the end, it has to be there.

Baah... sorry, my mistake... for QTreeView you should reimplement drawBranches() and drawRow(), not drawTree...

[The Storm]

Yes the signature is correct, I even directly copied the function from qtreeview.h, here is the reimplentation:

class ContactView : public QTreeView
{
public:
	ContactView(QWidget *parent = 0) : QTreeView(parent) {}
	~ContactView() {};
 
protected:
	void paintEvent(QPaintEvent *event)
	{
		QTreeView::paintEvent(event);
	}
	void drawTree(QPainter *painter, const QRegion &region) const
	{
                        QMessageBox::information(0, QString("Draw Tree"), QString("Called"));
		QTreeView::drawTree(painter, region);
	}
};

class ContactView : public QTreeView
{
public:
	ContactView(QWidget *parent = 0) : QTreeView(parent) {}
	~ContactView() {};

protected:
	void paintEvent(QPaintEvent *event)
	{
		QTreeView::paintEvent(event);
	}
	void drawTree(QPainter *painter, const QRegion &region) const
	{
                        QMessageBox::information(0, QString("Draw Tree"), QString("Called"));
		QTreeView::drawTree(painter, region);
	}
};

To copy to clipboard, switch view to plain text mode 

Edit: Oh thats other thing, thanks. I will try them tomorrow.

[The Storm]

Ok this two functions are calling perfect and I already done some primitive drawing. :P
Now I want to ask is there a way with the Painter to draw a widgets that are already created, lets say I have a QFrame with some buttons on it and I want to show it as item in to the modified QTreeView, so if there is a function for drawing already created widgets can you tell me what is its name and how to use it. Thanks.

[wysota]

Now I want to ask is there a way with the Painter to draw a widgets that are already created, lets say I have a QFrame with some buttons on it and I want to show it as item in to the modified QTreeView, so if there is a function for drawing already created widgets can you tell me what is its name and how to use it. Thanks.

Call the base class implementation of the overloaded methods. They probably handle that.

[The Storm]

I'm very sorry but I didn't understand you clearly again... What is that base class implentation ? Very sorry for my noobish quesiotns...

[wysota]

void MyClass::method(int x, int y){
  BaseClass::method(x,y); // <-- 
}

void MyClass::method(int x, int y){
  BaseClass::method(x,y); // <-- 
}

To copy to clipboard, switch view to plain text mode 

This is the base class implementation provided that MyClass inherits BaseClass.

[The Storm]

Maybe you understand me wrong or I unserstand you wrong. :P I need to draw a totaly other qwidget than the QTreeView base class rows in my case. I want to draw some widget that I had created already from a QFrame with some some buttons on it, I want to draw it on the place where the row must be drawed instead of the real QTreeView rows, so calling BaseClass::method will not do the thing that I want to do. So that was my previous question, can I draw my own widget with other widgets placed on it instead of the rows using directly the painter. I hope you understand me right this time.

[wysota]

Items are drawn using drawRow(), which will in turn call the delegate to draw each item. Now you have two possible solutions. Either fake a widget drawing all the contents yourself or use index widgets (these are real widgets) and then widgets will draw themselves. The latter will slow your application down significantly if you have more than a few of them, so the first solution is advised. If you want a list of contacts, I doubt you have to use real widgets, so painting in the delegate's paint method is the way to go. Search the forum for more details on this.

[The Storm]

Hi again

I have been busy with other things but now I'm back to coding my messenger, after all readed again and again I do understand that I need to use a real widgets in to the TreeView, because of the functionality of each user in the list with only clicking on the widget. As you told me this will slow down the application but from what I see in other messengers they do have widgets in the contact list but only one in a time. I meant that general the list of users in the list looks like a totaly normal items for treeview with some icon for status, but when you select someone he become a widget with some or other options on it like in Skype for example, when you select other user the previous selected become a normal item again and the other user become in widget and etc... So I do know how to instert widgets in TreeView (I think, there is some from the examples doing it) and I do know how to instert normal items, but I really don't know how to do the change like the messengers like Skype do - only the selected user become a widget and in this way the program is not slowing down. Do you have any idea for some kind of way that I can do this too ?

Thanks a lot for your help but new people in Qt like me needs more and more... Sorry if you are bored of my questions.