In this tutorial we will learn about How integrate IBM Worklight 5.0.6 to IBM Websphere Message Broker.
Worklight + Message Broker
WebSphere Message Broker
Request Processing
- Initiated by sending a request to Message Broker from Worklight.
- Message Broker receives request in XML format
- Message Broker checks that whether Bill Due date has been passed or not.
- If bill due date is greater or equal than today’s date, then It will send verification message to the Worklight otherwise a message will be sent to the Worklight indicating that bill could not be processed.
- Broker will create a JSON response for these messages and then will be sent back to Worklight for further processing.
Request
<PaymentDetails>
<BillNumber>034532367</BillNumber>
<CustomerName>Sajjad Haider </CustomerName>
<BillDueDate>2013-06-03</BillDueDate>
<BillAmount>250 </BillAmount>
</PaymentDetails>
Successful Response
{"Message":
{"Status":"Your Payment is validated successfully and \n transaction is processed with bill amount : 250 “
}
}
Failure response
{"Message":
{"Status":"Your Payment validation failed, \n the due date is expired.250 “
}
}
1)Creating Worklight Project
2)Creating http Adapter
Create HTTP Adapter named HTTPAdapterForBillPayment after creation edit the following filesi) HTTPAdapterForBillPayment.xml add following entries
<protocol>http</protocol>
<domain>192.168.48.70</domain>
<port>7080</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="getPaymentDetailsAdapter"/>
ii) HTTPAdapterForBillPayment-impl.js
Add below function in this filefunction getPaymentDetailsAdapter(name, billNumber, billDueDate, billAmount) {
//var name="sajjad";
//var billNumber="12345";
//var billDueDate='2013-06-03';
//var billAmount=250;
var inputMessage = '<PaymentDetails>' + ' <Name>' + name + '</Name>'
+ ' <BillNumber>' + billNumber + '</BillNumber>' + ' <BillDueDate>'
+ billDueDate + '</BillDueDate>' + ' <BillAmount>' + billAmount
+ '</BillAmount>' + '</PaymentDetails>';
/*
* Construct Input object with post method which is to sent
*/
var input = {
method : 'post',
returnedContentType : 'json',
path : 'workApp',
body : {
content : inputMessage.toString(),
contentType : 'workApp/xml'
}
};
WL.Logger.debug("@@@" + input);
/*
* Send input to HTTP Server hosted by Message Broker and wait for response.
*/
response = WL.Server.invokeHttp(input);
return response;
WL.Logger.debug("@@@" + response);
var type = input;
if ("object" == type) {
if (true == response)
{
// Drill down into the response object.
var results = response;
var result = results[0];
WL.Logger.debug("@@@ result " + result);
return result; // sent the result received from Broker to mobile
// app client
}
}
}
3)Consuming Json data returned by Http Adapter
Adding functionality in to app so that we can consume the json data returned by http Adapter i)Editing common/.html
<section id="container">
<h2> Financial Bill Payment</h2>
<form name="BillPaymentApp" id="web-form">
<div id="wrapping" class="clearfix">
<section id="aligned">
<input type="text" name="txtName" id="name" placeholder="Your name" autocomplete="off" tabindex="1" class="txtinput">
<input type="text" name="txtBillNumber" id="bill-number" placeholder="Bill Number" autocomplete="off" tabindex="2" class="txtinput">
<input type="text" name="txtBillDueDate" id="bill-duedate" placeholder="Bill Due Date(yyyy-mm-dd)" autocomplete="off" tabindex="3" class="txtinput">
<input type="text" name="txtAmount" id="amount" placeholder="Amount" tabindex="4" class="txtinput">
</div>
<section id="buttons">
<input type="cancel" name="cancel" id="cancelbtn" class="cancelbtn" value="Cancel" onClick="">
<input type="button"name="submit" id="submitbtn" class="submitbtn" value="Submit" onClick="getPaymentDetails()"> <br style="clear: both;">
</section>
</form>
</section>
</section>
ii)Editing common/js/WLMessageBrokerApp.js
var busyIndicator = null;
function wlCommonInit() {
busyIndicator = new WL.BusyIndicator('container');
}
function getPaymentDetails() {
var name, billNumber, billDueDate, billAmount;name= $('#name').val();
billNumber = $('#bill-number').val();
billDueDate =$('#bill-duedate').val();
billAmount = $('#amount').val();
//name= 'sajjad';
//billNumber ='12345';
//billDueDate ='2013-06-16';
//billAmount ='250';
var invocationData = {
adapter : "HTTPAdapterForBillPayment",
procedure : "getPaymentDetailsAdapter",
parameters : [ name, billNumber, billDueDate, billAmount ]
};
WL.Client.invokeProcedure(invocationData, {
onSuccess : getStatusDetailsSuccess,
timeout : 500000,
onFailure : function() {
//alert('Payment Request Failed for bill number ' + billNumber
// + ' Name : ' + name);
simpleDialogDemo('Payment Request Failed for bill number ' + billNumber
+ ' Name : ' + name);
}
});
}
function getStatusDetailsSuccess(result) {
console.log("Entering getPaymentDetailsSuccess");try {
if (result.status == 200) {
var response1 = result.invocationResult;
//alert("Status : " + response1.Message.Status);
simpleDialogDemo("Status :" + response1.Message.Status);
/*var msg = res.get("Message");
var billNumber = msg.get("billNumber");
$('#billNumber').value = response1.Data.Message.billNumber;*/
}
} catch (e) {
busyIndicator.hide();
}
busyIndicator.hide();
}
var dialogTitle = "Detail";
var dialogText = ttext ;
WL.SimpleDialog.show(dialogTitle, dialogText, [ {
text : 'Ok',
handler : simpleDialogButton1Click
}
]);
}
function simpleDialogButton1Click() {
}
4)Deploying Adapter & App folder to Server
Deployee Adapter
Deployee App
5)Its time to run app on simulator
Thank You
