View
20
Download
2
Category
Preview:
DESCRIPTION
Web 2.0 and Java. The Zen of jMaki. Greg Murray Ajax Architect Sun Microsystems. December 12, 2006. Agenda. Web 2.0 and Java What is jMaki jMaki Widget Model jMaki Templates jMaki Injector jMaki Glue XmlHttpProxy for Mashups Building Applications with jMaki. Web 2.0. - PowerPoint PPT Presentation
Citation preview
Web 2.0 and Java
Greg MurrayGreg Murray
Ajax ArchitectSun Microsystems
The Zen of jMaki
December 12, 2006
2
Agenda
Web 2.0 and Java What is jMaki jMaki Widget Model jMaki Templates jMaki Injector jMaki Glue XmlHttpProxy for Mashups Building Applications with jMaki
3
Web 2.0
4
What problem are we trying to solve?
5
What our managers want...
6
What developers want...
http://www.isoma.net/games/goggles.html
7
Realities
We don't always have the skill setsWe don't have an infinite budgetWe don't have infinite time
8
End Result
We copy something a web application out there or go with a technology we know. Or we go over the top and over-reach our skill set.
9
Ajax options in Java
Frameworks– Direct Web Remoting (DWR)– Java Server Faces– Use all Java Google Web Toolkit
Use JavaScript toolkit on client with:– Servlets
– JSP
10
Dojo Toolkit
Why Dojo?– Package/build system - Load what you need– dojo.event - Cross browser event handling – dojo.ally - Accessibility– dojo.18n - Internationalization– dojo.lfx Effects– dojo.gfx - SVG/VML abstraction– dojo.io - Common abstraction to Ajax IO– dojo.storage - Storage
11
There are other Options
Dynamic Faces – Ajax with existing and future JSF *
Phobos – Scripting on the server*jMaki – Framework for creating JavaScript
centric web applications
* jMaki is supported in both Project Dyanmic Faces and Phobos
12
jMaki
jMaki - Not jMonkey ‘j’ is for JavaScript Maki is to Wrap (Japanese) jMaki == JavaScript Wrappers
13
jMaki Birthplace
Kumamoto, Japan
14
What is jMaki?
On the Client–Styles and templates
–Widget Model
–Client Runtime
–Client Services On the Server
–Server Runtime
–XMLHttpProxy
https://ajax.dev.java.net/about.html
jMaki is a Client/Server Framework that provides:
15
jMaki
jMaki - Not jMonkey jMaki is not an all or nothing framework ‘j’ is for JavaScript BSD License Supports
– JavaServer Pages– JavaServer Faces– Embedded JavaScript (Phobos)– PHP 5.x
16
jMaki target Audience Java, PHP, and Phobos developers want to use JavaScript but
may want one level of indirection between the script and themselves.
JavaScript developers who want a simple re-usable framework to tie applications together.
Designers who want access to CSS
17
jMaki Architecture
18
jMaki Demo
19
jMaki Styles and Templates
20
jMaki Styles and Templates● We are a cut and paste generation● Give you a place to put your widgets● Uses standard approach● Web Designer friendly● Easy to customizing
https://ajax.dev.java.net/source/browse/*checkout*/ajax/ws/lib/css/index.html
21
WYSIRWYG
What You See Is REALY What You Get
22
Template HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><link rel="stylesheet" href="jmaki-standard-footer.css" type="text/css"></link>
<html> ... <div class="header"> <div class="banner">Application Name</div>
</div> <!-- header --> ... </body>
</html>
23
Template CSS.header { height:100px; border: 1px solid #000000;}
.main { position: relative; width: 100%; height:auto; margin-top: 5px;}
.content { margin: 0 0 0 200px; height: auto; border: 1px solid #000000;}...
24
jMaki Widgets
25
Hello World Widgetcomponent.htm
<div id="${uuid}"></div>
component.jsjmaki.hello = {};jmaki.hello.Widget = function(wargs) { var mydiv = document.getElementById(wargs.uuid); mydiv.innerHTML = "Hello " + wargs.args.name;}
index.jsp<%@ taglib prefix="a"
uri="http://java.sun.com/jmaki" %><a:ajax name="hello" args="{name: 'world'}" />
26
jMaki in Dynamic Faces<%@ taglib prefix="a" uri="http://java.sun.com/jmaki-jsf" %><%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %><%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %><%@ taglib prefix="jsfExt"
uri="http://java.sun.com/jsf/extensions/dynafaces"%> <f:view>
<jsfExt:scripts/><h:form prependId="false"> <a:ajax name="hello" args="{name: 'Greg'}" /> </h:form></f:view>
27
Multi-Server supportJSP - index.jsp<%@ taglib prefix="a"
uri="http://java.sun.com/jmaki" %><a:ajax 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'} }); %>
28
jMaki Widget Model// define the namespaces for foo and bar
if (typeof jmaki.foo == 'undefined') {
jmaki.foo = {};
}
jmaki.foo.bar = {};
jmaki.foo.bar.Widget = function(wargs) {
// widget code here
}
29
Wrapping other Widgetsdojo.require("dojo.widget.Editor");
// define namespace jmaki.dojo.editor
jmaki.dojo.editor.Widget = function(wargs) {
var container = document.getElementById(wargs.uuid);
this.editor = dojo.widget.createWidget("Editor2",
{ shareToolbar: false, toolbarAlwaysVisible: true,
focusOnLoad: false }, container);
this.getValue = function() {
return this.editor.getEditorContent();
}
}
30
jMaki config.json
A central place for defining jMaki configurationinformation which includes JavaScript librarydependencies including API keys, CSSdependencies, and jMaki Glue handler mappings.
31
Adding Dojo in the config.json
{"config": { "version": "1.2", "types": [ {"id": "dojo", "version": ".4.1", "libs": ["/resources/libs/dojo/version.4.1/dojo.js" ], "preload" : "if (typeof djConfig == 'undefined')
djConfig = { parseWidgets: false, searchIds: [] };" } ]}
32
Google Maps in config.json{"config": {"version": "1.2", "types": [ {"id": "google.map", "libs": ["http://maps.google.com/maps?
file=api&v=2&key="], "apikey" : "google" ], "apikeys" : [ {"id": "google", "keys": [ {"url": "http://localhost:8080/jmaki/", "key": "xoxoxoxo"
}]
}]
}}
33
jMaki Publish/Subscribe
A means for one or more jMaki widgets tocommunicate with each other in a page using topics.Publish/Subscribe is much like a server sidemessaging system by it runs in the scopeof an HTML page.
https://ajax.dev.java.net/publishsubscribe.html
34
Publish/Subscribe Usecases
● You don't want to put application specific code in a specific widget
● You have an application controller that drives application behavior
● More than one widget needs be acted upon
35
Publishing Events
icon.onClick = function (){jmaki.publish("/dojo/fisheye", this);
}
36
Subscribing to Events<script> function fisheyeListener(item) { var targetDiv = document.getElementById("newpage"); var responseText = ""; var index = Number(item.index); switch(index){ case 1: // Set responseText equal to Jayashri'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; } jmaki.subscribe("/dojo/fisheye", fisheyeListener);</script>
37
jMaki Injector
A JavaScript Utility for loading content froma URL (same domain) and properly loading scriptsand CSS styles into the document and the contentsa into a target element.
38
jMaki Injector Use Cases
● Build Composite Widgets– Tabbed Views– Accordions
● Do partial page refresh– Support page as an application pattern
39
Injector : Page Developer View
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> <a:ajax name="dojo.tabbedview" value="{tabs:[{label:'My Tab', content: 'Some static content'}, {label:'My Tab 2', url: 'tab2.jsp'} ]}" />
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>
<a:ajax name="yahoo.calendar" /><a:ajax name="flickr.favorites" args="{tags:'thekt', size:50, columns:2, count:4}"/>
index.jsp
tab2.jsp
40
Injector : Yahoo Tabbed View
41
Injector : Tabbed View Dojo
42
jMaki API Injector Useage
var divId = widget.uuid + "_tab" + i;
var _c = dojo.widget.createWidget("ContentPane",
{label: _row.label, selected: i==1});
_c.setContent("<div style='widget:100%;height:323px' id='" +
divId +"'>Loading " + divId + "</div>");
tabbedview.addChild(_c);
var _i = new jmaki.Injector();
_i.inject({url:_row.url, injectionPoint: divId});
https://ajax.dev.java.net/injector.html
43
jMaki Glue
jMaki Glue lets you wire together jMaki widgets together using JavaScript action handlers which is called on a publish subscribe events.
44
Glue Mapping - config.json{"config": { "version": "1.2", "glue" : { "includes": ["glue.js"], "listeners": [ {"topic" : "/debug", "action": "call", "target": { "object": "jmaki.listeners", "functionName": "debug" } } ] }}
45
Glue JavaScript Action handler
jmaki.listeners = function() { this.debug = function(args) { alert("debug: " + args); }}
glue.js
46
jMaki XMLHttpProxy
A generic proxy that allows you to access external content including RESTful web services. The proxy provides both session and token based security to prevent miss-use and un-authorized access.
https://ajax.dev.java.net/xmlhttpproxy.html
47
XMLHttpProxy
I want to cache common coordinates locally I want to format the data in a JavaScript Object
Notation (JSON) I want only my clients to access the service
Requirements:
I want to use Yahoo’s Geocoder APIIt’s provided as a RESTful web serviceI can’t access a domain from the browser
Use Case
48
jMaki XMLHttpProxy
http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html
49
JavaScript Viewvar location =dojo.io.bind({ url: "xhp, mimetype: "text/json", content: { key: “yahoogeocoder”, urlparams: “location=milpitas ca” }, load : function(type, data) { alert("latitude=" + data.coordinates[0].latitude); }});
50
XMLHttpProxy xhp.json
http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html
{ "id": "yahoogeocoder", "url": "http://api.local.yahoo.com/MapsService/V1/geocode", "apikey" : "appid=jmaki-key", "xslStyleSheet": "yahoo-geocoder.xsl", "defaultURLParams": "location=milpitas,+ca"}
51
What Yahoo Returns
<?xml version="1.0"?> <ResultSet xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="urn:yahoo:maps" xsi:schemaLocation="urn:yahoo:maps http://api.local.yahoo.com/MapsService/V1/GeocodeResponse.xsd"><Result precision="city"><Latitude>37.426357</Latitude><Longitude>-121.905617</Longitude><Address></Address><City>MILPITAS</City><State>CA</State><Zip></Zip><Country>US</Country></Result></ResultSet><!-- ws02.search.scd.yahoo.com uncompressed/chunked Wed Oct 18 10:50:46 PDT 2006 -->
52
XML to JSON Conversion using XSLT
<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
xmlns:yn="urn:yahoo:maps" >
<xsl:output method="text" encoding="UTF-8"/> <xsl:template match="text()"/> <xsl:template match="@*"/>
<xsl:template match="yn:ResultSet"> {"coordinates": [ <xsl:apply-templates/> ]} </xsl:template> <xsl:template match="yn:Result"> { "address" : "<xsl:value-of select="yn:Address"/>", "city" : "<xsl:value-of select="yn:City"/>", "state" : "<xsl:value-of select="yn:State"/>", "zip" : "<xsl:value-of select="yn:Zip"/>", "latitude" : "<xsl:value-of select="yn:Latitude"/>", "longitude" : "<xsl:value-of select="yn:Longitude" />"
} <xsl:if test="position() < last()">,</xsl:if> </xsl:template></xsl:stylesheet>
53
XMLHttpProxy Returns JSON
{"coordinates": [ { "address" : "", "city" : "MILPITAS", "state" : "CA", "zip" : "", "latitude" : "37.426357", "longitude" : "-121.905617" } ]}
54
End Result
55
Session Based Restriction
http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html
HttpSession session = req.getSession(false);if (session == null){res.setStatus(HttpServletResponse.SC_FORBIDDEN); return; }
56
Tool Support
● Full jMaki Support in Sync with releases● jMaki Web Application has all the pieces● Drag and Drop Support● Stylized jMaki Pages
57
Netbeans Plugin
58
Putting all the pieces together
● Choose a jMaki Template● Drop in a few jMaki Widgets or create some● Configure the Widgets
– publish/subscribe● Add jMaki Glue to wire everything together● Done!
59
jMaki Futures
● Considering jMaki 1.0 in spring – We're in beta now
● Support more libraries● Support more widgets● More layouts● Even better tooling
60
Review
● Java technologies can be used to create Web 2.0 Applications
● jMaki enabled Web 2.0 style applications easily
● jMaki promotes a standards based approach using HTML + CSS + JavaScript
● jMaki is not an all or nothing framework.● Use what you need● There is great tool support for jMaki
61
https://ajax.dev.java.net
or
www.jmaki.com
Recommended