Navigating a QAbstractItemModel tree in a QML view

QML in Qt 4.7.0 will feature elements for using QAbstractItemModels which are really lists. It is not possible to directly display a treeview on a hierarchical model. There are several good reasons for this.

  • It is difficult to define an API that will stand the test of time. NQDF don’t want to get it wrong early and have to maintain something broken.
  • It is difficult technically. There are other important things to do before release, and this would be a time-stealer.
  • It is not yet certain from a user interaction point-of-view where trees will be relevant in mobile UIs, including how to navigate one and how to visually represent it.

For those of us already prototyping though, some solution is needed. As a first iteration of a user interaction design, we’ve been experimenting with the use of breadcrumbs to navigate the view.


[OGG link]

Unfortunately the video capture is not very smooth, but there is an animation when selecting a breadcrumb. For illustration purposes, the selection made in the qml environment in mirrored in a QTreeView on the left.

Implementing this concept was actually the motivation behind developing a ui independent breadcrumbs list and a method of proxying selections through complex systems.

As this is very new, we would really like feedback about navigating the tree this way. This could be part of your next mobile email client, so now is your chance to help us make it more intuitive. We might consider user feedback on this stuff in a more formal way later.

  • Is your understanding of the current position in the tree clear?
  • Is it clear to you how to move “up” the tree?
  • Is it clear to you how to move “down” the tree?
  • Do the animations help your understanding of navigating the tree?

If you can’t compile code and don’t have a N900, feedback from watching the video is welcome. To compile the example on your computer (requires unreleased version of Qt 4.7):

svn co svn://anonsvn.kde.org/home/kde/trunk/KDE/kdepim/runtime/qml/kde/tests/qmlbreadcrumbnavigation
mkdir build && cd build
cmake ..
make
./qml_nav

If you already have a N900 with Qt4.7, you can try out the demo by running the example from the tarball here.

Let us know what you think!

2 Responses to “Navigating a QAbstractItemModel tree in a QML view”

  1. QML TreeView « ruedigergad Says:

    […] There are some approaches/efforts to display tree structures http://qt-way-notes.blogspot.com  https://steveire.wordpress.com but none of these is optimized for mobile devices. Mobile devices have a comparably small screen […]

  2. Antonino Says:

    Hi Steveire,
    very nice post, I think this is exactly what I need but both links (tarball and svn) are broken. Please can you send me a link where I can get the source code? Thanks a lot!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: