After designing the application and collecting all the
components, it was time to code. But with the coding came the first
difficulties. The very first being a bug in the platform services 2.0. The
application would instantly crash when using both Platform Services and Places
API together.
There are two ways to avoid this:
Short
way: just include the platform services
library before you include the Places API library. Like this:
<script type="text/javascript" src="script/platformservices.js" charset="utf-8" ></script>
<script
type="text/javascript"
src="http://api.maps.ovi.com/places/alpha3/jsPlacesAPI-en_GB.js"></script>
Longer way (better): you will correct the bug in the library. Look for
the initialitzation of the nokia.device object at the beginning of the library.
Replace this line: if((typeof nokia.device)!="undefined")
For
this other line: if((typeof nokia.device)=="undefined")
After either one of those options, the library should work correctly.
For the Meeting Point application, I just needed the
Searchbox template (to search for a place), the placeList template (to display
the results) and the Place template (display the chosen meeting place)
My first idea was to use the default Places API templates, but when I displayed
them on the mobile phone they didn’t look nice and lots of elements were not in
the appropriate size.
Luckily I had one coworker developing some Places API
templates for mobile phones, so I took his work for my application 
(you can
see the code below)
For the searchbox and the placelist the default mobile
template was perfect for me. Below there
are the template definitions, and the UI widgets declarations.
PLACELIST
TEMPLATE
<div module="List">
<ul each="{results[].place}"
rel="list-data" class="nokia-place-list">
<li class="nokia-place-list-elem"
rel="nokia-place-item">
<img url="{categories[0].iconURL}"
class="nokia-place-category">
<div class="nokia-place-list-elem-content">
<p fill="{name}"
rel="nokia-place-name" class="nokia-place-name"></p>
<div class="nokia-place-address">
<span fill="{street()}"></span>, <span fill="{locality()}"></span>
</div>
<div tpl="nokia.general.rating"
if={placeId} class="nokia-places-mobile-rating-widget"></div>
</div>
</li>
</ul>
<div rel="list-pagination"></div>
</div>
SEARCHBOX
TEMPLATE
<div module="SearchBox"
class="nokia-searchbox">
<div class="nokia-searchbox-input-wrapper"
>
<input class="nokia-searchbox-input"
type="text" rel="searchbox-input"/>
</div>
<input class="nokia-searchbox-button"
type="button" rel="searchbox-button"
value="Search"/>
<div rel="searchbox-list"
class="nokia-searchbox-list">
</div>
</div>
Here you can find the
css file for the templates: ovi-places-mobileHTML5.css
var placeList
= new
nokia.places.PlaceList({
targetNode: ‘placeListContainer’,
template: ‘nokia.mobileHTML5.placelist’,
perPage: 100,
locale: ‘en-gb’,
events:
[ {
rel: 'nokia-place-item',
name: 'click',
handler: function(jsonObject){
if
(jsonObject.placeId) {
place.setPlaceId(jsonObject.placeId);
}else{
place.setData(jsonObject);
}
pageController("selectPlace");
}
}]
})
var
onResults =
function(data){
placeList.setData(data);
searchType = "placelist";
showSearchPlace();
}
var
sb = new nokia.places.SearchBox({
targetNode: ‘searchContainer’,
template: ‘nokia.mobileHTML5.searchbox’,
locale: ‘en-gb’,
suggestions: {
showAddress: true
},
searchCenter: function
() {
return
position;
},
onResults: onResults
});
As you can see the mobile templates are pretty much the same
as the “normal” templates, it’s the css that has the major changes.
Note also, that to use the mobile templates, I declare the UI Widgets in the
standard way, and the only thing that I need to change is the template
parameter.
I also wanted my application to erase the text on the
SearchBox when on the search page and the back button is pressed.
To achieve this small change you need the following piece of code:
function previousPageKey()
{
if (actual == "searchPlace") document.getElementsByClassName(‘nokia-searchbox-input’)[0].value = "";
}
function init(){
window.menu.setRightSoftkeyLabel(‘Back’,
previousPageKey);
}
- To change the behavior of the Back key in
Symbian you need to use this line of code:
window.menu.setRightSoftkeyLabel(‘Back’, previousPageKey);
As you also have to define the function
that will be triggered when the Back key is pressed.
more info
- To know how to select the input field in the
searchBox. The quickest way is to use firefox + firebug and explore the html
content or use the html explorer of the simulator.
The
next step was to adapt the mobile place template, because I needed it to do
some specific things for my application. To be precise I wanted to add a button
for creating a meeting in the selected place.
You
can see the code for my mobile place template here:
<script id="mobilePlaceWidget"
type="text/template">
<div tpl="nokia.mobileHTML5.map"
class="nokia-place-right"></div>
<div tpl="nokia.mobileHTML5.name" class="nokia-place-header"></div>
<div class="nokia-place-header
nokia-places-mobileHTML5-menu">
<div class="nokia-place-menu">
<ul>
<li class="nokia-place-menu-element
nokia-place-menu-phone">
<a url="{primaryPhoneCall()}">Call</a>
</li>
<li class="nokia-place-menu-element
nokia-place-menu-share">
<a url="{primaryPhoneSMS()}">Share</a>
</li>
<li onclick="pageController(‘selectFriends’);" class="nokia-place-menu-element
nokia-place-menu-route">
<a>Meet</a>
</li>
<li class="nokia-place-menu-element
nokia-place-menu-web">
<a url="{primaryURL()}">Web</a>
</li>
</ul>
</div>
</div>
<div tpl="nokia.mobileHTML5.gallery" class="nokia-place-header"></div>
<div if="{businessInformation.openingHours}">
<p c
