Overview - Building the Find Parks and Landmarks applications
We describe two use case applications in this article:
Both applications showcase the interaction with the database using IBM Web Experience Factory and use of HTML5 features such as Geolocation. Each application can render differently on desktop and mobile devices thus making the best use of the screen real estate space. This is achieved by using the dynamic profiling feature
of IBM Web Experience Factory. Dynamic profiling is also used to control the role specific access to certain features of the application.
For the Park application, users can locate the parks nearby using the Find Parks feature. When running on a desktop browser, users can search for parks based on the recreation facility, for example, soccer and running facilities. Also for the browsers with HTML5 support, users can find the parks closest to the current geographic location. When running the same application on mobile devices, users can search for closest parks based on the mobile device' current geolocation.
With the Landmarks application, users can view the landmarks created by other users. In addition, users can create new landmarks which can serve as reference for other users as well as user can use them in check in application. When running the application on the desktop browser, user can define the landmarks by adding the latitude and longitude of the respective location. When using the application on a mobile device, the latitude and longitude information can be pre-populated with the current geolocation of the mobile device.
The following screens show how the Find Park application looks like when clicking the application from the government demo website.
The following screens show how the Landmarks application looks like.
This article covers the usage of the HTML5 Geolocation feature in an application using IBM Web Experience Factory builders. It also shows how to develop role-based access to features of the application as well as how a single application can behave and render differently across multiple platforms including mobile devices.
This section covers the Service Provider Layer and Service Consumer Layer of the applications. In addition, it also covers the key builders used in the applications: Data Services User Interface, File Upload builder, GeoLocation Builder, Theme Builder, and Page Navigation Builder.
The Find Park and Landmark applications are are IBM Web Experience Factory based portlets integrating with the database for create, update, retrieve, delete and search operations. Portlets follow the service provider and consumer architecture wherein the Service Provider Layer serves as data access layer and the Service Consumer Layer serves as the user interface layer which interacts with the provider layer for data access.
Service Provider Layer
FindParksProvider.model defines all the data access related operations and interacts with cloudscape database, for all the create, update, and delete operations related to FindParks portlet.
Provider model can also reference a stub which provides dummy data implementation of the service. The FindParks provider model (FindParksProvider.model) references this stub in its Service Definition builder, but it does not use it in the real time for the Find parks portlet.
Service Consumer Layer
Consumer layer interacts with the service provider layer using the Service Consumer builder
as shown below.
For rendering the initial user interface Data Services User Interface builder is used, which generates the UI for the service operations from the provider, along with the navigational controls and flow between the generated create, read, update and delete UIs and the service operations.
Here notice the section highlighted in RED is profiled using the GovtDemops profile set to control role based access to these operations as show below.
In the above screen, only Mayor can delete the parks while others cannot. Though everybody can create the park locations.
profile set uses the the WPS group segment handler
wherein the portal user groups are mapped to the respective profiles. When a user in these groups login and access the application, the application is regenerated with the appropriate profile and that’s how when mayor logs in he sees the delete park feature while other users do not see the delete functionality. For security reasons, it's best to profile off both the generation of sensitive operations and the user interface to those operations, for non-privileged users, and not just disable the user interface to those operations, so that non-privileged users cannot try to construct a request to hidden operations.
Using the same Data services User interface builder, we can control the settings of various pages it generates as shown below.
Here the dynamic profiling is used using the ParkLocatorDeviceTypeps profile set to show the paged data display only for desktop while show all entries on mobile devices.
To organize the display in above screen, for example, the icon, link, and in-line address in the list of parks view, Data Layout builder
is used as shown below.
In addition, the fields are organized as below in the same builder.
Similarly, another Data layout builder is used for the layout of the park details view.
In the Landmarks portlet, different data layouts for desktop and mobile devices are defined differently, hence profiling is used to apply device specific data layout builder.
File Upload builder
While creating a new park, a user can upload the picture which is processed on the server using the File Upload builder.
This feature is only available on desktop browsers so profiling is used to hide this for mobile devices.
The Geolocation builder is used to provide access to the device GPS location.
This geolocation support does not have any Worklight or hybrid mobile dependency. It is implemented using the geolocation support of HTML5. The Client Event Handler builder is used to listen for the GeoLocationClient event. When the event is received, the latitude and longitude are read and saved in hidden form field and then the respective form fields are populated.
Separate themes are developed for mobile devices and desktops to handle the device specific variance in terms of display. The screen below defines the theme for desktop which is disabled for mobile device using profiling. Themes specify the base HTML template pages and styles used by the page automation framework, to automate the generation of the user interface.
Here is the theme which is enabled only for mobile device:
Page Navigation builder
The Page Navigation builder is used in Find Parks portlet and is only active for mobile devices. When running Find Parks on mobile device, user can search by recreation facility as well as by parks nearest to the mobile Geo location, so to support these two navigation options this builder is being used.
We also specify the target page, when each of these navigation menus is selected in the same builder.
This is what we see on mobile device as a result:
In this article, we covered how to use IBM Web Experience Factory for building applications that interact with the databases and how to leverage dynamic profiling for developing the multi-channel applications. We also covered how to make use of the GeoLocation feature in your application using IBM Web Experience Factory builders. Similar approach as described in this article can be applied to related use cases for example, locating a doctor, hospital, or ATM.