Audiobook Reader for symbian using Qt Quick Components

Comments

Hamishwillee - Code example

Note that this is a Code Snippet, not Code Examples category because you have not downloadable source code zip. Can you provide a link to your app (on ovi, or elsewhere)? Can you provide the full source (OK if not, but useful if you can)

regards

Hamish

hamishwillee 06:13, 15 February 2012 (EET)

Kunal the one - Code example

I am planning to provide the link as soon as application get published on Ovi store. Thanks,

Kunal

kunal_the_one 08:54, 15 February 2012 (EET)

Log in or Join to leave comments.

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

---

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.

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: This is an entry in the Symbian Qt Quick Components Competition 2012Q1