• Overview
• Getting Started
• Differences
• Additional features

ADF Faces includes replacements for many of the tags in the JavaServer Faces (JSF) specification. It is important to emphasize that there is no requirement whatsoever that you convert from standard JSF tags to ADF Faces tags. Standard JSF tags and ADF Faces tags can be mixed freely within a single page. In general, the ADF Faces tags are more powerful, because they:

• Often offer more features than the standard tags
• Can be used inside of the < af:forEach > tag (it is, unfortunately, not possible to support standard tags inside < af:forEach > )
• Provide more efficient implementations of client-side state saving (reduced per-component size)

If you're using ADF Faces for the first time, and you're adding ADF Faces tags into existing JSF pages, you'll need to know a few tips to get everything working correctly.

First, ADF Faces needs its stylesheet in each page to look correct. You can either add the < af:styleSheet > tag inside your < HEAD > tag, or, even better, just replace < HEAD > with our < afh:head > tag.

Second, if you call the Javascript form.submit() function, you'll bypass the ADF Faces support for client-side validation. We provide a submitForm() method that you can use instead, or, even better, look at the "autoSubmit" property on our input components.

Unless noted, the ADF Faces tag name is the same as the standard JSF tag with the exception of the prefix. ADF Faces tags use the prefix 'af'. For example, < h:commandButton > is < af:command Button > in ADF Faces.

The following list shows some of the common h: attributes and how they map to af: attributes:

• accesskey - use accessKey
• readonly - use readOnly
• alt and/or title - use shortDesc
• style - use inlineStyle
• dir , lang , tabindex - n/a

The ADF < af:form > component does not implement the JSF NamingContainer API. When you use the < af:form > tag, the ID in the generated HTML does not include the form's ID as a prefix. For example:

  <h:form id="foo">
   <!-- This inputText will have an id of "foo:bar" -->
   <af:inputText id="bar"/>
  </h:form>

  <af:form id="foo2">
   <!-- This inputText will have an id of just "bar2" -->
   <af:inputText id="bar2"/>
  </af:form>

As mentioned earlier, the ADF Faces tags offer some general features that are not available with the standard JSF tags - such as < af:forEach > support and more efficient (smaller) client-side state saving. There are many other features supported by the ADF Faces tags and components that are not supported by the standard JSF tags. It'd take too much space to discuss all of these features, but a couple of the more important ones are discussed here.

  <h:panelGrid columns="2">
   <!-- Use outputLabel; outputText doesn't support accessibility -->
   <h:outputLabel for="nameInput" value="Name:  ">
   <h:panelGroup>
     <h:inputText id="nameInput" value="Enter a name"/>
     <f:verbatim><br></f:verbatim>
     <h:message for="nameInput"/>
   </h:panelGroup>
 </h:panelGrid>

  <af:inputText label="Name:" value="Enter a name"/>

  <af:panelForm>
    <af:inputText label="First name:" value="/>
    <af:inputText label="Last name:" value="/>
  </af:panelForm> 

  <!-- No label or messaging -->
  <af:inputText simple="true" value="Enter a name"/>

   <af:selectInputDate id="mdf6" value="2004/09/06"
                    label="Date of birth"
                    tip="1/20/1972 or 1972/20/2">

    <af:convertDateTime 
           secondaryPattern="d/M/yyyy" pattern="yyyy/M/d" 
           convertDateMessageDetail="&quot;{0}&quot; in &quot;{1}&quot;
                                  is not a valid date. Example: &quot;{4}&quot;/>
                                      
   </af:selectInputDate>