Information Type： ○○○○○○○

Company Name ： ○○○○○○

Information Owner ： ○○○○○○○

Client Name

Alexandru Pitis
EBS Romania
2013

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2018 NTT DATA Corporation
For whom?

- Developers:
- having basic Java Knowledge
- having minimum Know-How about Web
Applications
- curious whether JSF is an effective technical
alternative for Web Applications

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
2 © 2018 NTT DATA Corporation
 Content:

- 1. Environment, JSF Foundations & a running

application
- Objectives:
- Configure the Development Environment:
Java, Eclipse, Maven, Tomcat, JSF2
- JSF Foundations
- Develop, build, deploy, run a JSF Web
Application
- 2. Richness of JSF Components, hands on
- Objectives:
- The PrimeFaces JSF Library and its
Showcase
- Add PrimeFaces to the Development
Environment
- Rich Interfaces, JSF2 AJAX, PrimeFaces
AJAX
- Play with JSF components
Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2018 NTT DATA Corporation 3
Hands on Java Server Faces – Alexandru Pitis, 2013

1.1. Development Environment

- Java, JDK 1.6, x64

- http://www.oracle.com/technetwork/java/javase/downloads
- jdk-6u45-windows-x64.exe
- Target: D:\projects\hands-on-jsf\dev\jdk\1.6

- Eclipse Juno, x64

- http://www.eclipse.org/downloads/
- eclipse-jee-juno-SR2-win32-x86_64.zip
- Target: D:\projects\hands-on-jsf\dev\eclipse
- Eclipse Workspace: D:\projects\hands-on-jsf\trunk\.metadata

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 4
Hands on Java Server Faces – Alexandru Pitis, 2013

1.1. Development Environment

- Maven 3
- http://maven.apache.org/download.cgi
- apache-maven-3.0.5-bin.zip
- Target: D:\projects\hands-on-jsf\dev\tools\maven

- Tomcat 6, x64
- http://tomcat.apache.org/download-60.cgi
- apache-tomcat-6.0.37-windows-x64.zip
- Target: D:\projects\hands-on-jsf\dev\tomcat

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 5
Hands on Java Server Faces – Alexandru Pitis, 2013

1.1. Development Environment

- Starting Eclipse with the desired JDK

- D:\projects\hands-on-jsf\trunk\start-eclipse.bat
- D:\projects\hands-on-jsf\env.bat
- Run Eclipse, check installed JDK

- Configure Tomcat 6 as Server in Eclipse

- Run it in debug mode
- Test it at http://localhost:8080

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 6
Hands on Java Server Faces – Alexandru Pitis, 2013

1.1. Development Environment

- Configure local M2 repository

- Edit file: D:\projects\hands-on-jsf\tools\maven\conf\settings.xml
- Use <localRepository>D:\projects\hands-on-
jsf\dev\tools\maven\repository</localRepository>

- Maven Integration for Eclipse (m2e Eclipse Plugin)

- Eclipse > Help > Eclipse Marketplace > Search for "m2e" > Install
- Eclipse > Window > Preferences > Maven > User Settings:
- use file: D:\projects\hands-on-jsf\tools\maven\conf\settings.xml

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 7
Hands on Java Server Faces – Alexandru Pitis, 2013

1.2. JSF Foundations

- JavaServer Faces Technology

- http://www.oracle.com/technetwork/java/javaee/javaserverfaces-
139869.html
- The Java EE 6 Tutorial
- http://docs.oracle.com/javaee/6/tutorial/doc/bnaph.html
- JavaServer Faces API (2.0)
-
http://docs.oracle.com/cd/E17802_01/j2ee/javaee/javaserverfaces/2.0/
docs/api/

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 8
Hands on Java Server Faces – Alexandru Pitis, 2013

1.3. Develop, build, deploy, run a JSF Web Application

- Sources to develop:
- D:\projects\hands-on-jsf\trunk\hands-on-jsf\src\
- \main\java\ro\ebsromania\handsonjsf\
HandsOnJSFController.java
- \main\resources\messages_en.properties
- \main\webapp\WEB-INF\web.xml
- \main\webapp\WEB-INF\faces-config.xml
- \main\webapp\index.html
- \main\webapp\xhtml\home.xhtml
- Testing URL: http://localhost:8080/hands-on-jsf

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 9
Hands on Java Server Faces – Alexandru Pitis, 2013

2.1. The PrimeFaces JSF Library and its Showcase

- PrimeFaces JSF Component Suite:

- http://www.primefaces.org
- PrimeFaces Showcase:
- http://www.primefaces.org/showcase

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 10
Hands on Java Server Faces – Alexandru Pitis, 2013

2.2. Add PrimeFaces to the Development Environment

- Add Maven dependency to pom.xml:

<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>3.5</version>
</dependency>

- Ensure primefaces-3.5.jar gets packaged & deployed

- PrimeFaces namespace: xmlns:p="http://primefaces.org/ui"

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 11
Hands on Java Server Faces – Alexandru Pitis, 2013

2.3. Rich Interfaces, JSF2 AJAX. Basic Sample

<h:commandButton value="Ajax update">

<f:ajax event="click"
execute="testValueInputId"
render="testValueId" />
</h:commandButton>

<h:outputText id="testValueId"
value="#{handsOnJSFController.testValue}" />

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 12
Hands on Java Server Faces – Alexandru Pitis, 2013

2.4. Rich Interfaces, PrimeFaces AJAX. Basic Sample

<h:commandButton
value="Ajax update, ajaxified Standard Button">
<p:ajax event="click"
process="testValueInputId"
update="testValueId" />
</h:commandButton>
<p:commandButton value="PrimeFaces Ajax update"
process="testValueInputId"
update="testValueId" />

<h:outputText id="testValueId"
value="#{handsOnJSFController.testValue}" />

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 13
Hands on Java Server Faces – Alexandru Pitis, 2013

2.5. Play with JSF components

Calendar Sample:
<p:calendar value="#{handsOnJSFController.date}"
mode="inline"
pages="3" />

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 14
Hands on Java Server Faces – Alexandru Pitis, 2013

Thank you!

Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2016
© 2018
NTTNTT
DATA
DATA
Corporation
Corporation 15
Information Type: Working Standard, Disclosure Range: , Information Owner: iulia.jianu, NTT DATA Romania
© 2018 NTT DATA Corporation