You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by pr...@apache.org on 2006/03/25 00:01:33 UTC
svn commit: r388670 [2/2] - in /myfaces:
shared/trunk/core/src/main/java/org/apache/myfaces/shared/util/
tomahawk/trunk/sandbox/core/src/main/java/org/apache/myfaces/custom/ajax/api/
tomahawk/trunk/sandbox/core/src/main/java/org/apache/myfaces/custom/a...
Modified: myfaces/tomahawk/trunk/sandbox/examples/src/main/webapp/inputAjax.jsp
URL: http://svn.apache.org/viewcvs/myfaces/tomahawk/trunk/sandbox/examples/src/main/webapp/inputAjax.jsp?rev=388670&r1=388669&r2=388670&view=diff
==============================================================================
--- myfaces/tomahawk/trunk/sandbox/examples/src/main/webapp/inputAjax.jsp (original)
+++ myfaces/tomahawk/trunk/sandbox/examples/src/main/webapp/inputAjax.jsp Fri Mar 24 15:01:30 2006
@@ -55,154 +55,181 @@
<p>The backend data model will update without having to click the submit button. To see error handling, put in some
random text into the Fields.<br/> It is possible to place one error message beneath each field or having one
- central place for displaying all messages. <br/> In this case it may be useful to mark with the
+ central place for displaying all messages. <br/> In this case it may be useful to mark with the
help of the errorStyleClass or errorStyle attribute of the ajax fields where the error have occured. </p> <br/>
<f:view>
<t:panelLayout
- layout="classic">
+ layout="classic">
<f:facet name="body">
- <h:form>
-
- <h:panelGrid>
-
- <h:panelGrid>
- <h:outputText styleClass="standard_bold" value="Input Some Text" />
- <h:panelGrid columns="2">
- <s:inputTextAjax value="#{inputAjaxBean.text1}" id="text1"
- validator="#{inputAjaxBean.validateText1}"
- errorStyle="border:1px solid red; color:red;"/>
- <t:message forceSpan="true" styleClass="errorMessage" for="text1"></t:message>
- </h:panelGrid>
- <f:verbatim>This component demonstrates ajax updating ability when you change the
- text. <br/> An error message is displayed if the given String is greater than 5 characters.</f:verbatim>
- </h:panelGrid>
-
- <f:verbatim><br/></f:verbatim>
-
- <h:panelGrid>
- <h:outputText styleClass="standard_bold" value="Input Some Text"/>
- <h:panelGrid columns="2">
- <s:inputTextAjax value="#{inputAjaxBean.text2}"
- id="text2"
- showOkButton="true"
- showCancelButton="true"
- validator="#{inputAjaxBean.validateText2}">
- <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
- </s:inputTextAjax>
- <t:message forceSpan="true" for="text2" style="color:red; font-weight:bold;"/>
- </h:panelGrid>
- <f:verbatim>This component demonstrates ajax updating ability, but you must click Ok for it to send.<br/>
- Cancel will clear the text and not send an update. Will show a validation error if the string is
- less then 3 characters.</f:verbatim>
- </h:panelGrid>
-
- <f:verbatim><br/></f:verbatim>
-
- <h:panelGrid columns="1">
- <h:outputText styleClass="standard_bold" value="Input a Date"/>
- <h:panelGrid columns="2">
- <s:inputTextAjax value="#{inputAjaxBean.date1}"
- id="date1"
- errorStyleClass="errorField">
- <s:convertDateTime pattern="yyyy-MM-dd"/>
- </s:inputTextAjax>
- <t:message for="date1" forceSpan="true" styleClass="errorMessage"/>
- </h:panelGrid>
- <f:verbatim>This component demonstrates error handling capabilities, enter an invalid string to see the
- error returned from the server through ajax.</f:verbatim>
- </h:panelGrid>
-
- <f:verbatim><br/></f:verbatim>
-
- <h:panelGrid>
- <h:panelGrid style="border:1px solid #71A5A5; background-color:rgb(236, 243, 225); width:450px;height:50px;">
- <t:messages forceSpan="true" styleClass="errorMessage"> </t:messages>
- </h:panelGrid>
- <f:verbatim>This is the thomahawk messages component with forceRenderSpan set to true. <br/>
- All messages which are generated by the inputTextAjax fields are displayed here.
- </f:verbatim>
- </h:panelGrid>
-
- <f:verbatim><br/><br/></f:verbatim>
-
-
- <h:outputText value="Select Some Boxes"/>
- <h:panelGrid columns="1">
- <s:selectManyCheckboxAjax
- id="smcb"
- value="#{inputAjaxBean.chosenValues}">
- <f:selectItems
- value="#{inputAjaxBean.checkboxItems}"/>
- </s:selectManyCheckboxAjax>
- <f:verbatim>This component demonstrates ajax updating ability on a checkboxes.</f:verbatim>
- </h:panelGrid>
-
- <h:outputText value="Select A Radio Button"/>
- <h:panelGrid columns="1">
- <s:selectOneRadioAjax
- id="radio1"
- value="#{inputAjaxBean.radioValue}">
- <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
- <f:selectItems
- value="#{inputAjaxBean.radioItems}"/>
- </s:selectOneRadioAjax>
- <f:verbatim>This component demonstrates ajax updating ability on a radio buttons.</f:verbatim>
- </h:panelGrid>
-
- <h:outputText value="Toggle Switch"/>
- <h:panelGrid columns="1">
- <h:panelGroup>
- <s:selectBooleanCheckboxAjax
- id="toggle1"
- value="#{inputAjaxBean.toggle1}"/>
- <h:outputText value="Got Milk?"/>
- </h:panelGroup>
- <t:message for="toggle1" forceSpan="true" styleClass="errorMessage"/>
- <f:verbatim>This component demonstrates ajax updating ability based on a toggle switch.</f:verbatim>
- </h:panelGrid>
-
- <h:outputText value="Toggle Switch With Images"/>
- <h:panelGrid columns="1">
- <h:panelGroup>
- <s:selectBooleanCheckboxAjax
- id="toggle2"
- value="#{inputAjaxBean.toggle2}"
- onImage="images/nav-plus.gif"
- offImage="images/nav-minus.gif">
- <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
- </s:selectBooleanCheckboxAjax>
- <h:outputText value="Got Juice?"/>
- </h:panelGroup>
- <t:message for="toggle2" forceSpan="true" styleClass="errorMessage"/>
- <f:verbatim>This component demonstrates ajax updating ability based on a toggle switch.</f:verbatim>
- </h:panelGrid>
-
-
- </h:panelGrid>
- <t:div id="statusDiv" ></t:div>
- <h:commandButton action="#{inputAjaxBean.submit}" value="Submit"/>
- </h:form>
+<h:form>
+
+<h:panelGrid>
+
+<h:panelGrid>
+ <h:outputText styleClass="standard_bold" value="Input Some Text"/>
+ <h:panelGrid columns="2">
+ <s:inputTextAjax value="#{inputAjaxBean.text1}" id="text1"
+ validator="#{inputAjaxBean.validateText1}"
+ errorStyle="border:1px solid red; color:red;"/>
+ <t:message forceSpan="true" styleClass="errorMessage" for="text1"></t:message>
+ </h:panelGrid>
+ <f:verbatim>This component demonstrates ajax updating ability when you change the
+ text. <br/> An error message is displayed if the given String is greater than 5 characters.</f:verbatim>
+</h:panelGrid>
+
+<f:verbatim><br/></f:verbatim>
+
+<h:panelGrid>
+ <h:outputText styleClass="standard_bold" value="Input Some Text"/>
+ <h:panelGrid columns="2">
+ <s:inputTextAjax value="#{inputAjaxBean.text2}"
+ id="text2"
+ showOkButton="true"
+ showCancelButton="true"
+ validator="#{inputAjaxBean.validateText2}">
+ <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
+ </s:inputTextAjax>
+ <t:message forceSpan="true" for="text2" style="color:red; font-weight:bold;"/>
+ </h:panelGrid>
+ <f:verbatim>This component demonstrates ajax updating ability, but you must click Ok for it to send.<br/>
+ Cancel will clear the text and not send an update. Will show a validation error if the string is
+ less then 3 characters.</f:verbatim>
+</h:panelGrid>
+
+<f:verbatim><br/></f:verbatim>
+
+<h:panelGrid columns="1">
+ <h:outputText styleClass="standard_bold" value="Input a Date"/>
+ <h:panelGrid columns="2">
+ <s:inputTextAjax value="#{inputAjaxBean.date1}"
+ id="date1"
+ errorStyleClass="errorField">
+ <s:convertDateTime pattern="yyyy-MM-dd"/>
+ </s:inputTextAjax>
+ <t:message for="date1" forceSpan="true" styleClass="errorMessage"/>
+ </h:panelGrid>
+ <f:verbatim>This component demonstrates error handling capabilities, enter an invalid string to see the
+ error returned from the server through ajax.</f:verbatim>
+</h:panelGrid>
+
+<f:verbatim><br/></f:verbatim>
+
+<h:panelGrid>
+ <h:panelGrid style="border:1px solid #71A5A5; background-color:rgb(236, 243, 225); width:450px;height:50px;">
+ <t:messages forceSpan="true" styleClass="errorMessage"></t:messages>
+ </h:panelGrid>
+ <f:verbatim>This is the thomahawk messages component with forceRenderSpan set to true. <br/>
+ All messages which are generated by the inputTextAjax fields are displayed here.
+ </f:verbatim>
+</h:panelGrid>
+
+<f:verbatim><br/><br/></f:verbatim>
+
+
+<h:panelGrid columns="2">
+ <h:panelGroup>
+ <h:outputText styleClass="standard_bold" value="Select Some Boxes"/>
+ <h:panelGrid columns="1">
+ <s:selectManyCheckboxAjax
+ id="smcb"
+ value="#{inputAjaxBean.chosenValues}">
+ <f:selectItems
+ value="#{inputAjaxBean.checkboxItems}"/>
+ </s:selectManyCheckboxAjax>
+ <f:verbatim>This component demonstrates ajax updating ability on a checkboxes.</f:verbatim>
+ </h:panelGrid>
+ </h:panelGroup>
+ <h:panelGroup>
+ <t:htmlTag value="br"/>
+ <h:outputText value="Current chosen checkbox values in server model"/>
+ <t:htmlTag value="br"/>
+ <h:dataTable
+ value="#{inputAjaxBean.chosenValues}"
+ var="cvalue">
+ <h:column>
+ <f:facet name="header">
+ <h:outputText value="value"/>
+ </f:facet>
+ <h:outputText value="#{cvalue}"/>
+ </h:column>
+ </h:dataTable>
+ </h:panelGroup>
+</h:panelGrid>
+
+
+<h:outputText styleClass="standard_bold" value="Select A Radio Button"/>
+<h:panelGrid columns="1">
+ <s:selectOneRadioAjax
+ id="radio1"
+ value="#{inputAjaxBean.radioValue}">
+ <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
+ <f:selectItems
+ value="#{inputAjaxBean.radioItems}"/>
+ </s:selectOneRadioAjax>
+ <f:verbatim>This component demonstrates ajax updating ability on a radio buttons.</f:verbatim>
+</h:panelGrid>
+
+<h:outputText styleClass="standard_bold" value="Toggle Switch"/>
+<h:panelGrid columns="1">
+ <h:panelGroup>
+ <s:selectBooleanCheckboxAjax
+ id="toggle1"
+ value="#{inputAjaxBean.toggle1}"/>
+ <h:outputText value="Got Milk?"/>
+ </h:panelGroup>
+ <t:message for="toggle1" forceSpan="true" styleClass="errorMessage"/>
+ <f:verbatim>This component demonstrates ajax updating ability based on a toggle switch.</f:verbatim>
+</h:panelGrid>
+
+<h:outputText styleClass="standard_bold" value="Toggle Switch With Images"/>
+<h:panelGrid columns="1">
+ <h:panelGroup>
+ <s:selectBooleanCheckboxAjax
+ id="toggle2"
+ value="#{inputAjaxBean.toggle2}"
+ onImage="images/nav-plus.gif"
+ offImage="images/nav-minus.gif">
+ <f:valueChangeListener type="org.apache.myfaces.custom.inputAjax.SampleValueChangeListener"/>
+ </s:selectBooleanCheckboxAjax>
+ <h:outputText value="Got Juice?"/>
+ </h:panelGroup>
+ <t:message for="toggle2" forceSpan="true" styleClass="errorMessage"/>
+ <f:verbatim>This component demonstrates ajax updating ability based on a toggle switch.</f:verbatim>
+</h:panelGrid>
+
+
+</h:panelGrid>
+<t:div id="statusDiv"></t:div>
+<h:commandButton action="#{inputAjaxBean.submit}" value="Submit"/>
+</h:form>
</f:facet>
</t:panelLayout>
-<h:outputLink value="inputAjax.jsf"><h:outputText value="Refresh"></h:outputText></h:outputLink>
-<t:htmlTag value="br"/>
-<h:outputText value="Current chosen checkbox values in server model"/>
-<t:htmlTag value="br"/>
-<h:dataTable
- value="#{inputAjaxBean.chosenValues}"
- var="cvalue">
- <h:column>
- <f:facet name="header">
- <h:outputText value="value"/>
- </f:facet>
- <h:outputText value="#{cvalue}"/>
- </h:column>
+<h:form>
+ <h:outputText styleClass="standard_bold" value="Form Submit via AJAX"/>
+ <h:panelGrid columns="2">
+ <h:panelGrid columns="2">
+ <t:inputText id="formText1" value="#{inputAjaxBean.formText1}"
+ validator="#{inputAjaxBean.validateFormText1}"></t:inputText>
+ <t:message for="formText1" forceSpan="true" styleClass="errorMessage"/>
+
+ <t:inputText id="formText2" value="#{inputAjaxBean.formText2}"
+ validator="#{inputAjaxBean.validateFormText2}"></t:inputText>
+ <t:message for="formText2" forceSpan="true" styleClass="errorMessage"/>
+
+ <s:commandButtonAjax action="#{inputAjaxBean.ajaxFormSubmit}" value="Submit"/>
+ <h:outputText value=" " escape="false"/>
+ </h:panelGrid>
+ <f:verbatim>This component demonstrates submitting a form through ajax.</f:verbatim>
+</h:panelGrid>
+
+</h:form>
+
+<h:outputLink value="inputAjax.jsf"><h:outputText value="Refresh"></h:outputText></h:outputLink>
-</h:dataTable>
</f:view>