Invoke an ESB Service in your User Interface and display the response of this service

How can you bind an ESB Service in your User Interface and more specifically how can I call an ESB Routing Service and get the Result back in my UI?

Let’s say I’m developing a JSF Application and I want to use my existing ESB Services for my binding layer. The way you bind a webservice inside a JSF Application can be resolved in 2 different ways:

  • Create a Webservice Data Control
  • Create a Web Service Proxy and call the endpoint of the webservice with a valid parameter using for example a backing bean

OK, now I’m able to call an ESB Service but how can I get the response of this service back into my User Interface …

You need to create a two-way ESB Routing Service, meaning you need to define a request- and response-operation in your routing service.
E.g. You’re invoking a select on a table and the resultset needs to be displayed in your UI. In other words you want to show a list of employees in your user interface, and this list is bound to an esb service.

The steps you need to perform to get this working:

  • Create a new ESB Project
  • Define a system/group for you Esb Services (in this way it isn’t published to the default system)
  • Create a Database Adapter where you define a select statement on a given table
  • Define a new Routing Service where you define the request parameter, being the selectInputParameters-tag which is provided in the xsd that was generated for your DB Adapter and the reply parameter of the Routing Service is the collection returned by this same xsd.
  • Publish the ESB Service to your ESB Server

Now you can test this ESB Service to see that the resultset of the database adapter is returned by your routing service.

The next step is to define a UI where we can call this ESB Service, the steps you need to perform:

  • Create a new project and define a new JSF-page in this project
  • Create a Web Service Data Control ‘which can be found in the ‘Business Tier’ categorie of the ‘new gallery’
  • In step 1 you need to define a meaningfull name for the web service and in the URL you need to copy/paste the ‘Concrete WSDL URL’ of your routing service which is available through the ESB Control’. Then click browse to get the methods/operations available in the ESB Service and click next
  • In step 2 you need to choose the operation ‘execute’ and add it to the ‘selected’ area, click next
  • Click finish

Now you’re almost there, you’ve defined the web service data control which let’s you bind your UI to your ESB Service. The last thing you need to do now is to create a jsf-page and drag and drop your object inside the jsf-page:

  • Create a JSF-page
  • Drag-and-drop a PanelPage component inside the JSF page to have a nice lay-out
  • Go to the Control Palette and choose the ‘employees’-collection, your resulting objects of the db adapter, and drag-and-drop it into your jsf page.
  • Choose a table-component to have a nice view of your data

And now it’s show time … run the page in your embedded container and have a look at how esb services can be seamlessly integrated into your UI.