BigCats app with multiple pages and audio in QML
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
Tested with
Article
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.
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
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.
