×
Namespaces

Variants
Actions
(Difference between revisions)

Go2car2go QML Car2Go client - app showcase

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "Symbian Belle" to "Nokia Belle")
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
 
(3 intermediate revisions by one user not shown)
Line 1: Line 1:
[[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo]][[Category:Qt Mobility]][[Category:Location]][[Category:Networking]]
+
[[Category:Qt Quick]][[Category:Qt WebKit]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:Qt Mobility]][[Category:Location]][[Category:Networking]]
{{Abstract|This article describes go2car2go, a car2go client for Nokia Symbian devices with Belle and Nokia N9.}}
+
{{Abstract|Go2car2go is a car2go client for Nokia Symbian devices with Belle and Nokia N9. This article explains the main elements of the app design.}}
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+
 
+
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 10: Line 8:
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format YYYYMMDD -->
+
|creationdate= 20120322
|author= <!-- Display as link [[User:username]] -->
+
|author= [[User:Temirlan]]
 
}}
 
}}
  
 
== Introduction ==
 
== Introduction ==
[[File:Go2car2gol_logo.png|right]]
+
[[File:Go2car2gol logo.png|right]]
 
go2car2go is a car2go client for Nokia Symbian devices with Belle and Nokia N9.
 
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.
 
car2go is a car rental service powered by Daimler and used in many cities around the world.
Line 39: Line 37:
 
== Problem Areas ==
 
== 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.
+
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 ).
 
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 wired. For example you can not change color of "button" component. The only thing you can set is dark or light version of it.
+
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.  
 
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.  
<gallery  widths=280px heights=100px>
+
[[File:Temirlan header.png|frame|none|custom header with rounded corners and 2 buttons]]
File:Temirlan_header.png| custom header with rounded corners and 2 buttons
+
</gallery>
+
 
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.  
 
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.  
 
For this case I am using customized dialog with buttons and text area.  
  
[[File:Temirlan_dialog.png]]
+
[[File:Temirlan dialog.png]]
  
 
In preferences view, I have decided to compose my own group label since I do like the WebOS way :)
 
In preferences view, I have decided to compose my own group label since I do like the WebOS way :)
  
[[File:Temirlan_custom_group_label.png‎ ]]
+
[[File:Temirlan custom group label.png‎ ]]
  
 
== Screenshots ==
 
== Screenshots ==
<gallery widths=280px heights=360px>
+
<gallery widths=280px heights=360px>
 
File:Temirlan_2.png| main view
 
File:Temirlan_2.png| main view
 
File:Temirlan_9.png| parking spots view  
 
File:Temirlan_9.png| parking spots view  
Line 70: Line 66:
 
As mentioned above this app runs without any modification on Nokia E6 for example which has display resolution of 640 x 480 px.
 
As mentioned above this app runs without any modification on Nokia E6 for example which has display resolution of 640 x 480 px.
  
 
+
<gallery widths=360px heights=280px>
<gallery widths=360px heights=280px>
+
 
File:Temirlan_10.png| main view on E6
 
File:Temirlan_10.png| main view on E6
 
File:Temirlan_11.png| preferences view
 
File:Temirlan_11.png| preferences view
Line 81: Line 76:
  
 
You can download self-signed version with limited capabilities from here [[Media:Go2car2go.sis]]
 
You can download self-signed version with limited capabilities from here [[Media:Go2car2go.sis]]
 +
 +
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}

Latest revision as of 13:53, 13 June 2012

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: temirlan (22 Mar 2012)
Last edited: hamishwillee (13 Jun 2012)

[edit] 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.

[edit] 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

[edit] 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

This page was last modified on 13 June 2012, at 13:53.
78 page views in the last 30 days.