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. Thanks for all your past and future contributions.

QML Book Animation

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): Nokia N900
Platform(s): Qt 4.7 and later
Device(s): All
Keywords: Qt, QML, 3D, ListView, Sliding
Created: gnuton (30 Jun 2011)
Last edited: hamishwillee (30 Jan 2013)


The great community around Maemo/MeeGo has always new cool things to show. In this article I would like to introduce you the Martin Grimme's Book Animation component, a QML component which adds a nice page flip effect.

The video below show us how it performs on the Nokia N900. The media player is loading...

The code

The Animation Book component is implemented in four files which are in the same directory. This directory can be imported and used in your project easily.

The base elements you need to use in your app are the following ones:

  • Book - is a component which contains a Repeater element that holds maximum 4 items per time.
  • BookBehavior - is a MouseArea that performs animations and loads items in from the model to the Book.
  • Page - a Rectangle

The code below shows an easy way to use Book Animation.

import Qt 4.7
import "qmlbook"
Rectangle {
width: 640
height: 480
Book {
anchors.fill: parent
pageDelegate: Page {
// The page delegate may contain anything as contents; simple text,
// images, or even complex QML hierarchies
contents: Item {
anchors.fill: parent
Text {
anchors.centerIn: parent
width: parent.width - 32
wrapMode: Text.WordWrap
// access your pages' properties using the "page" object
text: page.text
Text {
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width - 32
horizontalAlignment: (page.number % 2 == 0) ? Text.AlignRight
: Text.AlignLeft
text: "<i> " + page.number + " </i>"
// The BookBehavior element handles user interaction and fills the
// pages from a model
BookBehavior {
id: bookBehavior
model: BookModel { }
This page was last modified on 30 January 2013, at 04:40.
59 page views in the last 30 days.