Web 2.0 and Java

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>  ... </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"

}]

}]

}}

http://maps.google.com/maps

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


{ "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>

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


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

Date post:	16-Jan-2016
Category:	Documents
Upload:	ervin
View:	20 times
Download:	2 times

Web 2.0 and Java

Documents