Platinum Sponsor Kito D Mann Principal Consultant Kito

Platinum Sponsor Kito D. Mann Principal Consultant

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

Kito D. Mann @kito 99 » Co-host, Enterprise Java Newscast » http: //enterprisejavanews. com » Internationally recognized speaker » Java. One, Java. Zone, Devoxx, NFJS, TSSJS, etc. » JCP Member » JSF, Web. Beans, JSF Portlet Bridge, Portlets Copyright (C) 2012 Virtua, Inc. All rights reserved.

Who uses Prime. Faces?

Who uses Prime. Faces?

Who uses Prime. Faces?

Who uses Prime. Faces?

Who uses Prime. Faces?

Popularity

Global Colombia

100+ UI Components

Advanced UIs

Form Components

Hide Complexity CSS JS JSON AJAX Keep Flexibility <p: tab. View on. Tab. Change=”handle. Tab. Change()”> <p: ajax event=”change” listener=”#{bean. on. Tab. Change}” update=”comp” /> //tabs </p: tab. View> CSS Override JS API Client Callbacks Ajax Callbacks

Anatomy of a Component Page Markup Script <p: schedule id="schedule" value="#{schedule. View. event. Model}" widget. Var="myschedule"> <div id=”form: sch”> … </div> <script type=”text/javascript”> $(function() {Prime. Faces. cw("Schedule", "myschedule", {id: ”form: schedule", widget. Var: "myschedule", default. View: "month", locale: "en”, offset: 0, header: {left: 'prev, next, today', center: "title", right: "month, agenda. Week, agenda. Day”}, "schedule"); }); </script>

HTML 5 data-* canvas websockets forms media

Prime. Faces Ajax Server APIs: Standard JSF 2 Client APIs:

Prime. Faces Ajax f: ajax p: ajax onevent oncomplete onerror onstart onsuccess async global

f: ajax p: ajax <f: ajax event=“blur” render=“user. Component” execute=“@this”/> <p: ajax event=“blur” update=“user. Component” process=“@this”/> a 4 j: ajax (Rich. Faces 3. x) <a 4 j: support event=“blur” re. Render=“user. Component”/>

Ajax Extensions p: ajax auto. Update Callbacks Selectors Request Context Ajax. Status partial. Submi t

Ajax. Status Declarative <p: ajax. Status> <f: facet name=”start”> <p: graphic. Image value=”fancyanimation. gif” /> </f: facet> <f: facet name=”complete”> <h: output. Text value=”Request Completed” /> </f: facet> </p: ajax. Status> Programmatic <p: ajax. Status onstart=”dialog. show()” oncomplete=”dialog. hide()” /> Global <p: command. Button global=”true|false” />

Request. Context - Scripts Page <p: command. Button value=”Submit” action=”#{bean. save}” /> <p: dialog widget. Var=”dialog. Widget”. . . /> Bean public void save() { Request. Context rc = Request. Context. get. Current. Instance(); rc. execute(“PF(‘dialog. Widget’). hide()”); }

Request. Context - Update Page <p: command. Button value=”Submit” action=”#{bean. save}” /> <h: output. Text id=”val” value=”#{bean. property}” /> Bean public void save() { Request. Context rc = Request. Context. get. Current. Instance(); rc. add. Partial. Update. Target(“val”); } or <p: command. Button value=”Submit” action=”#{bean. save}” update=”val” /> <h: output. Text id=”val” value=”#{bean. property}” />

Request. Context - Scroll Page <p: command. Button value=”Submit” action=”#{bean. save}” /> <h: output. Text id=”val” value=”#{bean. property}” /> Bean public void save() { Request. Context rc = Request. Context. get. Current. Instance(); rc. scroll. To(“val”); }

Auto. Update <p: growl id=”messages” /> <p: command. Button value=”Save” update=”messages” /> <p: command. Button value=”Update” update=”messages” /> <p: command. Button value=”Delete” update=”messages” /> <p: growl id=”messages” auto. Update=”true”/> <p: command. Button value=”Save” /> <p: command. Button value=”Update” /> <p: command. Button value=”Delete” />

Partial. Submit False Post Data: javax. faces. partial. ajax=true&javax. faces. source= form%3 Aj_idt 18&javax. faces. partial. execute=form%3 A name&javax. faces. partial. render=form%3 Adisplay&for m%3 Aj_idt 18=form%3 Aj_idt 18&form=form&form%3 An ame=&form%3 Aj_idt 20=&form%3 Aj_idt 22=&form%3 Aj _idt 24=&form%3 Aj_idt 26=&form%3 Aj_idt 28=&form%3 Aj_idt 30=&form%3 Aj_idt 32=&form%3 Aj_idt 34=&form %3 Aj_idt 36=&form%3 Aj_idt 38=&form%3 Aj_idt 40=&for m%3 Aj_idt 42=&form%3 Aj_idt 44=&form%3 Aj_idt 46=&f orm%3 Aj_idt 48=&form%3 Aj_idt 50=&form%3 Aj_idt 52= &form%3 Aj_idt 66=&form%3 Aj_idt 68=&form%3 Aj_idt 70 =&form%3 Aj_idt 72=&form%3 Aj_idt 74=&form%3 Aj_idt 76=&form%3 Aj_idt 78=&form%3 Aj_idt 80=&form%3 Aj_i dt 82=&form%3 Aj_idt 84=&form%3 Aj_idt 86=&form%3 Aj _idt 88=&form%3 Aj_idt 90=&form%3 Aj_idt 92=&form%3 Aj_idt 94=&form%3 Aj_idt 96=&form%3 Aj_idt 98=&javax. faces. View. State=7916482521909421983%3 A 2156051337299048496 True Post Data: javax. faces. partial. ajax=true&javax. faces. source=f orm%3 Aj_idt 18&javax. faces. partial. execute=form%3 An ame&javax. faces. partial. render=form%3 Adisplay&form %3 Aj_idt 18=form%3 Aj_idt 18&form=form&form%3 Anam e=&javax. faces. View. State=7916482521909421983%3 A-2156051337299048496

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

Resource Handling Optimizations Minify Merge and Compress On The Fly Loading

Themes

Install a Theme Add primefaces-{themename}. jar Configure <context-param> <param-name>primefaces. THEME</param-name> <param-value>{themename}</param-value> </context-param>

Roll Your Own

Advanced Themes

Demo: Showcase

Client-side Validation <h: form> <p: messages /> <p: input. Text required="true" /> <p: input. Textarea required="true" /> <p: command. Button value="Save" validate. Client="true" ajax="false"/> </h: form> Copyright (C) 2012 Virtua, Inc. All rights reserved.

Instant Validation with Events <h: form> <h: panel. Grid columns="4" cellpadding="5"> <h: output. Label for="text" value="Text: (Change)" /> <p: input. Text id="text" value="#{validation. Bean. text}" required="true"> <f: validate. Length minimum="2" maximum="5" /> <p: client. Validator /> </p: input. Text> <p: message for="text" display="icon" /> <h: output. Text value="#{validation. Bean. text}" /> <h: output. Label for="integer" value="Integer: (Keyup)" /> <p: input. Text id="integer" value="#{validation. Bean. integer}"> <p: client. Validator event="keyup"/> </p: input. Text> <p: message for="integer" display="icon" /> <h: output. Text value="#{validation. Bean. integer}" /> </h: panel. Grid> <p: command. Button value="Save" ajax="false" icon="ui-icon-check" validate. Client="true"/> </h: form> Copyright (C) 2012 Virtua, Inc. All rights reserved.

Client-side Validation Messages are fully integrated API for writing custom client-side validators and converters Locale object available in Java. Script Copyright (C) 2012 Virtua, Inc. All rights reserved.

Bean Validation Integration public class Bean { <p: input. Text value="#{bean. firstname}" /> @Not. Null @Max(30) private String name; … } <input type="text" maxlength="30" … /> Copyright (C) 2012 Virtua, Inc. All rights reserved.

Other Features Java. Script API Accessibility Right-to-left support Exception handler Dialog framework Page authorization Prime. Faces Extensions … Copyright (C) 2012 Virtua, Inc. All rights reserved.

Prime. Faces Mobile

Prime. Faces Mobile 8 Core Components 20+ Prime. Faces Components Gestures Mobile navigation

Prime. Faces Mobile <f: view render. Kit. Id="PRIMEFACES_MOBILE" /> <h: head> </h: head> <h: body> <pm: page id="main"> <pm: header title="Main Page"></pm: header> <pm: content> …. </pm: content> </pm: page> <pm: page id="second"> <pm: header title="Second Page"></pm: header> <pm: content> … </pm: content> </pm: page> </h: body>

Prime. Faces Mobile

Demo: Mobile

Prime. Faces Push JSF APP Prime. Faces Push. Servlet

Prime. Faces Push Atmosphere

Prime. Faces Push Page <h: form> <h: output. Text value="#{counter. View. count}" style. Class="display" /> <p: command. Button value="Click" action. Listener="#{counter. View. increment}" /> </h: form> <p: socket on. Message="handle. Message" channel="/counter" /> Bean public void increment() { count++; Event. Bus event. Bus = Event. Bus. Factory. get. Default(). event. Bus(); event. Bus. publish("/counter", String. value. Of(count)); }

Prime. Faces Push @Push. Endpoint("/counter") public class Counter. Resource { Endpoint @On. Message(encoders = {JSONEncoder. class}) public String on. Message(String count) { return count; } } Callback <script type=”text/javascript”> function handle. Message(data) { $('. display'). html(data); } </script>

Demo: Push

Portlets

Documentation 550+ Pages

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

Community

Bundled with Net. Beans

Enterprise Prime. Tek Informatics Support Training Consulting