Service-Oriented UI with JSF

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.

Related Whitepaper:

Functional Programming in Java: Harnessing the Power of Java 8 Lambda Expressions

Get ready to program in a whole new way!

Functional Programming in Java will help you quickly get on top of the new, essential Java 8 language features and the functional style that will change and improve your code. This short, targeted book will help you make the paradigm shift from the old imperative way to a less error-prone, more elegant, and concise coding style that’s also a breeze to parallelize. You’ll explore the syntax and semantics of lambda expressions, method and constructor references, and functional interfaces. You’ll design and write applications better using the new standards in Java 8 and the JDK.

Get it Now!  

One Response to "Service-Oriented UI with JSF"

  1. ali akbar Azizkhani says:

    where is it service oriented ?
    bad article

Leave a Reply


seven × = 49



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.

Sign up for our Newsletter

15,153 insiders are already enjoying weekly updates and complimentary whitepapers! Join them now to gain exclusive access to the latest news in the Java world, as well as insights about Android, Scala, Groovy and other related technologies.

As an extra bonus, by joining you will get our brand new e-books, published by Java Code Geeks and their JCG partners for your reading pleasure! Enter your info and stay on top of things,

  • Fresh trends
  • Cases and examples
  • Research and insights
  • Two complimentary e-books