Skip to content

Commit 79f7a1d

Browse files
author
Yoshio Terada
committed
Update README.md
I added the explanation of JSF (PrimeFaces).
1 parent ca641fd commit 79f7a1d

4 files changed

Lines changed: 171 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 171 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -618,16 +618,184 @@ Azure Deployment Slot is very useful for evaluation, and you can create multiple
618618
![Deployment Slot](./images/azure-portal-deployment-slot.png)
619619
620620
621-
# Implement DB Access code from Web Application
622621
623-
## Explain how to implement JSF (PrimeFaces)
624622
625-
TBD
623+
# Implement DB Access code from Web Application
626624
627625
## Explain how to implement JPA which access to MySQL
628626
629627
TBD
630628
629+
630+
## Explain how to implement JSF (PrimeFaces)
631+
632+
[JavaServer™ Faces (JSF)](https://javaee.github.io/javaserverfaces-spec/) is the standard component-oriented user interface (UI) framework for the Java EE platform. JSF is included in the Java EE platform. JSF works equally as well as a standalone web framework.
633+
634+
[PrimeFaces](https://www.primefaces.org/) is a collection of rich UI components for JavaServer Faces. All widgets are open source and free to use under Apache License. If you use the [PrimeFaces](https://www.primefaces.org/), you can use many rich UI components in the [showcase](https://www.primefaces.org/showcase/).
635+
636+
![](./images/screenshot.jpg)
637+
638+
In this Java Web Application, I used following thee UI components.
639+
640+
* `p:layout` : [Layout](https://www.primefaces.org/showcase/ui/panel/layout/element.xhtml)
641+
* `p:panelMenu` : [PanelMenu](https://www.primefaces.org/showcase/ui/menu/panelMenu.xhtml)
642+
* `p:dataTable` : [DataTable - Paginator](https://www.primefaces.org/showcase/ui/data/datatable/paginator.xhtml)
643+
644+
645+
## Create Web Page in index.xhtml
646+
647+
### Create Layout
648+
649+
![](./images/primefaces-Layout.png)
650+
651+
At first, I used the `PrimeFaces Layout` UI component.
652+
In order to use it, I added the `p:layout` tag in the index.xhtml as follows.
653+
654+
```xml
655+
<!DOCTYPE html>
656+
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
657+
xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
658+
xmlns:p="http://primefaces.org/ui">
659+
660+
<h:head>
661+
<title>World DB App</title>
662+
</h:head>
663+
<h:body>
664+
<h:form id="mainform">
665+
<p:layout id="layout" style="min-width:400px;min-height:800px;">
666+
<p:layoutUnit position="west" resizable="true" size="200" minSize="40" maxSize="400">
667+
LEFT SIDE
668+
</p:layoutUnit>
669+
670+
<p:layoutUnit position="center" id="center">
671+
RIGHT SIDE
672+
</p:layoutUnit>
673+
</p:layout>
674+
675+
</h:form>
676+
</h:body>
677+
</html>
678+
```
679+
680+
### Create PanelMenue in LEFT SIDE of the Layout
681+
682+
In order to select the Continents and countries, I used `PrimeFaces PanelMenue` components and I put it on the left side of the Layout as follows.
683+
In order to use it, I added the `p:panelMenu` tag in index.xtml.
684+
685+
![](./images/primefaces-PanelMenu.png)
686+
687+
688+
```xml
689+
<p:layoutUnit position="west" resizable="true" size="200" minSize="40" maxSize="400">
690+
<p:panelMenu id="menu" style="width:300px" model="#{countryBackingBean.model}" >
691+
</p:panelMenu>
692+
</p:layoutUnit>
693+
```
694+
695+
### Create DataTable in RIGHT SIDE of the Layout
696+
697+
In order to show the detail of the country information, I used `PrimeFaces DataTable` UI component and I put it on the right side of the Layout as follows.
698+
In order to use it, I added the `p:dataTable` tag in index.xtml.
699+
700+
![](./images/primefaces-DataTable.png)
701+
702+
703+
```xml
704+
<p:layoutUnit position="center" id="center">
705+
<p:dataTable id="citydata" var="city" value="#{countryBackingBean.city}" rows="15" paginator="true"
706+
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
707+
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
708+
rowsPerPageTemplate="15,20,25">
709+
<p:column headerText="Id">
710+
<h:outputText value="#{city.id}" />
711+
</p:column>
712+
713+
<p:column headerText="Name">
714+
<h:outputText value="#{city.name}" />
715+
</p:column>
716+
717+
<p:column headerText="District">
718+
<h:outputText value="#{city.district}" />
719+
</p:column>
720+
721+
<p:column headerText="Population">
722+
<h:outputText value="#{city.population}" />
723+
</p:column>
724+
725+
726+
<f:facet name="paginatorTopLeft">
727+
<p:commandButton type="button" icon="pi pi-refresh" />
728+
</f:facet>
729+
730+
<f:facet name="paginatorBottomRight">
731+
<p:commandButton type="button" icon="pi pi-cloud-upload" />
732+
</f:facet>
733+
734+
</p:dataTable>
735+
</p:layoutUnit>
736+
```
737+
738+
### Following is the Created index.xhtml
739+
740+
```xml
741+
<!DOCTYPE html>
742+
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core"
743+
xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
744+
xmlns:p="http://primefaces.org/ui">
745+
746+
<h:head>
747+
<title>World DB App</title>
748+
</h:head>
749+
<h:body>
750+
<h:form id="mainform">
751+
<p:layout id="layout" style="min-width:400px;min-height:800px;">
752+
<p:layoutUnit position="west" resizable="true" size="200" minSize="40" maxSize="400">
753+
<p:panelMenu id="menu" style="width:300px" model="#{countryBackingBean.model}" >
754+
</p:panelMenu>
755+
756+
</p:layoutUnit>
757+
758+
<p:layoutUnit position="center" id="center">
759+
<p:dataTable id="citydata" var="city" value="#{countryBackingBean.city}" rows="15" paginator="true"
760+
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
761+
currentPageReportTemplate="{startRecord}-{endRecord} of {totalRecords} records"
762+
rowsPerPageTemplate="15,20,25">
763+
<p:column headerText="Id">
764+
<h:outputText value="#{city.id}" />
765+
</p:column>
766+
767+
<p:column headerText="Name">
768+
<h:outputText value="#{city.name}" />
769+
</p:column>
770+
771+
<p:column headerText="District">
772+
<h:outputText value="#{city.district}" />
773+
</p:column>
774+
775+
<p:column headerText="Population">
776+
<h:outputText value="#{city.population}" />
777+
</p:column>
778+
779+
780+
<f:facet name="paginatorTopLeft">
781+
<p:commandButton type="button" icon="pi pi-refresh" />
782+
</f:facet>
783+
784+
<f:facet name="paginatorBottomRight">
785+
<p:commandButton type="button" icon="pi pi-cloud-upload" />
786+
</f:facet>
787+
788+
</p:dataTable>
789+
</p:layoutUnit>
790+
</p:layout>
791+
792+
</h:form>
793+
</h:body>
794+
</html>
795+
```
796+
797+
798+
631799
## Final Directory Structure of this Project
632800
633801
```text

‎images/primefaces-DataTable.png‎

533 KB
Loading

‎images/primefaces-Layout.png‎

557 KB
Loading

‎images/primefaces-PanelMenu.png‎

480 KB
Loading

0 commit comments

Comments
 (0)