SlideShare une entreprise Scribd logo
1  sur  52
PrimeFaces
Next Generation Component Suite




         Cagatay Civici
Cagatay Civici
• JSF Expert Group Member (JSR-314)
• PrimeFaces Founder and Lead
• Apache MyFaces PMC Member
• Atmosphere Ajax Push/Comet
  Committer
• Regular Speaker, Author, Technical
  Reviewer
• Co-founder of Prime Technology
Prime Technology
• Agile and Java EE Consulting
• JSF, Spring, Seam, JPA
• Trainings (e.g. PrimeFaces, JSF 2.0)
• Outsource Development
• Istanbul/Turkey based
What is this about?
• PrimeFaces Component Suite
• RIA
• Ajax Push
• TouchFaces
• iPhone/Android/Palm
• GPS Navigation
• Mock OS X with JSF
• Interested?
PrimeFaces
• Next Generation Component Suite




• Designed with JSF 2.0 in mind
History
• 1+ year old
• November 2008 - Start
• January 2009 - First Release 0.8.0
• 10 releases so far
• February 2010 - 1.0.0 and 2.0.0
1.0.0 and 2.0.0
Design Principles
• A good UI component should hide
  complexity but must keep flexibility
• Page author must be in full control
• Do not overuse JSF extensions
• Avoid extensions that can cause race
  conditions
• Avoid bringing overhead, keep it clean!
UI Components
• 70+ Rich set of components
• Ajax powered or Client side
• YUI, jQuery and PrimeFaces widgets
• Unobstrusive Javascript
• Customizable and Easy to Use
• Compatible with “others”
• Skinning
Extreme UI with PrimeFaces
Simple Setup
   JSF 1.2                 JSF 2.0
• ResourceServlet   • ResourceServlet (Opt)
• p:resources       • Taglib
• Taglib            • Ready!
• Ready!
ResourceServlet
• Streaming and Caching (js, css, images)
• Auto-Registered in Servlet 3.0 Environment

 <servlet>
  <servlet-name>Resource Servlet</servlet-name>
  <servlet-class>org.primefaces.resource.ResourceServlet</servlet>
</servlet>

<servlet-mapping>
  <servlet-name>Resource Servlet</servlet-name>
  <url-pattern>/primefaces_resource/*</url-pattern>
 </servlet-mapping>
p:resources for JSF 1.2

• Renders <link />, <script />
• No hacks to head
• Not required in JSF 2.0 -> <h:head />

  <head>
   <p:resources />
  </head>
Ready!
 <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
!
</h:head>

<h:body>

!     <p:editor />

<h:body>

    </html>
Unobstrusive UI
                      JSF Markup
<p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/>




                     HTML Markup

<div id=”calendar”></div>

<script type=”text/javascript”>
  new PrimeFaces.widget.Schedule(‘calendar’, {editable:true});
</script>
Output
Easy Ajax
• Ajax without complexity
• Partial Page Rendering
• Flexible with Callbacks (e.g. onstart,
  oncomplete)
• Ajax components (e.g. autoComplete)
• Lightweight, No overhead
PPR - Hello World
public class GreetingBean {
  private String name;
  //...
}



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

   <p:commandButton value=”Ajax Submit” update=”name”/>
</h:form>
p:ajax
• f:ajax extension
 <h:inputText value=”#{greetingBean.name}”>
    <p:ajax event=”blur” update=”name” />
 </h:inputText>

 <h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
Defining Ids
• Server id                   update=”text”

• Client id                 update=”form:text”

• Comma separated          update=”text,panel”

• White space separated    update=”text panel”

• Mix                     update=”form:text grid”

• Keywords                   update=”@form”
Keywords
• @this         update=”@parent”
• @parent
• @form
• @all
• @none
Partial Processing
• Decide what to process
• process attribute
• Ajax requests
• Non-ajax requests

          process=”@this”
Partial Processing - Case 1

<h:form>
   <h:inputText id=”iamrequired” required=”true” />

  <h:selectOneMenu id=”cities”>
     <p:ajax update=”cities” process=”@this” />
  </h:selectOneMenu>

   <h:selectOneMenu id=”suburbs” />
</h:form>
Partial Processing - Case 2
<h:form>
 <h:inputText id=”iamrequired” required=”true” />

  <h:outputText id=”selected” />

  <p:dataTable id=”table”>
      <p:column>
         <p:commandLink update=”selected” process=”table” />
      </p:column>
  </p:dataTable>
</h:form>
Partial Processing - Case 3
<h:form>
  <h:inputText id=”iamrequired” required=”true” />

   <h:commandButton action=”navigate” immediate=”true” />
</h:form>



• Making immediate obsolete
<h:form>
  <h:inputText id=”iamrequired” required=”true” />

   <p:commandButton action=”navigate” process=”@this” />
</h:form>
Process vs Update
                      Restore View

                     Apply Request

Process               Validations

                     Update Model

                      Invoke App

Update                  Render
Notifying Users
• Declarative
   <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>

• Programmatic
  <p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
Global vs Non-Global
• To trigger p:ajaxStatus or not
   <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>

• Global (Default)           <p:commandButton value=”Submit” /

• Silent        <p:commandButton value=”Submit” global=”false” /
Component specific
           callbacks
   • onstart
   • onsuccess
   • oncomplete
   • onerror

<p:commandButton onstart=”return confirm(‘Sure’)”
            oncomplete=”alert(‘Done’);” />
Callback Arguments
<p:commandButton value=”Submit” action=”#{bean.save}”
 oncomplete=”handleComplete(xhr, status, args)” />

 public void save() {
   RequestContext context = RequestContext.getCurrentInstance();
   context.addCallbackParam(“item”, item);
 }

 • From backing bean to ajax callbacks with
   JSON
 <script type=”text/javascript”>
 function handleComplete(xhr, status, args) {
    alert(args.item.name);
 }
 </script>
Ajax Remoting
public class GreetingBean {
  private String name;
  //...
  public void toUpperCase() {
      name = name.toUpperCase();
  }
}

 • p:remoteCommand
<p:remoteCommand name=”upperCase”
   actionListener=#{greetingBean.toUppterCase} />


<script type=”text/javascript”>
  upperCase();
</script>
PPR Summary
                  No Need For
• Simple
                  Ajax Servlet Filter
• Easy to Use
                     Html Parser
• Flexible
• Responsive      Ajax ViewHandler

• Lightweight     Ajax StateManager

• Keep it clean     Ajax Regions


                        Ajax*
Component Suite Demo
TouchFaces
• Mobile UI Kit
• WebKit Browsers
• IPhone, Android, Palm
• Native IPhone UI
• Integrated Ajax
• Regular JSF
• Powered by jqTouch
TouchFaces UI
• <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
Ajax Push/Comet
• Built on top of Atmosphere
• <p:push />
• CometContext.publish(...)
Atmosphere Framework
• Portable Comet Framework
• Write Once, Deploy Anywhere
• Rest support
• Servlet 3.0 support
• JSF Integration: PrimeFaces
Ajax Push/Comet
Chat App in a Minute
    public class ChatController {

      private String message;

      public void send(ActionEvent event) {
           CometContext.publish(“chat”, message);
      }
      //getters setters
}

  <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(pushed) {
! $('#display').append(pushed.data);
}
</script>
Pushing as JSON
Player player = new Player();
 player.setName(“Messi”);
 player.setAge(22);

CometContext.publish(player);




function handlePublish(pushed) {
   //pushed.data.name;
   //pushed.data.age;
}
Extensions: FacesTrace
• Trace/Debug tool
• Lifecycle visualizer
• Performance Tracker
• Visual component tree
FacesTrace Demo
Integrate With
• Spring
• Spring Webflow
• Seam
• CDI
• Portlets
• See svn/examples
Documentation
• User’s Guide - 350 pages
• Wiki
• Screencasts
• API & TLD Docs
• Third party articles/blogs
Community Support
• http://primefaces.prime.com.tr/forum
Enterprise Support
• 2/4 hour average response time
• Priority forum access
• Ticket based portal
• IM support over skype
• JSF specific help
• Special Case Support
Community
• Strong community feedback
• 500 posts per week in forum
• Join us!
Coming Soon
TreeTable                 ContextMenu




            ProgressBar




            and more.......
Finale
• cagatay.civici@prime.com.tr
• Twitter: @cagataycivici, @primefaces
• Facebook Group: 206606616332
• Blog: http://cagataycivici.wordpress.com
• HomePage: http://www.primefaces.org
• Atmosphere: http://atmosphere.dev.java.net
Questions

Contenu connexe

Tendances

Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Paulo Ragonha
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
Atlassian
 

Tendances (20)

Single Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and JasmineSingle Page Web Applications with CoffeeScript, Backbone and Jasmine
Single Page Web Applications with CoffeeScript, Backbone and Jasmine
 
In The Trenches With Tomster, Upgrading Ember.js & Ember Data
In The Trenches With Tomster, Upgrading Ember.js & Ember DataIn The Trenches With Tomster, Upgrading Ember.js & Ember Data
In The Trenches With Tomster, Upgrading Ember.js & Ember Data
 
Introduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress DevelopersIntroduction to AngularJS For WordPress Developers
Introduction to AngularJS For WordPress Developers
 
Unobtrusive JavaScript
Unobtrusive JavaScriptUnobtrusive JavaScript
Unobtrusive JavaScript
 
Oracle APEX Performance
Oracle APEX PerformanceOracle APEX Performance
Oracle APEX Performance
 
Angular Tutorial Freshers and Experienced
Angular Tutorial Freshers and ExperiencedAngular Tutorial Freshers and Experienced
Angular Tutorial Freshers and Experienced
 
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
 
Refactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.jsRefactoring Large Web Applications with Backbone.js
Refactoring Large Web Applications with Backbone.js
 
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
Single Page Web Apps As WordPress Admin Interfaces Using AngularJS & The Word...
 
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
Making WordPress Your CMS and Automatically Updating a Self Hosted WordPress ...
 
Future of Web Apps: Google Gears
Future of Web Apps: Google GearsFuture of Web Apps: Google Gears
Future of Web Apps: Google Gears
 
Laravel - Website Development in Php Framework.
Laravel - Website Development in Php Framework.Laravel - Website Development in Php Framework.
Laravel - Website Development in Php Framework.
 
Applications: A Series of States
Applications: A Series of StatesApplications: A Series of States
Applications: A Series of States
 
Ruby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter BootstrapRuby on Rails + AngularJS + Twitter Bootstrap
Ruby on Rails + AngularJS + Twitter Bootstrap
 
Really Rapid Admin Application Development
Really Rapid Admin Application DevelopmentReally Rapid Admin Application Development
Really Rapid Admin Application Development
 
Jlook web ui framework
Jlook web ui frameworkJlook web ui framework
Jlook web ui framework
 
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave TaylorAtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
AtlasCamp 2010: Making Confluence Macros Easy (for the user) - Dave Taylor
 
Testing Ember Apps: Managing Dependency
Testing Ember Apps: Managing DependencyTesting Ember Apps: Managing Dependency
Testing Ember Apps: Managing Dependency
 
Ajax Rails
Ajax RailsAjax Rails
Ajax Rails
 
Breaking SAP portal (HashDays)
Breaking SAP portal (HashDays)Breaking SAP portal (HashDays)
Breaking SAP portal (HashDays)
 

Similaire à Primefaces Nextgen Lju

RichFaces: rich:* component library
RichFaces: rich:* component libraryRichFaces: rich:* component library
RichFaces: rich:* component library
Max Katz
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
Remy Sharp
 
ASP.NET Overview - Alvin Lau
ASP.NET Overview - Alvin LauASP.NET Overview - Alvin Lau
ASP.NET Overview - Alvin Lau
Spiffy
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
Hjörtur Hilmarsson
 

Similaire à Primefaces Nextgen Lju (20)

Rich Portlet Development in uPortal
Rich Portlet Development in uPortalRich Portlet Development in uPortal
Rich Portlet Development in uPortal
 
AnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFacesAnkaraJUG Kasım 2012 - PrimeFaces
AnkaraJUG Kasım 2012 - PrimeFaces
 
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
Spark IT 2011 - Simplified Web Development using Java Server Faces 2.0
 
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
Hyperproductive JSF 2.0 @ JavaOne Brazil 2010
 
JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011JavaServer Faces 2.0 - JavaOne India 2011
JavaServer Faces 2.0 - JavaOne India 2011
 
RichFaces: rich:* component library
RichFaces: rich:* component libraryRichFaces: rich:* component library
RichFaces: rich:* component library
 
What You Need To Build Cool Enterprise Applications With JSF
What You Need To Build Cool Enterprise Applications With JSFWhat You Need To Build Cool Enterprise Applications With JSF
What You Need To Build Cool Enterprise Applications With JSF
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
ASP.NET Overview - Alvin Lau
ASP.NET Overview - Alvin LauASP.NET Overview - Alvin Lau
ASP.NET Overview - Alvin Lau
 
Jsf Ajax
Jsf AjaxJsf Ajax
Jsf Ajax
 
Universal JavaScript
Universal JavaScriptUniversal JavaScript
Universal JavaScript
 
Bonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node jsBonnes pratiques de développement avec Node js
Bonnes pratiques de développement avec Node js
 
JSF 2.0 Preview
JSF 2.0 PreviewJSF 2.0 Preview
JSF 2.0 Preview
 
vJUG - The JavaFX Ecosystem
vJUG - The JavaFX EcosystemvJUG - The JavaFX Ecosystem
vJUG - The JavaFX Ecosystem
 
Javascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & TricksJavascript MVC & Backbone Tips & Tricks
Javascript MVC & Backbone Tips & Tricks
 
Asynchronous Interfaces
Asynchronous InterfacesAsynchronous Interfaces
Asynchronous Interfaces
 
RichFaces 4: Rich Ajax Components For Your JSF Applications
RichFaces 4: Rich Ajax Components For Your JSF ApplicationsRichFaces 4: Rich Ajax Components For Your JSF Applications
RichFaces 4: Rich Ajax Components For Your JSF Applications
 
Spring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. RESTSpring Web Services: SOAP vs. REST
Spring Web Services: SOAP vs. REST
 
Express Presentation
Express PresentationExpress Presentation
Express Presentation
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 

Plus de Skills Matter

Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheimOscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
Skills Matter
 
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-diveRuss miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
Skills Matter
 
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_tI went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
Skills Matter
 

Plus de Skills Matter (20)

5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence5 things cucumber is bad at by Richard Lawrence
5 things cucumber is bad at by Richard Lawrence
 
Patterns for slick database applications
Patterns for slick database applicationsPatterns for slick database applications
Patterns for slick database applications
 
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvmScala e xchange 2013 haoyi li on metascala a tiny diy jvm
Scala e xchange 2013 haoyi li on metascala a tiny diy jvm
 
Oscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheimOscar reiken jr on our success at manheim
Oscar reiken jr on our success at manheim
 
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
Progressive f# tutorials nyc dmitry mozorov & jack pappas on code quotations ...
 
Cukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberlCukeup nyc ian dees on elixir, erlang, and cucumberl
Cukeup nyc ian dees on elixir, erlang, and cucumberl
 
Cukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.jsCukeup nyc peter bell on getting started with cucumber.js
Cukeup nyc peter bell on getting started with cucumber.js
 
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
Agile testing & bdd e xchange nyc 2013 jeffrey davidson & lav pathak & sam ho...
 
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
Progressive f# tutorials nyc rachel reese & phil trelford on try f# from zero...
 
Progressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source worldProgressive f# tutorials nyc don syme on keynote f# in the open source world
Progressive f# tutorials nyc don syme on keynote f# in the open source world
 
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
Agile testing & bdd e xchange nyc 2013 gojko adzic on bond villain guide to s...
 
Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#Dmitry mozorov on code quotations code as-data for f#
Dmitry mozorov on code quotations code as-data for f#
 
A poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testingA poet's guide_to_acceptance_testing
A poet's guide_to_acceptance_testing
 
Russ miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-diveRuss miles-cloudfoundry-deep-dive
Russ miles-cloudfoundry-deep-dive
 
Serendipity-neo4j
Serendipity-neo4jSerendipity-neo4j
Serendipity-neo4j
 
Simon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelismSimon Peyton Jones: Managing parallelism
Simon Peyton Jones: Managing parallelism
 
Plug 20110217
Plug   20110217Plug   20110217
Plug 20110217
 
Lug presentation
Lug presentationLug presentation
Lug presentation
 
I went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_tI went to_a_communications_workshop_and_they_t
I went to_a_communications_workshop_and_they_t
 
Plug saiku
Plug   saikuPlug   saiku
Plug saiku
 

Dernier

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Dernier (20)

2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 

Primefaces Nextgen Lju

  • 2. Cagatay Civici • JSF Expert Group Member (JSR-314) • PrimeFaces Founder and Lead • Apache MyFaces PMC Member • Atmosphere Ajax Push/Comet Committer • Regular Speaker, Author, Technical Reviewer • Co-founder of Prime Technology
  • 3. Prime Technology • Agile and Java EE Consulting • JSF, Spring, Seam, JPA • Trainings (e.g. PrimeFaces, JSF 2.0) • Outsource Development • Istanbul/Turkey based
  • 4. What is this about? • PrimeFaces Component Suite • RIA • Ajax Push • TouchFaces • iPhone/Android/Palm • GPS Navigation • Mock OS X with JSF • Interested?
  • 5. PrimeFaces • Next Generation Component Suite • Designed with JSF 2.0 in mind
  • 6. History • 1+ year old • November 2008 - Start • January 2009 - First Release 0.8.0 • 10 releases so far • February 2010 - 1.0.0 and 2.0.0
  • 8. Design Principles • A good UI component should hide complexity but must keep flexibility • Page author must be in full control • Do not overuse JSF extensions • Avoid extensions that can cause race conditions • Avoid bringing overhead, keep it clean!
  • 9. UI Components • 70+ Rich set of components • Ajax powered or Client side • YUI, jQuery and PrimeFaces widgets • Unobstrusive Javascript • Customizable and Easy to Use • Compatible with “others” • Skinning
  • 10. Extreme UI with PrimeFaces
  • 11. Simple Setup JSF 1.2 JSF 2.0 • ResourceServlet • ResourceServlet (Opt) • p:resources • Taglib • Taglib • Ready! • Ready!
  • 12. ResourceServlet • Streaming and Caching (js, css, images) • Auto-Registered in Servlet 3.0 Environment <servlet> <servlet-name>Resource Servlet</servlet-name> <servlet-class>org.primefaces.resource.ResourceServlet</servlet> </servlet> <servlet-mapping> <servlet-name>Resource Servlet</servlet-name> <url-pattern>/primefaces_resource/*</url-pattern> </servlet-mapping>
  • 13. p:resources for JSF 1.2 • Renders <link />, <script /> • No hacks to head • Not required in JSF 2.0 -> <h:head /> <head> <p:resources /> </head>
  • 15. Unobstrusive UI JSF Markup <p:schedule id=”calendar ” value=”#{bean.value}” editable=”true”/> HTML Markup <div id=”calendar”></div> <script type=”text/javascript”> new PrimeFaces.widget.Schedule(‘calendar’, {editable:true}); </script>
  • 17. Easy Ajax • Ajax without complexity • Partial Page Rendering • Flexible with Callbacks (e.g. onstart, oncomplete) • Ajax components (e.g. autoComplete) • Lightweight, No overhead
  • 18. PPR - Hello World public class GreetingBean { private String name; //... } <h:form> <h:inputText value=”#{greetingBean.name}” /> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” /> <p:commandButton value=”Ajax Submit” update=”name”/> </h:form>
  • 19. p:ajax • f:ajax extension <h:inputText value=”#{greetingBean.name}”> <p:ajax event=”blur” update=”name” /> </h:inputText> <h:outputText id=”name” value=”Hi: #{greetingBean.name}” />
  • 20. Defining Ids • Server id update=”text” • Client id update=”form:text” • Comma separated update=”text,panel” • White space separated update=”text panel” • Mix update=”form:text grid” • Keywords update=”@form”
  • 21. Keywords • @this update=”@parent” • @parent • @form • @all • @none
  • 22. Partial Processing • Decide what to process • process attribute • Ajax requests • Non-ajax requests process=”@this”
  • 23. Partial Processing - Case 1 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:selectOneMenu id=”cities”> <p:ajax update=”cities” process=”@this” /> </h:selectOneMenu> <h:selectOneMenu id=”suburbs” /> </h:form>
  • 24. Partial Processing - Case 2 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:outputText id=”selected” /> <p:dataTable id=”table”> <p:column> <p:commandLink update=”selected” process=”table” /> </p:column> </p:dataTable> </h:form>
  • 25. Partial Processing - Case 3 <h:form> <h:inputText id=”iamrequired” required=”true” /> <h:commandButton action=”navigate” immediate=”true” /> </h:form> • Making immediate obsolete <h:form> <h:inputText id=”iamrequired” required=”true” /> <p:commandButton action=”navigate” process=”@this” /> </h:form>
  • 26. Process vs Update Restore View Apply Request Process Validations Update Model Invoke App Update Render
  • 27. Notifying Users • Declarative <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> • Programmatic <p:ajaxStatus onstart=”alert(‘Started’)” oncomplete=”alert(‘done’)” />
  • 28. Global vs Non-Global • To trigger p:ajaxStatus or not <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> • Global (Default) <p:commandButton value=”Submit” / • Silent <p:commandButton value=”Submit” global=”false” /
  • 29. Component specific callbacks • onstart • onsuccess • oncomplete • onerror <p:commandButton onstart=”return confirm(‘Sure’)” oncomplete=”alert(‘Done’);” />
  • 30. Callback Arguments <p:commandButton value=”Submit” action=”#{bean.save}” oncomplete=”handleComplete(xhr, status, args)” /> public void save() { RequestContext context = RequestContext.getCurrentInstance(); context.addCallbackParam(“item”, item); } • From backing bean to ajax callbacks with JSON <script type=”text/javascript”> function handleComplete(xhr, status, args) { alert(args.item.name); } </script>
  • 31. Ajax Remoting public class GreetingBean { private String name; //... public void toUpperCase() { name = name.toUpperCase(); } } • p:remoteCommand <p:remoteCommand name=”upperCase” actionListener=#{greetingBean.toUppterCase} /> <script type=”text/javascript”> upperCase(); </script>
  • 32. PPR Summary No Need For • Simple Ajax Servlet Filter • Easy to Use Html Parser • Flexible • Responsive Ajax ViewHandler • Lightweight Ajax StateManager • Keep it clean Ajax Regions Ajax*
  • 34. TouchFaces • Mobile UI Kit • WebKit Browsers • IPhone, Android, Palm • Native IPhone UI • Integrated Ajax • Regular JSF • Powered by jqTouch
  • 35. TouchFaces UI • <i:application /> • <i:view /> • <i:tableView /> • <i:rowGroup /> • <i:rowItem /> • <i:switch />
  • 36. TouchFaces in Action Translate Chat - Ajax Push PathFinder - GPS TwitFaces Weather Notes News
  • 38. Ajax Push/Comet • Built on top of Atmosphere • <p:push /> • CometContext.publish(...)
  • 39. Atmosphere Framework • Portable Comet Framework • Write Once, Deploy Anywhere • Rest support • Servlet 3.0 support • JSF Integration: PrimeFaces
  • 41. Chat App in a Minute public class ChatController { private String message; public void send(ActionEvent event) { CometContext.publish(“chat”, message); } //getters setters } <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(pushed) { ! $('#display').append(pushed.data); } </script>
  • 42. Pushing as JSON Player player = new Player(); player.setName(“Messi”); player.setAge(22); CometContext.publish(player); function handlePublish(pushed) { //pushed.data.name; //pushed.data.age; }
  • 43. Extensions: FacesTrace • Trace/Debug tool • Lifecycle visualizer • Performance Tracker • Visual component tree
  • 45. Integrate With • Spring • Spring Webflow • Seam • CDI • Portlets • See svn/examples
  • 46. Documentation • User’s Guide - 350 pages • Wiki • Screencasts • API & TLD Docs • Third party articles/blogs
  • 48. Enterprise Support • 2/4 hour average response time • Priority forum access • Ticket based portal • IM support over skype • JSF specific help • Special Case Support
  • 49. Community • Strong community feedback • 500 posts per week in forum • Join us!
  • 50. Coming Soon TreeTable ContextMenu ProgressBar and more.......
  • 51. Finale • cagatay.civici@prime.com.tr • Twitter: @cagataycivici, @primefaces • Facebook Group: 206606616332 • Blog: http://cagataycivici.wordpress.com • HomePage: http://www.primefaces.org • Atmosphere: http://atmosphere.dev.java.net