Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...)
Added by Steve Drake 4 months ago
I am trying to find out if this might be possible to implement using Wt:
A list of items (probably a WTable). When the user clicks an item, the area just below the item expands ("accordions") to show additional information and interactive widgets that are associated with the selected item. For an example of the accordion idea in general, see here: http://playground.deaxon.com/css/accordion/
Attached is an (ugly) mockup of what I have in mind.
Do you think this is possible? Any ideas as to how?
Thanks!
mockup.png (62.8 KB)
Replies
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Derrek Spencer 4 months ago
There are three widgets that will probably fit what you're looking for: Wt::WPanel, Wt::Ext::Panel, and Wt::WAccordianLayout. The latter two appear to need the Ext features while WPanel does not.
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Steve Drake 4 months ago
I am able to put a WPanel in the cells of a WTable. As desired, the row height expands/collapses with the expand/collapse of the WPanel. I am not sure I am heading in the right direction though.
I want the panel to expand in both directions so that it takes up the full width of the table (see the mockup that I attached to my initial message).
I also think that I actually want to use a WTableView because I want the table to be sort the data by the various columns, and filter the data.
So here is the approach I am thinking of:
Use a WTableView with associated WStandardItemModel and WSortFilterProxyModel. I would inherit from WItemDelegate and implement my own createEditor method to render the expanded content of a row when the user clicks to expand it.
- Can I make the expanded panel extend the full width of the table?
- I saw another forum post [[http://redmine.webtoolkit.eu/boards/2/topics/3438#message-3443):]] that says "The only constraint that WTableView imposes is that all rows have equal height." It seems like that would rule out the possibility of using a WTableView in the way I want.
Does anyone have any advice?
Thanks.
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Koen Deforche 4 months ago
Hey,
As you observe, a WTableView will not work because that is really a hard constraint.
The WTable + WPanel approach seems the most promising. You can make the panel span all rows using setColumnSpan(). The panel itself will automatically take the width of the cell.
Regards,
koen
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Steve Drake 4 months ago
So far, WTable and WPanel looks like it should work. I did try the setColumnSpan() already and got that part to work, calling setColumnSpan() whenever the panel is expanded or collapsed. I guess I'll have to implement the sorting and filtering "by hand". Maybe I can look at the existing WTableView implementation and get some inspiration there. Thanks.
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Steve Drake 4 months ago
After thinking about this some more, I wonder if there is a way for me leverage the work that went into WTableView, since WTableView has a lot of nice features (sorting/filtering/column resizing/scrolling) that I need and would otherwise have to figure out how to recreate. What is it that limits WTableView to fixed height rows? Could I either inherit from or copy WTableView and eliminate this constraint? Or is the limitation based more on the underlying technology (such as a JavaScript limitation)?
Thanks,
Steve
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Koen Deforche 4 months ago
Hey,
The reason is virtual scrolling and the organisation of the contents using absolutely positioned div's.
I fear this is not the right way forward.
But when I look at your mockup, I do wonder, why don't you allow editing in a dialog ?
Regards,
koen
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Steve Drake 4 months ago
The accordion/expanding table thing is something that is being pushed on me by someone else who has been assigned to "design" the user interface. I've been pushing back but so far have met with lots of resistance and suggestions that I need to use something other than Wt. But I like Wt and I want to use it if I can. Originally I had laid out and prototyped a 3 pane design with a navigation tree on the left, a WTableView on the top right, and a details/edit pane on the bottom right. That seemed to fit the capabilities of Wt quite nicely. But then along came the aforementioned designer, with their own ideas on what they wanted to see. And that has really thrown a wrench in the works for me. I guess I could abandon Wt and do all this stuff they want with a bunch of hand-coded HTML/CSS/JavaScript/PHP and JavaScript libraries, but then I've got to learn all those technologies and worry about all the browser compatibility issues too. Since I already know C++ and have used the widget-based desktop application programming approach before, Wt seemed like a good fit. Maybe I can get the designer to compromise and give them what they want in some areas but not in others that are going to make a lot of extra work for me.
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Koen Deforche 3 months ago
Hey,
I'm not sure if you'll find off-the shelf JavaScript components for this, if you also want to keep the sorting functionality ?
Regards,
koen
RE: Is this possible with Wt?: an "accordion" with content containing any mix of widgets (such as WPushButton, WTable, WTabWidget,...) - Added by Steve Drake 3 months ago
Koen: yeah, I'm not sure if it is available either. (And for me, the point of using Wt is that I don't know and I don't want to know.)
I am going to see if I can get the designer to accept a compromise: a two-pane layout, using a WTableView above and a WPanel below that shows the details of whatever object(s) are selected on the list above. When the WPanel is expanded, I would shrink the overall height of the WTableView so that whether the WPanel is expanded or not, the whole UI would take up the same amount of vertical space on the screen. That sounds quite doable with Wt, right? (It looks like I would just call WTableView::resize when the WPanel is expanded/collapsed.) This approach would have the added major advantage of allowing the user to select multiple objects (rows) in the WTableView, and then actions could be applied to those objects as a group. I'll use that advantage to sell the idea.
Regards,
Steve