×
Namespaces

Variants
Actions
Revision as of 09:04, 19 April 2012 by hamishwillee (Talk | contribs)

Go2car2go QML Car2Go client - app showcase

From Nokia Developer Wiki
Jump to: navigation, search

Go2car2go is a car2go client for Nokia Symbian devices with Belle and Nokia N9. This article explains the main elements of the app design.

Article Metadata
Code ExampleCompatibility
Platform(s):
Symbian
Article
Created: (19 Apr 2012)
Last edited: hamishwillee (19 Apr 2012)

Introduction

Go2car2gol logo.png

go2car2go is a car2go client for Nokia Symbian devices with Belle and Nokia N9. car2go is a car rental service powered by Daimler and used in many cities around the world.

After successfully publishing my car2go app for Nokia N9 devices (go2car2go for N9) via Ovi Store I have decided to participate at this an app design competition organized by Nokia.

I was already trying to write an app for Symbian 5th devices (for my N97) where no Qt Quick Components were ready there about 1,5 years ago. So I had to create all my UI components myself.

But fortunately there are Qt Quick Components with lots of useful items and creating apps for Symbian/ Meego is much easier now.

Problem Areas

Let’s have a look at my car2go app for Nokia Belle devices. The beauty of Qt Quick components and QML in general, one can develop his/her UI for different display resolutions with the same code. That's what i have done with my app which runs on different Symbian devices without code modification (Tested on N9, N8, X7 ).

My app's logic is done in C++ and UI with Qt Quick Components/ QML. I have used standard Qt Quick components as much as possible. But sometimes I found them a little bit weird. For example you can not change color of "button" component. The only thing you can set is dark or light version of it.

But let's go step by step. At the very beginning I wanted my app to be simple and elegant. Second, all essential operations should be arrived with one touch. Therefore I have decided to compose my own header with two buttons on edges and view caption in the middle.

custom header with rounded corners and 2 buttons

Since my app is for finding nearest vehicles, parking spots, and gas stations of car2go rental service, the custom header in each view is the solution. You can switch to map view in each category with one click. The essential operation after successfully finding the nearest vehicle you want to book it or let you navigate you to it. For this case I am using customized dialog with buttons and text area.

Temirlan dialog.png

In preferences view, I have decided to compose my own group label since I do like the WebOS way :)

Temirlan custom group label.png

Screenshots

As mentioned above this app runs without any modification on Nokia E6 for example which has display resolution of 640 x 480 px.

You can download self-signed version with limited capabilities from here Media:Go2car2go.sis

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

174 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.

×