Creating a tag/keyword entry widget using a line edit

**chezifresh** · 4th January 2011, 21:37

I want to create a widget for entering and editing tags. Flickr has a similar interface, but I'd like to take it one step further.

I'd like to create something like this:
taglineedit.png

I have comma separated auto-complete working using a QCompleter (see http://www.qtcentre.org/threads/8098...and-QCompleter)

The idea is the user enters a tag followed by a comma, or by hitting enter, this in turn would create on of those blue tag bubbles. You can click on the 'x' in the tag to delete it, or select it and delete it. I'm looking for some good ideas on how to create such a widget. It seems rather hard to do just by customizing a QLineEdit. I thought I'd address the collective genius of QtCentre for any ideas.

FYI: I tried overloading the paint method on a QLineEdit and was able to draw the individual tag widgets but then I wasn't able to draw the rest of the line edit correctly, ie the blinking cursor, selected/deselected text etc.

**javimoya** · 4th January 2011, 22:55

seems very difficult onlywith painting...

but... maybe this idea could help you:

create a "bubble" widget

and after that...
create another widget (qtaglineedit -> not subclassing qlineedit!! is a new composition widget):
A Frame with white background...(to simulate a line edit)
inside the frame an empty "Widget" (in the left) and a qlineedit (in the right)... vertical layout ...

when you write a tag... you create a bubble... and add that bubble in the empty widget. of the left...
and so on...

I hope it helps

**chezifresh** · 5th January 2011, 18:47

Not a bad idea. Even better, I could create 3 widgets. The main widget would be a container widget that draws its frame the same as a line/text edit. Add a flow layout to that widget, then the first widget in the flow layout be the bubble widget, drawing the bubbles, it could also be a bubble container, then the next widget in the flow layout could be a line edit with no frame.

To make it feel right I think the line edit will have to grow/shrink based on the size of the text the user is typing, so that when you get near the end of the line (the edge of the dialog), the flow layout will drop the line edit to the next line and the tag line edit will start to look more like a text edit. The only play where this might not feel right is a tag with spaces in it, but I think thats ok.

One of the hard things about the bubbles was trying to get them to scroll if necessary, if the main widget is a scroll area that might make things easier.

I was hoping I could somehow just do this with a text edit and some fancy wizardry but this could work. Thanks