Listing 1

The following JSF markup is used to create the address form shown in example 1.

<x:table>
  <x:row>
    <x:column horizontal="right" width="60">
      <h:outputLabel styleClass="addrLabel" for="street1" value="Street 1"/>
    </x:column>
    <x:column columnSpan="3">
      <h:inputText styleClass="addrField" style="width: 440"
                   id="street1" value="#{address.street1}"/>
    </x:column>
  </x:row>
  <x:row>
    <x:column horizontal="right" width="60">
      <h:outputLabel styleClass="addrLabel" for="street2" value="Street 2"/>
    </x:column>
    <x:column columnSpan="3">
      <h:inputText styleClass="addrField" style="width: 440"
                   id="street2" value="#{address.street2}"/>
    </x:column>
  </x:row>
  <x:row>
    <x:column horizontal="right" width="60">
      <h:outputLabel styleClass="addrLabel" for="city" value="City"/>
    </x:column>
    <x:column>
      <h:inputText styleClass="addrField" style="width: 290"
                   id="city" value="#{address.city}"/>
    </x:column>
    <x:column horizontal="right" width="40">
      <h:outputLabel styleClass="addrLabel" for="state" value="State"/>
    </x:column>
    <x:column>
      <h:inputText styleClass="addrField" style="width: 100"
                   id="state" value="#{address.state}"/>
    </x:column>
  </x:row>
  <x:row>
    <x:column horizontal="right" width="60">
      <h:outputLabel styleClass="addrLabel" for="suite" value="Suite"/>
    </x:column>
    <x:column>
      <h:inputText styleClass="addrField" style="width: 100"
                   id="suite" value="#{address.suite}"/>
    </x:column>
    <x:column horizontal="right" width="40">
      <h:outputLabel styleClass="addrLabel" for="zip" value="ZIP"/>
    </x:column>
    <x:column>
      <h:inputText styleClass="addrField" style="width: 100"
                   id="zip" value="#{address.zip}"/>
    </x:column>
  </x:row>
  <x:row>
    <x:column columnSpan="2"></x:column>
    <x:column columnSpan="2" horizontal="right">
      <h:commandButton type="reset" value="Clear"/>
      <h:commandButton type="submit" value="Save"/>
    </x:column>
  </x:row>
</x:table>

Note: this markup assumes x: is the prefix assigned to the Xavax custom tags in the JSP.