• Save
Ajax World East 2008
Upcoming SlideShare
Loading in...5
×
 

Ajax World East 2008

on

  • 8,600 views

My talk on AjaxWorld East in NYC (2008)

My talk on AjaxWorld East in NYC (2008)

Statistics

Views

Total Views
8,600
Slideshare-icon Views on SlideShare
8,596
Embed Views
4

Actions

Likes
6
Downloads
0
Comments
0

1 Embed 4

http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Ajax World East 2008 Ajax World East 2008 Presentation Transcript

    • Writing JSF Applications with Apache Trinidad and Facelets Matthias Wessendorf | matzew@apache.org
    • Matthias Wessendorf
      • Oracle Corporation
      • Apache Software Foundation
        • ASF Member
        • Committer and PMC @Apache MyFaces
        • Committer and PMC @Apache Shale
      • Author
        • (German) Java- and Eclipse-Magazine
        • Books on Struts, J2ME & WebServices
      • Speaker
        • Oracle Open World
        • ApacheCon
        • JavaOne
        • JAX, WJAX
    • Agenda
      • A typical (lightweight) JavaEE application
        • JavaServer Faces
        • Apache Trinidad
        • Facelets
      • Trinidad and Facelets in Action
      • Integration 3rd Party JavaScript Libs
        • Dojo Toolkit
        • Yahoo! User Interface Library (YUI)
        • Google Maps
        • or... other, like jQuery, ...
      • Discussion
    • (lightweight) application architecture JSF View DAO / Repository JSF Bean Service Spring Beans Java Persistence API (with EclipseLink) database View Controller XHTML Pages JavaServer Faces Apache MyFaces Orchestra FacesGoodies: http://code.google.com/p/facesgoodies
    • JavaServer Faces
    • JavaServer Faces - Background
      • Java on the Web:
        • Servlets
        • JavaServer Pages (JSP)
        • JavaServer Pages Standard Tag Library (JSTL)
      • Emerging Frameworks
        • Apache Struts
        • other „Model 2“ Frameworks (Cocoon, Stripes,...)
      • Problems:
        • No „component-based“ approach...
      • One Industrial Standard  JavaServer Faces (JSF)
        • Backed by JCP
          • JSR 127  JSF 1.1 (May 2004)
          • JSR 252  JSF 1.2 [Java EE 5] (May 2006)
          • JSR 314  JSF 2.0 [Java EE 6] (2008 ?)
    • What is JSF really ?
      • Lightweight and extensible Web-Framework
        • POJO, replace the bits (navigation, view-technology,...)
      • API for UI Component Development
        • Several 3rd party component suites available
      • Goals
        • Make Java-Web-Development simple
        • Tooling (JDev, Sun / Netbeans, Eclipse, ...)
      • Implementations
        • Apache MyFaces | RI (Sun)
    • JSF components Page Template Server Side <f:view> <h:form> <h:inputText value=“#{b.value}” /> <h:inputText … /> <h:inputText …. /> … <h:commandButton … /> </h:form> </f:view> Servlet JSF Lifecycle In Memory Tree View Root Form UI Component Renderer
    • JSF: Frameworks and Component Libraries Apache MyFaces Sun RI IceFaces Oracle ADF Faces Apache MyFaces Tobago Apache MyFaces Trinidad Facelets Seam JSR 299 / Web Beans Rich Client Faces Jenia  http://www.jsfmatrix.net  Add your lib here JBoss RichFaces Apache MyFaces Tomahawk
    • Apache Trinidad
    • Apache MyFaces Trinidad
      • Donated to Apache by Oracle in 2006 (ADF Faces)
      • Contains more than 100 JSF components (ajax-enabled)
      • Mother of PPR (Partial Page Rendering) 
        • A built-in Ajax facility
      • Several Framework bits
        • Ajax-API
          • Client (JavaScript)
          • Server (Java)
        • Skinning (CSS based)
        • Dialog-Framework
        • ...
      • stable component set
        • JSF 1.1 (Trinidad 1.0.x)
        • JSF 1.2 (Trinidad 1.2.x)
    • Apache MyFaces Trinidad
      • The component show...
      • Online Demo available on:
      • http://www.irian.at
    • Facelets
    • Facelets
      • Alternate JSF-View-Technology
        • JSF‘s default is JSP(X)
        • Problems in JSF 1.1 „Content Interweaving“
      • lightweight Templating Framwork
        • XHTML-based Templates
      • very friendly to Designers
        • like similar to Tapestry
      • Performance
      • JSF 1.2 w/o JavaEE 5 Container
      • Damn simple Component Development!
        • Will be present in JSF 2.0
    • Apache Trinidad and Facelets in Action
    • Apache Trinidad
    • Apache MyFaces Trinidad – Ajax aka PPR (Partial Page Rendering)
      • Ajax (aka PPR) for free
        • Trinidad components include Ajax:
          • autoSubmit
          • partialSubmit
          • partialTriggers
      • XHR communication channel
        • <iframe> for uploads
      • Aditional Ajax-API
        • server-side
        • client-side
    • Apache MyFaces Trinidad – Ajax Demo
      • From a JSPX file:
      • ...
      • <tr:selectOneRadio value=&quot;#{partialBean.selectOne}&quot; autoSubmit=&quot;true&quot; id=&quot; select1 &quot; >
      • <tr:selectItem label=&quot;East&quot; value=&quot;NYC&quot;/>
      • <tr:selectItem label=&quot;West&quot; value=&quot;San Jose&quot;/>
      • </tr:selectOneRadio>
      • <tr:outputText id=&quot;out&quot; value=&quot;#{partialBean.selectOne}&quot;
      • partialTriggers=&quot; select1 &quot; />
      • ...
    • Apache MyFaces Trinidad – Ajax Demo
    • Apache MyFaces Trinidad – Ajax Demo
    • Apache MyFaces Trinidad – Ajax API (server-side)
      • Programmatic „update“ of Components
        • No partialTriggers attribute (non-Trinidad components)
        • Not always willing to update (based on conditions)
        • „ dynamic“ update of a component
      • Java-API
        • RequestContext.addPartialTarget(UIComponent target);
      • Other use-cases:
        • Custom Component (not extending UIXComponentBase class)
          • decode(): rc.addPartialTriggerListeners(...);
          • broadcast(): rc.partialUpdateNotify(...);
    • Apache MyFaces Trinidad – Ajax API (server-side) – A demo:
      • From a JSPX file:
      • <tr:commandButton text=&quot;refresh&quot; partialSubmit=&quot;true&quot; action=&quot;#{create.updatePage}&quot; />
      • < h:outputText id=&quot; status &quot; value=&quot; some value... &quot; />
      • From a JavaBean:
      • public String updatePage()
      • {
      • FacesContext ctx = FacesContext.getCurrentInstance();
      • UIComponent comp = ctx.getViewRoot(). findComponent(&quot; status &quot;) ;
      • ((ValueHolder) comp).setValue(&quot;updated by Java-API&quot;) ;
      • RequestContext rc = RequestContext.getCurrentInstance();
      • rc.addPartialTarget(comp) ;
      • ...
    • Apache MyFaces Trinidad – Ajax API (client-side)
      • Sending a PPR request
        • Useful when creating custom Trinidad components
        • TrPage.sendPartialFormPost(formElement, params, headers);
      • Sending an Ajax request
        • Useful when not interested in a postback / JSF lifecycle
        • TrRequestQueue.sendRequest(context, callback, url);
      • Monitoring Ajax and PPR requests
        • TrRequestQueue.addStateChangeListener(callback);
      • Monitoring DOM replacement (after Ajax response)
        • TrPage.getInstance().addDomReplaceListener(myCallback);
        • function myCallback(oldDom, newDom)
        • { ...}
    • Apache MyFaces Trinidad – Ajax API (client-side) – A demo:
      • Sending an Ajax request:
        • var queue = TrPage.getInstance().getRequestQueue();
        • queue .sendRequest(null, this.myCallback, &quot;http://localhost:9090/ jsonDataServlet ?foo=bar&quot;);
      • The callback function:
        • function myCallback(event)
        • {
        • if(event.getStatus() == TrXMLRequestEvent .STATUS_COMPLETE )
        • {
        • ...
        • }
        • ...
    • Apache MyFaces Trinidad – Ajax API (client-side) – A demo:
      • Monitoring Ajax and PPR requests:
        • function addListener()
      • {
      • var requestQueue = TrPage.getInstance().getRequestQueue();
      • requestQueue.addStateChangeListener(myCallback);
      • }
      • The callback function:
        • function myCallback(state)
        • {
        • var busy = state == TrRequestQueue.STATE_BUSY;
        • var div = document.getElementById(&quot;load&quot;);
        • div.style.display = busy ? &quot;inline&quot; : &quot;none&quot;;
        • }
      • The DIV-Element:
        • <div id=&quot;load&quot; style=&quot;display: none; background-color: red;...&quot;> LOADING...
        • </div>
    • Apache MyFaces Trinidad – ExternalRenderKitService
      • Calling JavaScript from the Server...
      • From a JSPX-File:
        • <tr:commandButton text=&quot;Create&quot; action=&quot;#{create.createUser}&quot; />
      • From a JavaBean:
        • public String createUser()
        • {
        • ...
        • FacesContext context = FacesContext.getCurrentInstance();
        • ExtendedRenderKitService erks =
        • Service.getRenderKitService(context,
        • ExtendedRenderKitService.class);
        • erks.addScript (context,
        • &quot;hello('&quot; +  JavaScript function
        • user.getName() +
        • &quot;');&quot;);
        • return (&quot;success&quot;);
        • }
    • Apache MyFaces Trinidad – ExternalRenderKitService
      • The JavaScript function:
      • function hello( name )
      • {
      • var dialog = new dijit.Dialog ( {id:&quot;dialog1&quot;, title: &quot;New User created!&quot;});
      • var dialogContent = &quot;Successfully created the user: &quot;&quot; + name + &quot;&quot;&quot;;
      • dialog.setContent(dialogContent);
      • dialog.show();
      • }
      • Simple JavaScript function
      • Dojo Toolkit‘s Dialog to display the name of the user
      • At the end of the Page (XHR-Response):
        • <script>hello('Wessendorf, Matthias');</script>
    • Apache MyFaces Trinidad – ExternalRenderKitService
    • Apache MyFaces Trinidad - Skinning
      • Customizable look and feel
        • portable across applications
        • portable across RenderKits
        • zero code
      • CSS 3.0 syntax
      • Component-centric, not DOM-centric
        • components have different “areas”
      launch-icon content label
    • Apache MyFaces Trinidad - Skinning
      • Pseudo-elements
        • af|component::area { … }
      • Create a CSS File, and register it:
        • trinidad-skins.xml (define a skin, and link to the CSS file)
        • trinidad-config.xml (link to the particular Skin)
      • A Skinning-CSS-file:
      • .AFRequiredIconStyle
      • {
      • color: #CC0000;
      • -tr-rule-ref: selector(&quot;.AFDefaultFont:alias&quot;);
      • }
      • af|inputDate::launch-icon
      • {content: url(/images/calendar_icon.gif); }
      • af|inputDate::label
      • { ... }
    • Facelets
    • Facelets – A simple Facelet
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • <html
      • xmlns=&quot;http://www.w3.org/1999/xhtml
      • xmlns:h=&quot;http://java.sun.com/jsf/html&quot;>
      • <body>
      • <input type=&quot;text&quot; jsfc=&quot;h:inputText&quot; required= &quot; true &quot; value=&quot;#{bean.property}&quot; />
      • </body>
      • </html>
    • Facelets – Templating
      • Template:
      • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
      • ...
      • xmlns:ui=&quot;http://java.sun.com/jsf/facelets&quot;>
      • <body>
      • <div class=&quot;headerStyle&quot;>
      • <ui:insert name=&quot;head&quot;>AjaxWorld NYC</ui:insert>
      • </div>
      • ...
      • <div class=&quot;bodyStyle&quot;>
      • <ui:insert name=&quot;body&quot;>Body</ui:insert>
      • </div>
      • ...
      • </body>
      • </html>
    • Facelets – Templating
      • Template-Client:
      • <ui:composition xmlns=&quot;http://www.w3.org/1999/xhtml&quot;
      • xmlns:tr=&quot;http://myfaces.apache.org/trinidad&quot;
      • ...
      • template =&quot;master-template.xhtml&quot;>
      • <!-- Body -->
      • <ui:define name=&quot;body&quot;>
      • My concrete JSF-Content !!!
      • </ui:define>
      • </ui:composition>
    • Facelets – Easy Components (default) JSF is not „DRY“
      • A table example:
      • <h:dataTable>
      • <h:colum>
      • <f:facet name=&quot;header&quot;>
      • <h:outputText value=&quot;Name&quot; />
      • </f:facet>
      • <h:outputText value=&quot;#{bean.name}&quot; />
      • </h:column>
      • ...
      • <h:colum>
      • <f:facet name=&quot;header&quot;>
      • <h:outputText value=&quot;some other value&quot; />
      • </f:facet>
      • <h:outputText value=&quot;#{bean.foo} &quot; />
      • </h:column>
      • ...
    • Facelets – Easy Components
      • This would be nice:
      • <h:dataTable>
      • <x:smartColumn header = &quot; Name &quot; visibleValue = &quot; #{bean.name} &quot; />
      • <x:smartColumn header = &quot; some other value &quot; visibleValue = &quot; #{bean.foo} &quot; />
      • ...
      • </h:dataTable>
      • P(l)ain JSF:
        • Java (Component, Renderer, JSP-Tag Class)
        • XML (faces-config, TLD)
      • Facelets:
        • XHTML file
        • Facelets Taglib XML file (very simple)
    • Facelets – Easy Components
      • The component itself...:
      • <tr:column
      • xmlns:f=&quot;http://java.sun.com/jsf/core&quot;
      • xmlns:tr=&quot;http://myfaces.apache.org/trinidad &quot;>
      • <f:facet name=&quot;header&quot;>
      • <tr:outputText value=&quot; #{header} &quot; />
      • </f:facet>
      • <tr:outputText value=&quot; #{visibleValue} &quot; />
      • </tr:column>
      • Usage of the component:
      • <x:smartColumn
      • header =&quot;Name&quot;
      • visibleValue =&quot;#{bean.name}&quot; />
    • 3rd party JavaScript libraries
    • 3rd Party JavaScript Libs
      • Dojo Toolkit
      • Yahoo! User Interface Library (YUI)
      • Google Maps API
      • ... or add yours!
    • Dojo Toolkit
      • Open Source DHTML toolkit
        • written in JavaScript
      • Contains:
        • Dojo-Core (dojo)
          • The Framework „base“
          • Basic functionality (like i18n)
        • Dijit
          • widget system on top of dojo
            • declaratively: special attributes in regular HTML elements
            • programmatically: JavaScript
        • Dojox (dojo e x perimental)
          • development of extensions to the Dojo toolkit
            • like Cometd support
    • Dojo Toolkit – Dijit
      • declaratively usage:
      • <div dojoType =&quot;dijit.Dialog&quot; title =&quot;First Dialog&quot; ...> Hello New York!
      • </div>
      • programmatically usage:
      • var dialog = new dijit.Dialog ( {id:&quot;dialog1&quot;, title: &quot;First Dialog&quot;});
      • var dialogContent = &quot;Hello New York!&quot;;
      • dialog.setContent(dialogContent);
      • dialog.show();
    • Yahoo! User Interface Library (YUI)
      • set of utilities and controls (Open Source)
        • written in JavaScript
      • Contains:
        • YUI Core
          • Framework-Core (like Event-Utils)
        • YUI Library Utilities
          • Drag-n-Drop Util, Connection Manager (XHR/Ajax),...
        • YUI Library Controls (Widgets)
          • AutoComplete, Button, ...
        • YUI Library CSS Tools
          • CSS-based templates
      • YUI Skinning
    • Yahoo! User Interface Library (YUI) –Controls/Widgets
      • programmatically usage:
        • HTML:
        • <button id=&quot;button&quot; type=&quot;submit&quot; ...> Submit Form
        • </button>
        • JavaScript:
        • var button = new YAHOO.widget.Button(&quot;button&quot;);
      • Without HTML:
      • var aButton = new YAHOO.widget.Button( { type: &quot;submit&quot;, id: &quot;button&quot;,...}
      • );
    • Google Maps API
      • Google Maps
        • Web 2.0 killer app
      • API for usage of Google Maps
        • Mother of Web 2.0 Mashups
        • written in JavaScript
      • Key required for usage
        • free beta service
    • Framework Integration
    • Integration
      • Usining „inline“ JavaScript
        • Use offered APIs from Trinidad‘s Ajax-API
          • Like the Dojo Dialog
      • Creating Custom Components
        • „ standard way“
        • Facelets
        • Mashup Component (Google Maps + Facelets)
        • Widgets:
          • Dojo‘s JavaScript-API + Trinidad
          • YUI‘s JavaScript-API + Trinidad
    • Integration - Examples Let‘s look at some code !
    • Resources and Links
      • Apache MyFaces Trinidad
        • http://myfaces.apache.org/trinidad/
      • Facelets
        • https://facelets.dev.java.net/
      • Dojo Toolkit
        • http://www.dojotoolkit.org/
      • Yahoo! UI
        • http://developer.yahoo.com/yui
      • Google Maps
        • http://code.google.com/apis/maps/
      • This talk:
        • http://slideshare.net/mwessendorf/
          • tomorrow...
    • Thank you! [email_address] BLOG: matthiaswessendorf.wordpress.com