Best practices for designing a large QML GUI
-
Hello all, I'm working on a large application using PySide and QtQuick 1.0. It's being developed on Ubuntu but also needs to be able to be deployed as a standalone app on Windows XP and 7. There's no guarantee that these systems will have a large amount of RAM (perhaps as little as 512 MB) or a new processor. I'm using py2exe for packaging (and Inno Setup for the installer, but you probably didn't need to know that!)
In the application there are several different views (which I call "panes"), several of which may be open at a time, though only one of which will ever be displayed at once. They use transitions to switch back and forth. At the bottom of the application is a dynamic set of buttons to switch between the open panes. Each pane also needs a button inside of itself to close the pane.
Within each pane, there are also several views (more like tabs, really, so I, shockingly enough, call them "tabs"), each of which displays various data.
All data that fill the application are formatted as xml and passed to the application using a replacement Qt reactor in Twisted. The data are parsed almost exclusively by the QtQuick 1.0 XmlListModel. I understand there's a significant memory leak in the XmlListModel that was patched up in Qt 4.8, so I'm ignoring that particular issue while waiting for the 4.8 release.
I've pretty much got the application built out, but it's not particularly stable and I think my implementation of "panes" and "tabs" is not up to snuff. I've gotten a lot better at QML since I started (never heard of it before this project) and I think the whole application could benefit from an overhaul of those core elements - the panes and tabs.
From what I understand, the proper way to do things like this is with a Loader element, but my attempts with this have been noobish at best. If you were building a system like this, how would you design the pane element, pane switch animations and the tabs within each pane? What are the best practices for creating these types of widgets so they show the best performance?
Thank you in advance for your advice!
-
Since only one pane is visible, I suggest using "ListView":http://doc.qt.nokia.com/4.7-snapshot/qml-listview.html and loading Panes as delegates. The advantage with ListView is that it deletes the item according to its "cacheBuffer":doc.qt.nokia.com/4.7-snapshot/qml-listview.html, so memory is maintained well. You can also specify different animations.
Loader can also be used, but its advantage is that it skips the creation of item unless required.
See "QXmlQuery":http://doc.qt.nokia.com/stable/qxmlquery.html for XML parsing with XQuery/XPath.
-
Thank you for your quick response, srikanthsombhatla! I am currently using a ListView to contain the panes. It's good to know that was someone else's first instinct too!
One issue I have with this is that the panes must be persistent, for instance, each pane has to remember which tab it's on and various other states. When the delegate is destroyed (due to the efficient processing of the ListView) because it is out of the viewable area, all of the states are destroyed with it. Right now, I'm holding a copy of each pane in a Javascript variable while they are not visible in order to persist the state. (Is this the right way to do things, or is there a better way to keep state?)
You mentioned QXmlQuery as an option for parsing the XML with XPath. I'm currently using Qt Quick's XmlListModel in most places to parse the data. Would it be more appropriate to parse data with the Python (I'm using PySide, if you recall) using QXmlQuery rather than in the QML itself? I'll admit, most of my logic is in Javascript. Perhaps this is where I can apply a better practice?
Thank you again for your help!