×
Namespaces

Variants
Actions
Revision as of 07:48, 30 January 2013 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Audiobook Reader for symbian using Qt Quick Components

From Nokia Developer Wiki
Jump to: navigation, search

This article shares my experience of porting the Audiobook Reader app from Meego to Symbian.

Article Metadata
Code Example
Installation file: Audiobook Reader (Nokia Store)
Tested with
Devices(s): Nokia E7
Compatibility
Platform(s):
Symbian
Article
Created: kunal_the_one (11 Feb 2012)
Last edited: hamishwillee (30 Jan 2013)

Introduction

I had created Audiobook reader application for Meego platform using Meego QML components. Now that similar components are available on symbian as well, I thougt to port it to Symbian platform using Qt Quick Components.

I have used both inbuilt and custom components for this application. I will try to describe here which components I used and how i used in this post. Following are few screen shot from my application.

Scr000035.jpg Scr000032.jpg Scr000033.jpg

As you can see my application use different toobar for each pages. Creating toolbar was for symbian was same as creating it for meego. By using following code, I created toolbar for my application.

Page {
....
tools: ToolBarLayout {
ToolButton {
iconSource: "toolbar-back";
onClicked: {
Qt.quit();
}
}
ToolButton {
text: "Add Book"
onClicked: {
console.debug("Add Book clicked.");
}
}
ToolButton {
text: "Add Folder"
onClicked: {
console.debug("Add Folder clicked.");
}
}
ToolButton{
iconSource: "help.svg"
onClicked:{
showHelp();
}
}
}
...
}

My application utilizes list view also quite heavily for different view, like booklist view, track view, bookmark view. Fortunately, creating list view and list view delegate is quite more easier than Meego.

Following code show how I created list view, with one image that shows book preview, and two text label showing book name and current track.

import QtQuick 1.1
import com.nokia.symbian 1.1
ListItem {
id: listDelegate
subItemIndicator: true
Row {
id:contentArea
anchors.fill: listDelegate.padding
spacing: 8
Image{
anchors.verticalCenter: parent.verticalCenter
id:thumbnail
width: 60; height: 60
fillMode: Image.PreserveAspectCrop
source:file;
clip:true
}
Column {
spacing: 5
anchors.verticalCenter: parent.verticalCenter
width:listDelegate.width - thumbnail.width - 30
ListItemText {
mode: listDelegate.mode
width:parent.width
role: "Title"
clip: true
wrapMode: Text.NoWrap
text: bookname
}
ListItemText {
mode: listDelegate.mode
width:parent.width
role: "subtitleText"
clip: true
wrapMode: Text.NoWrap
text:track
}
}
}
onClicked: {
}
onPressAndHold: {
}
}

As you can see in video, I also used query dialog and custom file dialog for file browsing.

Following is code for query dialog.

import QtQuick 1.1
import com.nokia.symbian 1.1
 
QueryDialog {
id: dialog
property variant bookmark;
 
acceptButtonText: "Remove";
rejectButtonText: "No, Go back";
titleText: "Remove Bookmark?";
message: "Sure you want to remove \""+ bookmark+ "\" ? \n";
 
onAccepted: { dialog.destroy() }
onRejected: { dialog.destroy() }
}

And following is custom dialog for file browsing.

import QtQuick 1.1
import com.nokia.symbian 1.1
 
Dialog {
id: filedialog
 
title: Item {
id: titlebar
x: 16 - platformStyle.leftMargin
height: 50; width: screenWidth
 
Label {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
font.capitalization: Font.MixedCase
font.pixelSize: platformStyle.fontSizeLarge
text: " Choose Directory";
}
}
 
content: [
Column {
x: titlebar.x + 8
width: screenWidth
height: screenHeight - 125
spacing: 5
 
Row {
height:upButton.height
width: parent.width
Button {
id: upButton
text: 'Up'
height: parent.height; width: 70
onClicked:
}
}
 
Item {
width: parent.width
height: screenHeight - 220
 
ListView {
id: entries
model: fileModel
clip: true
width:parent.width; height:parent.height
 
delegate: ListItem {
...
}
}
}
]
onAccepted: { filedialog.destroy() }
onRejected: { filedialog.destroy() }
}

Summary

Application is published on Nokia Store, you can download it from here.

Following is demo from this application, working on my E7.

The media player is loading...

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

This page was last modified on 30 January 2013, at 07:48.
112 page views in the last 30 days.
×