1

Ajax Toolkits and FrameworksDoris Chen Ph.D.Staff Engineer/Technology Evangelist

2

Agenda• Introduction to Ajax• jQuery• jMaki• Summary

3

Agenda• Introduction to Ajax• jQuery• JMaki• Summary

4

What is AJAX?• Ajax= acronym for:

> Asynchronous JavaScript And XML(or XMLHTTPRequest )

• Browser client uses JavaScript to Asynchronously get data from a server and update page dynamically without refreshing the whole page

• More interactive user experience

5

Traditional Web AJAX

within a browser, there is AJAX engine

6

Ajax Interaction with XMLHttpRequest

7

“Naked” Ajax is too complex because

• A lot of JavaScript programming involved> “It is buggy and broken”> “Used for annoying people”> Difficult to debug and maintain> ...

• You need a deep understanding of Ajax techniques

• Have to handle all XmlHttpRequest interactions yourself

• Have to handle cross browser inconsistence yourself

8

Solutions• JavaScript Toolkits

> Wrap up ajax details in javascript libraries> jQuery, Dojo, prototype+scriptaculous, Yahoo,...

• Frameworks> DWR> GWT, Wicket> jMaki

9

Agenda• Introduction to AJAX• jQuery• jMaki• Summary

10

What is jQuery?• An open source JavaScript toolkit that simplifies the

interaction between HTML and JavaScript.• JQuery provides high level function to

> Simplify DOM access and alternation> Enable multiple handlers per event> Add effects/animations> Asynchronous interactions with server

• Lightweight, high performance• Solve browser incompatibilities• 1.0 was out on 2006, latest version is 1.2.6

11

Why jQuery?

• Fully documented• Active community• Small footprint (14kb)• Tons of plugins• Well tested in IE 6+, Firefox 2+, Safari 2+ and

Opera 9+

12

Focus of jQuery• Find element in the page and do something $(“div”).addClass(“header”)

• JQuery object> Commonly used “$”> Can also named “jQuery”

jQuery(“div”).addClass(“header”)

13

Find element by tag type

$(“div”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

14

Find element by id

$(“div#body”)/$(“#body”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

15

Find element by class

$(“div.contents”)/$(“.contents”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

16

Find element by sequence

$(“div > div”)/$(“div:eq(1)”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

17

Find element by content

$(“div:has(h2)”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

18

Find enclosed element

$(“div.contents p:last”)<div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div></div>

19

Do something with the found elements

• DOM Manipulation (attributes, tag content, look&feel)• Events (click, hover, toggle)• Effects (hide, show, slideDown, fadeOut)• AJAX (load, get, post)

20

DOM Manipulation – get and set Attributes

• Get HTML Tag attribute> var value = $(“#target”).attr(“attribute_name”);

• Set HTML Tag attribute> $(“#target”).attr(“attribute_name”, “new_value”);> ie. $(“#target”).attr(“disabled”, “disabled”);

Attribute Demo

21

DOM manipulation – change tag content

> Get HTML Tag text content● var value = $(“#target”).text();

> Set HTML Tag attribute● $(“#target”).html(“new_text_content”);

Text content Demo

22

DOM manipulation – change look & feel• Apply css style dynamically

> $(“#target”).addClass(“css_class”);• Toggle css style

> $(“#target”).toggleClass(“css_class”);

Change Look & Feel Demo

23

Handle events• click, hover, change....

$(“#target”).click(function(){ ....});

• bind$(“#target”).bind(“click”, function(){ ....});

• Chain event handlers$(“#target”).click(....).hover(...);

Event handling Demo

24

Animations• Show and Hide

> $(“#target”).show()> $(“#target”).hide()

• Fade in and out> $(“#target”).fadein()> $(“#target”).fadeout()

• Slide up and down> $(“#target”).slideup()> $(“#target”).slidedown()

Animation Demo

25

AJAX assistance• load(url, [data], callback)• $.get(url, [data], callback)• $.post(url, [data], callback)• $.ajax(options)

> $.ajax({ type : “GET” url : “url” data : data success : callback });

AJAX demo

26

jQuery Plugin• Extend jQuery system

> Drag and Drop> Sortable Tables> Modal Dialogs> Tabbed Navigation> Form plug-in> Form Validation> Thickbox> Tabs> blockUI> Autocomplete> And hundreds more....

27

jQuery Plugin Resources• Jack Slocum’s Ext Projecthttp://yui-ext.com/• Interface Elements for

jQueryhttp://interface.eyecon.ro/ • Mike Alsup’s jQuery Plug-

inshttp://www.malsup.com/jquery/• Jörn Zaefferer’s jQuery Plug-

inshttp://bassistance.de/jquery-plugins/

28

Agenda• Introduction to AJAX• jQuery• jMaki

> Introduction to jMaki> jMaki Architecture> jMaki Recipe> jMaki Work with External Resources> jMaki Widgets Work Together> Case Study: jMaki Webtop

• Summary

29

Introduction to jMaki

30

A Client-Server Lightweight Framework for Providing JavaScript Technology-Centric User Interfaces

What Is jMaki

• Open Source (BSD)• Allows you to integrate the best of breed

JavaScript technology into your applications• Ajax Application model built in• A widget model for creating widgets or wrapping

existing functionality• Netbeans™, Eclipse, Ant support

31

jMaki Ecosystem

Google Gears

Dojo

Ext-JSjQuery

Yahoo UI Widgets

Yahoo Maps

Maps

RSS Feeds

Applets

Prototype/Scriptaculous

Flash

32

Why Use jMaki?• Defaults set out of the box

> Convention over configuration• Consistent programming model

> Universal tag library for widgets from popular toolkits> Standardizes Event / Data Models> Mashup Capabilities built in

• Portable Widget libraries> Share your extensions / widgets libraries

• Ajax Acceleration built in• Multi-server runtime support

> PHP / JSP / JSF / Ruby / Phobos

33

Benefits of using jMaki

34

JSP technology: index.jsp<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %><a:widget name="hello" args="{name: 'World'}" />

PHP: index.php<?php require_once 'Jmaki.php'; ?><?php addWidget( array( 'name' => "hello", 'args' => "{name: 'World'}" )); ?>

Multi-Server Support

Ruby: index.html.erb<%= jmaki_widget 'hello', :args => { :name => name }, :value => { 'World' }%>

35

Who is using jMaki• http://thespanishsite.com/ • http://travelmuse.com • http://jmaki.com • http://zembly.com • http://www.snaioreto.it/home/home.jsp• https://edu-gelc.dev.java.net

36

Demo: easy to use

37

jMaki Architecture

38

jMaki Framework

• Widget component / library models• Data Models• Events using Publish / Subscribe

> Actions / Glue• Layouts / Theming model• XmlHttpProxy• Extensions

39

jMaki Architecture

Dojo

Yahoo

Scriptaculous

Google

Spry

Widget Model jMaki Client Services jMaki Layouts

jMaki Client Runtime

jMaki Server Side Runtime XmlHttpProxy

Enterprise Resources External Services

Html

CSS

widget. json Injector

XHR Publish/Subscribe

Glue/Timers

Script/CSS Links

UUID Generator

Shared Configuration

Template Renderer

Runtime to JavaScript Parameter Convertor

XSL Style Sheets

XSL Transformer

ServiceConfiguration

HTTP Client

RESTServices

YahooServices

FlickrServices

RSSFeeds

Service DataBase

ManagedObjects

WebServices

JavaScript

40

Simple

Widget Model

https://ajax.dev.java.net/widget-model.html

component.htmHTML Template

component.cssCS Styles

component.jsBehavior

Bootstrap Code

jMaki Widget

41

Hello World Widgetcomponent.htm

<div id=”${uuid}”></div>

component.js id valuejmaki.namespace(“jmaki.widgets.hello”); servicejmaki.widgets.hello.Widget = function(wargs) { argsvar mydiv = document.getElementById(wargs.uuid); selected mydiv.innerHTML = “Hello “ + wargs.args.name;}

index.jsp<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %><a:ajax name="hello" args="{name: 'world'}" />

42

jMaki Recipe

43

jMaki Recipe

• Choose a layout• Drop widgets into a layout• Configure widgets (if necessary)• Provide glue if widgets interact• Choose a theme

44

jMaki Work with External Resources

45

Access External Services

46

Accessing External Services

<a:widget name="jmaki.blockList" service="/xhp?id=rss" />

"rss"configured in the configuration file"xhp.json"

xhp.json:

{ "id": "rss", "url":"http://weblogs.java.net/blog/ludo/index.rdf", "xslStyleSheet": "rss.xsl"}

47

Access Enterprise ResourcesjMaki work with JPA

<a:widget name="yahoo.dataTable" service="data.jsp" />

data.jsp provides dynamic data from persistence using JPA

48

Access Enterprise Resourcesdata.jsp dynamic data using JPA

<%@ page import="java.util.*" %><%@ page import="server.Company" %><%@ page import="javax.persistence.*" %><% EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmaki-jpaPU"); EntityManager em = emf.createEntityManager(); List<Company> list = em.createQuery("select c from Company c").getResultList(); out.println("{columns : [" + "{ label : 'Company Name', id : 'companyName'}," + ... "],"); out.println("rows: ["); for (int i=0; i<list.size(); i++) { Company c = list.get(i); out.print("{ companyName: '" + c.getCompanyname() + "'," + "price: '" + c.getPrice() + "'," + "change: '" + c.getChange() + "'," + "pctChange: '" + c.getPercentchange() + "'," + "lastUpdated: '" + c.getLastupdated() + "'}"); if (i < list.size()-1) out.println(","); else out.println(); } out.println("] }");%>

49

jMaki Widgets Work Together

50

How the widgets talk to each other?jMaki Events• Publish/Subscribe is much like a server-side

messaging system by it runs in the scope of an HTML page

• topics: a means for multiple jMaki widgets to communicate with each other in a page

• Action: declarative events > Action property> No additional JavaScript code

• Glue: programmatic events> Allows you to provide unobtrusive application behavior

in a single place> Ties the widgets together (loosely) based on topic

names

51

<a:widget name="dojo.fisheye" value="[ { iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg', label : 'You are here!', action : { topic : '/foo/select', message : {targetId : 'bar'}} }, { iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg', label : 'test3'}]"/>

<a:widget name="dojo.tabbedview" subscribe="/foo" value="{items:[ {label : 'My Tab', content : 'Some Content'}, {id : 'bar', label : 'My Tab 2', include : 'test.jsp ', lazyLoad : true }, {label : 'My Tab 3', content : 'More Content', selected : true} ] }" />

Action Example

52

jMaki Glue: Publish/Subscribe• jMaki widgets communicate within the page

in JavaScript programming language via jMaki glue• Glue:

> JavaScript technology-based and loaded application-wide or based on a page

> JavaScript technology handlers mappedto topic names

• Steps to using the glue mechasim> Declare the topic you want to subscribe or listen to> Declare the name of the function (listener) which will

handle the notification> Provide the code to handle the notification

• Widgets configured to work by default

53

Publish/Subscribe• A means for jMaki widgets to communicate with

each other in a page using topics> Much like server-side messaging system but runs in

the scope of HTML page

Publish (index.jsp)Subscribe (glue.js)

<a:widget name="yahoo.button" publish="/button/addTable" args="{label : 'Add table data' }"/>

jmaki.subscribe ("/button/addTable/onClick", "jmaki.listeners.addTableData");

jmaki.listeners.addTableData = function(args) {//set the row datavar row = [ { title : 'Book Title 3', author : 'Author 3', isbn: '4415', description : 'A Some long description' }, ... ];...}

54

DEMOWidgets working together

55

Case Study: jMaki Webtop

56

jMaki Webtop

• Problem Trying to Solve> Create Mashups

• Features Needed> Create a Ajax User interface> Manage Widgets, Widget State> Manage Users> Integrate Services

57

jMaki Webtop (Brazilian Soccer Players)

58

jMaki WebTop Mashup (Wedding Mashup)

59

jMaki Webtop• View

> JavaServer Pages> JSP tag based jMaki

• Widget Management> Java Persisetence: MySQL(server) Google Gear

(client)• Key feature

> Simple & easy to use (drag and drop, event/action configure at Browser level)

> Extensible (add your own widgets & gadgets in Palette)> Widget Customization (property, position, customize

own widgets)> Shared (import/export)

60

Agenda• Introduction to AJAX• jQuery• JMaki• Summary

61

jMaki Summary• jQuery is generally easy to use

> extensive, interactive, with good performance > achieving better page organization and increased

code versatility• jMaki connects the widgets from the best breed • jMaki Provides a comprehensive solution for

Ajax with good tooling Support• You can easily extend jMaki with your own

Widget libraries• jMaki allows you to create sophisticated

mashups easily

62

jQuery Resouces• http://jquery.com• http://www.jquery.com• http://docs.jquery.com/• http://jquery.bassistance.de/api-browser/• http://www.learningjquery.com/

63

jMaki Resources• Main jMaki site

> https://ajax.dev.java.net/• jMaki Widgets site

> https://widgets.dev.java.net/• Send your questions to the public mailing lists

and forums> jMaki mailing alias

●mailto:dev@ajax.dev.java.net> jMaki Forum

●http://forums.java.net/jive/forum.jspa?forumID=96• NetBeans IDE

> http://netbeans.org/• Project GlassFish

> http://glassfish.dev.java.net/

64

Doris Chen Ph.D.Staff Engineer/Technology Evangelist