1. Kito D. Mann Principal Consultant Advanced PrimeFaces

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

3. Kito D. Mann @kito99 »Co-host, Enterprise Java Newscast »http://enterprisejavanews.comhttp://enterprisejavanews.com »Internationally 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 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 partialSubmi t Ajax Extensions

9. Ajax Update Keywords Copyright (C) 2012 Virtua, Inc. All rights reserved. KeywordType @thisStandard @formStandard @noneStandard @namingcontainerPrimeFaces @parentPrimeFaces @compositePrimeFaces @child(n)PrimeFaces @previousPrimeFaces @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= form%3Aj_idt18&javax.faces.partial.execute=form%3A name&javax.faces.partial.render=form%3Adisplay&for m%3Aj_idt18=form%3Aj_idt18&form=form&form%3An ame=&form%3Aj_idt20=&form%3Aj_idt22=&form%3Aj _idt24=&form%3Aj_idt26=&form%3Aj_idt28=&form%3 Aj_idt30=&form%3Aj_idt32=&form%3Aj_idt34=&form %3Aj_idt36=&form%3Aj_idt38=&form%3Aj_idt40=&for m%3Aj_idt42=&form%3Aj_idt44=&form%3Aj_idt46=&f orm%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_idt 76=&form%3Aj_idt78=&form%3Aj_idt80=&form%3Aj_i dt82=&form%3Aj_idt84=&form%3Aj_idt86=&form%3Aj _idt88=&form%3Aj_idt90=&form%3Aj_idt92=&form%3 Aj_idt94=&form%3Aj_idt96=&form%3Aj_idt98=&javax. faces.ViewState=7916482521909421983%3A- 2156051337299048496 False Post Data:javax.faces.partial.ajax=true&javax.faces.source=f orm%3Aj_idt18&javax.faces.partial.execute=form%3An ame&javax.faces.partial.render=form%3Adisplay&form %3Aj_idt18=form%3Aj_idt18&form=form&form%3Anam e=&javax.faces.ViewState=7916482521909421983%3 A-2156051337299048496 True

12. Controlling Ajax Updates » »autoUpdate attribute 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 //tabs //tabs CSS Override CSS Override JS API JS API Client Callbacks Client Callbacks Ajax Callbacks Ajax Callbacks CSS JS AJAX JSON

16. Demo:ComponentAnatomy

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 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:CustomizingComponents

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 documentation

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

24. Theme Anatomy SelectorApplies To.ui-widgetAll PrimeFaces components.ui-widget-headerHeader section of a component.ui-widget-contentContent section of a component.ui-state-defaultDefault class of a clickable element.ui-state-hoverHover class of a clickable element.ui-state-activeWhen a clickable element is selected.ui-state-highlightHighlighted elements.ui-state-disabledDisabled elements.ui-iconElements 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