LECTURE 5

PRIMEFACES

LEK HSIANG HUI

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
 LEARNING OBJECTIVES
At the end of this lecture, you should understand:
• How to use PrimeFaces to build rich UI

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
2
 INTRODUCTION
JSF is a server-side component framework for
building UI
• Mechanisms for binding HTML components to
server-side objects (Java classes)
However, building enterprise systems often
requires rich UI component
• This is usually achieved through HTML, Javascript,
CSS libraries (client-side)
• Challenge: Java developers might not be proficient
with these client-side technology

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
3
 WHAT IS PRIMEFACES?
is like front end css (design)

PrimeFaces (https://www.primefaces.org/showcase/index.xhtml) is
UI framework for Java EE/JSF developers
• Comes with a collection of many rich UI
components
• Based on JSF (still server-side UI framework)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
4
 WHAT IS PRIMEFACES?
Some of the features include:
• UI enhancement to standard HTML components
• Useful widgets/components for more immersive
user experience
• E.g. calendar widget, autocomplete, WYSIWYG
editor, color picker, charts, image gallery,
notification messages, etc
• Support for AJAX
• Theming capabilities

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
5
 GETTING
STARTED WITH
PRIMEFACES
Getting
Started with Layout and Form
Navigation Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
6
 SETTING UP PRIMEFACES FOR
NETBEANS
Download PrimeFaces
• https://www.primefaces.org/downloads/
• Download the latest version of PrimeFaces (e.g.
primefaces-13.0.1.jar) from Community Downloads
Create a new library in NetBeans
• Choose Tools > Libraries under the menubar
• Create a new Library and add primefaces-13.0.1.jar
• Specify “PrimeFaces 13.0” for the Library Name
Add PrimeFaces library to your project (-war module)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
7
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
8
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
9
 PRIMEFACES SHOWCASE WEBSITE

PrimeFaces showcase is the most important website to

get code examples how to implement the components
https://www.primefaces.org/showcase/index.xhtml
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
10
 LAYOUT
Getting
Started with Form
Layout Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
11
 PANEL
Panel is a grouping of component with a header,
content and footer
• Can customize buttons on the panel
• E.g. making it toggleable, closeable
<p:panel header=”Header" footer="Movie Details">
…
</p:panel>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
12
 DASHBOARD
Layout component with drag and drop capabilities
• p:dashboard component with multiple p:panel
as child
• https://www.primefaces.org/showcase/ui/panel/das
hboard.xhtml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
13
 OTHER LAYOUT COMPONENTS

PanelGrid AccordionPanel

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
14
 OTHER LAYOUT COMPONENTS

TabView

Card

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
15
 DISPLAY DATA
Getting
Started with Form
Layout Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
16
 LAYOUT

PrimeFaces comes with a DataTable that is

customizable
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
17
 DATATABLE

data-examples.xhtml
<p:dataTable var="person" value="#{dataTableManagedBean.people}">
<p:column headerText="Id">
<h:outputText value="#{person.id}" />
</p:column>
<p:column headerText="Name">
<h:outputText value="#{person.name}" />
</p:column>
<p:column headerText="Address">
<h:outputText value="#{person.address}" />
</p:column>
<p:column headerText="Contact">
<h:outputText value="#{person.contact}" />
</p:column>
</p:dataTable>

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
18
 DATATABLE

DataTableManagedBean.java
@ManagedBean
@ViewScoped
public class DataTableManagedBean {
private List<Person> people;

@EJB
private PersonSessionBeanLocal personSessionBean;

@PostConstruct
public void init(){
people = personSessionBean.getAllPeople();
}
...
}

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
19
 HANDS-ON TIME
Task: Try using the DataTable PrimeFaces component to create the
following:

You would need to create

1. A EJB project with 1 session bean (PersonSessionBean), 1 entity
(Person) (A NetBeans project of this can be found on Canvas)
2. Setup project with PrimeFaces
3. Create DataTableManagedBean
4. Modify index.xhtml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
20
 ADD FILTERING
AND SEARCHING

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
21
 ADD FILTERING
AND SEARCHING
1. Make sure the dataTable is enclosed within
<h:form></h:form>
2. Add the <f:facet name="header"></f:facet>
<f:facet name="header">
<h:outputText value="Search all fields:" />
<p:inputText id="globalFilter"
onkeyup="PF('peopleTable').filter()"/>
</f:facet>
3. Add widgetVar="peopleTable" to the <p:dataTable>
<p:dataTable var="person" …
widgetVar="peopleTable">

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
22
 ADD FILTERING
AND SEARCHING
4. Add filterBy and filterMatchMode attributes to each of the
<p:column></p:column>

<p:column headerText="Name"
filterBy="#{person.name}"
filterMatchMode="contains">

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
23
 CUSTOMIZATION FOR
DATATABLE
Resizable columns
• Set resizableColumns="true" for the
<p:dataTable> tag
Sortable columns
• Set sortBy="#{object.field}" to relevant
<p:column> tag
• Make sure that the datatable is enclosed between the
<h:form> tag
Scrollable (vertical/horizontal)
• Set scrollable="true" and scrollHeight="??"
(or scrollWidth="??")

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
24
 CUSTOMIZATION FOR
DATATABLE
Pagination
• Add rows="2" to relevant <p:dataTable> tag
• And paginator="true" paginatorPosition="both"

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
25
 OTHER DATA-RELATED
COMPONENTS

Carousel

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
26
 OTHER DATA-RELATED
COMPONENTS

DataView

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
27
 FORM
ELEMENTS
Getting
Started with Form
Layout Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
28
 FORM ELEMENTS

PrimeFaces provides various enhancement to

form-related elements
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
29
 INPUTMASK
<p:inputMask mask="PATTERN"> allows us to
format data in a certain PATTERN
• Special characters:
• 9 : a digit
• a : a letter (uppercase/lowercase)
• * : either a letter or number
• ? : everything following is optional
• Example:
• Date : 99/99/9999
• Phone : (999)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
30
 DATEPICKER
https://www.primefaces.org/showcase/ui/input/datepicker/dat
ePicker.xhtml

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
31
 DROPDOWN MENU
<p:selectOneMenu> allows you to create a
dropdown menu

<p:selectOneMenu value="#{formsManagedBean.selectedUniversity}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{formsManagedBean.universities}" />
</p:selectOneMenu>

public class FormsManagedBean {

private String selectedUniversity;
private Map<String, String> universities
= new HashMap<String, String>();
…
}

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
32
 SELECT ONE BUTTON/RADIO
<p:selectOneButton> and
<p:selectOneRadio> is similar to
<p:selectOneMenu> except that it is horizontal
• Replace p:selectOneMenu with
p:selectOneButton p:selectOneRadio

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
33
 OTHER FORM INPUT
COMPONENTS
Checkbox
Knob
Password
Rating
Signature
Slider
Spinner
TextEditor

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
34
 NOTIFICATIONS
Getting
Started with Form
Layout Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
35
 MESSAGES
<p:messages id="messages" showDetail="true" closable="true">
<p:autoUpdate />
</p:messages>

<p:commandButton value="Info"
actionListener="#{notificationsManagedBean.info}" />

class NotificationsManagedBean {
…
public void info() {
FacesContext.getCurrentInstance().addMessage("form1:messages",
new FacesMessage(FacesMessage.SEVERITY_INFO,
"Info","Display info."));
}
}
Can also be null
SEVERITY_WARN i.e. referring to the
SEVERITY_ERROR message in the current
SEVERITY_FATAL form
©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
36
 GROWL
<p:growl id="growl" showDetail="true" />

<p:commandButton value="Growl"
actionListener="#{notificationsManagedBean.growNotification}"
update="growl"/>

class NotificationsManagedBean {
…
public void growNotification() {
FacesContext.getCurrentInstance().addMessage(null,
new FacesMessage("Some Title", "Some Message."));
}
}

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
37
 AJAX
Getting
Started with Form
Layout Display Data Elements Notifications AJAX
PrimeFaces

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
38
 AJAX
AJAX already comes by default
• E.g. CommandButton execution is performed by
AJAX
• Possible to turn it off setting ajax="false" to
force a full page refresh
<p:commandButton value="Submit (non-ajax)"
actionListener="#{...}" ajax="false" />

• This can be sometimes helpful sometimes to turn it

off for debugging purposes

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
39
 AJAX
Various AJAX examples on PrimeFaces showcase
website:
• E.g. autocomplete, populate data dynamically
• Trigger server processing through browser event
(e.g. keyUp)

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
40
 SUMMARY
PrimeFaces builds on top of JSF to provide rich UI
components that enterprise systems typically requires
Features of PrimeFaces:
• Layout and navigation UI components
• Data displaying UI components
• Form elements
• Handling Notifications
• Handling AJAX

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
41
 REFERENCES
PrimeFaces v8.0 showcase website
(version 8 will be used for lab 4)
https://www.primefaces.org/showcase-v8/

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
42
 WHAT’S NEXT?
CSS

©2024 Lek Hsiang Hui. All rights reserved. No part of this document may be reproduced or transmitted in any form or by any
means, electronic or otherwise, without prior written permission of the owner.
43