Drag & Drop Widget Designer Application

[arunpk]

Hi all,
I am trying to create a custom designer in which i will have my own custom widgets which are created using QML & C++. My Widget Designer will have drag & Drop property. User can create a new form and drag & Drop these widgets into it.. Now i am able to do this, its working fine. Next thing i need is to do is re-sizing these widgets(similar to the re-sizing option in Qt Designer). Here i am attaching the sample style in which i need the selecting and re-sizing rectangle…So when i click on any of my widget it should display that rectangular boarder for re-sizing these widgets..

Please help me to solve this problem..
Thank you..


sample.jpg

[arunpk]

How the Re-size handles are shown in Qt Designer....How did the implement that.... can anyone tell a suggestion on how to do this...

[d_stranz]

In Qt Designer, the resize handles are drawn outside the rect of the actual widget. To do this using the Graphics / View architecture, I would make a base class graphics item ("ResizableItem" for example) that contains both the handles and the item that represents the actual widget as children. When the rectangle is selected, you make the handle items visible; when it is not selected, you make them invisible. Since they are child items, you can detect which one the user has clicked on. When one of the handles is moved, you have to make sure that the other handles that are affected move also, so you will need to enable the QGraphicsItem::ItemSendsGeometryChanges flag and reimplement the QGraphicsItem::itemChange() method.

But, since Qt Designer lets you write plugins to handle custom widgets and their properties, I wonder why you are reinventing the whole designer wheel and not just using the plugin mechanism of Qt Designer instead.

[arunpk]

But actually my widgets are derived from QWidget only..... So as you said, i cannot derive it from QGraphicsItem and re-implement those methods.... I can add my widgets inside QGraphics Scene which i ll be deriving... I hope that i can handle those re-size event handlers in QGraphics Scene class......Do i need to change this approach or can i use this...

[d_stranz]

It will be much easier for you if you implement your main layout view using the G/V architecture. It provides signals or events that tell you which object are where on the screen, has built-in support for selection and moving them around under mouse control, collision detection, and so forth. To do it using QWidget only means you would have to re-invent all of that.

What I described above is a graphics item parent-child hierarchy something like this:

ResizableItem (derived from QGraphicsRectItem)
   |- Custom widget item (derived from QGraphicsRectItem or QGraphicsPixmapItem)
   |- Upper left corner handle item (derived from QGraphicsItem or QGraphicsRectItem)
   |- Left side handle item
   |- Lower left corner handle item
   |- Upper right corner handle item
   |- Right side handle item
   |- Lower right corner handle item
   |- Top side handle item
   |- Bottom side handle item

ResizableItem (derived from QGraphicsRectItem)
   |- Custom widget item (derived from QGraphicsRectItem or QGraphicsPixmapItem)
   |- Upper left corner handle item (derived from QGraphicsItem or QGraphicsRectItem)
   |- Left side handle item
   |- Lower left corner handle item
   |- Upper right corner handle item
   |- Right side handle item
   |- Lower right corner handle item
   |- Top side handle item
   |- Bottom side handle item

To copy to clipboard, switch view to plain text mode 

Note that the "corner handle" items can be all the same QGraphicsItem-based class - all you need to do it to change a rotation property so they are drawn with the right orientation. Likewise for the "side handle" items. So you need a total of 4 unique classes: ResizableItem, CustomItem, CornerItem, and SideItem. The ResizableItem needs to show / hide the handle items when selected / unselected, and needs to move the other "connected" handles when one of them is moved (for example, moving the left side handle means that the top and bottom left corner handles also need to be moved in the x direction).

Make yourself a little demo (prototype) program that contains just a QGraphicsScene / QGraphicsView and implement the 4 QGraphicsItem classes and all of the code needed for moving and sizing. That way, you can isolate this graphical part from all of the other logic until you get it right. Then you can integrate that into your Designer app.

[arunpk]

Is there any way to do this by using normal QWidget architecture......
Anyone know about how did they implemented "resize handles" in the Qt Designer... i Searched the entire Qt Designer code,but no use, I didn't find the code how did they implemented that re-size handles in that..... AFAIK they used purely QWidget based code for that and not using QGraphicsView framework.....

[arunpk]

At last i have got the solution how to do it…. I dig the Qt Designer code very hard and found out how did they do that by using QWidget method. I am really happy to get it working. Thanks for all who gave me suggestions… They have done this by using WidgetHandle class & WidgetSelection class which you can find in the designer source code…. Hope this will help others too…..