Web 2.0 and Java
description
Transcript of Web 2.0 and Java
![Page 1: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/1.jpg)
Web 2.0 and Java
Greg MurrayGreg Murray
Ajax ArchitectSun Microsystems
The Zen of jMaki
December 12, 2006
![Page 2: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/2.jpg)
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
![Page 3: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/3.jpg)
3
Web 2.0
![Page 4: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/4.jpg)
4
What problem are we trying to solve?
![Page 5: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/5.jpg)
5
What our managers want...
![Page 6: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/6.jpg)
6
What developers want...
http://www.isoma.net/games/goggles.html
![Page 7: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/7.jpg)
7
Realities
We don't always have the skill setsWe don't have an infinite budgetWe don't have infinite time
![Page 8: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/8.jpg)
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.
![Page 9: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/9.jpg)
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
![Page 10: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/10.jpg)
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
![Page 11: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/11.jpg)
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
![Page 12: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/12.jpg)
12
jMaki
jMaki - Not jMonkey ‘j’ is for JavaScript Maki is to Wrap (Japanese) jMaki == JavaScript Wrappers
![Page 13: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/13.jpg)
13
jMaki Birthplace
Kumamoto, Japan
![Page 14: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/14.jpg)
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:
![Page 15: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/15.jpg)
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
![Page 16: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/16.jpg)
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
![Page 17: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/17.jpg)
17
jMaki Architecture
![Page 18: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/18.jpg)
18
jMaki Demo
![Page 19: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/19.jpg)
19
jMaki Styles and Templates
![Page 20: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/20.jpg)
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
![Page 21: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/21.jpg)
21
WYSIRWYG
What You See Is REALY What You Get
![Page 22: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/22.jpg)
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>
![Page 23: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/23.jpg)
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;}...
![Page 24: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/24.jpg)
24
jMaki Widgets
![Page 25: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/25.jpg)
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'}" />
![Page 26: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/26.jpg)
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>
![Page 27: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/27.jpg)
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'} }); %>
![Page 28: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/28.jpg)
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
}
![Page 29: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/29.jpg)
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();
}
}
![Page 30: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/30.jpg)
30
jMaki config.json
A central place for defining jMaki configurationinformation which includes JavaScript librarydependencies including API keys, CSSdependencies, and jMaki Glue handler mappings.
![Page 31: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/31.jpg)
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: [] };" } ]}
![Page 32: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/32.jpg)
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"
}]
}]
}}
![Page 33: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/33.jpg)
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
![Page 34: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/34.jpg)
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
![Page 35: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/35.jpg)
35
Publishing Events
icon.onClick = function (){jmaki.publish("/dojo/fisheye", this);
}
![Page 36: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/36.jpg)
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>
![Page 37: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/37.jpg)
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.
![Page 38: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/38.jpg)
38
jMaki Injector Use Cases
● Build Composite Widgets– Tabbed Views– Accordions
● Do partial page refresh– Support page as an application pattern
![Page 39: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/39.jpg)
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
![Page 40: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/40.jpg)
40
Injector : Yahoo Tabbed View
![Page 41: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/41.jpg)
41
Injector : Tabbed View Dojo
![Page 42: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/42.jpg)
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
![Page 43: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/43.jpg)
43
jMaki Glue
jMaki Glue lets you wire together jMaki widgets together using JavaScript action handlers which is called on a publish subscribe events.
![Page 44: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/44.jpg)
44
Glue Mapping - config.json{"config": { "version": "1.2", "glue" : { "includes": ["glue.js"], "listeners": [ {"topic" : "/debug", "action": "call", "target": { "object": "jmaki.listeners", "functionName": "debug" } } ] }}
![Page 45: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/45.jpg)
45
Glue JavaScript Action handler
jmaki.listeners = function() { this.debug = function(args) { alert("debug: " + args); }}
glue.js
![Page 46: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/46.jpg)
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
![Page 47: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/47.jpg)
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
![Page 48: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/48.jpg)
48
jMaki XMLHttpProxy
http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html
![Page 49: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/49.jpg)
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); }});
![Page 50: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/50.jpg)
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"}
![Page 51: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/51.jpg)
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 -->
![Page 52: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/52.jpg)
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>
![Page 53: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/53.jpg)
53
XMLHttpProxy Returns JSON
{"coordinates": [ { "address" : "", "city" : "MILPITAS", "state" : "CA", "zip" : "", "latitude" : "37.426357", "longitude" : "-121.905617" } ]}
![Page 54: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/54.jpg)
54
End Result
![Page 55: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/55.jpg)
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; }
![Page 56: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/56.jpg)
56
Tool Support
● Full jMaki Support in Sync with releases● jMaki Web Application has all the pieces● Drag and Drop Support● Stylized jMaki Pages
![Page 57: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/57.jpg)
57
Netbeans Plugin
![Page 58: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/58.jpg)
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!
![Page 59: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/59.jpg)
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
![Page 60: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/60.jpg)
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
![Page 61: Web 2.0 and Java](https://reader033.fdocuments.us/reader033/viewer/2022051417/56814afb550346895db80ed0/html5/thumbnails/61.jpg)
61
https://ajax.dev.java.net
or
www.jmaki.com