Your SlideShare is downloading. ×
0
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
Building Rich Web Building Rich Web Applications Applications ...
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

Building Rich Web Building Rich Web Applications Applications ...

987

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
987
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
32
Comments
0
Likes
0
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. Building Rich Web Applications using jMaki Sang Shin Java Technology Evangelist Sun Microsystems, Inc. www.javapassion.com 1
  • 2. Topics • What is and Why jMaki? • jMaki Architecture • Widget model • Layout and Themes • Multi-Language support • Accessing external resources • Event model • jMaki Library Structure 2
  • 3. What is & Why jMaki?
  • 4. Origins of jMaki? • ‘j’ is for JavaScript™ technology • Maki == to wrap in Japanese • Started as a way of wrapping JavaScript technology functionality • Project jMaki has evolved to provide more 4
  • 5. jMaki Features • Widgets from popular toolkits > Dojo, Yahoo, Script.aculo.us, Spry, Google • Make JavaScript technology accessible to Java technology, Phobos, PHP and Ruby • Standardize event and data models > Consistent programming model • XmlHttpProxy > Access to RESTful web services not in the web app domain • Integrated Tools support > NetBeans and Eclipse plug-in's 5
  • 6. Benefits of using jMaki 6
  • 7. jMaki Architecture
  • 8. 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 8
  • 9. Client Services • Glue wires widgets together > Based on publish and subscribe mechanism > Event bus on client • Injector loads the contents of external page in current page • Filter RSS data from web services 9
  • 10. Client Services API • jmaki.publish/subscribe • jmaki.Timer • jmaki.doAjax • jmaki.loadScript/loadStyle • jmaki.namespace • jmaki.extend • jmaki.log 10
  • 11. Widget Model
  • 12. Widget Model • Reusable JavaScript technology component • Common API for all widgets • Described by HTML, CSS, JavaScript technology and JSON files • Widget dependency information in widget.json 12
  • 13. Widget Model component.htm HTML Template jMaki Widget component.css component.js CS Styles Behavior Bootstrap Code https://ajax.dev.java.net/widget-model.html 13
  • 14. 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://jmaki/v1.0/jsp” %> <a:widget name=”hello” args=”{name: 'world'}” /> 14
  • 15. Layout and Themes
  • 16. jMaki Layouts 16
  • 17. jMaki Layouts and Themes • Provide templates written in CSS and HTML • Gives you a place to put your widgets • Web designer friendly • Easy to customize 17
  • 18. demo 18
  • 19. Multi-Language Support
  • 20. jMaki: Multi-Language support JSP Technology: index.jsp <%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %> <a:widget name="hello" args="{name: 'Greg'}" /> PHP: index.php <?php require_once 'Jmaki.php'; ?> <?php addWidget("hello", null, "{name: 'Greg'}"); ?> Phobos: index.ejs <% library.jmaki.insert({ component:"hello", args: {name: 'Greg'} }); %> Ruby: index.rb <%= jmaki_widget 'hello', :args => { :name => name }, :value => { 'Greg' } %> 20
  • 21. jMaki on Java • Taglibs on Java Server Pages (JSP) • Components on Java Server Faces (JSF) • Comprehensive Tooling and Runtime support • Recipe > Choose a Layout > Add Widgets > Configure Services > Add Glue 21
  • 22. jMaki & Phobos: Made for each other • Phobos > Lightweight scripting-friendly web application environment > Runs on Java platform > Primary supported language is JavaScript > No impedance mismatch > NetBeans IDE plug-in • Recipe > Choose a Layout > Add Widgets > Configure Services > Add Glue 22
  • 23. jMaki & Rails • Rails > Open source full-stack Ruby-based web framework > Database-backed web application > Model-View-Control pattern > Convention over Configuration • Recipe > Add jMaki Rails plugin > Add widgets to Rails View > Connect ActiveRecord and jMaki data model 23
  • 24. demo 24
  • 25. Steps for Writing jMaki Applications
  • 26. Steps for Writing jMaki Application 1.Choose a layout 2.Drop widgets into a layout 3.Configure widgets (if necessary) 4.Provide glue if widgets interact 5.Choose a theme 26
  • 27. jMaki Palette in NetBeans IDE 27
  • 28. Accessing External Resources
  • 29. Access External Services 29
  • 30. XMLHttpProxy (XHP) A Window to the Outside World • Access to RESTful web services not in the web app domain > Yahoo GeoCoder • Provides customizable XSL-to-JSON transformations • Access to RSS feeds > Atom/RSS • Widgets are tuned to use it 30
  • 31. 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" } 31
  • 32. Access Enterprise Resources jMaki work with JPA <a:widget name="yahoo.dataTable" args="{ columns :[ {label : 'Company', id : 'company'}, {label : 'Price', id : 'price'}, {label : 'Change', id : 'change'}, {label : '% Change', id : 'pchange'}, {label : 'Last Updated', id : 'lupdate'} ]}" service="data.jsp" /> data.jsp provides dynamic data from persistence using JPA 32
  • 33. 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("["); for (int i=0; i<list.size(); i++) { Company c = list.get(i); out.println("['" + c.getCompanyname() + "'," + c.getPrice() + "," + c.getChange() + "," + c.getPercentchange() + ",'" + c.getLastupdated() + "']"); if (i < list.size()-1) out.println(","); } out.println("]"); %> 33
  • 34. demo 34
  • 35. Event Model
  • 36. 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 • A means for one or more Project jMaki widgets to communicate with each other in a page using topics • Action – Simple events that are declarative • Glue – For processing dynamic events where you provide the logic in JavaScript 36
  • 37. 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} ] }" /> 37
  • 38. 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 38
  • 39. 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 Subscribe icon.onClick = function() { function fisheyeListener(item) { jmaki.publish(“/dojo/fisheye”, this); var targetDiv = document.getElementById(“new”); } var responseText = “”; var index = Number(item.index); switch (index) { case 1: // set response text break; ... } targetDiv.innerHTML = responseText; } jmaki.susbscribe(“/dojo/fisheye”, fisheyelistener); 39
  • 40. Publish Example icon.onClick = function (){ jmaki.publish("/dojo/fisheye/onSelect", {type : "onSelect", targetId : id}); } /dojo/fisheye is the base topic of the widget (“/onSelect” which is the sub-type gets appended) 40
  • 41. Subscribe Example jmaki.subscribe("/dojo/fisheye/*", fisheyeListener); function fisheyeListener(item) { var targetDiv = document.getElementById("newpage"); var responseText = ""; var index = Number(item.index); switch(index){ case 1: // Set responseText equal to Greg's bio break; case 2: // Set responseText equal to Roberto's bio default: responseText += 'Click on one of the photos above'; break; } targetDiv.innerHTML = responseText; } 41
  • 42. Sample in glue.js jmaki.namespace("jmaki.listeners"); jmaki.subscribe("/grizzly/message", "jmaki.listeners.sendMessage"); jmaki.listeners.sendMessage = function(message) { jmaki.doAjax({ method : "post", url : "words", content : { callback : "jmaki.CometClient.callback, action : "post", message: "{message : "" + escape(message) + "" } } 42
  • 43. demo 43
  • 44. jMaki Library Structure
  • 45. jMaki Library Structure • Collection of named components > Name if directory path of the component > A component is component.html, component.js, component.css and widget.json • The toolkit library content > For example, dojo or yahoo libs • Snippets for JSP technology, EJS, PHP, Rails, etc. • Palette entry names in a bundle file • All this packaged as a zip file for installation 45
  • 46. jMaki Library Structure 46
  • 47. config.json or widget.json Files • A central place for defining Project jMaki configuration information > JavaScript programming language library dependencies > API keys > CSS dependencies > Project jMaki Glue handler mappings 47
  • 48. widget.json for Dojo Clock Widget { "name" : "Clock", "type" : "dojo", 'version' : '.8', 'jmakiVersion' : '.8.2.3', "image" : "images/dojo-clock.jpg", "description" : "This widget is a clock.", "args": [ {"clockType" : { "type":"STRING", "description" : "The clock type.", "defaultValue" : 'plain', 'values': [ {'name' : 'Plain', 'value' : 'plain', 'description' : 'Clock with blue background.'}, {'name' : 'Black', 'value' : 'black', 'description' : 'Clock with black background.'}, 48
  • 49. widget.json for Dojo Clock ... 'config' : { 'type' : { 'id' : 'dojo', 'libs' : [ '../resources/libs/dojo/v.4.2/dojo.js' ], 'preload' : 'if (typeof djConfig =='undefined') djConfig = { parseWidgets: false, searchIds: [] };', 'resources' : [ '../resources/libs/dojo/v.4.2/src' ] } } 49
  • 50. Configure Widgets • id: You can override the automatic numbering • value: In-line a value for simple cases • service: Requires a corresponding server-side component • args: JavaScript programming language Object Literal/Associative Array • publish – topic events are published to • subscribe – topic to listen to for change events 50
  • 51. jMaki Component Customizer 51
  • 52. jMaki • Download jMaki NetBeans and Eclipse plug-ins What to • Watch Screencasts Do • Read tutorials • Join and contribute! • Participate on jMaki forums • Create something cool! http://jmaki.com 52
  • 53. jMaki Resources • jMaki Project Site: ajax.dev.java.net (jmaki.com) > Download binaries, IDE Plugins, Tutorials • Getting Started: ajax.dev.java.net/getstarted.html • Samples: ajax.dev.java.net/samples.html • Wiki: wiki.java.net/bin/view/Projects/jMaki • Aliases: dev@ajax.dev.java.net • jMaki Forum: forums.java.net/jive/forum.jspa?forumID=96 • Blogs: > weblogs.java.net/blog/gmurray71 > weblogs.java.net/blog/carlavmott > blogs.sun.com/arungupta > weblogs.java.net/blog/ludo > weblogs.java.net/blog/ntruchsess 53
  • 54. Building Rich Web Applications using jMaki Sang Shin Java Technology Evangelist Sun Microsystems, Inc. www.javapassion.com 54

×