primetime jsf with primefaces - dec 2014
Post on 15-Jul-2015
1.750 Views
Preview:
TRANSCRIPT
ÇAĞATAY ÇİVİCİ
Çağatay Çivici
JSF Expert Group Member (JSR 314, 344 and 372)
PrimeFaces Architect and Lead Developer
Apache MyFaces PMC
Speaker, Author, Reviewer
Founder of PrimeTek Bilişim
Nickname: optimus.prime
PrimeTek BilişimJava EE and OSS
Consulting
Training
Delivery
www.primetek.com.tr
6 years old
Lightweight
Easy to Use
Only 1 Jar
No required dependencies
Zero Config
Who Uses PrimeFaces?
Who Uses PrimeFaces?
Who Uses PrimeFaces?
PrimeFaces in the Wild
PrimeFaces vs *Faces
PrimeFaces vs Vaadin
Global
100+ UI Components
Mock OS X
Form Components
Browser Support
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
Anatomy of a Component<p:schedule id=”sch” value=”#{bean.model}” editable=”true” />
<div id=”sch”></div>
<script type=”text/javascript”> scheduleWidget = new PrimeFaces.widget.Schedule(‘sch’, {editable:true});
</script>
You get:
JSF
Markup
Script
Accessibility
Keyboard/Mouse
ARIA Attributes
HTML5
canvas
data-*
websockets
forms media
Ajax in PrimeFaces
Server APIs: Standard JSF 2
Client APIs:
autoUpdate
p:ajax
RequestContext
Callbacks
AjaxStatus
Selectors
partialSubmit
Ajax Extensions
Optimizations
CompressMinify
On The Fly Loading
Merge
and
ResourceHandling
Demo
Dialog Framework
target.xhtmlmain.xhtml
.openDialog("target");
.closeDialog(data);
Demo
Client Side Validation
Server Side Compatible
Bean Validation Extension API
Events
Client Side Validation<p:inputText id="name" value="#{validationView.text}" required="true" label="Name"/>
<p:inputText id="number" value="#{validationView.integer}" label="Number"> <f:validateDoubleRange minimum="5" maximum="8" /> </p:inputText> <p:message for="number" /> <p:inputText id="regex" value="#{validationView.regexText}" validatorMessage="Value does not match pattern."> <f:validateRegex pattern="^[a-zA-Z]+$" /> </p:inputText> ! <p:inputText id="date" value="#{validationView.date}" label="Date"> <f:convertDateTime pattern="MM/dd/yyyy" /> </p:inputText>
Bean Validation@ManagedBean
public class BeanValidationView { @Size(min=2,max=5) private String name; @Min(10) @Max(20) private Integer age; @DecimalMax(value= "99.9", message = "Shold not exceed 99.9") private Double amount; @Digits(integer=3,fraction=2) private Double amount2; @AssertTrue private boolean checked; @Past private Date pastDate; @Future private Date futureDate; @Pattern(regexp="^[-+]?\\d+$") private String pattern;
Client Side Bean Validation<p:inputText id="name" value="#{beanValidationView.name}" label="Name"/> !<p:inputText id="age" value="#{beanValidationView.age}" label="Age"/> <p:inputText id="amount" value="#{beanValidationView.amount}" label="Amount"/> <p:inputText id="amount2" value="#{beanValidationView.amount2}" label="Amount 2"/> <p:inputText id="pattern" value="#{beanValidationView.pattern}" label="pattern"/> !<p:selectBooleanCheckbox id="checked" value="#{beanValidationView.checked}" /> <p:inputText id="psstDate" value="#{beanValidationView.pastDate}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </p:inputText> <p:inputText id="futureDate" value="#{beanValidationView.futureDate}"> <f:convertDateTime pattern="MM/dd/yyyy" /> </p:inputText>
Demo
Themes
Twitter Bootstrap Theme
MetroUI Theme
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
Premium Themes
Premium Layouts
Demo
PrimeFaces Mobile
<h:body> <pm:page id="first"> <pm:header title="Twitter" theme="b"></pm:header> <pm:content> <h:form id="main"> <p:growl id="messages" showDetail="true" /> <h2>See what’s happening right now.</h2> <p:inputText id="search" value="#{twitterView.keyword}" type="search" /> <p:commandButton value="Search" icon="search" actionListener="#{twitterView.search}" update="tweets search"/> <p:dataList id="tweets" value="#{twitterView.tweets}" var="tweet"> <p:graphicImage value="#{tweet.user.biggerProfileImageURL}" /> <h2>#{tweet.user.screenName}</h2> </p:dataList> </h:form> </pm:page> </h:body>
PrimeFaces Mobile
powered by
PrimeFaces Mobile
Demo
PrimeFaces Push
Atmosphere
PrimeFaces Push
websockets fallback transports
scalable portable
Demo
Javascript CSS
REST, Jax-RS, Php, Spring MVC ...
Vanilla Prime<input id=”spinner” type=”text” />
<div id="default"> <ul>
<li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li>
</ul> <div>
<div id="tab1"> content 1
</div> <div id="tab2">
content 2 </div> <div id="tab3">
content 3 </div>
</div> </div>
$(‘#spinner’).puispinner();
$(‘#default’).puitabview();
$(‘#default’).puitabview({ orientation: ‘left’
});
Demo
Portlets
Sample: /svn/examples/trunk/prime-portlet
via
On the Cloud
http://primefaces-rocks.appspot.com
http://primefaces-gae-kickstart.appspot.com
http://blog.jelastic.com/2012/06/11/how-to-deploy-primefaces-applications-into-jelastic-cloud/
Documentation
600~ Pages
Books
Community
120K Posts, 45K Members
Bundled with NetBeans
NetBeans Plugin
NetBeans Plugin
NetBeans Plugin
NetBeans Plugin
PrimeFaces ELITE
COMMUNITY ELITE
5.0
5.1
5.0
5.1
5.1.15.1.2
5.1.x…
$249 / year
PrimeFaces PRO
TrainingSupport Consulting
RoadMap
Current 5.1
Next 5.2
Maintenance 5.1.x Elite
Improve current feature set
New components
Premium Themes and Layouts
Q/Acontact@primetek.com.tr
@primefaces
groups/primefaces
http://blog.primefaces.org
top related