×
Namespaces

Variants
Actions

QML Book Animation

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

Introduction

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.
81 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×