prime faces

61
RAPID RIA with CAGATAY CIVICI 04.12.09 PRIME FACES

Upload: alessandro

Post on 30-Oct-2014

72 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Prime Faces

RAPID RIA with

CAGATAY CIVICI04.12.09

PRIMEFACES

Page 2: Prime Faces

Cagatay Civici

• Apache MyFaces PMC• PrimeFaces Founder and Lead• Atmosphere (Comet) Committer• Author&Technical Reviewer• Regular speaker (JSFSummit, JSFDays)• Consultant, Instructor, Mentor

Page 3: Prime Faces

What IS THIS ALL ABOUT?

• Web Application Development with JSF• PrimeFaces• AJAX• Ajax Push/Reverse Ajax/Comet• RIA• Mobile Devices, IPhone, Android ...• Google Guice and JPA

Page 4: Prime Faces

JSF

• Standard (JSR)• Component Oriented• Latest JSF 2.0• Vendor support• Tools• Extension Frameworks

Page 5: Prime Faces

• Open Source Component Suite• Mobile Extensions• Ajax Push/Comet• Compatible&Lightweight• PrimeFaces-Ext (Optimus&FacesTrace)

PRIMEFACESOverview

Page 6: Prime Faces

History

• Started November 2008• 1 year old• Monthly releases• Current

• 1.0.0.RC for JSF 1.2• 2.0.0.RC for JSF 2.0

Page 7: Prime Faces

UI Components• 70+ Rich set of components• Built-in Ajax• Partial Page Rendering• Ajax Push/Comet• YUI and JQuery• TouchFaces - Mobile UI Kit• Simple Design• Lightweight• Compatible with “others”• Unobstrusive Javascript

Page 8: Prime Faces

Advanced UI - Mock OS X

Page 9: Prime Faces

Simple setup

• Resource Servlet• Namespace• p:resources• Let’s Rock

Page 10: Prime Faces

Resource Servlet

<servlet>! <servlet-name>Resource Servlet</servlet-name>! <servlet-class>! ! org.primefaces.resource.ResourceServlet! </servlet-class>! <load-on-startup>1</load-on-startup></servlet>

<servlet-mapping>! <servlet-name>Resource Servlet</servlet-name>! <url-pattern>/primefaces_resource/*</url-pattern></servlet-mapping>

• Streaming and Caching (js, css, images)

Page 11: Prime Faces

p:resources

• Renders <link />, <script />• No hacks to <head />

<head><p:resources />

</head>

Page 12: Prime Faces

Try IT

<html xmlns="http://www.w3.org/1999/xhtml"xmlns:p="http://primefaces.prime.com.tr/ui">

<head>! <p:resources /></head>

<body>! <p:editor /></body>

</html>

Page 13: Prime Faces

EASY ajax

• Ajax without javascript• Partial Page Rendering• Flexible (callbacks)• Ajax components• No different than regular process

Page 14: Prime Faces

PPR - Hello world

public class GreetingBean {private String name;

//getters&setters}

<h:form><h:inputText value=”#{greetingBean.name}” /><h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

<p:commandButton value=”Ajax Submit” /></h:form>

Page 15: Prime Faces

Declarative ajaxpublic class GreetingBean {

private String name;

//getters&setters}

<h:form><h:inputText value=”#{greetingBean.name}” /><h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

<p:commandButton value=”Ajax Submit” update=”name” /></h:form>

Page 16: Prime Faces

Ajax Status

• Declarative

• Programmatic

<p:ajaxStatus>! ! <f:facet name="start">! ! ! <p:graphicImage value="fancyanimation.gif" />! ! </f:facet>! ! ! ! ! ! !! ! <f:facet name="complete">! ! ! <h:outputText value="Request Completed" />! ! </f:facet></p:ajaxStatus>

<p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />

Page 17: Prime Faces

Ajax validations

• Server validates, Client presents<h:messages id=”msg” />

<h:inputText value=”#{greetingBean.name}” required=”true”/><h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

<p:commandButton value=”Ajax Submit” update=”name, msg” />

Page 18: Prime Faces

p:ajax

• Generic ajax component• Ajaxify standard components• Attach to dom events (eg ‘blur’)

<h:inputText value=”#{greetingBean.name}”><p:ajax event=”blur” update=”name” />

</h:inputText>

<h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

Page 19: Prime Faces

Ajax remoting

• Execute java methods

<h:form><h:inputText value=”#{greetingBean.name}” /><h:outputText id=”name” value=”Hi: #{greetingBean.name}” />

<p:commandButton value=”Ajax Submit” actionListener=”#{greetingBean.changeName}” />

</h:form>

public class GreetingBean {...public void uppercase(ActionEvent event) {

name = name.toUpperCase();}

}

Page 20: Prime Faces

PPR Summary

• Simple• Easy to Use• Flexible• Responsive• Fast

Ajax ViewHandler

Ajax StateManager

Ajax Servlet Filter

Ajax ViewRoot

DOM Tree Copy on Server

Partial Triggers

HTML Parser

Ajax Context

PPRPanel Ajax Regions

No need for ...

Page 21: Prime Faces

PPR Demo

Page 22: Prime Faces

There’s a COMP for thataccordionPanel

ajaxStatus

autoComplete

breadCrumb

captcha

calendar

carousel

charts

collector

colorPicker

dataTable

commandButtoncommandLink

confirmDialog

dataExporter

dialog

drag&drop

dock

editor

effect

fileDownload

fileUploaddynamicImage

growlhotkey

idleMonitor

imageCropper

imageSwitch

inplace

inputMask

keyboard

layout

lightBox

linkButtonmediamenu

menubarmessage

messages

outputPanel

panel

passwordStrength

pickList

poll

printer

pushrating

remoteCommand

resizableresource

resourcesslider

spinner

stack

tabSlider

tabView

terminal

tooltiptree

uiajax

wizard

watermark

Page 23: Prime Faces

Component SUITE Demo

Page 24: Prime Faces

Ajax Push/Comet

• Http-Streaming or Long-Polling• Built on top of Atmosphere• <p:push />• CometContext.publish(...);

Page 25: Prime Faces

Techniques

Page 26: Prime Faces

Atmosphere

• Portable Comet Framework• Write once, deploy anywhere• Even easier than Servlet 3.0• Reference JSF Integration: PrimeFaces

Page 27: Prime Faces

Chat App in 1Minute

<h:form><h:inputText value=”#{chatController.message}” /><p:commandButton value=”Send” actionListener=”#{chatController.send}” />

</h:form><p:outputPanel id=”display” />

<p:push channel=”chat” onpublish=”handlePublish” />

<script type=”text/javascript”>function handlePublish(data) {! $('#display').append(data);}</script>

public class ChatController {

private String message;

public void send(ActionEvent event) {CometContext.publish(message);

}//getters setters

}

Page 28: Prime Faces

TouchFaces

• Mobile UI Kit• WebKit browsers• IPhone, Android, Palm...• Native IPhone UI• Integrated Ajax• Regular JSF

PathFinder

Page 29: Prime Faces

TouchFaces UI

• Special Components• <i:application />• <i:view />• <i:tableView />• <i:rowGroup />• <i:rowItem />• <i:switch />

Page 30: Prime Faces

TouchFaces in ACtion

Translate Chat - Ajax Push PathFinder - GPS TwitFaces

Weather Notes News

Page 31: Prime Faces

TouchFaces DEMO

Page 32: Prime Faces

Comparison with Others

• Lighter• Simpler• Compatible• Ease of Use• From app developers to app developers

Page 33: Prime Faces

Optimus

• Non-UI

• Dump JSF Managed Beans

• Google Guice Integration

• JPA support

• Orchestrates JSF-Guice-JPA

• AOP, Security, Navigation extensions

Page 34: Prime Faces

Google GUICE

• Guice aware JSF backing beans• @Controller• No xml• AOP support• Constructor, Setter, Field injection

Page 35: Prime Faces

Optimus Controllers

package com.mycompany.project;

@Controller(“name=greetingBean“, scope=Scope.REQUEST)public class GreetingBean {

private String name;//getters&setters

}

<h:inputText value=”#{greetingBean.name}” />

faces-config.xml

GreetingBean.java

greeting.xhtml

Page 36: Prime Faces

Dependency Injection

public interface GreetingService {

public void sayHi(String name);

}

public class GreetingServiceConsole implements GreetingService {

public void sayHi(String name) {System.out.println(“Hello ” + name);

}

}

Page 37: Prime Faces

Optimus Injection

@Controller(“name=greetingBean“, scope=Scope.REQUEST) public class GreetingBean {

@Injectprivate GreetingService greetingService;

}

faces-config.xml

GreetingBean.java

Page 38: Prime Faces

@Inject

• Setter Injection• Constructor Injection• Field Injection

Page 39: Prime Faces

Setter Injection@Controller(“name=greetingBean“, scope=Scope.REQUEST)

public class GreetingBean {

private GreetingService greetingService;

@Injectpublic void setGreetingService(GreetingService greetingService) {

this.greetingService = greetingService;}public GreetingService getGreetingService() {

return greetingService;}...

}

Page 40: Prime Faces

Construction injection@Controller(“name=greetingBean“, scope=Scope.REQUEST)

public class GreetingBean {

private GreetingService greetingService;

@Injectpublic void GreetingBean(GreetingService greetingService) {

this.greetingService = greetingService;}...

}

Page 41: Prime Faces

Field injection@Controller(“name=greetingBean“, scope=Scope.Request)

public class GreetingBean {

@Injectprivate GreetingService greetingService;

...}

Warning: Bad practice for testing :)

Page 42: Prime Faces

ViewSCOPE

• Between request and session scope@Controller(“name=greetingBean“, scope=Scope.VIEW)

public class GreetingBean {...

}

Page 43: Prime Faces

Context Helpers

• Abstracts coding against FacesContext

• Use interfaces

• Testable, no npe in testing

• FacesMessages

• Params

• Session

Page 44: Prime Faces

Regular Waypublic class GreetingBean {

! public String loginClicked() {! ! boolean isValidUser = loginService.login(username, password);

! ! if(isValidUser) {! ! ! return "mainpage";! ! } else {! ! ! //Evil code that makes your backing bean untestable! ! ! FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "Invalid login", "Wrong username/password combination");! ! ! FacesContext.getCurrentInstance().add(null, message);! ! ! //End of evil code

! ! ! return "failed";! ! }! }

Page 45: Prime Faces

Testable way@Controller(“name=greetingBean“, scope=Scope.VIEW)

public class GreetingBean {

@Injectprivate FacesMessages messages;

! public String loginClicked() {! ! boolean isValidUser = loginService.login(username, password);

! ! if(isValidUser) {! ! ! return "mainpage";! ! } else {! ! ! messages.addError("Invalid login", "Wrong username/password combination"); return "failed";! ! }! }}

Page 46: Prime Faces

Security Extensions

• AuthContext• Page Level• Method Level

Page 47: Prime Faces

Page Security

• EL extensions

• #{authContext.username}• ifGranted, ifAllGranted, ifAnyGranted,

ifNonGranted

<p:commandButton value=”Delete” action=”#{bean.delete}” rendered=”#{authContext.ifAllGranted[‘admin,editor’]}” />

Page 48: Prime Faces

Method Securitypublic class ItemController {

public void deleteItem(ActionEvent event) {if(Utils.isUserInRole(‘admin,editor’))

throw new SecurityException();else

//delete item}

}

@Controller(“name=greetingBean“, scope=Scope.VIEW)public class ItemController {

@Authorize(“admin,editor”)public void deleteItem(ActionEvent event) {

//delete item}

}

Page 49: Prime Faces

JPA Support

• Warp-Persist Integrationpublic class GreetingServiceJPA implements GreetingService {

@Injectprivate Provider<EntityManager> em;

@Transactionalpublic void sayHi(String name) {

em.get().persist(...);}

}

Page 50: Prime Faces

Implicit navigations

• No more XML• Convention over Configuration• Inspired JSF 2.0 navigations

Page 51: Prime Faces

Optimus Navigations

userDetail

faces-config.xml

userList.xhtml userDetail.xhtml<h:commandButton value =”Detail” action=”userDetail” />

Page 52: Prime Faces

FAcesTrace

• Trace Debug tool• Lifecycle visualizer• Performance tracker• DHTML Component Tree

Page 53: Prime Faces

FacesTrace demo

Page 54: Prime Faces

Integrate with

• Seam, Spring, Guice ...• Examples

• BookStore (PF-Optimus-Guice-JPA)• PhoneBook (PF-Seam-JPA)• MovieCollector (PF-Spring-JPA)

Page 55: Prime Faces

Documentation

• Reference Documentation (300 pages)

• Wiki• Screencasts• API&TLD Docs

Page 56: Prime Faces

Support• http://primefaces.prime.com.tr/forum • Very active (20 posts per day, 3000+ members)

Page 57: Prime Faces

Enterprise Support

• 2/4 hour average response time• Priority forum• Ticket based support portal• IM support over skype• JSF specific help

Page 58: Prime Faces

What’s next

• More UI Components targeting 100+• IDE Support (PrimeIDE)• Pushing the limits of JSF

Page 59: Prime Faces

Upcoming UI

• Organizer (iCal, Outlook)• TreeTable• Context Menu• Gesture• ProgressBar• ...more

Page 60: Prime Faces

Finale

[email protected]• Twitter: @cagataycivici, @primefaces• http://cagataycivici.wordpress.com• http://primefaces.prime.com.tr• https://atmosphere.dev.java.net/

Page 61: Prime Faces

Questions

and hopefully answers