Service-Oriented UI with JSF

Michael SchnellSeptember 3rd, 2012Last Updated: October 22nd, 2012

1 41 4 minutes read

In large software development projects, service-oriented architecture is very common because it provides a functional interface that can be used by different teams or departments. The same principles should be applied when creating user interfaces.

In the case of a large company that has, among others, a billing department and a customer management department, an organizational chart might look like this:

If the billing department wants to develop a new dialog for creating invoices, it might look like this:

As you can see, the screen above references a customer in the upper part. Clicking the “..” button right behind the short name text field will open the below dialog that allows the user to select the customer:

After pressing “Select” the customer data is shown in the invoice form.

It’s also possible to select a customer by simply entering a customer number or typing a short name into the text fields on the invoice screen. If a unique short name is entered, no selection dialog appears at all. Instead, the customer data is displayed directly. Only an ambiguous short name results in opening the customer selection screen.

The customer functionality will be provided by developers who belong to the customer management team. A typical approach involves the customer management development team providing some services while the billing department developers create the user interface and call these services.

However, this approach involves a stronger coupling between these two distinct departments than is actually necessary. The invoice only needs a unique ID for referencing the customer data. Developers creating the invoice dialog don’t really want to know how the customer data is queried or what services are used in the background to obtain that information.

The customer management developers should provide the complete part of the UI that displays the customer ID and handles the selection of the customer:

Using JSF 2, this is easy to achieve with composite components. The logical interface between the customer management department and the billing department consists of three parts:

Composite component (XHTML)
Backing bean for the composite component
Listener interface for handling the selection results

Provider (customer management departement)

Composite component:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:composite="http://java.sun.com/jsf/composite"
 xmlns:ice="http://www.icesoft.com/icefaces/component"
 xmlns:ace="http://www.icefaces.org/icefaces/components"
 xmlns:icecore="http://www.icefaces.org/icefaces/core">
 
<ui:composition>
 
 <composite:interface name="customerSelectionPanel" displayName="Customer Selection Panel"
                      shortDescription="Select a customer using it's number or short name">
  <composite:attribute name="model" type="org.fuin.examples.soui.view.CustomerSelectionBean" required="true" />  
 </composite:interface>
 
 <composite:implementation>
  
  <ui:param name="model" value="#{cc.attrs.model}"/>
  
  <ice:form id="customerSelectionForm">
   <icecore:singleSubmit submitOnBlur="true" />
   <h:panelGroup id="table" layout="block">
 
    <table>
 
     <tr>
      <td><h:outputLabel for="customerNumber"
        value="#{messages.customerNumber}" /></td>
      <td><h:inputText id="customerNumber"
        value="#{model.id}" required="false" /></td>
      <td>&nbsp;</td>
      <td><h:outputLabel for="customerShortName"
        value="#{messages.customerShortName}" /></td>
      <td><h:inputText id="customerShortName"
        value="#{model.shortName}" required="false" /></td>
      <td><h:commandButton action="#{model.select}"
        value="#{messages.select}" /></td>
     </tr>
 
     <tr>
      <td><h:outputLabel for="customerName"
        value="#{messages.customerName}" /></td>
      <td colspan="5"><h:inputText id="customerName"
        value="#{model.name}" readonly="true" /></td>
     </tr>
 
    </table>
 
   </h:panelGroup>
  </ice:form>
 
 </composite:implementation>
 
</ui:composition>
 
</html>

Backing bean for the composite component:

package org.fuin.examples.soui.view;
 
import java.io.Serializable;
 
import javax.enterprise.context.Dependent;
import javax.inject.Inject;
import javax.inject.Named;
 
import org.apache.commons.lang.ObjectUtils;
import org.fuin.examples.soui.model.Customer;
import org.fuin.examples.soui.services.CustomerService;
import org.fuin.examples.soui.services.CustomerShortNameNotUniqueException;
import org.fuin.examples.soui.services.UnknownCustomerException;
 
@Named
@Dependent
public class CustomerSelectionBean implements Serializable {
 
 private static final long serialVersionUID = 1L;
 
 private Long id;
 
 private String shortName;
 
 private String name;
 
 private CustomerSelectionListener listener;
 
 @Inject
 private CustomerService service;
 
 public CustomerSelectionBean() {
  super();
  listener = new DefaultCustomerSelectionListener();
 }
 
 public Long getId() {
  return id;
 }
 
 public void setId(final Long id) {
  if (ObjectUtils.equals(this.id, id)) {
   return;
  }
  if (id == null) {
   clear();
  } else {
   clear();
   this.id = id;
   try {
    final Customer customer = service.findById(this.id);
    changed(customer);
   } catch (final UnknownCustomerException ex) {
    FacesUtils.addErrorMessage(ex.getMessage());
   }
  }
 }
 
 public String getShortName() {
  return shortName;
 }
 
 public void setShortName(final String shortNameX) {
  final String shortName = (shortNameX == "") ? null : shortNameX;
  if (ObjectUtils.equals(this.shortName, shortName)) {
   return;
  }
  if (shortName == null) {
   clear();
  } else {
   if (this.id != null) {
    clear();
   }
   this.shortName = shortName;
   try {
    final Customer customer = service
      .findByShortName(this.shortName);
    changed(customer);
   } catch (final CustomerShortNameNotUniqueException ex) {
    select();
   } catch (final UnknownCustomerException ex) {
    FacesUtils.addErrorMessage(ex.getMessage());
   }
  }
 }
 
 public String getName() {
  return name;
 }
 
 public CustomerSelectionListener getConnector() {
  return listener;
 }
 
 public void select() {
  // TODO Implement...
 }
 
 public void clear() {
  changed(null);
 }
 
 private void changed(final Customer customer) {
  if (customer == null) {
   this.id = null;
   this.shortName = null;
   this.name = null;
   listener.customerChanged(null, null);
  } else {
   this.id = customer.getId();
   this.shortName = customer.getShortName();
   this.name = customer.getName();
   listener.customerChanged(this.id, this.name);
  }
 }
 
 public void setListener(final CustomerSelectionListener listener) {
  if (listener == null) {
   this.listener = new DefaultCustomerSelectionListener();
  } else {
   this.listener = listener;
  }
 }
 
 public void setCustomerId(final Long id) throws UnknownCustomerException {
  clear();
  if (id != null) {
   clear();
   this.id = id;
   changed(service.findById(this.id));
  }
 }
 
 private static final class DefaultCustomerSelectionListener implements
   CustomerSelectionListener {
 
  @Override
  public final void customerChanged(final Long id, final String name) {
   // Do nothing...
  }
 
 }
 
}

Listener interface for handling results:

package org.fuin.examples.soui.view;
 
/**
 * Gets informed if customer selection changed.
 */
public interface CustomerSelectionListener {
 
 /**
  * Customer selection changed.
  *
  * @param id New unique customer identifier - May be NULL.
  * @param name New customer name - May be NULL.
  */
 public void customerChanged(Long id, String name);
 
}

User (billing departement)

The invoice bean simply uses the customer selection bean by injecting it, and connects to it using the listener interface:

package org.fuin.examples.soui.view;
 
import java.io.Serializable;
 
import javax.annotation.PostConstruct;
import javax.enterprise.context.SessionScoped;
import javax.enterprise.inject.New;
import javax.inject.Inject;
import javax.inject.Named;
 
@Named("invoiceBean")
@SessionScoped
public class InvoiceBean implements Serializable {
 
 private static final long serialVersionUID = 1L;
 
 @Inject @New
 private CustomerSelectionBean customerSelectionBean;
 
 private Long customerId;
 
 private String customerName;
 
 @PostConstruct
 public void init() {
  customerSelectionBean.setListener(new CustomerSelectionListener() {
   @Override
   public final void customerChanged(final Long id, final String name) {
    customerId = id;
    customerName = name;
   }
  });
 }
 
 public CustomerSelectionBean getCustomerSelectionBean() {
  return customerSelectionBean;
 }
 
 public String getCustomerName() {
  return customerName;
 }
 
}

Finally, in the invoice XHTML, the composite component is used and linked to the injected backing bean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:fuin="http://fuin.org/examples/soui/facelets"
      xmlns:customer="http://java.sun.com/jsf/composite/customer">
 
    <ui:composition template="/WEB-INF/templates/template.xhtml">
         
        <ui:param name="title" value="#{messages.invoiceTitle}" />
     
        <ui:define name="header"></ui:define>
     
        <ui:define name="content">
         <customer:selection-panel model="#{invoiceBean.customerSelectionBean}" />
        </ui:define>
 
        <ui:define name="footer"></ui:define>
 
    </ui:composition>
     
</html>

Summary
In conclusion, parts of the user interface that reference data from other departments should be the responsibility of the department that delivers the data. Any changes in the providing code can then be easily made without any changes to the using code. Another important benefit of this method is the harmonization of the application’s user interface. Controls and panels that display the same data always look the same. Every department can also create a repository of its provided user interface components, making the process of designing a new dialog as easy as putting the right components together.

Reference: Service-Oriented UI from our JCG partner Michael Schnell at the A Java Developer’s Life blog.