Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain...
Transcript of Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain...
Kito D. Mann
Principal Consultant
Advanced PrimeFaces
Kito D. Mann @kito99
» Principal Consultant at Virtua (http://virtua.tech)
» Training, consulting, architecture, mentoring
» JSF, Java EE, Polymer/Web Components, Angular
» Official US PrimeFaces and PrimeNG partner
» Author, JavaServer Faces in Action
» Founder, JSF Central (http://www.jsfcentral.com)
Copyright (C) 2012-18 Virtua, Inc. All rights reserved.
Kito D. Mann @kito99
» Co-host, Enterprise Java Newscast (http://enterprisejavanews.com)
» Java Champion
» Google Developer Expert in Web Technologies
» Internationally recognized speaker
» JavaOne, JavaZone, Devoxx, Devnexus, NFJS, etc.
» JCP Member
» JSF, MVC, JSF Portlet Bridge, Portlets
Copyright (C) 2012-18 Virtua, Inc. All rights reserved.
What’s new in PrimeFaces 6-
6.1 New components:
Organigram TriStateCheckbox
Chips TimeLine
InputNumber KeyFilter
ImportEnum ImportConstants
Knob
Copyright (C) 2012-18 Virtua, Inc. All rights reserved.
What’s new in PrimeFaces 6-
6.1 DataTable enhancements
» Virtual scrolling
» TableState API
Options PDF and API for DataExporter
Omega theme (replaces Aristo)
Accessibility improvements
Hundreds of bug fixes
Copyright (C) 2012-18 Virtua, Inc. All rights reserved.
What’s new in PrimeFaces 6.2
AutoUpdate (<p:autoUpdate>)
InputGroup
Sidebar
Context parameter: primefaces.MOVE_SCRIPTS_TO_BOTTOM
Bug fixes
Copyright (C) 2012-18 Virtua, Inc. All rights reserved.
Dissecting PrimeFaces
Components
Copyright (C) 2012 Virtua, Inc. All rights reserved.
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
Demo:
Component
Anatomy
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.
Component Modification
Approaches » Java
» Composite components
» Subclassing the Java class
» Patching the Java class
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Component Modification
Approaches » JavaScript
» Overriding a method
» Extending a method
» Patching the JS file
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Demo:
Customizing
Components
Dissecting PrimeFaces
CSS
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Theme Anatomy
» Components have Structural CSS
» Not part of theme
» Padding
» Layout
» Margin
» Dimensions
» Specific component selectors are covered in the documentation
Theme Anatomy
» Themes contain Skinning CSS
» Colors (border, active, highlight, header, etc.)
» Borders
» Fonts
» Overlays
» Drop shadows
Theme Anatomy Selector Applies To
.ui-widget All PrimeFaces components
.ui-widget-header Header section of a component
.ui-widget-content Content section of a component
.ui-state-default Default class of a clickable element
.ui-state-hover Hover class of a clickable element
.ui-state-active When a clickable element is selected
.ui-state-highlight Highlighted elements
.ui-state-disabled Disabled elements
.ui-icon Elements that represent icons
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;
}
...
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;
}
...
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;
}
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;
}
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;
}
Handling Ajax Errors
» Exception in Java code
» Exception in JavaScript code
» Ajax timeouts
Copyright (C) 2012 Virtua, Inc. All rights reserved.
Demo:
Error Handling
Demo:
PrimeFaces Server
APIs
Training Support Consulting
Enterprise
PrimeTek