Pages

▼

Friday, May 27, 2011

RichFaces 3.3 (Ajax4JSF) and Apache Myfaces Tomahawk AJAX Example

I was working on an application at the office which involved mixing RichFaces 3.3 along with Apache MyFaces Tomahawk. Although some JSF frameworks claim interoperability, it is best to test them out to confirm that they will work in your specific project.

In the example application attached, I have created a facelets based application which uses Tomahawk components combined with RichFaces A4J to provide AJAX support.

It is a simple demonstration using AJAX to answer a comical question of which came first, the chicken, or the egg. Here is the example code: a4j-example.zip

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!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:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      >
    <head>
        <title>The Chicken or Egg Question...</title>
    </head>
    <body>
        <t:panelTabbedPane id="panelTabbedPane1" serverSideTabSwitch="true">
            <t:panelTab id="panelTab1" label="Questionable Panel">
                <h:panelGrid id="panelGrid1" columns="1">
                    <t:div id="div1">
                        <t:outputText id="outputText1" value="Which came first? #{index.value}"/>
                    </t:div>
                    <t:panelGroup id="panelGroup1">
                        <t:div id="div2" rendered="#{!empty index.value}">
                            <h:outputText value="I guess you know best don't you!"
                                          style="color: green; font-weight: bold;
                                          font-variant: small-caps; font-size: x-large"/>
                        </t:div>
                    </t:panelGroup>
                    <h:form id="form1">
                        <h:selectOneMenu id="selectOneMenu1" value="#{index.value}"
                                         valueChangeListener="#{index.selectOneMenuAction}">
                            <f:selectItems id="selectItems1" value="#{index.items}"/>
                            <a4j:support id="support1" event="onchange" reRender="div1,panelGroup1"/>
                        </h:selectOneMenu>
                    </h:form>
                </h:panelGrid>
            </t:panelTab>
            <t:panelTab id="panelTab2" label="Empty"/>
            <t:panelTab id="panelTab3" label="The Big Empty"/>
        </t:panelTabbedPane>
    </body>
</html>


Enhanced by Zemanta

No comments:

Post a Comment