trinidad-example/trinidad-demo/src/main/webapp/demos/ajaxPPRDemos.xhtml

<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.

-->

<ui:composition 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:tr="http://myfaces.apache.org/trinidad"
                xmlns:trd="http://myfaces.apache.org/trinidad/demo"
                xmlns:trh="http://myfaces.apache.org/trinidad/html">
  <tr:document title="Partial Page Rendering Demos"
    onload="init();">
    <f:facet name="metaContainer">
      <tr:group>
        <trh:script>
function pprStateChangeFunction(state)
{
  var inputText = document.getElementById("it1");
  if (inputText.value.length)
  {
    inputText.value += "\n";
  }
  var stateStr = (state == TrRequestQueue.STATE_READY) ? "ready" : "busy";
  inputText.value += "State has changed to "+stateStr;
  inputText.scrollTop = inputText.scrollHeight;
}
function pprDomReplacementFunction(oldDom, newDom)
{
  var inputText = document.getElementById("it1");
  if (inputText.value.length)
  {
    inputText.value += "\n";
  }
  if (newDom === document.body)
  {
    inputText.value += "Document body was replaced";
  }
  else
  {
    inputText.value += "DOM element with ID " +
      newDom.getAttribute("id") + " was replaced";
  }
  inputText.scrollTop = inputText.scrollHeight;
}
function init()
{
  TrPage.getInstance().getRequestQueue().addStateChangeListener(pprStateChangeFunction);
  TrPage.getInstance().addDomReplaceListener(pprDomReplacementFunction);
}
function setFocus(event)
{
  event.target.focus();
}
        </trh:script>
      </tr:group>
    </f:facet>
    <tr:form usesUpload="#{partialDemoUtil.renderInputFile}" partialTriggers="ifsbc1">
      <tr:panelPage>
        <f:facet name="navigationGlobal">
          <tr:panelGroupLayout id="pgl1" layout="horizontal">
            <f:facet name="separator">
              <tr:spacer width="10" />
            </f:facet>
            <tr:navigationPane hint="buttons">
              <tr:commandNavigationItem text="Return to Feature Demos page" immediate="true"
                                        action="demos"/>
            </tr:navigationPane>
            <tr:statusIndicator id="si1" />
          </tr:panelGroupLayout>
        </f:facet>
        <tr:panelHeader text="Welcome to the Apache Trinidad Partial Page Rendering Demos for JSF 2.0 Ajax">
          <tr:outputFormatted styleUsage="instruction" id="of0"
                              value="These demos test Trinidad PPR with JSF 2.0 Ajax using both trinidad and JSF components."/>
          <tr:panelGroupLayout layout="vertical">
            <f:facet name="separator">
              <tr:spacer width="30" height="10"/>
            </f:facet>
            <tr:panelHeader text="Command components using JSF 2.0 native Ajax support" id="phCmd">
              <tr:outputFormatted styleUsage="instruction" id="of10"
                                  value="Tests commandButton components wired to use either Ajax JS API by itself or both JSF 2 Ajax and trinidad PPR. Clicking these buttons should cause a partial or a full page submit (without errors) and update the field on the right."/>
              <tr:spacer height="10" id="sp10"/>
              <tr:panelGroupLayout layout="horizontal" id="pgl10">
                <tr:panelGroupLayout layout="vertical" id="pgl11">
                  <f:facet name="separator">
                    <tr:spacer height="6" id="sp11"/>
                  </f:facet>
                  <tr:outputFormatted styleUsage="instruction"
                                      value="tr:commandButton using f:ajax and partialSubmit=true."
                                      id="of11"/>
                  <tr:commandButton id="axBtn1" partialSubmit="true" text="Partial Submit"
                                    shortDesc="partialSubmit"
                                    actionListener="#{partialDemoUtil.action}">
                    <f:ajax event="action" render="btnTarget" />
                  </tr:commandButton>
                  <tr:outputFormatted styleUsage="instruction"
                                      value="tr:commandButton using f:ajax." id="of12"/>

                  <tr:commandButton id="axBtn2" text="Full Submit"
                                    shortDesc="fullSubmit"
                                    actionListener="#{partialDemoUtil.action}">
                    <f:ajax event="action" render="btnTarget" />
                  </tr:commandButton>

                  <tr:outputFormatted styleUsage="instruction"
                                      value="h:commandButton using f:ajax." id="of13"/>
                  <h:commandButton id="axBtn3" value="Submit" actionListener="#{partialDemoUtil.action}">
                    <f:ajax event="click" render="btnTarget" />
                  </h:commandButton>
                </tr:panelGroupLayout>
                <tr:spacer width="30" height="10" id="sp12"/>
                <tr:panelGroupLayout id="pgl12" layout="vertical">
                  <f:facet name="separator">
                    <tr:spacer height="6" id="sp13"/>
                  </f:facet>
                  <tr:statusIndicator id="si2" />
                  <tr:panelLabelAndMessage label="Button Clicked: " id="plm10">
                    <tr:outputFormatted id="btnTarget"
                                        styleUsage="instruction"
                                        value="#{partialDemoUtil.status.linkUpdate}">
                      <f:convertDateTime pattern="HH:mm:ss"/>
                    </tr:outputFormatted>
                  </tr:panelLabelAndMessage>
                </tr:panelGroupLayout>
              </tr:panelGroupLayout>
            </tr:panelHeader>
            
            <tr:panelHeader text="InputText Component using JSF 2.0 Ajax" id="phInput">
              <tr:panelGroupLayout layout="horizontal" id="pgl20">
                <f:facet name="separator">
                  <tr:spacer width="10" id="sp20"/>
                </f:facet>

                <tr:panelGroupLayout layout="vertical" id="pgl21">
                  <f:facet name="separator">
                    <tr:spacer height="10" id="sp21"/>
                  </f:facet>
                  <tr:outputFormatted styleUsage="instruction"
                                      value="Tests autoSubmitting text fields which is also wired to use JSF 2.0 Ajax."/>

                  <tr:outputFormatted styleUsage="instruction"
                                      value="tr:inputText with autoSubmit=true."
                                      id="of20"/>
                  <tr:inputText id="itxt1" autoSubmit="true"
                                value="#{partialDemoUtil.status.textValue}"
                                label="Enter text and tab out: "
                                valueChangeListener="#{partialDemoUtil.valueChanged}">
                      <f:event type="preValidate" listener="#{partialDemoUtil.prevalidateField}"/>
                  </tr:inputText>
                  <tr:panelLabelAndMessage label="Prevalidate event count: ">
                    <tr:outputFormatted id="preval1" partialTriggers="itxt1"
                                          styleUsage="instruction"
                                          value="#{partialDemoUtil.status.prevalidateEventCount}"/>
                  </tr:panelLabelAndMessage>
                  <tr:outputFormatted styleUsage="instruction"
                                      value="tr:inputText with autoSubmit=true inside a subform"
                                      id="of21"/>
                  <tr:subform id="sf20">
                    <tr:inputText autoSubmit="true" id="itxt2"
                                  label="Enter a different text and tab out: "
                                  value="#{partialDemoUtil.status.textValue}"
                                  valueChangeListener="#{partialDemoUtil.valueChanged}"/>
                  </tr:subform>
                  
                  <tr:outputFormatted styleUsage="instruction" 
                                      value="tr:inputText with value set when button is clicked. (There are no updates 
                                      shown on the right side panel.)"
                                      id="of22"/>
                  <tr:inputText label="Press button to partial refresh" value="#{requestScope.status}" partialTriggers="icb1 icb2"/>
                  
                  <tr:panelGroupLayout id="pgl22" layout="horizontal">
                    <f:facet name="separator">
                      <tr:spacer width="10" id="sp22"/>
                    </f:facet>
                    <tr:commandButton text="Refresh Input" partialSubmit="true" id="icb1">
                      <tr:setActionListener from="Success" to="#{requestScope.status}"/>
                    </tr:commandButton>
                    <tr:commandButton text="Reset Input" partialSubmit="true" id="icb2">
                      <tr:setActionListener from="" to="#{requestScope.status}"/>
                    </tr:commandButton>
                  </tr:panelGroupLayout>
                  
                </tr:panelGroupLayout>
                
                <tr:panelGroupLayout id="pgl23" layout="vertical">
                  <f:facet name="separator">
                    <tr:spacer height="10" id="sp23"/>
                  </f:facet>
                  <tr:statusIndicator id="si3" />
                  <tr:panelLabelAndMessage label="Input entered: ">
                    <tr:outputFormatted id="itTarget" partialTriggers="itxt1 ::sf20:itxt2"
                                        styleUsage="instruction"
                                        value="#{partialDemoUtil.status.textStateText}"/>
                  </tr:panelLabelAndMessage>
                </tr:panelGroupLayout>
              </tr:panelGroupLayout>
            </tr:panelHeader>
            
            <tr:panelHeader text="Radio Buttons">
              <tr:outputFormatted styleUsage="instruction"
                                  value="This demo shows a two sets of radio buttons which use autoSubmit. There is also an output component which is listening on updates to the radio buttons and displaying status text accordingly."/>
              <tr:panelGroupLayout layout="horizontal">
                <tr:panelGroupLayout layout="vertical">
                  <tr:panelGroupLayout layout="horizontal">
                    <tr:outputFormatted styleUsage="instruction"
                                        value="selectBooleanRadio buttons"/>
                    <tr:panelGroupLayout layout="vertical">
                      <tr:selectBooleanRadio id="sbr1" group="theGroup" selected="false"
                                             text="item 1" autoSubmit="true"
                                             valueChangeListener="#{partialDemoUtil.valueChanged}"/>
                      <tr:selectBooleanRadio id="sbr2" group="theGroup" text="item 2"
                                             selected="false" autoSubmit="true"
                                             valueChangeListener="#{partialDemoUtil.valueChanged}"/>
                      <tr:selectBooleanRadio id="sbr3" group="theGroup" text="item 3"
                                             selected="false" autoSubmit="true"
                                             valueChangeListener="#{partialDemoUtil.valueChanged}"/>
                    </tr:panelGroupLayout>
                  </tr:panelGroupLayout>
                  <tr:spacer width="30" height="10"/>
                  <tr:panelGroupLayout layout="vertical">
                    <tr:selectOneRadio id="sor1" label="selectOneRadio buttons" autoSubmit="true"
                                       valueChangeListener="#{partialDemoUtil.valueChanged}">
                      <tr:selectItem label="item 1" value="1"/>
                      <tr:selectItem label="item 2" value="2"/>
                      <tr:selectItem label="item 3" value="3"/>
                    </tr:selectOneRadio>
                  </tr:panelGroupLayout>
                </tr:panelGroupLayout>
                <tr:spacer width="30" height="10"/>
                <tr:panelGroupLayout id="pgl31" layout="vertical">
                  <f:facet name="separator">
                    <tr:spacer height="6" id="sp31"/>
                  </f:facet>
                  <tr:statusIndicator id="si4" />
                  <tr:panelLabelAndMessage label="Selected: ">
                    <tr:outputFormatted id="rbTarget" partialTriggers="sbr1 sbr2 sbr3 sor1"
                                        styleUsage="instruction"
                                        value="#{partialDemoUtil.status.radioStateText}">
                      <f:convertDateTime pattern="HH:mm:ss"/>
                    </tr:outputFormatted>
                  </tr:panelLabelAndMessage>
                </tr:panelGroupLayout>
              </tr:panelGroupLayout>
            </tr:panelHeader>
            <tr:panelHeader text="Focus Restoration">
              <tr:outputFormatted styleUsage="instruction"
                                  value="The below command button gets the focus on mouse down and its parent is updated by PPR. It should regain focus after the PPR completes." />
              <tr:panelGroupLayout id="frpgl1" layout="horizontal" partialTriggers="frcb1">
                <f:facet name="separator">
                  <tr:spacer width="10" id="sp41"/>
                </f:facet>
                <tr:commandButton id="frcb1" text="Demonstrate focus restoration"
                                  partialSubmit="true">
                  <trd:invokeFunctionBehavior function="setFocus" event="mousedown" />
                </tr:commandButton>
                <tr:statusIndicator id="si5" />
              </tr:panelGroupLayout>
            </tr:panelHeader>
            <tr:panelHeader text="Input File / Multi-part form demonstration">
              <tr:outputFormatted styleUsage="instruction"
                                  value="This section will add a input file to the page so that a multi-part submission is made which will bypass the JSF 2 AJAX and fall back on Trinidad PPR code." />
              <tr:panelGroupLayout id="ifpgl1" layout="horizontal">
                <f:facet name="separator">
                  <tr:spacer width="10" id="ifsp1"/>
                </f:facet>
                <tr:selectBooleanCheckbox id="ifsbc1" value="#{partialDemoUtil.renderInputFile}" />
                <tr:commandButton id="ifcb1" text="Update the visibile status"
                                  partialSubmit="true"
                                  actionListener="#{partialDemoUtil.updateRenderInputFileState}" />
                <tr:statusIndicator id="ifsi1" />
              </tr:panelGroupLayout>

              <tr:panelGroupLayout id="ifpgl2" layout="horizontal"
                                   rendered="#{partialDemoUtil.renderInputFile}">
                <tr:inputFile id="ifif1" valueChangeListener="#{partialDemoUtil.fileUploaded}"
                              label="inputFile" />
                <tr:commandButton id="ifcb2" text="Submit the file"
                                  partialSubmit="true" />
                <tr:outputFormatted id="ifof1" styleUsage="instruction"
                                    value="#{partialDemoUtil.status.uploadFileState}"
                                    partialTriggers="ifcb2" />
              </tr:panelGroupLayout>
            </tr:panelHeader>
          </tr:panelGroupLayout>
          <tr:panelLabelAndMessage id="plam1" label="Ajax Status Log">
            <tr:inputText id="it1" value="" simple="true" rows="7" columns="100" />
          </tr:panelLabelAndMessage>
        </tr:panelHeader>
      </tr:panelPage>
    </tr:form>
  </tr:document>
</ui:composition>