XML, Highlighting and Model/View

[aamer4yu]

Hi,
I have my data in QDomElement / QDomDocument form, and I simply display it using a web browser element.On clicking, the node expands/contracts as in internet explorer. Fine.

Problem :

Now, I have a situation where I want to right click on a xml node and be able to tell its path from the root element. say if i clicked D, I should get "Root/A/B/C/D" . Also I want to keep the xml highlighting.

I have two solutions in mind -
1) Implement my own item model and item view. Simplest would be using QStandardItem and QTreeView I guess. But problem with this solution is,,, I havent used model/view till now and it looks very comples to me. Also how do I maintain XML highting even if I manage to make a tree view out of my xml data ?

2) Inherit QTreeWidget and QTreeWidgetItem. and set a delegate for it. The delegate is supposed to do the XML highlighing. Also what functions wud I need to override ? I havent worked with delegates too till now

Which one of the above 2 is better ?
Is there any other way I could achieve my goal more easily and efficiently ?? I dont wanna increase my code.

Any ideas ???

[caduel]

To i)
Learning model/view is worth the trouble.
I am not saying you should for this problem; but take a look at it anyway!

ii) I don't see why you would need/want to subclass QTreeWidget (if at all: QTreeView, probably?)? As long as you do not have a model, a view (or delegate) won't help you.


There is an example of adapting XML to a model in Qt4's examples (look for "Simple DOM Model"). Take a look at it.
Then put that in a QTreeView.
Connect to the contextMenu event (or something like), translate the mouse pos. to the QModelIndex, get the DomNode from that, and from that, the path.

HTH

[aamer4yu]

Hi,
I had thought of the answer you told. And the problem is xml highlighting !
If I simply use treewidget, can I set xml highlighting on it ? I guess I need to use delegates for that, isnt it ?

Or is there some easy way out

[caduel]

One things that will probably work (not sure if it's the best solution) would indeed be to set a delegate on the QTreeView. No need to subclass it.
Then override the delegates paint method.

create a QTextDocument, a QSyntaxHighlighter for it and set the (fragment for the QModelIndex of the) XML as plain text (in the QTextDocument).

Will probably work. (I did something like that once.)
Perhaps not efficient, though... best give it a try (and tell us about it!)

HTH

[aamer4yu]

I made the treeview of xml subclassing treewidget and treewidgetitem.
Now I can extract path of the node relative to the root element. Also i can change font of the tree widget item.

But still havent started code for delegate.
Before I start it, I haev a question, are delegates called on double click ?? If so it wont help me. I want to render the xml formating on that start itself.

Also my code is working quite slow, I need to check whats wrong, and am worried how slow it will become even if i set delegate

[caduel]

The delegate does
* painting of all cells (this has nothing to to with mouse clicks)
* and the delegate is also responsible for creating editors (if the model is editable)

Use valgrind or something like it to profile your application.

[aamer4yu]

painting of all cells (this has nothing to to with mouse clicks)

How then in Spin box delegate example, do we have to double click to see the spin box ??
or is it because of the createEditor function ?? Can anyone explain ?

[caduel]

the spinBox has nothing to do with drawing; it is (as you guessed) the editor created by createEditor.
The cells that are not edited do not show a spin box!

paint: looks for a cell that is not being edited
createEditor: the editor (which often is laid over the edited cell, giving the impression of a different painting while being edited. it is just an impression. the cell is always painted by paint.)

HTH

[aamer4yu]

Well, started reading Model/View architecture in Qt.. but I wanted some immediate results.
So I tried the following -
copied the simple DOM example, and modified it that I show attributes in column 0 along with tag name. So something like an XML Tree. Now moving on with delegates, made a little progress.
I overrided the drawDisplay method of QItemDelegate -

void XMLDelegate::drawDisplay ( QPainter * painter, const QStyleOptionViewItem & option, const QRect & rect, const QString & text ) const
{
	//QItemDelegate::drawDisplay(painter,option,rect,text);
 
	QColor colors[3] = {Qt::black,Qt::red,Qt::blue};
	QColor red(Qt::red);
	QColor blue(Qt::blue);
	QColor black(Qt::black);
 
	QString textToDisplay = option.fontMetrics.elidedText(text,Qt::ElideNone,rect.width());
	int len = textToDisplay.length();
	int x,y;
	x = rect.x();
	y = rect.y()+10;
	for(int i=0;i<len;i++)
	{
		painter->setPen(colors[i%3]);
		painter->drawText(x,y,QString(textToDisplay[i]));
		x += option.fontMetrics.width(textToDisplay[i]);
	}
}

void XMLDelegate::drawDisplay ( QPainter * painter, const QStyleOptionViewItem & option, const QRect & rect, const QString & text ) const
{
	//QItemDelegate::drawDisplay(painter,option,rect,text);

	QColor colors[3] = {Qt::black,Qt::red,Qt::blue};
	QColor red(Qt::red);
	QColor blue(Qt::blue);
	QColor black(Qt::black);

	QString textToDisplay = option.fontMetrics.elidedText(text,Qt::ElideNone,rect.width());
	int len = textToDisplay.length();
	int x,y;
	x = rect.x();
	y = rect.y()+10;
	for(int i=0;i<len;i++)
	{
		painter->setPen(colors[i%3]);
		painter->drawText(x,y,QString(textToDisplay[i]));
		x += option.fontMetrics.width(textToDisplay[i]);
	}
}

To copy to clipboard, switch view to plain text mode 

By this am able to display text in alternate colors. Now thing is,,, I havent handled it for Wrap mode . And without that one display wont look good ...

Isnt there some simple way to do this ? Currently to display xml, we use Internet explorer and Navigate function for a xml file. It does display the xml with highlighting. But I want to add context menu to sucha tree, and be able to compute xpath of the node clicked...


Can someone suggest a simpler way ?? Or do I have to do it the hard way

[wysota]

Could you provide a screenshot or a mockup of what you want? I think your problem is easy to solve, but first I need to make sure what you want

[aamer4yu]

Even I think the problem must be easy to solve, may be am moving in wrong direction , may be not

Well, I will restate my problem with snapshots and also give an idea as what I am able to achieve till now.

First, the problem :
I need to display xml data as it displays in internet explorer. However, additionaly I want to be able to show a context menu and be able to extract the Xpath of the node that was right clicked.
Refer : required functionality.jpg
I know I can achieve this by -
1) Make a tree out of xml
2) apply syntax highlighter to each row
3) Handle multi line
But I dont know whats the best solution to achieve above steps


Now the things I have tried till now :
1) I subclassed QTreeWidget and QTreeWidgetItem and made a Tree from XML Data. This works fine, shows the data like in explorer. I override drawBranches() of treewidget.
But problem is, I can show it only in one Color.

2) I modified the Simple DOM Model example, and returned text in column 0 only instead of Column 1 and 2. I also made a custom delegate where I overrided drawDisplay() and was able to show text in different colors. Problem with this solution is, I see row text in single line only, and the text is clipped if its longer than the rect width.
Refer try 2.jpg

Now how do I handle multiple line in a single cell ?? Like in iexplorer, if we resize the window, the xml data gets wrapped properly. How do I achieve this functionality ??

[caduel]

assuming you do the drawing with QTextDocument; use setTextWidth, pass the size of the rectangle passed to QAbstractItemDelegate:aint (in QStyleOptionViewItem)

HTH

[aamer4yu]

Dont assume !!
Am not using QTextDocument. If only I cud get QtextDocument for a model index, i cud have set the syntax highlighter for it.

What I am doing is setting a ItemDelegate for the Tree View in Simple DOM Model example.
am ONLY overriding ItemDelegate::drawDisplay() function. The code is same as posted few posts back.

Now say I have text = "Hello, How are you";
If i need to display each word in different color, I need to first write Hello with one color, then get the width occupied by Hello, and write How with other color and so on. I just cant simply write the whole text in one go Can I ??
Also see drawDisplay() in QItemDelegate.cpp. There are many things to consider, which are going above my head for the time being

Also I made a small parser inside the drawDisplay() function, and am able to get xml like highlighting
But prob remains... single line doesnt gets wrapped..
Another prob is, values are treated as child nodes, So if i want to display text vlaue of a node like <node> nodeValue </node> , am not able to do it. I will have to look in model how to prevent adding row for #text nodes

[caduel]

ok, how about

i) using a QItemDelegate in the QTreeWidget approach, too?

ii) pass Qt::TextWordWrap to QPainter::drawText

in YourItemDelegate:aint(...):
I would not do the algorithm for drawing colored text myself (unless I had to, that is).
Doesn't a simple

painter->translate(option.rect.topLeft());
QTextDocument doc;
QSyntaxHighlighter yourHighlighter(&doc);
// if you want wrapping text
//   doc.setTextWidth(option.rect.width());
QString text=index.data().toString(); // assuming you can get the xml to display that way
doc.setHtml(text);
doc.drawContents(painter);

painter->translate(option.rect.topLeft());
QTextDocument doc;
QSyntaxHighlighter yourHighlighter(&doc);
// if you want wrapping text
//   doc.setTextWidth(option.rect.width());
QString text=index.data().toString(); // assuming you can get the xml to display that way
doc.setHtml(text);
doc.drawContents(painter);

To copy to clipboard, switch view to plain text mode 

work for you?
(Maybe it is inefficient, but it is easy to implement. And maybe it is fast enough, too.

[wysota]

I'm not sure if a tree is the best way to visualize the document this way, but since you already have most things done, let's keep it this way.

Drawing wrapped text is easy - use a variant of QPainter::drawText() that takes flags as one of its parameters and pass it a flag to wrap text. But... this way you won't be able to highlight syntax...

Another way is to use QTextLayout and QTextLine which is quite straightforward, but... no highlighting either.

Probably the best way would be to have a QTextDocument that the delegate would use to render the xml. You would apply a piece of text as the document, trigger the highlighter, render the document, apply a new piece of text, etc. Just make sure not to create a new document in each pass of the delegate - reuse the old one instead.

[aamer4yu]

@ Caduel
Thanks a lot !!

doc.drawContents(painter);

Thats what I needed so badly

Now I can use this delegate with the Simple DOM Model example, and it works. I haven't tried multi line yet, but I guess there wont be any problem


@Wysota
Caduel also suggested what u said, except for the doc reuse :P . Well, now I guess I can make things work.



I have my QTreeWidget and QTreeWidgetItem subclasses working now. But they take time to populate the tree, and hence not efficient. In DOM model example I found the child items are created as and when the nodes are expanded. Gradually I will like to move my code to DOM Model, along with syntax highlighting


I need to know 2 things -
1) Is there any widget/ text edit, where I can set color of each char individually ?? Its just a thought to avoid using a highlighter.

2) With the simple DOM Model, now I can set the syntax highlighter. Only thing is nodeValues are represented as child items in tree . How to avoid this ?

BTW Wysota, U said -

I'm not sure if a tree is the best way to visualize the document this way, but since you already have most things done, let's keep it this way.

Can you suggest the better way ? I know filling a tree myself is inefficient. The recursion takes a long time.

[caduel]

without having tried it out:

1) Is there any widget/ text edit, where I can set color of each char individually ?? Its just a thought to avoid using a highlighter.

You can do that with a QTextEdit

2) With the simple DOM Model, now I can set the syntax highlighter. Only thing is nodeValues are represented as child items in tree . How to avoid this ?

You can modify the model. Adjust the data() and rowCount() methods to
data(): include the text of the childNodes() that satisfy isText()
rowCount(): do not count child nodes that satisfy the condiftion of above

Alternative:
wrap the dom-model in another model that provides said difference.

[wysota]

Can you suggest the better way ? I know filling a tree myself is inefficient. The recursion takes a long time.

Yes, QTextEdit with implemented ability to collapse and expand levels of the DOM tree. This involves some work unfortunately...

As for the tree and the lag you get, you can do it in another thread or in chunks separated by event processing.

[aamer4yu]

Quote:
1) Is there any widget/ text edit, where I can set color of each char individually ?? Its just a thought to avoid using a highlighter.
You can do that with a QTextEdit

How can I do it with QTextEdit ??

Also your reply to 2nd point is good.... I have tried with simple DOM Model and got sucess...now just trying to handle comments .


@Wysota

Yes, QTextEdit with implemented ability to collapse and expand levels of the DOM tree. This involves some work unfortunately...

too much work I guess

Well Now I have 2 ways -
1) Subclassing QtreeWidget/QtreeWidgetItem
2) modify simple DOM example.

As for the highlighter , it will work with both.
And common problem is resizing ROW according to content.
I tried using QTextDoc.setTextWidth(). But it works only within the rect provided by the drawDisplay function. How do I resize the row so that whole text is displayed ??

Am quite close to my goal I guess,,, thanks to you both

[aamer4yu]

I am stuck with setting row height. I guess if I am able to set row height for each item, I can display my contents properly.
I tried setting sizeHint() in ItemDelegate, and also tried rowHeight, and indexRowSizeHint for QtreeWidget... but the rowHeight and indexRowSizeHint are never called . Also I tried setting setWordWrap(true) for tree widget, but no use

Can someone give me idea where to move ?? or what to look for ?