Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Tian Karaoke List - app showcase

From Wiki
Jump to: navigation, search

The Tian Karaoke List app returns a track ID for a given entered name. This article describes the main elements of the app's design.

Article Metadata
Tested with
Devices(s): Nokia N8 Belle
Platform(s): Symbian^3 (Belle), Qt 4.7.4, Qt Quick 1.1
Device(s): All Symbian^3 (Belle) devices
Created: trong.pham (19 Mar 2012)
Last edited: hamishwillee (30 Jan 2013)



You do love singing karaoke? But you know, you will waste time to look for the ID of a song although you do know the song name. This application will help you to find the song information quickly by typing the song name or whatever you remember about that song. This application is used for looking for the Vietnamese and English songs on the Ariang devices.


Maybe my application is not an international use application, just useful for Vietnamese, but this is a Qt Quick Components, and the Nokia 808 can't let me turn my back on it, so I have decided to port its functions to Qt Quick App (previous versions is powered by Qt Widget and also available on Nokia Store).


The layout is quite simple. The root is based on a PageStackWindow element. It use the a shared ToolBar element(contains a ToolBarLayout to manage five ToolButton elements) to navigate between four views.

There are four views. The first is searching view with a SearchBox, a ListView with a ScrollerBar, a DetailView, whenever you type in the SearchBox, the ListView will show the result. The DetailView is used to show more information about the song, it's also available in the second and the third view and has the same function, but I will tell you later about its design and its reason since it's a custom component combined from some basic Qt Quick Component. This view is initiated by PageStackWindow, so there is no ToolButton to navigate to it, but the Back ToolButton.

The second is the view that shows the list of songs by volume. It include a SelectionListItem, a SelectionDialog for choosing volumes, a ListView with a ScrollerBar and a DetailView. When you choose a volume, the ListView will show the songs of that volume.

The third view shows the list of favorite songs. It include a ListView with a ScrollerBar, a DetailView.

The last view with a Flickable, two Images and some Label - is used to provide the information about the App and some use guides.

For the ListView delegate, it is quite simple, so on this site, people would be easy to know what is it. When touching the delegate, it will expand the height and hide the Labels, call the suitable DetailView show up to provide more information about the song (author, lyric, is favorite or not?)

The DetailView include five Labels and one CheckBox. In the beginning, I decided to make a Flipable, the ListView at front, and the DetailView at back, when delegate is clicked, it rotates 180 degrees to show the DetailView, but with that animation, I feel like my App is disjointed, not connected, so I change the design, bring the DetailView into the delegate to make my work is easier than separate it from delegate, but the result is lagging when scroll fast with a low specs of my N8, cause the delegate has too much component. And the final result is a custom component separated from delegate but still keep the smoothness in transition.

Video Demo

The media player is loading...


It's quite easy to port a Qt Widget App to Qt Quick App using Qt Quick Component, Almost I can get whatever I imagine about the UI my App should be. With Qt Quick, my App bring different/better touch experiences compared to Qt Widget. But I think the Qt Quick Components still have a lot of thing to improve. They still have some limits but bring a good consistent look with Nokia Belle. As my opinion, Qt Quick has a very bright future if it can be brought to more other platforms.

Thank for reading my bad-English article.


Now available on Nokia Store.

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

This page was last modified on 30 January 2013, at 04:50.
110 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.