prime faces
Post on 30-Oct-2014
73 Views
Preview:
TRANSCRIPT
RAPID RIA with
CAGATAY CIVICI04.12.09
PRIMEFACES
Cagatay Civici
• Apache MyFaces PMC• PrimeFaces Founder and Lead• Atmosphere (Comet) Committer• Author&Technical Reviewer• Regular speaker (JSFSummit, JSFDays)• Consultant, Instructor, Mentor
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
JSF
• Standard (JSR)• Component Oriented• Latest JSF 2.0• Vendor support• Tools• Extension Frameworks
• Open Source Component Suite• Mobile Extensions• Ajax Push/Comet• Compatible&Lightweight• PrimeFaces-Ext (Optimus&FacesTrace)
PRIMEFACESOverview
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
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
Advanced UI - Mock OS X
Simple setup
• Resource Servlet• Namespace• p:resources• Let’s Rock
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)
p:resources
• Renders <link />, <script />• No hacks to <head />
<head><p:resources />
</head>
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>
EASY ajax
• Ajax without javascript• Partial Page Rendering• Flexible (callbacks)• Ajax components• No different than regular process
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>
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>
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’)” />
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” />
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}” />
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();}
}
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 ...
PPR Demo
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
Component SUITE Demo
Ajax Push/Comet
• Http-Streaming or Long-Polling• Built on top of Atmosphere• <p:push />• CometContext.publish(...);
Techniques
Atmosphere
• Portable Comet Framework• Write once, deploy anywhere• Even easier than Servlet 3.0• Reference JSF Integration: PrimeFaces
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
}
TouchFaces
• Mobile UI Kit• WebKit browsers• IPhone, Android, Palm...• Native IPhone UI• Integrated Ajax• Regular JSF
PathFinder
TouchFaces UI
• Special Components• <i:application />• <i:view />• <i:tableView />• <i:rowGroup />• <i:rowItem />• <i:switch />
TouchFaces in ACtion
Translate Chat - Ajax Push PathFinder - GPS TwitFaces
Weather Notes News
TouchFaces DEMO
Comparison with Others
• Lighter• Simpler• Compatible• Ease of Use• From app developers to app developers
Optimus
• Non-UI
• Dump JSF Managed Beans
• Google Guice Integration
• JPA support
• Orchestrates JSF-Guice-JPA
• AOP, Security, Navigation extensions
Google GUICE
• Guice aware JSF backing beans• @Controller• No xml• AOP support• Constructor, Setter, Field injection
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
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);
}
}
Optimus Injection
@Controller(“name=greetingBean“, scope=Scope.REQUEST) public class GreetingBean {
@Injectprivate GreetingService greetingService;
}
faces-config.xml
GreetingBean.java
@Inject
• Setter Injection• Constructor Injection• Field Injection
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;}...
}
Construction injection@Controller(“name=greetingBean“, scope=Scope.REQUEST)
public class GreetingBean {
private GreetingService greetingService;
@Injectpublic void GreetingBean(GreetingService greetingService) {
this.greetingService = greetingService;}...
}
Field injection@Controller(“name=greetingBean“, scope=Scope.Request)
public class GreetingBean {
@Injectprivate GreetingService greetingService;
...}
Warning: Bad practice for testing :)
ViewSCOPE
• Between request and session scope@Controller(“name=greetingBean“, scope=Scope.VIEW)
public class GreetingBean {...
}
Context Helpers
• Abstracts coding against FacesContext
• Use interfaces
• Testable, no npe in testing
• FacesMessages
• Params
• Session
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";! ! }! }
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";! ! }! }}
Security Extensions
• AuthContext• Page Level• Method Level
Page Security
• EL extensions
• #{authContext.username}• ifGranted, ifAllGranted, ifAnyGranted,
ifNonGranted
<p:commandButton value=”Delete” action=”#{bean.delete}” rendered=”#{authContext.ifAllGranted[‘admin,editor’]}” />
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}
}
JPA Support
• Warp-Persist Integrationpublic class GreetingServiceJPA implements GreetingService {
@Injectprivate Provider<EntityManager> em;
@Transactionalpublic void sayHi(String name) {
em.get().persist(...);}
}
Implicit navigations
• No more XML• Convention over Configuration• Inspired JSF 2.0 navigations
Optimus Navigations
userDetail
faces-config.xml
userList.xhtml userDetail.xhtml<h:commandButton value =”Detail” action=”userDetail” />
FAcesTrace
• Trace Debug tool• Lifecycle visualizer• Performance tracker• DHTML Component Tree
FacesTrace demo
Integrate with
• Seam, Spring, Guice ...• Examples
• BookStore (PF-Optimus-Guice-JPA)• PhoneBook (PF-Seam-JPA)• MovieCollector (PF-Spring-JPA)
Documentation
• Reference Documentation (300 pages)
• Wiki• Screencasts• API&TLD Docs
Support• http://primefaces.prime.com.tr/forum • Very active (20 posts per day, 3000+ members)
Enterprise Support
• 2/4 hour average response time• Priority forum• Ticket based support portal• IM support over skype• JSF specific help
What’s next
• More UI Components targeting 100+• IDE Support (PrimeIDE)• Pushing the limits of JSF
Upcoming UI
• Organizer (iCal, Outlook)• TreeTable• Context Menu• Gesture• ProgressBar• ...more
Finale
• cagatay@apache.org• Twitter: @cagataycivici, @primefaces• http://cagataycivici.wordpress.com• http://primefaces.prime.com.tr• https://atmosphere.dev.java.net/
Questions
and hopefully answers
top related