96 lines
4.1 KiB
HTML
96 lines
4.1 KiB
HTML
<?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:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
|
|
xmlns:p="http://primefaces.org/ui">
|
|
<h:head>
|
|
<title>ajax2</title>
|
|
|
|
</h:head>
|
|
<h:body>
|
|
<h3> Ajax tag embedded -- Temperature Converter</h3>
|
|
<h4> event keyup reg-ex validation and multi-render with nested IDs. No need to specify IDs of parents</h4>
|
|
1. The Ajax2 constructor is called once, even though we have 2 h:forms, upon rendering. ( see Glassfish Log and line 20 of Ajax2.java)
|
|
<br/><br/>
|
|
2. Upon entering numbers in h:form id="idForm1" at LINE 34, we execute the inputText and we render all
|
|
ids that exits within h:form id="idForm1". We cannot render IDs outside this form.
|
|
We CANNOT render outPutText id_nested_cField2
|
|
<br/><br/>
|
|
|
|
3. Upon entering numbers in h:form id="idForm2" at LINE 51, we execute the inputText and we render all
|
|
ids that exists within h:form id="idForm2".
|
|
We CAN render outputText id_nested_cField2 becuase it is in within the form idForm2.
|
|
<br/><br/>
|
|
4. Upon every number typed in inputText id="id_in1" of form id="idForm1"
|
|
the constructor of the bean is called , then its setter. The output to celcius and the grown are called when we render.
|
|
<br/><br/>
|
|
5. The nested ID= id_nested_cField2 can be accessed only from with form
|
|
id="idForm2"
|
|
<br/><br/>
|
|
6. The command button of id=id_cm2 only updates the upper form with id="idForm1", because it has ajax=true
|
|
while the command button id=id_cm2 updates both upper and lpwer form forms
|
|
<h:form id="idForm1" >
|
|
<p:growl id="id_growl1" showDetail="true" showSummary="true"
|
|
life="4000"
|
|
redisplay="false"/>
|
|
<h:inputText id="id_in1" value="#{ajax2.farheneitTemperature}">
|
|
<f:ajax event="keyup" execute="@this"
|
|
render="cField1
|
|
id_nested_cField2
|
|
id_growl1" />
|
|
<f:validateRegex pattern = "[-+]?[0-9]*\.?[0-9]"/>
|
|
|
|
</h:inputText><br/>
|
|
<h:outputText value="Temperature in Celsius: #{ajax2.celciusTemperature}"
|
|
id="cField3"/>
|
|
<br/>
|
|
<p:commandButton id="id_cm1" ajax="true" value="send only this form because ajax=true" update="id_growl1"/>
|
|
</h:form>
|
|
<h:form id="idForm2" >
|
|
|
|
<p:growl id="id_growl2" showDetail="true" showSummary="true"
|
|
life="4000"
|
|
redisplay="false"/>
|
|
|
|
|
|
<p:panelGrid id="pg1" style="width: 100%" >
|
|
<p:column style="width: 100%">
|
|
<p:panelGrid id="pg2">
|
|
<p:column><h2> nested Ids</h2> </p:column>
|
|
<p:column>
|
|
<h2>
|
|
|
|
<h:outputText value="#{ajax2.celciusTemperature}"
|
|
id="id_nested_cField2"/>
|
|
</h2>
|
|
</p:column>
|
|
</p:panelGrid>
|
|
</p:column>
|
|
</p:panelGrid>
|
|
<br/>
|
|
<h:inputText value="#{ajax2.farheneitTemperature}">
|
|
|
|
|
|
<f:ajax event="keyup" execute="@this"
|
|
render="cField1
|
|
id_nested_cField2
|
|
d_growl2" />
|
|
<f:validateRegex pattern = "[-+]?[0-9]*\.?[0-9]"/>
|
|
|
|
</h:inputText><br/>
|
|
<h2>
|
|
Temperature in Celsius:
|
|
<h:outputText value="#{ajax2.celciusTemperature}"
|
|
id="cField1"/>
|
|
|
|
</h2>
|
|
<p:commandButton id="id_cm2" ajax="false" value="send all forms becuase ajax=false" update="id_growl"/>
|
|
|
|
</h:form>
|
|
|
|
</h:body>
|
|
</html>
|
|
|