DEVELOPING COACH & COACH VIEWES IN IBM BPM V8.0

Introduction:

Coaches are the user interfaces for human services. There are two types of user interfaces for human services: dashboards and task completion. When a Coach is a dashboard user interface, users can run it as a stand-alone user interface at any time. The users access it through the Process Portal. When a Coach is a task completion user interface, it is part of the human service flow. At run time, when the flow enters the Coach, the user sees the user interface that is defined for that Coach. The user interface consists of HTML code is displayed in a web browser. The flow leaves the Coach when a boundary event occurs. A Coach can have multiple exit flows with each one associated with a different boundary event.

Coaches contain one or more Coach Views. The Coach Views provide the user interface elements and layout for the Coach. Each Coach View can contain one or more other Coach Views, which creates a parent-child relationship between these Coach Views. At run time, the parent Coach View is rendered as a <div></div> tag that contains a nested <div></div> tag for each child Coach View. Each Coach View can also have a binding to a business object, CSS code to control its visual layout, and JavaScript to define its behavior.

Coach Views are reusable so you can create a library of common user interfaces and behavior. You can combine these common user interfaces to rapidly develop new Coaches.

Overview:

We can create a Coach View in the process application or in a toolkit. In general, create highly reusable Coach Views in toolkits and more specialized Coach Views in process applications.

We cannot directly edit the definition of the Coach View from within the parent Coach or Coach View. Instead, you must open the Coach View definition first before you can change it. When you open a Coach View definition to edit it, you can see the following pages:

• The Overview page displays the Coach View name, information about the Coach View, the images used to represent the Coach View during design time, and how the Coach View is used. You can also tag your Coach View to make it easier to find in the library and on the palette.
•  The Behavior page displays the scripts and CSS files used by the Coach View. The Behavior page is also, where you define event handler code. The Event handlers are the entry points for the code of the Coach View. While the Coach View might reference supporting JavaScript files, the event handlers contain the functions that the IBM® Business Process Manager framework calls.
• The Variables page displays the business data binding, configuration options (which includes Ajax services), and localization resources available to the Coach View or used by the Coach View.
• The Layout page displays the Coach Views and controls contained within the Coach View and their relative positions. The layout page also displays the palette, which contains items that you can add to the Coach View. These items consist of Coach Views, which are categorized using tags, advanced items, and variables.

Implementation:

The following steps required for implement the coach and coach views.

1.            Create HomePage Coach View template. 
2.                       Create LoginPage Coach View template.
3.            Create MainHS Human Service.
4.            Create Home Coach.
5.            Test the application.

Create HomePage Coach View Template:

Open IBM Process Designer; Click on Create New Process App. Give the name as COACH VIEW SAMPLE, Acronym as CVS then click on finish.

Click on Open in Designer.

Step1:Upload the image for HomePage pallet.

       Click the Add icon for Files and then select Web File.

       Browse the HomePage.jpg image file as a web file then click on Finish

Step2:Create the HomePage Coach View:

      Click the Add icon for User Interface and then select Coach View.

      Give the new coach view name as ‘HomePage’ then click on finish.

Step3:Define the layout of the HomePage Coach View:

      In the Layout page of the Coach View, drop a custom HTML item onto the layout canvas.

      In the properties of the custom HTML item, add the following HTML code as text that goes in the header:

    <div id="header">

            <h1 id="header_text">Enterprise Application Integration by AMIR</h1>

    </div>

This code defines the text that goes in the header division and opens the main content division.

Drop a content box below the custom HTML item for the content area. The content box is a placeholder for content that is defined by Coach Views and Coaches that users create based on the HomePage Coach View. In this case, content placed in the content box fits between the header and footer in the HomePage Coach View.

In the Layout page of the Coach View, drop a custom HTML item onto the layout canvas below the content box.

In the properties of the second custom HTML item, add the following HTML code as text that goes in the footer.

    <div id="footer">

            <h2 id="footer_text"> Copyright © All Rights Reserved. - EAI by AMIR </h2>

    </div>

This code closes the content division and defines the text that goes in the footer division.

Step4:The layout of the HomePage View looks like the following screen capture:

Step5:In the Behavior page, define the look of the HomePage View by adding the following code as inline CSS:

#header {

            text-align: center;

            padding: 10px 0 10px 0;

            height: 60px;

            background-color : #0000FF;

            background-repeat: no-repeat;

            background-size: 100% 100%;

}

#header_text {

             color:white;

             border:none;

             font-size:40px;

}

#footer {

            padding: 5px 25px 5px 5px;

            text-align: center;

            background-color : #0000FF;

            background-repeat: no-repeat;

            background-size: 100% 100%;

}

#footer_text {

            color:white;

            border:none;

            font-size:12px;

}

Step6:Go to the Overview page select Use as a Template.

Step7:To represent the HomePage Coach View on the palette and in the New Coach View wizard, add a palette icon. Select the Image for Palette in Overview section.

Step8:Save the HomePage Coach View.

Create LoginPage Coach View Template:

•      Click the Add icon for User Interface and then select Coach View. Give the new coach view name as  ‘LoginPage’ then click on finish.
•        Define the layout of the LoginPage Coach View:
•        In the Layout page of the Coach View, drop a Vertical Section item onto the layout canvas rename as Login.
•      Drag and drop a custom HTML and Content Box items inside Vertical section, in the properties of the custom HTML item, add the following HTML code as text that shows for username and password text boxes.

<p><input type=”email” name=”email” placeholder=”Email Address”></p>

<p><input type=”password” name=”password” placeholder=”Password”></p>

•           Select the login vertical section Item go to Properties à Configuration and select the Show Boarder check box.

Create MainHS Human Service:

Click on + symbol near User Interface, select Human Service give name as MainHS then click on finish.

Create Home Coach

In MainHS click on diagram, drag and drop a coach item and rename it as Home.

In MainHS select Coaches click on Home Coach, it will open a new window to select a template. Select the HomePage as template and click on OK.

Now the home coach will be look like below.

Drag and drop LoginPage template and Button items inside Content box of the coach. Rename the button as Submit.

Now select the diagram in MainHS wire from start to Home coach and Home coach to End. Submit button will automatically populate between home coach and End.

Test the application:

Now our application builded successfully, we need to test the application.

Click on Run button at right corner of MainHS human service.

The result will be displaying on default web browser of our system as shown below.

This page developed using coach Home and Coach view HomePage, LoginPage.

Conclusion:

In this article, we learnt how to implement Coach, coach views and Human service. Here are we developed coach views using predefined activities and custom html code. The integration of Human service, coach and coach view are essential for implement BPM application.

Download:

File Name	Description	Size	Download
COACH_VIEW_SAMPLE_v1.0.twx	Sample Coach implementation	834 KB	Download
Coach & Coach Views.pdf	Developing Coach & Coach View in BPM	740 KB	Download

continue reading

WORKING WITH MQ BINDING IN WPS

Introduction:

The WebSphere® MQ binding provides Service Component Architecture (SCA) connectivity with WebSphere MQ applications. Use the WebSphere MQ export and import bindings to integrate directly with a WebSphere MQ-based system from your server environment. This eliminates the need to use MQ Link or Client Link features of the Service Integration Bus. When a component interacts with a WebSphere MQ service by way of an import, the WebSphere MQ import binding uses a queue to which data will be sent and a queue where the reply can be received.

When an SCA module provides a service to WebSphere MQ clients, the WebSphere MQ export binding uses a queue where the request can be received and the response can be sent. The function selector provides a mapping to the operation on the target component to be invoked.

Conversion of the payload data to and from an MQ message is done through the MQ body data handler or data binding. Conversion of the header data to and from an MQ message is done through the MQ header data binding.

Overview:

 In this article we are going to implement the scenario where we are getting order details from one MQ queue called ExportQ, We are generating Oder ID in the business process and updating the order details in other Queue called ImportQ.

            As shown in the pic when the order details are pushed into ExportQ queue then our SCA module will be trigger the request. In our SCA application we are generating Order ID. Here we need to update the Order details into ImportQ, so to send the updated Order details into ImportQ we are using MQ binding.

Implementation:

          To implement this scenario we need to complete the following steps.

• Create MQ Manager and two local Queues.
• Create Interface and Business Objects.
• Create and implement Business Process.
• Integrate the application using MQ binding.
• Test the application.

Create MQ Manager and two local Queues:

Open the IBM WebSphere MQ Explorer right click on MQ Manager then select  New àMQ Manager.

Enter Queue manager name as MQMGR and click on Finish.

Expand the MQMGR queue manager right click on Queue select New àLocal Queue.

Give Queue name as ExportQ and click on finish.

Similarly create other local queue called as ImportQ. The queues are look like below.

Create Interface and Business Objects:

 Create two business Objects called as ‘OrderRequestBO’ and ‘OrderBO’ as shown below.

Create two Interfaces called ‘OrderProcessInterface’and ‘OrderService’ as shown below.

Create and implement Business Process:

Create Business Process called as ‘BP_OrderProcess’ and Implement as shown below.

Here we implemented our business Process for generating OrderId and Invoking OrderService which is going to update Order details in ImportQ.

Integrate the application using MQ binding:

            This is the important section where we are configuring our MQ Bindings to receive message from ExportQ and Send the updated order details into ImportQ.

Open EAI_OrderProcessModule Assembly diagram right click on BP_OrderProcess then select Generate Export à Messaging Binding àMQ binding.

Now one window will open for Configure WebSphere MQ Export Service. Configure the MQ Binding as shown below.

Here we configured Queue Manager, Queue name and transport method. The host name and port is the system IP of the ExportQ exist.

            The Data Format is to handle request message format, here we configured as XML format. The functional selector is used for select specific operation name in the interface.

Import Configuration:

Open EAI_OrderProcessModule Assembly diagram right click on BP_OrderProcess then select Wire Reference to New à Imports.

Right click on imported component then select Generate binding àMessaging Binding à MQ binding.

Now one window will open for Configure WebSphere MQ Import Service. Configure the MQ Binding as shown below.

Here we configured Queue Manager, Queue name and transport method. The host name and port is the system IP of the ImportQ exist.

            The Data Format is to handle to send message format, here we configured as XML format. Finally the assembly diagram is look like below.

Test the application:

Open the RfhUtil V7 for test our application. RfhUtil used for push the message into Queue and browse the messages from the queue.

Request Message:

<?xml version="1.0" encoding="UTF-8"?><OrderRequest xmlns:ns0="http://EAI_Library" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="ns0:OrderRequestBO">

  <ItemID>ITM123</ItemID>

  <OrderDate>2013-09-08+05:30</OrderDate>

  <Name>AMIR</Name>

  <Address>HYD</Address>

  <Description>MOBILE</Description>

</OrderRequest>

Enter Queue Manager, Queue Name, browse the request message file then click on Write Q.

If you want to see the request message click on Data and select XML from data format in RfhUtil.

Once we click on Write Q the request message will trigger to our SCA module and received from OrderProcessExport. In the Business process it will create the OrderId and will invoke the OrderService to update Order details in ImportQ. Here look the logs which we have written in Business Process.

Now browse the ImportQ, which is updated with order details as shown below. In RfhUtil enter Queue manager name as MQMGR, Queue name as ImportQ and click on Read Q. Goto Data select XML from Data format.

Conclusion:

This article described the concepts of the WebSphere Integration Developer V7 MQ Bindings feature. Here showed you the implementation steps and artifacts required to enable integration between SCA and MQ applications.

Download:

File Name	Description	Size	Download
MQ Binding.zip	MQ Binding Sample	22 KB	Download
Working with MQ Binding.pdf	MQ binding implementation in WPS	900 KB	Download

continue reading