building rich web building rich web applications applications
DESCRIPTION
TRANSCRIPT
1
Building Rich WebBuilding Rich WebApplications Applications using jMakiusing jMaki
Sang ShinSang ShinJava Technology EvangelistJava Technology EvangelistSun Microsystems, Inc.Sun Microsystems, Inc.www.javapassion.comwww.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
What is & Why jMaki?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
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
6
Benefits of using jMaki
jMaki ArchitecturejMaki Architecture
8
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
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
10
Client Services API
• jmaki.publish/subscribe• jmaki.Timer• jmaki.doAjax• jmaki.loadScript/loadStyle• jmaki.namespace• jmaki.extend• jmaki.log
Widget ModelWidget 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
13
Widget Model
https://ajax.dev.java.net/widget-model.html
component.htmHTML Template
component.cssCS Styles
component.jsBehavior
Bootstrap Code
jMaki Widget
14
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://jmaki/v1.0/jsp” %><a:widget name=”hello” args=”{name: 'world'}” />
Layout and ThemesLayout and Themes
16
jMaki Layouts
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
18
demo
Multi-Language SupportMulti-Language Support
20
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' }%>
jMaki: Multi-Language support
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
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
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
24
demo
Steps for Writing Steps for Writing jMaki ApplicationsjMaki Applications
26
Steps for Writing jMaki Application
1.Choose a layout2.Drop widgets into a layout3.Configure widgets (if necessary)4.Provide glue if widgets interact5.Choose a theme
27
jMaki Palette in NetBeans IDE
Accessing ExternalAccessing ExternalResourcesResources
29
Access External Services
30
XMLHttpProxy (XHP)
• 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
A Window to the Outside World
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"}
32
Access Enterprise ResourcesjMaki 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
33
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("["); 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("]");%>
34
demo
Event ModelEvent 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
37
<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
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 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
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 pagePublish Subscribeicon.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);
40
icon.onClick = function (){jmaki.publish("/dojo/fisheye/onSelect", {type :
"onSelect", targetId : id}); }
Publish Example
/dojo/fisheye is the base topic of the widget (“/onSelect” which is the sub-type gets appended)
41
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; }
Subscribe Example
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) + "\" }}
43
demo
jMaki Library StructurejMaki 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
46
jMaki Library Structure
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
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.'},
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' ] }
}
50
• 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
Configure Widgets
51
jMaki Component Customizer
52
• Download jMaki NetBeans and Eclipse plug-ins
• Watch Screencasts• Read tutorials• Join and contribute!• Participate on jMaki forums• Create something cool!
jMaki
What toDo
http://jmaki.com
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: [email protected]• 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
54
Building Rich WebBuilding Rich WebApplications Applications using jMakiusing jMaki
Sang ShinSang ShinJava Technology EvangelistJava Technology EvangelistSun Microsystems, Inc.Sun Microsystems, Inc.www.javapassion.comwww.javapassion.com
54