Pro JSF and Ajax

To illustrate the benefit of separating the UI and data models, let's look at an example of
the common HTML form element <select>. This list element has a multiple attribute that
changes the behavior from allowing a single-select option to multiple-select options. This
model has no separation of rendering and behavior. For an application developer to change
the behavior of the element from single select to multiple select, it requires just a minor
adjustment--simply setting the attribute multiple. However, this will have a bigger impact
on the underlying application logic since the values passed from the client are now struc-
tured as a list of key-value pairs instead of just a single key-value pair.
The UISelectOne and UISelectMany UI components provide a good example of clear sepa-
ration between behavior and appearance. For example, the UISelectOne component has a
distinct behavior to select a single value from many available options, and the UISelectMany
component has the behavior of selecting many values from a list of available options. The
UISelectOne
component has three renderer types--Listbox, Radio, and Menu. Changing the
appearance from Radio to Menu will not affect the underlying behavior.
However, if application developers want to change the behavior to a multiple-select com-
ponent, they have to replace the entire UISelectOne JSF component with a UISelectMany JSF
component, rather than just setting an attribute in the page markup, as they would do when
using the <select> element directly. This clear separation between changing the behavior of
a JSF component and changing its appearance gives application developers a better under-
standing of the impact of their changes when modifying the page definition. Figure 1-6
illustrates the UIComponent and three Renderers with different appearances.
Figure 1-6 illustrates a component--UISelectOne--from the JSF specification that has
three different renderers attached--Listbox, Menu, and Radio. In some cases it might be neces-
sary to create new UIComponents or Renderers.
Figure 1-6. UISelectOne
and its renderers
Application Logic
Client
C H A P T E R 1
s
T H E F O U N D AT I O N O F J S F : C O M P O N E N T S
14