Guide‎ > ‎JSF 2.0‎ > ‎

2. Getting Started - Simple Form in JSF 2.0

Use Components for Simple Form:

  • JSF panelGrid
  • JSF outputText
  • PrimeFaces Panel
  • PrimeFaces inputText
  • PrimeFaces  commandButton
  • PrimeFaces Dialog

Important Syntax:

JSF outputText Syntax:

Note : 

outputText act as Label

Code:

<h:outputText value="Label Name" />  

PrimeFaces inputText Syntax:

Note :

inputText act as TextBox

Code:

wihtout Value
<p:inputText/>
with Value
<p:inputText value="Default Value"/>

PrimeFaces commandButton Syntax:

Note:

act as Button.
It has some control like web page to Java Class
action=""   -> it is use redirect jsf pages or call java functions(cannot call actionListioners).
actionListener=" " -> it is use to call java(baking bean) functions(actionListioners Only,cannot call normal functions).
onclick="" -> it is use for Ajax based actions(this action is not avilable in normal JSFcommandButton).

Code:

<p:commandButton value="Button Name" onclick="dlg1.show();" type="button" />

Implementation Code For JSF Simple Form:
<?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:p="http://primefaces.prime.com.tr/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <h:form>
            <p:panel header="Simple Form in JSF 2.0 - little drops @ thiyagaraaj.com">
                <h:panelGrid columns="2">
                    <h:outputText value="Name" />  
                    <p:inputText />
                    <h:outputText value="No" />                      
                    <p:inputText/>
                    <h:outputText value="Address" />  
                    <p:inputText/>

                </h:panelGrid>
                <f:facet name="footer">    
                    <p:commandButton value="Finish"  onclick="dlg1.show();" type="button" />
                </f:facet>
            </p:panel>

            <p:dialog header="Conformation Dialog" widgetVar="dlg1" width="500">Simple Form In JSF 2.0 - little drops @ thiyagaraaj.com</p:dialog>

        </h:form>
    </h:body>
</html>
Copy and Paste In Your XHTML web Pages

Output