In previous part we have created our enterprise java bean and managed bean. Now we'll create a our facelet customer_list.xhtml, and display the list of customers by accessing our managed bean. Right-click on WebContent folder and create a composition page customer_list.xhtml , and make the code look like following. For detailed information on how to create composition pages see part 5 of this tutorial.
customer_list.xml
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/template/template.xhtml">
<ui:define name="content">
<h:form>
<h:dataTable id="dt1" value="#{customerBean.customerList}"
var="item" bgcolor="#F1F1F1" border="10" cellspacing="2"
width="60%" rules="all" >
<f:facet name="header">
<h:outputText value="Customer List Data Table" />
</f:facet>
<h:column>
<f:facet name="header">
<h:outputText value="CustomerId" />
</f:facet>
<h:outputText value="#{item.customerId}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{item.name}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Age"/>
</f:facet>
<h:outputText value="#{item.age}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Email"/>
</f:facet>
<h:outputText value="#{item.email}"></h:outputText>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Address"/>
</f:facet>
<h:outputText value="#{item.address}"></h:outputText>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
</ui:composition>
</html>
Run the page on the server and here we are. We have successfully created and tested our JSF 2.0 dynamic web application. Congratulations!
I'll upload the 2nd part of this tutorial soon when it is finished, which will explain the database operations in detail. So thanks for reading this article, check for more tutorials in future.
No comments:
Post a Comment