Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain...

27
Kito D. Mann Principal Consultant Advanced PrimeFaces

Transcript of Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain...

Page 1: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Kito D. Mann

Principal Consultant

Advanced PrimeFaces

Page 2: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 3: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 4: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 5: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 6: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 7: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Dissecting PrimeFaces

Components

Copyright (C) 2012 Virtua, Inc. All rights reserved.

Page 8: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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

Page 9: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Demo:

Component

Anatomy

Page 10: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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.

Page 11: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Component Modification

Approaches » Java

» Composite components

» Subclassing the Java class

» Patching the Java class

Copyright (C) 2012 Virtua, Inc. All rights reserved.

Page 12: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Component Modification

Approaches » JavaScript

» Overriding a method

» Extending a method

» Patching the JS file

Copyright (C) 2012 Virtua, Inc. All rights reserved.

Page 13: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Demo:

Customizing

Components

Page 14: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Dissecting PrimeFaces

CSS

Copyright (C) 2012 Virtua, Inc. All rights reserved.

Page 15: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Theme Anatomy

» Components have Structural CSS

» Not part of theme

» Padding

» Layout

» Margin

» Dimensions

» Specific component selectors are covered in the documentation

Page 16: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Theme Anatomy

» Themes contain Skinning CSS

» Colors (border, active, highlight, header, etc.)

» Borders

» Fonts

» Overlays

» Drop shadows

Page 17: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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

Page 18: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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;

}

...

Page 19: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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;

}

...

Page 20: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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;

}

Page 21: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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;

}

Page 22: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

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;

}

Page 23: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Handling Ajax Errors

» Exception in Java code

» Exception in JavaScript code

» Ajax timeouts

Copyright (C) 2012 Virtua, Inc. All rights reserved.

Page 24: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Demo:

Error Handling

Page 25: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Demo:

PrimeFaces Server

APIs

Page 26: Advanced PrimeFaces - developermarch.com · the documentation . Theme Anatomy » Themes contain Skinning CSS » Colors (border, active, highlight, header, etc.) » Borders » Fonts

Training Support Consulting

Enterprise

PrimeTek