PrimeFaces enables you to build modern, powerful, attractive Java EE UIs with dozens of off-the-shelf components. You can build new functionality very quickly with the built-in capabilities of the component suite as well as the power of JavaServer Faces. But what about those situations that require some customization or additional features built on top of an existing component? That’s when you need to understand exactly what’s happening behind the scenes. This session deconstructs PrimeFaces from the Java layer (component code, Ajax integration, and so on) all the way through the JavaScript browser layer (CSS, JavaScript widget API, and jQuery). Presented at JavaOne 2015.

1. Kito
D.
Mann
Principal
Consultant
Advanced PrimeFaces

2. Kito D. Mann
@kito99
» Principal
Consultant
at
Virtua
» h6p://www.virtua.com
» Training,
consul?ng,
architecture,
mentoring,
» Official
US
PrimeFaces
partner
» Author,
JavaServer
Faces
in
Ac?on
» Founder,
JSF
Central
» h6p://www.jsfcentral.com
Copyright (C) 2012 Virtua, Inc. All rights reserved.

3. Kito D. Mann
@kito99
» Co-­‐host,
Enterprise
Java
Newscast
» h6p://enterprisejavanews.com
» Interna?onally
recognized
speaker
» JavaOne,
JavaZone,
Devoxx,
NFJS,
TSSJS,
etc.
» JCP
Member
» JSF,
MVC,
CDI,
JSF
Portlet
Bridge,
Portlets
Copyright (C) 2012 Virtua, Inc. All rights reserved.

4. What’s new in PrimeFaces 5.3
» Responsiveness
across
all
components
» Signature
component
» DragDrop
support
for
mobile
devices
» Over
100
bug
fixes
Copyright (C) 2012 Virtua, Inc. All rights reserved.

5. Demo:
RequestContext,
ConfigContainer,
ApplicationContext

6. All About <p:ajax>
Copyright (C) 2012 Virtua, Inc. All rights reserved.

7. Server APIs: Standard JSF 2
Client APIs:
PrimeFaces Ajax

8. autoUpdate
p:ajax
Request"
Context
Callbacks
AjaxStatus
Selectors
partialSubmit
Ajax Extensions

9. Ajax Update Keywords
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Keyword
Type
@this
Standard
@form
Standard
@none
Standard
@namingcontainer
PrimeFaces
@parent
PrimeFaces
@composite
PrimeFaces
@child(n)
PrimeFaces
@previous
PrimeFaces
@widgetVar(name)
PrimeFaces

10. PrimeFaces Selectors (PFS)
update=”@(form)”
update=”@(form.first)”
update=”@(.mystyle)”
update=”@(.ui-datatable)”
update=”@(:input:not(select))”
update=”@(:input:disabled))”

11. Use PartialSubmit
Post
Data:javax.faces.partial.ajax=true&javax.faces.source=fo
rm%3Aj_idt18&javax.faces.partial.execute=form
%3Aname&javax.faces.partial.render=form
%3Adisplay&form%3Aj_idt18=form
%3Aj_idt18&form=form&form%3Aname=&form
%3Aj_idt20=&form%3Aj_idt22=&form%3Aj_idt24=&form
%3Aj_idt26=&form%3Aj_idt28=&form%3Aj_idt30=&form
%3Aj_idt32=&form%3Aj_idt34=&form%3Aj_idt36=&form
%3Aj_idt38=&form%3Aj_idt40=&form%3Aj_idt42=&form
%3Aj_idt44=&form%3Aj_idt46=&form%3Aj_idt48=&form
%3Aj_idt50=&form%3Aj_idt52=&form%3Aj_idt66=&form
%3Aj_idt68=&form%3Aj_idt70=&form%3Aj_idt72=&form
%3Aj_idt74=&form%3Aj_idt76=&form%3Aj_idt78=&form
%3Aj_idt80=&form%3Aj_idt82=&form%3Aj_idt84=&form
%3Aj_idt86=&form%3Aj_idt88=&form%3Aj_idt90=&form
%3Aj_idt92=&form%3Aj_idt94=&form%3Aj_idt96=&form
%3Aj_idt98=&javax.faces.ViewState=79164825219094
21983%3A-2156051337299048496
False
Post
Data:javax.faces.partial.ajax=true&javax.faces.source=for
m%3Aj_idt18&javax.faces.partial.execute=form
%3Aname&javax.faces.partial.render=form
%3Adisplay&form%3Aj_idt18=form
%3Aj_idt18&form=form&form
%3Aname=&javax.faces.ViewState=7916482521909421
983%3A-2156051337299048496
True

12. Controlling Ajax Updates
» <p:outputPanel>
» <p:fragment>
» autoUpdate
a6ribute
Copyright (C) 2012 Virtua, Inc. All rights reserved.

13. Demo: Ajax

14. Dissecting PrimeFaces
Components
Copyright (C) 2012 Virtua, Inc. All rights reserved.

15. Hide Complexity
Keep Flexibility
<p:tabView onTabChange=”handleTabChange()”>
<p:ajax event=”change” listener=”#{bean.onTabChange}” update=”comp” />
//tabs
</p:tabView>
CSS
Override
JS
API
Client
Callbacks
Ajax
Callbacks
CSS
JS
AJAX
JSON

16. Demo:
Component
Anatomy

17. Why Would You Modify a
Component?
» Fix
a
bug
» Change
the
behavior
» Add
a
feature
» Provide
default
behavior
Copyright (C) 2012 Virtua, Inc. All rights reserved.

18. Component Modification
Approaches
» Java
» Composite
components
» Subclassing
the
Java
class
» Patching
the
Java
class
Copyright (C) 2012 Virtua, Inc. All rights reserved.

19. Component Modification
Approaches
» JavaScript
» Overriding
a
method
» Extending
a
method
» Patching
the
JS
file
Copyright (C) 2012 Virtua, Inc. All rights reserved.

20. Demo:
Customizing
Components

21. Dissecting PrimeFaces CSS
Copyright (C) 2012 Virtua, Inc. All rights reserved.

22. Theme Anatomy
» Components
have
Structural
CSS
» Not
part
of
theme
» Padding
» Layout
» Margin
» Dimensions
» Specific
component
selectors
are
covered
in
the
documenta?on

23. Theme Anatomy
» Themes
contain
Skinning
CSS
» Colors
(border,
ac?ve,
highlight,
header,
etc.)
» Borders
» Fonts
» Overlays
» Drop
shadows

24. Theme Anatomy
Selector
Applies
To
.ui-­‐widget
All
PrimeFaces
components
.ui-­‐widget-­‐header
Header
sec?on
of
a
component
.ui-­‐widget-­‐content
Content
sec?on
of
a
component
.ui-­‐state-­‐default
Default
class
of
a
clickable
element
.ui-­‐state-­‐hover
Hover
class
of
a
clickable
element
.ui-­‐state-­‐ac?ve
When
a
clickable
element
is
selected
.ui-­‐state-­‐highlight
Highlighted
elements
.ui-­‐state-­‐disabled
Disabled
elements
.ui-­‐icon
Elements
that
represent
icons

25. Theme Anatomy
ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: 1.5em;
}
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Verdana,Arial,sans-serif;
font-size: 1em;
}
.ui-widget-content {
border: 1px solid #ce1212;
background: #121212 url(images/ui-bg_gloss-
wave_16_121212_500x100.png) 50% top repeat-x;
color: #eeeeee;
}
.ui-widget-content a {
color: #eeeeee;
}
...

26. Theme Anatomy
.ui-datatable table {
border-collapse:collapse;
width: 100%;
}
.ui-datatable .ui-datatable-header,
.ui-datatable .ui-datatable-footer {
text-align:center;
padding:4px 10px;
}
.ui-datatable .ui-datatable-header {
border-bottom: 0px none;
}
.ui-datatable .ui-datatable-footer {
border-top: 0px none;
}
.ui-datatable th, .ui-datatable tfoot td {
text-align:center;
white-space:nowrap;
padding:0px;
margin:0px;
overflow: hidden;
}
...

27. Overriding CSS Selectors
/* Theme */
.ui-widget {
font-family: Trebuchet MS, sans-serif;
font-size: 1em;
}
.ui-widget .ui-widget {
font-size: .8em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
font-family: Trebuchet MS, sans-serif;
font-size: 1em;
}
.ui-widget-content {
border: 3px solid #ce1212;
}
.ui-widget-header {
border: 3px solid #404040;
}

28. Overriding CSS Selectors
/* DataTable */
.ui-datatable .ui-datatable-header,
.ui-datatable .ui-datatable-footer {
text-align:left;
padding:3px 8px;
}
.ui-datatable th, .ui-datatable tfoot td {
text-align:left;
}
.ui-datatable .ui-datatable-data td,
.ui-datatable .ui-datatable-data-empty td {
border-width: 3px;
border-style: dotted;
padding:2px;
}

29. Overriding CSS Selectors
/* Structural selectors for Panel only */
.ui-panel.ui-widget-content {
font-size: 1.2em;
color: yellow;
}
/* Structural selectors for a specific panel */
.tiny-font-panel.ui-widget-content {
font-size: .5em;
}

30. Demo: CSS

31. Training
Support
Consulting
Enterprise
PrimeTek Informatics