Scribd Logo
Unggah

Selamat datang di Scribd!

  • Rriad Dev Prime Faces Jsfsummit09-1

    Diunggah oleh

    zballesta
    69 tayangan61 halaman
    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"

    Deskripsi Asli:

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    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"

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    69 tayangan61 halaman

    Rriad Dev Prime Faces Jsfsummit09-1

    Diunggah oleh

    zballesta
    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"

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 61

    RAPID RIA with

    PRIMEFACES
    CAGATAY CIVICI 04.12.09

    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

    PRIMEFACES
    Overview

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

    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 Lets Rock

    Resource Servlet
    Streaming and Caching (js, css, images)

    <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>

    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 ajax
    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 update=name /> </h:form>

    Ajax Status
    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) />

    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
    public class GreetingBean { ... public void uppercase(ActionEvent event) { name = name.toUpperCase(); } }

    <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>

    PPR Summary
    No need for ...

    Simple Easy to Use Flexible Responsive Fast

    Ajax ViewHandler

    DOM Tree Copy on Server

    Ajax StateManager

    Partial Triggers

    Ajax Servlet Filter

    HTML Parser

    Ajax ViewRoot

    Ajax Context

    PPRPanel

    Ajax Regions

    PPR Demo

    Theres a COMP for that


    accordionPanel ajaxStatus autoComplete breadCrumb captcha calendar carousel charts collector colorPicker commandButton commandLink conrmDialog dataExporter dataTable dialog drag&drop dock editor effect leDownload leUpload dynamicImage growl hotkey idleMonitor imageCropper imageSwitch inplace inputMask keyboard layout lightBox linkButton media menu menubar message messages outputPanel panel passwordStrength pickList poll printer push rating remoteCommand resizable resource resources slider spinner stack tabSlider tabView terminal tooltip tree uiajax watermark wizard

    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


    public class ChatController { private String message; public void send(ActionEvent event) { CometContext.publish(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(data) { ! $('#display').append(data); } </script>

    TouchFaces
    PathFinder

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

    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
    faces-cong.xml

    package com.mycompany.project; @Controller(name=greetingBean, scope=Scope.REQUEST) public class GreetingBean { private String name; //getters&setters }

    GreetingBean.java

    greeting.xhtml

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

    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
    faces-cong.xml

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

    GreetingBean.java
    }

    @Inject private GreetingService greetingService;

    @Inject
    Setter Injection Constructor Injection Field Injection

    Setter Injection
    @Controller(name=greetingBean, scope=Scope.REQUEST) public class GreetingBean { private GreetingService greetingService; @Inject public 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; @Inject public void GreetingBean(GreetingService greetingService) { this.greetingService = greetingService; } ... }

    Field injection
    @Controller(name=greetingBean, scope=Scope.Request) public class GreetingBean { @Inject private 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 Way
    public 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 { @Inject private 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
    <p:commandButton value=Delete action=#{bean.delete} rendered=#{authContext.ifAllGranted[admin,editor]} />

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

    Method Security
    public 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 Integration
    public class GreetingServiceJPA implements GreetingService { @Inject private Provider<EntityManager> em; @Transactional public void sayHi(String name) { em.get().persist(...); } }

    Implicit navigations
    No more XML Convention over Conguration Inspired JSF 2.0 navigations

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

    userDetail

    userDetail.xhtml

    faces-cong.xml

    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 specic help

    Whats 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

    Anda mungkin juga menyukai