×
Namespaces

Variants
Actions
(Difference between revisions)

Go2car2go QML Car2Go client - app showcase

From Nokia Developer Wiki
Jump to: navigation, search
temirlan (Talk | contribs)
(Temirlan -)
 
hamishwillee (Talk | contribs)
m (Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan")
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Draft]][[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]]
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+
{{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.}}
 
+
{{Abstract|This article explains how to ... }} ''Replace the abstract text with a short paragraph (or sentence) describing what the topic covers.''
+
 
+
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
+
 
{{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]] -->
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
+
|installfile= [[Media:Go2car2go.sis]], [http://store.ovi.com/content/263035 go2car2go for N9]
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|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 ==
go2car2go is a car2go client for Nokia Symbian device with Belle and Nokia N9.car2go is a car rental service powered by Daimler and used in many cities world wide.
+
[[File:Go2car2gol logo.png|right]]
 +
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 ([http://%20http://store.ovi.com/content/263035 go2car2go for N9]) via Ovi Store I have decided to participate in an app design competition organized by Nokia.
+
After successfully publishing my car2go app for Nokia N9 devices ([http://store.ovi.com/content/263035 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.
 
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 ==
 
== Problem Areas ==
  
Qt Quick was quite fascinating to work with, as it seems really performant across both Harmattan and Symbian. I did have some issues with using pure QML and JavaScript for the app logic - for example I had to create QTimers for my animations instead of being able to use something like JavaScript's setTimeout. This adds an additional layer of overhead and took quite a bit of head scratching to figure out initially (as someone completely new to QML, but proficient in most other languages). All in all, everything worked out really well and I'm very pleased with the result.
+
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.
 +
[[File:Temirlan header.png|frame|none|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.
 +
 
 +
[[File:Temirlan dialog.png]]
 +
 
 +
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‎ ]]
  
 
== Screenshots ==
 
== Screenshots ==
 +
<gallery widths=280px heights=360px>
 +
File:Temirlan_2.png| main view
 +
File:Temirlan_9.png| parking spots view
 +
File:Temirlan_6.png| preferences view
 +
File:Temirlan_7.png | select location dialog in preferences
 +
File:Temirlan_3.png | map view with 15 nearest vehicles
 +
File:Temirlan_4.png | map view with selected vehicle
 +
File:Temirlan_5.png | dialog in map view for letting you navigate there using Nokia Maps
 +
</gallery>
 +
 +
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>
 +
File:Temirlan_10.png| main view on E6
 +
File:Temirlan_11.png| preferences view
 +
File:Temirlan_12.png | select location dialog in preferences
 +
File:Temirlan_13.png | map view with 15 nearest vehicles
 +
File:Temirlan_14.png | map view with selected vehicle
 +
File:Temirlan_15.png | dialog in map view for letting you navigate there using Nokia Maps
 +
</gallery>
 +
 +
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.
107 page views in the last 30 days.