Ajax Toolkits and Frameworks
-
Upload
sampetruda -
Category
Documents
-
view
2.233 -
download
7
description
Transcript of Ajax Toolkits and Frameworks
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
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:[email protected]> 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