IBM Web Experience Factory wiki: Samples and Techniques for Web Experience Factory: Simple Worklight Enablement builder samples

Simple Worklight Enablement builder samples

Added by Ajay Mulay | Edited by IBM contributor

Ajay Mulay on September 12, 2013 | Version 8

The Worklight Enablement builder introduced in Multichannel Feature Pack for IBM Web Experience Factory v8.0.0.3 makes IBM Worklight APIs available to the specified page and allows the page to access native mobile features. Samples provided below show how to use Cordova Device, Notification and Media APIs in your apps.

Tags: mobile, Worklight, cordova, sample

ShowTable of Contents

HideTable of Contents

1 Prerequisites
2 Setting up samples
- 2.1 WLDeviceNotification
- 2.2 WLMusic
3 References

Prerequisites

It is assumed that you have set up your environment with Worklight + WEF prior to using these samples. If not refer Getting Started and Enabling Worklight Support external link

for more details about configuring your environment. Check the references section for more links to Worklight, WEF documentation. Worklight v6.0 and WEF 8.0.0.3 are used for writing this document.
Check out this blog entry to know more about Multichannel Feature Pack for IBM Web Experience Factory 8.0.0.3 external link

and download links.

Setting up samples

The WLEnable.zip file attached to this article includes two samples. You need to create a Hybrid app with IBM Worklight and install it on your device. Step by step guide to create hybrid worklight project referencing WEF samples is in above mentioned 'Getting Started and Enabling Worklight Support' article.

Note: Setup for Camera builder samples (as mentioned in 'Getting Started and Enabling Worklight Support' article) and Worklight Enable builder samples differs little bit, here are few updated instructions to follow. Section and step numbers mentioned below are from 'Getting Started and Enabling Worklight Support' article.

1. Section [3] Creating a WEF project --> Step d -->
No changes are needed to WEF_project \ WebContent \ WEB-INF \ config \ override.properties file as we are not uploading any image files.

2. Section [5] Creating a hybrid shell that points to your WEF server application --> Step a -->
You will only need to add following user permissions to Worklight_project \ apps \ Your_App \ android \ native \ AndroidManifest.xml.

<!--For Device API -->

	<uses-permission android:name="android.permission.READ_PHONE_STATE" />

	<!--For Notification API -->

	<uses-permission android:name="android.permission.VIBRATE" />

	<!--For Media API -->

	<uses-permission android:name="android.permission.RECORD_AUDIO" />

	<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

3. Section [5] Creating a hybrid shell that points to your WEF server application --> Step b -->
No changes are needed to Worklight_project \ apps \ Your_App \ android \ native \ src \ com \ Your_App \ Your_App.java
Instead you will be modifying Worklight_project \ apps \ Your_App \ application-descriptor.xml. Change the tag to refer to your WEF model URL.

<mainFile> http://10.0.2.2:10039/WEF_project/webengine/WLMusic </mainFile>

WLDeviceNotification

Button names are pretty self explanatory. Device info button shows device model, platform, version, cordova version. Vibrate, Beep, Alert and Confirm buttons make use of Notification API to give respective visual or tactile notifications.

WLMusic

This model uses Media API to record and play audio files. For 'Play Music' button to work you will need to specify the file path of .mp3 file on your device. Go to Client JavaScript builder in WLMusic model and update the Media object source in 'playMusic()' function to your mp3 file path.
For simplicity the playing and recording is limited to 10 sec each but you can stop it anytime in between with the stop buttons.