×
Namespaces

Variants
Actions

BigCats app with multiple pages and audio in QML

From Nokia Developer Wiki
Jump to: navigation, search

This article describes a simple QML app which allows you to select from animal images, progress to a full screen view of that animal and play audio for it. The app is written as a learning exercise by a new QML programmer.

Article Metadata
Code Example
Installation file: Media:BigCats.sis
Tested with
Devices(s): Nokia N8
Compatibility
Platform(s):
Symbian
Article
Created: mghasan (25 Mar 2012)
Last edited: hamishwillee (02 May 2012)

Introduction

I have chosen simple BigCats application for demonstrating how easy it is for creating Symbian application without a single line of code.

BigCats application displays custom grid view using four images inserted in rectangles. Here are the screen shots of the application.

BigCats MainPage.jpg Lion.jpg Tiger.jpg Leopard.jpg

Steps to create simple QML application without writing a single line of code.

  • Create new project using Qt Quick project -> Qt Quick application template and select Qt Quick component for Symbian as a application type.
  • Select target as Symbian device or Qt Simulator
  • Open main.qml file and add new tool button "info" as
        ToolButton {
iconSource: "gfx/info.png"
}
  • Create application's about dialog
    QueryDialog {
id: aboutDlg
 
titleText: qsTr("BigCats 1.0")
message: qsTr("<p>BigCats application displays Lion " +
"Tiger, Cheetah and Leopard on whole screen." +
"<p>It demonstrate the use of a switching between multiple views, playing sound and displaying images.</p>"
)
acceptButtonText: qsTr("OK")
}
  • Link info tool button to display about dialog
        ToolButton {
iconSource: "gfx/info.png"
onClicked: aboutDlg.open();
}
  • Open MainPage.qml and add rectangles for thumbnail to the main page by
    Rectangle {
id: rectangle1
x: 6
y: 6
width: 170
height: 250
color: "#ffffff"
}
  • Add image to rectangle by
    Rectangle {
id: rectangle1
x: 6
y: 6
width: 170
height: 250
color: "#ffffff"
 
Image {
id: imagerec1
x: 0
y: 0
width: 170
height: 250
source: "gfx/Lion.jpg"
}
}
  • Now add mouse area for click
    Rectangle {
id: rectangle1
x: 6
y: 6
width: 170
height: 250
color: "#ffffff"
 
MouseArea {
id: mouse_area1
x: 0
y: 0
width: 170
height: 250
}
 
Image {
id: imagerec1
x: 0
y: 0
width: 170
height: 250
source: "gfx/Lion.jpg"
}
}

Follow above steps to create remaining rectangles and aligned to screen size.After above steps you will see similar to below screen

BigCats MainPage.jpg

Creating multiple views / pages

  • Create new page in MainPage.qml by adding
    Page {
id: page1
x: 0
y: 0
width: 360
height: 640
}
  • Add rectangle to fit entire screen size by
       Rectangle {
id: rectangle_page1
x: 0
y: 0
width: 360
height: 640
color: "#ffffff"
}
  • Add image to above rectangle by
            Image {
id: imagepage1
x: 0
y: 0
width: 360
height: 640
source: "gfx/Lion.jpg"
}
  • Add play icon image on top of above image by
            Image {
id: image1
x: 107
y: 243
width: 147
height: 155
opacity: 0.30
z: 1
source: "gfx/play.png"
}

Note: set z: 1 to display image on top of other image.

  • Add Audio playback and set file path by
        Audio {
id: playMusic
source: "Lion_Roaring.wav"
}

Add import QtMultimediaKit 1.1 to use Audio component

  • Add mouse area for entire screen and action when clicked by
            MouseArea {
id: mouse_area_page1
x: 0
y: 0
width: 360
height: 640
 
onDoubleClicked: {
//Stop playback before changing view
if(playMusic.playing) {
playMusic.stop();
}
pageStack.pop();
}
onClicked: {
playMusic.play();
}
  • Add text on top of image by
        Text {
id: text1
x: 6
y: 8
z: 1
text: qsTr("Double click to go back")
font.bold: true
color: "black"
}

Similarly add remaining pages to the MainPage.qml file.

Adding link or action to main or initial page

  • Add link to open new page(page 1) when its rectangle / thumbnail is clicked
    Rectangle {
id: rectangle1
x: 6
y: 6
width: 170
height: 250
color: "#ffffff"
 
MouseArea {
id: mouse_area1
x: 0
y: 0
width: 170
height: 250
''' onClicked: pageStack.push(page1);'''
}
 
Image {
id: imagerec1
x: 0
y: 0
width: 170
height: 250
source: "gfx/Lion.jpg"
}
}

Similarly add links to other pages to open.

Use pageStack.push(page1); to go to page1 and pageStack.pop(); to go back to previous page.

Challenge

The biggest challenge I found is to sit and just have a brief look at features of QML quick components, as I was delaying this for a long time. This competition helped me to get introduced to very interesting and simple language of QML.

Summary

The above example is developed in few hours to just demonstrate simple application and there is room for improvements. This article will be updated once more features or improvements are added.

Note.pngNote: This is an entry in the Symbian Qt Quick Components Competition 2012Q1

This page was last modified on 2 May 2012, at 08:30.
76 page views in the last 30 days.
×