2. Getting Started - Simple Form in JSF 2.0

Previous Getting Started JSF 2.0 with Netbeans

1. Getting Started - JSF 2.0 with Netbeans 7 and Primefaces 

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


Next

3. Getting Started - Simple Datatable with Managed bean in JSF 2.0