advertisement

Ajax World East 2008

67 %
33 %
advertisement
Information about Ajax World East 2008

Published on March 26, 2008

Author: mwessendorf

Source: slideshare.net

Description

My talk on AjaxWorld East in NYC (2008)
advertisement

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

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

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

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)

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)

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

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

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

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; /> ...

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(...);

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) ; ...

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) { ...}

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 ) { ... } ...

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>

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;); }

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>

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

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”

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 { ... }

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>

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

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>

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

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)

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

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

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

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();

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

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;,...} );

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

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

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

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

Add a comment

Related pages

Ajax World

Musings from Ajax about the world of entertainment, media, and technology
Read more

AjaxWorld East 2008 (in New York City) | Matthias ...

Last week I was attending the AjaxWorld East conference to speak about Apache MyFaces Trinidad and how to integrate it with some other open ...
Read more

AJAXWorld News Desk @ AJAXWorld RIA Conference & Expo 2008 ...

... and also receive a FREE copy of the Best-Selling AJAX Book, a $119 Value! 2008 East Platinum Sponsor . 2008 East Gold Sponsors . 2008 East ...
Read more

Ajax, Ontario - Wikipedia, the free encyclopedia

Before the Second World War, the territory in which Ajax is situated ... Whitby at the east. Communities of Ajax ... Mental Health ward in 2008, ...
Read more

Microsoft at AJAX World East in NYC | JrzyShr Dev Guy

Last week, I attended the AJAX World East conference in NYC. The show was hosted by Sys-Con publishing at the Roosevelt Hotel near Grand Central ...
Read more

AFC Ajax - Wikipedia, the free encyclopedia

Amsterdamsche Football Club Ajax (Dutch pronunciation:), also AFC Ajax, Ajax Amsterdam or simply Ajax, is a Dutch professional football club based in Amsterdam
Read more

Day Software präsentiert REST und AJAX Webentwicklungs ...

Day Software präsentiert REST und AJAX Webentwicklungs-Technologien auf der AJAXWorld East 2008 in New York
Read more

Industry Buzz via Twitter @ AJAXWorld RIA Conference ...

... and also receive a FREE copy of the Best-Selling AJAX Book, a $119 Value! 2008 East Platinum Sponsor . 2008 East Gold Sponsors . 2008 East ...
Read more

SOA News Desk @ AJAXWorld RIA Conference & Expo 2008 West ...

... and also receive a FREE copy of the Best-Selling AJAX Book, a $119 Value! 2008 East Platinum Sponsor . 2008 East Gold Sponsors . 2008 East ...
Read more

IoT User Interface - AJAX

AJAX World RIA Conference & Expo - October 20-22, 2008, San Jose, California!
Read more