Farmácias de Serviço - app showcase - Revision history

Hamishwillee: Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

2013-04-24T03:21:15Z

Text replace - "[[Category:Nokia Maps" to "[[Category:HERE Maps"

Hamishwillee: Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

2012-06-13T10:52:51Z

Text replace - "Category:MeeGo" to "Category:MeeGo Harmattan"

Hamishwillee: Hamishwillee - Bot update - Fix metadata etc

2012-04-20T03:42:18Z

Hamishwillee - Bot update - Fix metadata etc

Hamishwillee: Hamishwillee - Tidy wiki text

2012-04-18T04:24:37Z

Hamishwillee - Tidy wiki text

Hamishwillee: moved Farmácias de Serviço - Symbian App to Farmácias de Serviço - app showcase: renamed to identify the type of article this is

2012-04-18T04:19:34Z

moved Farmácias de Serviço - Symbian App to Farmácias de Serviço - app showcase: renamed to identify the type of article this is

Hamishwillee: Hamishwillee - Fix typo

2012-04-04T07:21:45Z

Hamishwillee - Fix typo

Hamishwillee: Hamishwillee - Fix some typos

2012-04-04T07:19:50Z

Hamishwillee - Fix some typos

Hamishwillee: Hamishwillee - Update creator name

2012-04-03T00:14:50Z

Hamishwillee - Update creator name

Jaaura: Jaaura -

2012-04-02T08:16:37Z

Jaaura -

Handout: Handout - This article explains how we've ported 'Farmácias de Serviço' from Harmattan to Symbian using QtQuick Componentes

2012-03-26T11:56:26Z

Handout - This article explains how we've ported 'Farmácias de Serviço' from Harmattan to Symbian using QtQuick Componentes

New page

[[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've ported 'Farmácias de Serviço' from Harmattan to Symbian using QtQuick Componentes}}

{{ArticleMetaData 
|sourcecode= 
|installfile= 
|devices= 
|sdk= 
|platform= 
|devicecompatability= 
|dependencies= 
|signing=
|capabilities= 
|keywords= 
|language= 
|translated-by= 
|translated-from-title= 
|translated-from-id= 
|review-by=
|review-timestamp= 
|update-by= 
|update-timestamp= 
|creationdate= 20120209
|author= [[User:grabberslasher]]
}}

== 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).
The app was written entirely in QML, it used the QtComponents 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 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.
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 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.

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

== 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 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).

== Application Icon ==
[[File:FarmaciasSymbian-icon.png]]

== Screenshots ==
[[File:FarmaciasSymbian-1.png]]
[[File:FarmaciasSymbian-2.png]]
[[File:FarmaciasSymbian-3.png]]
[[File:FarmaciasSymbian-4.png]]
[[File:FarmaciasSymbian-5.png]]
[[File:FarmaciasSymbian-6.png]]
[[File:FarmaciasSymbian-7.png]]
[[File:FarmaciasSymbian-8.png]]

== Download ==
'Farmácias de Serviço' for Symbian isn't available, yet, in Ovi 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

← Older revision		Revision as of 03:21, 24 April 2013
Line 1:		Line 1:
−	[[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:~~Nokia~~ Maps]][[Category:3rdPartyProducts]]	+	[[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:HERE Maps]][[Category:3rdPartyProducts]]
	{{Abstract\|Farmácias de Serviço is an app for finding local pharmacies. This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Components.}}		{{Abstract\|Farmácias de Serviço is an app for finding local pharmacies. This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Components.}}

← Older revision		Revision as of 10:52, 13 June 2012
Line 1:		Line 1:
−	[[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo]][[Category:Nokia Maps]][[Category:3rdPartyProducts]]	+	[[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo Harmattan]][[Category:Nokia Maps]][[Category:3rdPartyProducts]]
	{{Abstract\|Farmácias de Serviço is an app for finding local pharmacies. This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Components.}}		{{Abstract\|Farmácias de Serviço is an app for finding local pharmacies. This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Components.}}

@@ Line 1: / Line 1: @@
-[[Category:Draft]][[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo]][[Category:Nokia Maps]]
+[[Category:Qt Quick]][[Category:Qt Mobility]][[Category:Symbian]][[Category:MeeGo]][[Category:Nokia Maps]][[Category:3rdPartyProducts]]
-{{Abstract|This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Componentes}}
+{{Abstract|Farmácias de Serviço is an app for finding local pharmacies. This article explains how we ported 'Farmácias de Serviço' from Harmattan to Symbian using Qt Quick Components.}}
 {{ArticleMetaData <!-- v1.2 -->
@@ Line 39: / Line 39: @@
 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 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.
 We had the choice to preserve the icon position when it was not needed by setting {{Icode|.opacity}} 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.

@@ Line 40: / Line 40: @@
 * The app used some events, like {{Icode|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 {{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 {{Icode|.opacity}} 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.
 == The good stuff ==
@@ Line 57: / Line 57: @@
 This was probably the easiest part of the app.
-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).
+There's still a problem with {{Icode|XmlListModel}} that refused to parse feeds that don't have the <tt><?xml version='1.0' encoding='UTF-8'?><channel></tt> 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 ==

@@ Line 9: / Line 9: @@
 |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.7 and later -->
 |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 |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. -->
 |keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
 |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 |translated-by= <!-- [[User:XXXX]] -->
 |translated-from-title= <!-- Title only -->
 |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 -->
 |update-by= <!-- After significant update: [[User:username]]-->
 |update-timestamp= <!-- After significant update: YYYYMMDD -->
 |creationdate= 20120321
 |author= [[User:Handout]]
 }}
@@ Line 58: / Line 58: @@
 This was probably the easiest part of the app.
-There's still a problem with {{Icode|XmlListModel}} that refused to parse feeds that don't have the <tt><?xml version='1.0' encoding='UTF-8'?><channel></tt> 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 ==

@@ Line 1: / Line 1: @@
 [[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 -->
@@ Line 27: / Line 26: @@
 == 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.
 == 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 ==
-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 ==
-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.
 == 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.
+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.
 == 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 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).
 == Application Icon ==
 [[File:FarmaciasSymbian-icon.png]]
 == Screenshots ==
@@ Line 79: / Line 74: @@
 == 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
 == More info ==
 http://www.handout.pt/produto.asp?id=5-farmacias