×
Namespaces

Variants
Actions
(Difference between revisions)

Farmácias de Serviço - app showcase

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Hamishwillee - Update creator name)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix some typos)
Line 1: Line 1:
 
[[Category:Draft]][[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo]][[Category:Nokia Maps]]
 
[[Category:Draft]][[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo]][[Category:Nokia Maps]]
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}
+
{{Abstract|This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Componentes}}
{{Abstract|This article explains how we've ported 'Farmácias de Serviço' from Harmattan to Symbian using QtQuick Componentes}}
+
  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 27: Line 26:
  
 
== Introduction ==
 
== Introduction ==
After being developing WRT Widgtes for Symbian devices for some years we decided to take a look at QtQuick and evaluate the benefits of using it. We decided to develop a new app from scratch and to target Harmattan because QtWRT wasn't available in that platform (in Maemo 5 one could install it from extras-devel).
+
After being developing Symbian Web Runtime apps for Symbian devices for some years we decided to take a look at Qt Quick and evaluate the benefits of using it. We decided to develop a new app from scratch and to target Harmattan because Symbian Web Runtime wasn't available in that platform (in Maemo 5 one could install it from extras-devel).
The app was written entirely in QML, it used the QtComponents for MeeGo, and was designed to be simple to use.
+
The app was written entirely in QML, it used the Qt Components for MeeGo, and was designed to be simple to use.
 
+
It was migrated to Symbian in order to participate in the Symbian Qt Quick Components Competition 2012Q1.
+
  
 +
It was migrated to Symbian in order to participate in the [[Symbian Qt Quick Components Competition 2012Q1]].
  
 
== QtComponents ==
 
== QtComponents ==
The app is heavly based on QtComponents, both in Symbian and MeeGo versions, because they allowed us to focus in processing and presenting data to the user instead of spending most the time with navigation logic.
+
The app is heavly based on Qt Components, both in Symbian and MeeGo versions, because they allowed us to focus in processing and presenting data to the user instead of spending most the time with navigation logic.
Using PageStack, Page, TabGroup and Toolbar it's possible to create the basic structure for an application in a couple of hours and later to take the time to add contents to the pages.
+
Using {{Icode|PageStack}}, {{Icode|Page}}, {{Icode|TabGroup}} and {{Icode|Toolbar}} it's possible to create the basic structure for an application in a couple of hours and later to take the time to add contents to the pages.
  
  
 
== Problem Areas ==
 
== Problem Areas ==
Migrating the app from MeeGo to Symbian wasn't as easy as we were expecting. Some QtComponents are different in both plataforms and some don't have the same behavior. This was quite obvious when trying to get the most out of them.
+
Migrating the app from MeeGo to Symbian wasn't as easy as we were expecting. Some Qt Components are different in both platforms and some don't have the same behavior. This was quite obvious when trying to get the most out of them.
 
+
* The app used some events, like {{Icode|onVisibleChanged}} in pages, that weren't fired in Symbian using the same code.
The app used some events, like onVisibleChanged in pages, that weren't fired in Symbian using the same code.
+
* The toolbar has different properties and doesn't behave the same way. In MeeGo the space between icons is calculated taking in account only the visible icons, in Symbian the place is preserved even if they are not visible. * Toolbar look nicer in MeeGo because all the icons are spearated evenly.
The toolbar has different properties and doesn't behave the same way. In MeeGo the space between icons is calculated taking in account only the visible icons, in Symbian the place is preserved even if they are not visible. Tooltbar look nicer in MeeGo because all the icons are spearated evenly.
+
We had the choice to preserve the icon position when it was not needed by setting {{Icode|.opactity}} to 0 and allow the space to be distributed between the other icons setting {{Icode|.visible}} to {{Icode|false}}. In Symbian this can't be done. We would have to duplicate code and components, placing a toolbar inside every page, instead of having a global one.
We had the choice to preserve the icon position when it was not needed by setting .opactity to 0 and allow the space to be distributed between the other icons setting .visible to false. In Symbian this can't be done. We would have to duplicate code and components, placing a toolbar inside every page, instead of having a global one.
+
 
+
  
 
== The good stuff ==
 
== The good stuff ==
Attaching events to properties (onXXXXXChanged) and connecting signals to functions (tlbRefresh.clicked.connect(refreshTooltbarButtonClicked)) makes it very easy to separate the app structure from the code the gathers and processes data and places it on screen.
+
Attaching events to properties ({{Icode|onXXXXXChanged}}) and connecting signals to functions ({{Icode|tlbRefresh.clicked.connect(refreshTooltbarButtonClicked)}}) makes it very easy to separate the app structure from the code the gathers and processes data and places it on screen.
Pages can use 'App Ressources' defined in the basic structure without having to antecipate what kind of functionallity will have when defining it. This way pages can be developed as individual unit.
+
  
 +
Pages can use 'App Resources' defined in the basic structure without having to anticipate what kind of functionallity will have when defining it. This way pages can be developed as individual unit.
  
 
== Maps - the challenge ==
 
== Maps - the challenge ==
 
Getting the Map component to work how we wanted was quite challeging. It provides an easy way to incorporate maps in apps but it still lacks most of the funcionalities that are available in other platforms.
 
Getting the Map component to work how we wanted was quite challeging. It provides an easy way to incorporate maps in apps but it still lacks most of the funcionalities that are available in other platforms.
 
'Pinch to Zoom' is not include, so we needed to place a PinchArea above it and code it. This meant that we weren't able to detected if the used clicked on a Pin or not.
 
'Pinch to Zoom' is not include, so we needed to place a PinchArea above it and code it. This meant that we weren't able to detected if the used clicked on a Pin or not.
The Map shows Pins (MapImage components) in the same order that they were added. This can result in having a Pin that is located norther on top of another one this is located souther. Pins have different colors depending on how far they are from the user location (yellow - near, dark red - far). This is usefull when zooming out because Pins are just a couple of pixels away from each other.
+
The Map shows Pins ({{Icode|MapImage}} components) in the same order that they were added. This can result in having a Pin that is located norther on top of another one this is located souther. Pins have different colors depending on how far they are from the user location (yellow - near, dark red - far). This is usefull when zooming out because Pins are just a couple of pixels away from each other.
  
 
In some devices the text written in maps (street names, ...) is to small to be confortably read. Zooming in doesn't help because the area is zoomed but the text remains the same size. We had to add an option to scale the map to 200% in order to overcome this problem.
 
In some devices the text written in maps (street names, ...) is to small to be confortably read. Zooming in doesn't help because the area is zoomed but the text remains the same size. We had to add an option to scale the map to 200% in order to overcome this problem.
 
  
 
== Getting and displaying data ==
 
== Getting and displaying data ==
 
This was probably the easiest part of the app.
 
This was probably the easiest part of the app.
There's still a problem with XmlListModel that refused to parse feeds that dont't have the '<?xml version='1.0' encoding='UTF-8'?><channel>' header. When working with third party feeds we don't have the choice of correct it so we had to get the XML using Javascript, add the header to the result and inject it into the ListModel (.xml = result).
+
 
 +
There's still a problem with {{Icode|XmlListModel}} that refused to parse feeds that don't have the {{Icode|<?xml version='1.0' encoding='UTF-8'?><channel>}}' header. When working with third party feeds we don't have the choice of correct it so we had to get the XML using Javascript, add the header to the result and inject it into the ListModel (.xml = result).
  
  
 
== Application Icon ==
 
== Application Icon ==
 
[[File:FarmaciasSymbian-icon.png]]
 
[[File:FarmaciasSymbian-icon.png]]
 
  
 
== Screenshots ==
 
== Screenshots ==
Line 79: Line 74:
  
 
== Download ==
 
== Download ==
'Farmácias de Serviço' for Symbian isn't available, yet, in Ovi Store.
+
'Farmácias de Serviço' for Symbian isn't available, yet, in Nokia Store.
 
Until then you can get the SIS package at http://www.applicacoes.com/store/handout/symbian/FarmaciasSymbian.sis
 
Until then you can get the SIS package at http://www.applicacoes.com/store/handout/symbian/FarmaciasSymbian.sis
 
  
 
== More info ==
 
== More info ==
 
http://www.handout.pt/produto.asp?id=5-farmacias
 
http://www.handout.pt/produto.asp?id=5-farmacias
 +
 +
{{Note|This is an entry in the [[Symbian Qt Quick Components Competition 2012Q1]]}}

Revision as of 10:19, 4 April 2012

This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Componentes

Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: Handout (21 Mar 2012)
Last edited: hamishwillee (04 Apr 2012)

Contents

Introduction

After being developing Symbian Web Runtime apps for Symbian devices for some years we decided to take a look at Qt Quick and evaluate the benefits of using it. We decided to develop a new app from scratch and to target Harmattan because Symbian Web Runtime wasn't available in that platform (in Maemo 5 one could install it from extras-devel). The app was written entirely in QML, it used the Qt Components for MeeGo, and was designed to be simple to use.

It was migrated to Symbian in order to participate in the Symbian Qt Quick Components Competition 2012Q1.

QtComponents

The app is heavly based on Qt Components, both in Symbian and MeeGo versions, because they allowed us to focus in processing and presenting data to the user instead of spending most the time with navigation logic. Using PageStack, Page, TabGroup and Toolbar it's possible to create the basic structure for an application in a couple of hours and later to take the time to add contents to the pages.


Problem Areas

Migrating the app from MeeGo to Symbian wasn't as easy as we were expecting. Some Qt Components are different in both platforms and some don't have the same behavior. This was quite obvious when trying to get the most out of them.

  • The app used some events, like onVisibleChanged in pages, that weren't fired in Symbian using the same code.
  • The toolbar has different properties and doesn't behave the same way. In MeeGo the space between icons is calculated taking in account only the visible icons, in Symbian the place is preserved even if they are not visible. * Toolbar look nicer in MeeGo because all the icons are spearated evenly.

We had the choice to preserve the icon position when it was not needed by setting .opactity to 0 and allow the space to be distributed between the other icons setting .visible to false. In Symbian this can't be done. We would have to duplicate code and components, placing a toolbar inside every page, instead of having a global one.

The good stuff

Attaching events to properties (onXXXXXChanged) and connecting signals to functions (tlbRefresh.clicked.connect(refreshTooltbarButtonClicked)) makes it very easy to separate the app structure from the code the gathers and processes data and places it on screen.

Pages can use 'App Resources' defined in the basic structure without having to anticipate what kind of functionallity will have when defining it. This way pages can be developed as individual unit.

Maps - the challenge

Getting the Map component to work how we wanted was quite challeging. It provides an easy way to incorporate maps in apps but it still lacks most of the funcionalities that are available in other platforms. 'Pinch to Zoom' is not include, so we needed to place a PinchArea above it and code it. This meant that we weren't able to detected if the used clicked on a Pin or not. The Map shows Pins (MapImage components) in the same order that they were added. This can result in having a Pin that is located norther on top of another one this is located souther. Pins have different colors depending on how far they are from the user location (yellow - near, dark red - far). This is usefull when zooming out because Pins are just a couple of pixels away from each other.

In some devices the text written in maps (street names, ...) is to small to be confortably read. Zooming in doesn't help because the area is zoomed but the text remains the same size. We had to add an option to scale the map to 200% in order to overcome this problem.

Getting and displaying data

This was probably the easiest part of the app.

There's still a problem with XmlListModel that refused to parse feeds that don't have the {{{1}}}' header. When working with third party feeds we don't have the choice of correct it so we had to get the XML using Javascript, add the header to the result and inject it into the ListModel (.xml = result).


Application Icon

FarmaciasSymbian-icon.png

Screenshots

FarmaciasSymbian-1.png FarmaciasSymbian-2.png FarmaciasSymbian-3.png FarmaciasSymbian-4.png FarmaciasSymbian-5.png FarmaciasSymbian-6.png FarmaciasSymbian-7.png FarmaciasSymbian-8.png

Download

'Farmácias de Serviço' for Symbian isn't available, yet, in Nokia Store. Until then you can get the SIS package at http://www.applicacoes.com/store/handout/symbian/FarmaciasSymbian.sis

More info

http://www.handout.pt/produto.asp?id=5-farmacias

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

74 page views in the last 30 days.
×