Change worklight server IP address for iOS and android

In this tutorial you will configure worklight server IP address in your Worklight application. You will learn how to setup custom worklight server IP address for iOS and android app.

IBM Worklight

IBM Worklight

Overview

IBM® Worklight® Foundation helps you extend your business to mobile devices. It is designed to provide an open, comprehensive platform to build, test, run and manage native, hybrid and mobile web apps. IBM Worklight Foundation can help reduce both app development and maintenance costs, improve time-to-market and enhance mobile app governance and security.

Reference: http://www-03.ibm.com/software/products/en/worklight-foundation

Getting started

Android

Open the application until the start-up connection is established (no more loading wheel). Press your menu button (usually the most left button on your android phones). Click on the “Worklight settings”. As shown in the figure below:

worklight  for android

worklight for android

A new window will be shown as figure below, tick the “Server Address” box then click on the “Server URL”.

worklight for android

worklight for android

You may change the server URL as per needed manually without having to recompile the application.

worklight for android

worklight for android

Click OK then restart the application.

iOS

Go to Setting > xxxxxx (app name).

worklight for iOS

worklight for iOS

Then change to your custom server URL.

worklight for iOS

worklight for iOS

Summary

Now that you know how you setup custom worklight server URL. You no need to build the app again in eclipse anymore.

Free consultation, advice and tutorial for mobile app development (native/hybrid)

Recently I got a lot of PMs (private message) from whatsapp, facebook, email and lowyat.net about the mobile development issues. I already try my best to give them a better solutions and a few of alternatives to fix their problems. Besides that, I also contribute in Stackoverflow community mostly in mobile app development to various mobile platform especially for iOS and android.

Cordova/Phonegap – http://stackoverflow.com/search?q=user:1922589+[cordova]

Android – http://stackoverflow.com/search?q=user:1922589+[android]

iOS – http://stackoverflow.com/search?q=user:1922589+[ios]

IBM Worklight – http://stackoverflow.com/search?q=user:1922589+[worklight]

You can follow my topic about phonegap/cordova progress in lowyat.net here, https://forum.lowyat.net/topic/3312197.

Besides that if you want to request a mobile development tutorial, you can email directly to me. nurdinnorazanservices[a]gmail.com. Make sure you clarify the whole problems and objectives for your project before submit.

mobile app development

mobile app development

IBM Worklight 6.1- Deploy Worklight war file into WebSphere 8.5.5

Previous tutorial I show you how to create a simple worklight app, http://blog.revivalx.com/2014/05/29/simple-app-crud-using-ibm-worklight-6-1/. Then we deploy our worklight app into IBM websphere. You get all the resources regarding to this tutorial here, https://github.com/datomnurdin/CRUD-worklight . Before you can deploy worklight app, you need install your worklight server using IBM Installation Manager.

Reference: http://public.dhe.ibm.com/software/mobile-solutions/worklight/docs/v610/10_01_Moving_from_development_environment_to_stand-alone_QA_and_production_servers.pdf

IBM Worklight

IBM Worklight

Go to your IBM Websphere console. Mine is https://192.168.1.180:9043/ibm/console. Enter your User ID and Password.

websphere login

websphere login

You will get welcome page like this one.

websphere welcome page

websphere welcome page

Open server tab on left side and click All Servers.

Websphere all server

Websphere all server

Websphere Middleware servers

Websphere Middleware servers

Stop all running server before deploy war file into websphere and click refresh Status to make sure all servers stop running.

Websphere Middleware servers

Websphere Middleware servers

See the result.

Websphere Middleware servers

Websphere Middleware servers

Go to Applications > Application Types > Websphere enterprise applications.

websphere

websphere

Click Install button.

Websphere Enterprise Applications

Websphere Enterprise Applications

Click Choose File button.  Use given war file for this tutorial. https://github.com/datomnurdin/CRUD-worklight/blob/master/bin/CRUD-worklight.war

Preparing for the application installation

Preparing for the application installation

Click Next button.

 Preparing for the application installation


Preparing for the application installation

Select Detailed click Next button.

Preparing for the application installation

Preparing for the application installation

Click Continue button.

Application Security Warnings

Application Security Warnings

Scroll down and click Next button.

Install New Application 1

Install New Application 1

Install New Application 2

Install New Application 2

Select your clusters and servers tick worklight module. Then click Apply button. Mine clusters and servers are server1 and IHSI. After that click Next button to proceed next page.

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Tick CRUD-worklight_war and click Reference shared libraries.

Install New Application

Install New Application

Select WL_PLATFORM_LIB and click Add button.

Enterprise Applications

Enterprise Applications

After selected and click Ok button.

Enterprise Applications

Enterprise Applications

Tick Worklight module and click Reference shared libraries button.

Install New Application

Install New Application

Select WL_PLATFORM_LIB and click Add button.

Enterprise Applications

Enterprise Applications

After selected and click Ok button.

Enterprise Applications

Enterprise Applications

Click Next button.

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Click Next button.

Click Next button.

Click Next button.

Tick on jdbc/WorklightDS Resource Reference. Click Set Multiple JNDI Names and select jdbc/WorklightDS. This process is to assign each resource reference to their own database. 

Install New Application

Install New Application

Do the same process again. This time tick on jdbc/WorklightReportDS Resource Reference. Click Set Multiple JNDI Names and select jdbc/WorklightReportDS.

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Name your Context Root to /CRUD-worklight and click Next button.

Install New Application

Install New Application

Scroll down and click Next button.

 Install New Application


Install New Application

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Click Next button.

Install New Application

Install New Application

Click Finish button.

Install New Application

Install New Application

Click Save.

Install New Application

Install New Application

You will see that your war file already deployed inside the websphere. Enterprise Applications

Enterprise Applications

Enterprise Applications

Go to server tab and select All servers.

websphere server

websphere server

Select server1 and click start button.

Middleware servers

Middleware servers

Then click refresh status to make sure your server is running. Red colour shows your server stopped and green colour shows it started.

Middleware servers

Middleware servers

Go to Applications tab > Application Types > Websphere enterprise applications.

Websphere enterprise application

Websphere enterprise application

You will see all your applications are running.

 Enterprise Applications

Enterprise Applications

Enter this URL on your browser, mine is http://192.168.1.180:9080/CRUD-worklight.

IP address: http://192.168.1.180

Port number: 9080

Context root: /CRUD-worklight

You will see this page on your browser.

IBM Worklight Console

IBM Worklight Console

Deploy your application or adapter in your IBM worklight console. Use given CRUDWorklight-all.wlapp and USERAdapter.adapter for this tutorial.

CRUDWorklight-all.wlapp: https://github.com/datomnurdin/CRUD-worklight/blob/master/bin/CRUDWorklight-all.wlapp

USERAdapter.adapter: https://github.com/datomnurdin/CRUD-worklight/blob/master/bin/USERAdapter.adapter

github

github

Now you can test your app. If you had any problem regarding to this tutorial, let me know. Enjoy!!

Simple app (CRUD) using IBM worklight 6.1

Getting started with IBM Worklight V6.1. This tutorial show you how to do simple CRUD operation using IBM Worklight. What you need for this tutorial are

Outline that cover for this tutorial:

  • Setting up your development environment
  • Preview your app
  • Learning Worklight client side API
  • Building a multi page application
  • Learning Worklight server side API

Setting up your development environment

Step 1

Visit this link to install worklight into your eclipse.

http://blog.revivalx.com/2014/05/22/ibm-worklight-installation-on-eclipse/

Open up your eclipse. Go to File > New > Other.

eclipse new project

eclipse new project

Step 2

Choose Worklight Project. Click Next.

select wizard

select wizard

Step 3

Type CRUD-worklight or your own project name in name textbox. Click Next.

new worklight project

new worklight project

Step 4

Type CRUDWorklight or your own for application name. Click Finish. A popup will show up. Tick Remember my decision and click Yes.

open associated perspective

open associated perspective

Step 5

Open application-descriptor.xml.

application descriptor

application descriptor

Step 6

Click Source tab at bottom of page.

application descriptor

application descriptor

Step 7

Change author details. (optional).

application descriptor

application descriptor

Step 8

Right click worklight project , go to New > Worklight Environment. This part is when we want to add platform into our worklight project such as iOS, android and windows mobile.

worklight environment

worklight environment

Step 9

Select your project and application/component. For this tutorial I will cover only for iOS and android. For windows mobile you need a windows machine to run the project using Visual Studio Express in Windows 8.1 operating system. Tick iphone and android phones and tablets. Click Finish.

worklight environment

worklight environment

Step 10

Your project directory will be like this.

worklight directory

worklight directory

Preview your app (android)

Step 11

import android project

import android project

Step 12

Select Existing Android Code Into Workspace. Click Next.

import android project

import android project

Step 13

Click Browse to select android project.

import android project

import android project

Step 14

Browse your project and click Open.

import android project

import android project

Step 15

Click Finish.

import android project

import android project

Step 16

Follow this tutorial how to run android app in android simulator.

http://blog.revivalx.com/2014/02/21/crud-operation-using-jquery-mobile-on-android-part-1/

Preview your app (iOS)

Step 17

Right click on iphone folder and go to Run AsXcode Project.

Run As Xcode Project

Run As Xcode Project

 

Step 18

Click Play on top left side to preview the app on your iphone.

xcode5

xcode5

Learning Worklight client side API and Building a multi page application

Step 19

Right click js folder inside common folder in your worklight project. Go to New > Javascript Source File.

Javascript Source File

Javascript Source File

Step 20

Create 3 javascript files.

  • AddPage.js – to add user details.
  • ListPage.js – to retrieve user list.
  • DetailPage.js – to retrieve user details.

Click Finish.

new javascript file

new javascript file

Step 21

You latest project directory will be like this.

Step 22

Right click common folder and go to New > Folder to create a new folder.

add folder

add folder

Step 23

Then create a few of html pages inside page folder that we already created just now. Right click pages folder and go to New > HTML File.

HTML Files

HTML Files

Step 24

Create 3 html files.

  • AddPage.html – to add user details.
  • ListPage.html – to retrieve user list.
  • DetailPage.html – to retrieve user details.
new html file

new html file

Step 25

You latest project directory will be like this for html files.

new html files

new html files

Step 26

Open your main.css file and replace with this code.

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, p, pre, q, samp, section, small, span, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, ul, var, video {
margin: 0;
padding: 0;
}

/* Worklight container div */
body {
min-height: 460px;
margin: 0 auto;
/*width: 320px;*/
}

h1 {
font-size: 18px;
}

#AppBody {
min-height: 460px;
margin: 0 auto;
/*width: 320px;*/
background-color: #ccc;
overflow: hidden;
overflow-y: auto;
}

#header {
text-align: center;
background-color: #1D4D90;
color: #F9FAFB;
font-size: 16px;
height: 38px;
line-height: 38px;
border-bottom: 1px solid #BBBBBB;
}

#wrapper {
padding: 10px;
}

p{
padding: 10px;
}

#itemsList{
margin-top: 38px;
}

#itemsList li {
border-bottom: 1px solid #bbb;
min-height: 40px;
padding: 0 25px 0 15px;
cursor: pointer;
}

#itemsList li .pubDate {
color: #555;
font-size: 10px;
font-family: Arial;
}

#itemsList li:hover {
background-color: #EFEFEF;
}
replace main.css

replace main.css

Step 27

Open your index.html and replace with this code.

<!DOCTYPE HTML>
<html>
    	<head>
    		<meta charset="UTF-8">
    		<title>index</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    		<link rel="shortcut icon" href="images/favicon.png">
    		<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
    		<link rel="stylesheet" href="css/main.css">
    		<script>window.$ = window.jQuery = WLJQ;</script>
    	</head>
    	<body style="display: none;">
    		<div id="AppBody">
				<!-- This is static header, it will be shown always -->
				<div id="header">
					<h1>CRUD Worklight</h1>
				</div>		

				<!-- This is a placeholder for dynamic page content -->
				<div id="pagePort"></div>
			</div>
    		<script src="js/initOptions.js"></script>
    		<script src="js/main.js"></script>
    		<script src="js/messages.js"></script>
    	</body>
</html>
replace index.html

replace index.html

Step 28

Replace all codes with given codes for each javascript files.

AddPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("AddPage :: init");
};

currentPage.back = function(){
	WL.Logger.debug("AddPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

DetailPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("DetailPage :: init");
	detailUser();
};

currentPage.back = function(){
	WL.Logger.debug("DetailPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

ListPage.js

currentPage = {};
var busyIndicator = null;

currentPage.init = function(){
	WL.Logger.debug("ListPage :: init");
	busyIndicator = new WL.BusyIndicator('AppBody');
	listUsers();
};

currentPage.loadPage = function(pageIndex){
	WL.Logger.debug("ListPage :: loadPage :: pageIndex: " + pageIndex);
	$("#pagePort").load(path + "pages/" + pageIndex + ".html");
	$.getScript(path + "js/" + pageIndex +".js", function() {
		if (currentPage.init) {
			currentPage.init();
		}
	});
};

main.js

var pagesHistory = [];
var currentPage = {};
var path = "";

function wlCommonInit(){
	// Special case for Windows Phone 8 only.
	if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
	    path = "www/default/";
	}

	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});

}
replace javascript files

replace javascript files

Step 29

Replace all codes with given codes for each html files.

AddPage.html

<script>
 	$.getScript(path + "js/AddPage.js");
</script>
<p>
	Currently <b>AddPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

DetailPage.html

<script>
 	$.getScript(path + "js/DetailPage.js");
</script>
<p>
	Currently <b>DetailPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

ListPage.html

<script>
	$.getScript(path + "js/ListPage.js");
</script>
<p>
	Currently <b>ListPage.html</b> page is loaded.
</p>
<input type="button" value="Load Add.html" id="LoadAddButton" onclick="currentPage.loadPage('AddPage');" />
<input type="button" value="Load Detail.html" id="LoadAddButton" onclick="currentPage.loadPage('DetailPage');" />
replace html files

replace html files

Step 30

Right click on CRUDWorklight folder > Run As > Build All Environments.

Build All Environments

Build All Environments

Step 31

Repeat step 16 (android) and step 17-19 (iOS) to preview your app.

Step 32

Now we create a worklight adapter for this project. Right click worklight project and go to New > Worklight Adapter.

worklight adapter

worklight adapter

Step 33

Select project and adapter type. Enter your adapter name. USERAdapter. Click Finish.

worklight adapter

worklight adapter

Step 34

You latest project directory will be like this for worklight adapter.

worklight adapter

worklight adapter

Step 35

Open USERAdapter.xml and click source tab at bottom of the page.

worklight adapter

worklight adapter

Step 36

We will using there URLs for our HTTP request/response. Refer to this tutorial for more understanding.

Replace code inside USERAdapter.xml and USERAdapter-impl.js .

USERAdapter.xml

<?xml version="1.0" encoding="UTF-8"?>
<!--
    Licensed Materials - Property of IBM
    5725-I43 (C) Copyright IBM Corp. 2011, 2013. All Rights Reserved.
    US Government Users Restricted Rights - Use, duplication or
    disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
-->
<wl:adapter name="USERAdapter"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:wl="http://www.worklight.com/integration"
	xmlns:http="http://www.worklight.com/integration/http">

	<displayName>USERAdapter</displayName>
	<description>USERAdapter</description>
	<connectivity>
		<connectionPolicy xsi:type="http:HTTPConnectionPolicyType">
			<protocol>http</protocol>
			<domain>demo.revivalx.com</domain>
			<port>80</port>
			<!-- Following properties used by adapter's key manager for choosing specific certificate from key store
			<sslCertificateAlias></sslCertificateAlias>
			<sslCertificatePassword></sslCertificatePassword>
			-->
		</connectionPolicy>
		<loadConstraints maxConcurrentConnectionsPerNode="2" />
	</connectivity>

	<procedure name="listUsers"/>
	<procedure name="addUser"/>
	<procedure name="detailUser"/>
	<procedure name="editUser"/>
	<procedure name="deleteUser"/>

</wl:adapter>

USERAdapter-impl.js

function listUsers() {

	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/get_all_users.php"
		};

	return WL.Server.invokeHttp(input);
}

function addUser(name,officeNumber,phoneNumber,email) {

	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/create_user.php",
		    parameters : {
		    	name:name,
		    	officeNumber:officeNumber,
		    	phoneNumber:phoneNumber,
		    	email:email
		    }
		};

	return WL.Server.invokeHttp(input);
}

function detailUser(userId) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/get_user_details.php",
		    parameters : {
		    	userId:userIdS
		    }
		};

	return WL.Server.invokeHttp(input);
}

function editUser(userId,name,officeNumber,phoneNumber,email) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/update_user.php",
		    parameters : {
		    	userId:userIdS,
		    	name:name,
		    	officeNumber:officeNumber,
		    	phoneNumber:phoneNumber,
		    	email:email
		    }
		};

	return WL.Server.invokeHttp(input);
}

function deleteUser(userId) {
	var userIdS = userId.toString();
	var input = {
		    method : 'get',
		    returnedContentType : 'json',
		    path : "worklight/delete_user.php",
		    parameters : {
		    	userId:userIdS
		    }
		};

	return WL.Server.invokeHttp(input);
}

Step 37

Now we deploy worklight adapter and invoke it.

Deploy Worklight Adapter

Deploy Worklight Adapter

Step 38

Right click on USERAdapter and go to Run As > Invoke Worklight Procedure.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 39

Select getUsers procedure and Click Run.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 40

Below is result from http header after we invoke worklight adapter.

Invoke Worklight Procedure

Invoke Worklight Procedure

Step 41

Now we want to integrate worklight adapter with app. You need to replace all html files and js files so we can invoke worklight adapter from there.

AddPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("AddPage :: init");
};

currentPage.back = function(){
	WL.Logger.debug("AddPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

currentPage.add = function(){
	WL.Logger.debug("AddPage :: add");
	busyIndicator = new WL.BusyIndicator('AppBody');
	var name = $("#name").val();
	var officeNumber = $("#officeNumber").val();
	var phoneNumber = $("#phoneNumber").val();
	var email = $("#email").val();
	if(name == ""){
		WL.SimpleDialog.show("Alert","Please enter name",[{text:'OK'}]);
	} else if(officeNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter office number",[{text:'OK'}]);
	} else if(phoneNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter phone number",[{text:'OK'}]);
	} else if(email == ""){
		WL.SimpleDialog.show("Alert","Please enter email",[{text:'OK'}]);
	} else{
		createUser(name,officeNumber,phoneNumber,email);
	}
};

function createUser(name,officeNumber,phoneNumber,email){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'addUser',
			parameters : [name,officeNumber,phoneNumber,email]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : addUserSuccess,
		onFailure : addUserFailure
	});
}

function addUserSuccess(result){
	WL.Logger.debug("Add user success");
	WL.SimpleDialog.show("Success","Add user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function addUserFailure(result){
	WL.Logger.error("Add user failure");
	busyIndicator.hide();
}

DetailPage.js

currentPage={};

currentPage.init = function() {
	WL.Logger.debug("DetailPage :: init");
	detailUser();
};

currentPage.back = function(){
	WL.Logger.debug("DetailPage :: back");
	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});
};

currentPage.edit = function() {
	WL.Logger.debug("DetailPage :: edit");
	busyIndicator = new WL.BusyIndicator('AppBody');

	var userId = sessionStorage.userId;
	var name = $("#name").val();
	var officeNumber = $("#officeNumber").val();
	var phoneNumber = $("#phoneNumber").val();
	var email = $("#email").val();
	if(name == ""){
		WL.SimpleDialog.show("Alert","Please enter name",[{text:'OK'}]);
	} else if(officeNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter office number",[{text:'OK'}]);
	} else if(phoneNumber == ""){
		WL.SimpleDialog.show("Alert","Please enter phone number",[{text:'OK'}]);
	} else if(email == ""){
		WL.SimpleDialog.show("Alert","Please enter email",[{text:'OK'}]);
	} else{
		editUser(userId,name,officeNumber,phoneNumber,email);
	}

};

currentPage.remove = function() {
	WL.Logger.debug("DetailPage :: delete");
	busyIndicator = new WL.BusyIndicator('AppBody');
	deleteUser();
};

function detailUser(){
	var userId = sessionStorage.userId;
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'detailUser',
			parameters : [userId]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : detailUserSuccess,
		onFailure : detailUserFailure
	});
}

function detailUserSuccess(result){
	WL.Logger.debug("Detail retrieve success");
	busyIndicator.hide();
	if (result.invocationResult.user.length>0) {
		displayUsers(result.invocationResult.user);
	} 

	else
		detailUserFailure();
}

function detailUserFailure(result){
	WL.Logger.error("Detail retrieve failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot retrieve detail. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function displayUsers(user){
	$('#name').val(user[0].name);
	$('#officeNumber').val(user[0].officeNumber);
	$('#phoneNumber').val(user[0].phoneNumber);
	$('#email').val(user[0].email);
}

function editUser(userId,name,officeNumber,phoneNumber,email){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'editUser',
			parameters : [userId,name,officeNumber,phoneNumber,email]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : editUserSuccess,
		onFailure : editUserFailure
	});
}

function editUserSuccess(result){
	WL.Logger.debug("Edit success");
	busyIndicator.hide();
	WL.SimpleDialog.show("Success","Edit user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function editUserFailure(result){
	WL.Logger.error("Edit failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot edit. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function deleteUser(){
	var userId = sessionStorage.userId;
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'deleteUser',
			parameters : [userId]
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : deleteUserSuccess,
		onFailure : deleteUserFailure
	});
}

function deleteUserSuccess(result){
	WL.Logger.debug("Detail retrieve success");
	busyIndicator.hide();
	WL.SimpleDialog.show("Success","Delete user success",[{text:'OK'}]);
	busyIndicator.hide();
	currentPage.back();
}

function deleteUserFailure(result){
	WL.Logger.error("Delete failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot delete. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

ListPage.js

currentPage = {};
var busyIndicator = null;

currentPage.init = function(){
	WL.Logger.debug("ListPage :: init");
	busyIndicator = new WL.BusyIndicator('AppBody');
	listUsers();
};

currentPage.loadPage = function(pageIndex){
	WL.Logger.debug("ListPage :: loadPage :: pageIndex: " + pageIndex);
	$("#pagePort").load(path + "pages/" + pageIndex + ".html");
	$.getScript(path + "js/" + pageIndex +".js", function() {
		if (currentPage.init) {
			currentPage.init();
		}
	});
};

currentPage.detailPage = function(userId){
	sessionStorage.setItem("userId", userId);
	$("#pagePort").load(path + "pages/DetailPage.html");
	$.getScript(path + "js/DetailPage.js", function() {
		if (currentPage.init) {
			currentPage.init();
		}
	});
};

function listUsers(){
	busyIndicator.show();
	var invocationData = {
			adapter : 'USERAdapter',
			procedure : 'listUsers',
			parameters : []
		};

	WL.Client.invokeProcedure(invocationData,{
		onSuccess : listUsersSuccess,
		onFailure : listUsersFailure
	});
}

function listUsersSuccess(result){
	WL.Logger.debug("List retrieve success");
	busyIndicator.hide();
	if (result.invocationResult.users.length>0) {
		displayUsers(result.invocationResult.users);
	} 

	else
		listUsersFailure();
}

function listUsersFailure(result){
	WL.Logger.error("List retrieve failure");
	busyIndicator.hide();
	WL.SimpleDialog.show("CRUD Worklight", "Cannot retrieve list. Please check your internet connectivity.",
	[{
		text : 'Reload App',
		handler : WL.Client.reloadApp
	}]);
}

function displayUsers(users){
	var ul = $('#itemsList');
	var html ='';
	$.each(users, function(index, item) {
		html += '<li><a onclick="currentPage.detailPage('+item.userId+');" >';
		html += '<h4>' + item.name + '</h4>';
		html += '<p>' + item.email + '</p>';
		html += '</a></li>';

	});

	ul.append(html);
}

Main.js

var pagesHistory = [];
var currentPage = {};
var path = "";

function wlCommonInit(){
	// Special case for Windows Phone 8 only.
	if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
	    path = "www/default/";
	}

	$("#pagePort").load(path + "pages/ListPage.html", function(){
		$.getScript(path + "js/ListPage.js", function() {
			if (currentPage.init) {
				currentPage.init();
			}
		});
	});

}

AddPage.html

<script>
 	$.getScript(path + "js/AddPage.js");
</script>
<p>
	Currently <b>AddPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

<div id="addUser">
	Name:<br>
	<input name="name" type="text" id="name"/><br>
	Office Number:<br>
	<input name="officeNumber" type="text" id="officeNumber"/><br>
	Phone Number:<br>
	<input name="phoneNumber" type="text" id="phoneNumber"/><br>
	Email:<br>
	<input name="email" type="text" id="email"/><br>
</div>

<div id="addButton">
	<input type="button" value="ADD USER" onclick="currentPage.add();">
</div>

DetailPage.html

<script>
 	$.getScript(path + "js/DetailPage.js");
</script>
<p>
	Currently <b>DetailPage.html</b> page is loaded.
</p>

<input type="button" value="BACK" onclick="currentPage.back();" />

<div id="addUser">
	Name:<br>
	<input name="name" type="text" id="name"/><br>
	Office Number:<br>
	<input name="officeNumber" type="text" id="officeNumber"/><br>
	Phone Number:<br>
	<input name="phoneNumber" type="text" id="phoneNumber"/><br>
	Email:<br>
	<input name="email" type="text" id="email"/><br>
</div>

<div id="editButton">
	<input type="button" value="EDIT USER" onclick="currentPage.edit();">
</div>

<div id="deleteButton">
	<input type="button" value="DELETE USER" onclick="currentPage.remove();">
</div>

ListPage.html

<script>
	$.getScript(path + "js/ListPage.js");
</script>
<p>
	Currently <b>ListPage.html</b> page is loaded.
</p>
<input type="button" value="Load Add.html" id="LoadAddButton" onclick="currentPage.loadPage('AddPage');" />
<ul id="itemsList"></ul>

Step 42

Repeat step 31 to preview your app.

You can find the source code here: https://github.com/datomnurdin/CRUD-worklight

IBM Worklight installation on eclipse

Here I show you how to setup IBM Worklight into your eclipse. IBM worklight latest version is 6.1. Licensing is free for IBM Worklight Developer Edition. But you need to purchase it if you want move to production or distribute to the public or inside your organization. The pricing is quite expensive, it’s around $140000 for annually licensing.

IBM Worklight

IBM Worklight

Before you start this setup, you must have eclipse Juno SR2 or Luna. Eclipse Keplar not compatible with worklight. Eclipse Helios is only for PHP development, not suitable for worklight.  Same go to ADT bundle tool (Android Development Tool). Open your eclipse.

http://www.eclipse.org/downloads/packages/release/juno/sr2

Click Help and select Eclipse Marketplace.

Eclipse Marketplace

Eclipse Marketplace

Search for worklight and click Install for IBM Worklight Developer Edition.

eclipse marketplace

eclipse marketplace

Select all and click Next.

eclipse marketplace

eclipse marketplace

Select I accept the terms of the license agreement. Click Finish.

eclipse marketplace

eclipse marketplace

Wait until it finish installing.

installing software

installing software

Click Yes to restart.

restart eclipse

restart eclipse

Your worklight is ready use. Don’t hesitate to contact me if you have difficulties installing this software in your eclipse.