Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.
QML Sliding Pages
This article shows how to create a book-like page transition using a simple QML ListView element.
Many of you have maybe used the OffScreen's books apps available on OVI store. The way that offscreen has chosen to display pages is simple, clever and really usable, and better than many other solutions I've seen implemented on Nokia's or other phones.
You can watch this component in action here: The media player is loading...
Sliding Pages Component
Here are the QML files of this component.
main.qml The Main.qml shows you how to create an instance of the component. Declaring the component size is important because it could happen that the delegate's width is 0.
import QtQuick 1.0
book/Book.qml This file defines the component and the delegate. Here you don't have to define any size since it make use of the one defined in the main file. Animations could be added to make it fancy but I preferred to keep this example as simple as possible for a better understanding. Further improvements are left to the reader as exercise.
import QtQuick 1.0
Component.onCompleted: page.width = book.width
Full code is downloadable: File:SlidingPages.zip
This example shows how versatile is the ListView element. With few lines a QML developer can customize ListView adding new features which could make your application experience better from the user point of view.
These pages can display images, text and so on - even QWebPages with videos! Moreover usage of gradients or background images can be used to add even more eye candy.