Your SlideShare is downloading. ×
0
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Ajax Toolkits and Frameworks
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax Toolkits and Frameworks

2,259

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,259
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Ajax Toolkits and Frameworks Doris Chen Ph.D. Staff Engineer/Technology Evangelist 1
  • 2. Agenda • Introduction to Ajax • jQuery • jMaki • Summary 2
  • 3. Agenda • Introduction to Ajax • jQuery • JMaki • Summary 3
  • 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 4
  • 5. Traditional Web AJAX within a browser, there is AJAX engine 5
  • 6. Ajax Interaction with XMLHttpRequest 6
  • 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 7
  • 8. Solutions • JavaScript Toolkits > Wrap up ajax details in javascript libraries > jQuery, Dojo, prototype+scriptaculous, Yahoo,... • Frameworks > DWR > GWT, Wicket > jMaki 8
  • 9. Agenda • Introduction to AJAX • jQuery • jMaki • Summary 9
  • 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 10
  • 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+ 11
  • 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”) 12
  • 13. Find element by tag type $(“div”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div> 13
  • 14. Find element by id $(“div#body”)
/
$(“#body”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div> 14
  • 15. Find element by class $(“div.contents”)
/
$(“.contents”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div> 15
  • 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> 16
  • 17. Find element by content $(“div:has(h2)”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div> 17
  • 18. Find enclosed element $(“div.contents p:last”) <div id=”body”> <h2>Some Header</h2> <div class=”contents”> <p>...</p> <p>...</p> </div> </div> 18
  • 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) 19
  • 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 20
  • 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 21
  • 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 22
  • 23. Handle events • click, hover, change.... $(“#target”).click(function(){ .... }); • bind $(“#target”).bind(“click”, function(){ .... }); • Chain event handlers $(“#target”).click(....).hover(...); Event handling Demo 23
  • 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 24
  • 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 25
  • 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.... 26
  • 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/ 27
  • 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 28
  • 29. Introduction to jMaki 29
  • 30. What Is jMaki A Client-Server Lightweight Framework for Providing JavaScript Technology-Centric User Interfaces • 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 30
  • 31. jMaki Ecosystem Google Gears Yahoo Maps Maps Yahoo UI Widgets Dojo Applets Flash RSS Feeds Prototype/Scriptaculous jQuery Ext-JS 31
  • 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 32
  • 33. Benefits of using jMaki 33
  • 34. Multi-Server Support 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'}" )); ?> Ruby: index.html.erb <%= jmaki_widget 'hello', :args => { :name => name }, :value => { 'World' } %> 34
  • 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 35
  • 36. Demo: easy to use 36
  • 37. jMaki Architecture 37
  • 38. jMaki Framework • Widget component / library models • Data Models • Events using Publish / Subscribe > Actions / Glue • Layouts / Theming model • XmlHttpProxy • Extensions 38
  • 39. jMaki Architecture Widget Model jMaki Client Services jMaki Layouts Dojo Html Yahoo CSS JavaScript XHR Publish/Subscribe widget. json Injector Glue/Timers Scriptaculous jMaki Client Runtime Google jMaki Server Side Runtime XmlHttpProxy Spry Shared Configuration Script/CSS Links XSL Style Sheets Service Template Renderer UUID Generator Configuration XSL Transformer Runtime to JavaScript Parameter Convertor HTTP Client Enterprise Resources External Services Data Managed Web REST Yahoo Flickr RSS Service Base Objects Services Services Services Services Feeds 39
  • 40. Widget Model Simple component.htm HTML Template jMaki Widget component.css component.js CS Styles Behavior Bootstrap Code https://ajax.dev.java.net/widget-model.html 40
  • 41. Hello World Widget component.htm <div id=”${uuid}”></div> component.js id value jmaki.namespace(“jmaki.widgets.hello”); service jmaki.widgets.hello.Widget = function(wargs) { args var 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'}" /> 41
  • 42. jMaki Recipe 42
  • 43. jMaki Recipe • Choose a layout • Drop widgets into a layout • Configure widgets (if necessary) • Provide glue if widgets interact • Choose a theme 43
  • 44. jMaki Work with External Resources 44
  • 45. Access External Services 45
  • 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" } 46
  • 47. Access Enterprise Resources jMaki work with JPA <a:widget name="yahoo.dataTable" service="data.jsp" /> data.jsp provides dynamic data from persistence using JPA 47
  • 48. Access Enterprise Resources data.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() if (i < list.size()-1) out.println(","); else out.println(); } out.println("] }"); %> 48
  • 49. jMaki Widgets Work Together 49
  • 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 50
  • 51. Action Example <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} ] }" /> 51
  • 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 mapped to 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 52
  • 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 Subscribe (glue.js) Publish (index.jsp) jmaki.subscribe ("/button/addTable/onClick", "jmaki.listeners.addTableData"); <a:widget name="yahoo.button" publish="/button/addTable" jmaki.listeners.addTableData = function(args) { args="{label : 'Add table data' }"/> //set the row data var row = [ { title : 'Book Title 3', author : 'Author 3', isbn: '4415', description : 'A Some long description' }, ... ]; ... } 53
  • 54. DEMO Widgets working together 54
  • 55. Case Study: jMaki Webtop 55
  • 56. jMaki Webtop • Problem Trying to Solve > Create Mashups • Features Needed > Create a Ajax User interface > Manage Widgets, Widget State > Manage Users > Integrate Services 56
  • 57. jMaki Webtop (Brazilian Soccer Players) 57
  • 58. jMaki WebTop Mashup (Wedding Mashup) 58
  • 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) 59
  • 60. Agenda • Introduction to AJAX • jQuery • JMaki • Summary 60
  • 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 61
  • 62. jQuery Resouces • http://jquery.com • http://www.jquery.com • http://docs.jquery.com/ • http://jquery.bassistance.de/api-browser/ • http://www.learningjquery.com/ 62
  • 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/ 63
  • 64. Doris Chen Ph.D. Staff Engineer/Technology Evangelist 64

×