ShowTable of Contents
Introduction
About MPA:
Mobile Portal Accelerator (MPA), based on device-independency, enables providers to create Web-based applications to a limitless range of mobile devices. It helps extend the capabilities of WebSphere Portal to mobile devices through device-independent Web authoring for virtually any mobile device. It uses a device independent markup language called XML-based Device Independent Markup Extensions (XDIME). Using Windows Media Services users can broadcast live or pre recorded video to mobile devices.
The recent months have seen an explosion in the market for smartphones. Smartphone sales have risen dramatically, with consumers snapping up the latest models as the smartphone vendors compete to provide the best & UI rich products with the newest technology. In this market, those consumers - your customers and employees - increasingly expect to be able to do many of the same things (including rich UI) on their mobile devices that they've traditionally done on their laptop or desktop devices.
Given this trend, technology organizations are under pressure to quickly deliver mobile web application on smartphones that are rich in UI. The introduction of the HTML5/CSS3 has provided new features (that are implemented in the browser-inbuilt) that can be leveraged in building rich mobile web applications (rendered on browsers) that are smartphone-optimized. Also since the features are based on HTML, CSS and JavaScript this helps HTML5 to be device independent.
This Article/Sample (MPA Mobile Portlet) uses HTML5 Gelocation API to get the geolocations (latitude and longitude) information of the current place and the same info is used in displaying (pin pointing) the current location (graphically) in a map form using OpenStreetMap. Note: OpenStreetMap is an open source initiative that offers similar technology as that of Google Maps
Prerequisites
This article requires the following development environment:
Mobile Portal Accelerator 7.0.1
Mobile Portal Toolkit 7.0.1
Rational Application Developer (RAD) 8.0
To test XDIME portlets, mobile simulators can be used. This article used User-Agent-Switcher to test this functionality. The sample should work in HTML5 based browsers on devices like Android, iPhone, iPod touch and iPad. Currently this has been tested on Firefox 3.6 and chrome 11.
Sample Description or Technical Overview
The sample has the following things:
Script component
This includes the OpenStreet JS file to display the MAP for the current location
JSP Code
This basically does the following things:
(a) Below code shows the usage of HTML Gelocation API's to get the current locations latitude and longitude.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(displayMap, gpsError); // calls the callback method displayMap
} else {
gpsError('not supported');
}
function displayMap(position) {
var lat = position.coords.latitude; //gets the latitude
var longi = position.coords.longitude; //gets the longitude
......
}
(b) Below code shows the usage of the OpenStreet MAP API to display the MAP for the fetched latitude and longitude in the above step.
longi = position.coords.longitude;
lat = position.coords.longitude;
map = new OpenLayers.Map("basicMap");
mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
lonLat = new OpenLayers.LonLat(longi,lat).transform(new OpenLayers.Projection("EPSG:4326"),map.getProjectionObject());
markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(lonLat)); // adds the marker at the current location
map.setCenter(lonLat, 14 // Zoom level); // Center of the map
Things to be noted
(a) In order to make this sample work on MPA 7.0. Comment out "
" in xdime/GeoLocationXDIME2SamplePortletView.jsp
(b) Before trying the sample make sure that the browser supports HTML5/Geolocation.
(c) You need to share your location (i.e For example in Mozilla Firefox, calling the getCurrentPosition() function of the geolocation API will cause the browser to pop up an “infobar” at the top of the browser window) with the server in order for GeoLocation API to work.
(c) Please ensure the script related properties are set accordingly (as per the below figure) in device repository. (for example: device repo can be found under:
\PortalServer\wp.mobile\wp.mobile.mcs\repository\xml-repository\devices.mdpr)
GPS Sample (Portlet) Screen Shots
Screen 1 (Using UserAgent)
Screen 2 (Using Simulator)
