IBM Worklight Integration with Websphere Message Broker

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 files
i) 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 file
function 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();
}

function simpleDialogDemo(ttext) {
 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