Web 2.0 and Java

Tags

technology, web 2.0, powerpoint

You must be logged in to download this document

be first to review

Semaj1212

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 2 Web 2.0 3 What problem are we trying to solve? 4 What our managers want... 5 What developers want... http://www.isoma.net/games/goggles.html 6 Realities We don't always have the skill sets  We don't have an infinite budget  We don't have infinite time  7 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. 8 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 9 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 10 There are other Options Faces – Ajax with existing and future JSF *  Phobos – Scripting on the server*  jMaki – Framework for creating JavaScript centric web applications  Dynamic * jMaki is supported in both Project Dyanmic Faces and Phobos 11 jMaki     jMaki - Not jMonkey ‘j’ is for JavaScript Maki is to Wrap (Japanese) jMaki == JavaScript Wrappers 12 jMaki Birthplace Kumamoto, Japan 13 What is jMaki? jMaki is a Client/Server Framework that provides:  On the Client –Styles and templates –Widget Model –Client Runtime –Client Services On the Server –Server Runtime –XMLHttpProxy 14  https://ajax.dev.java.net/about.html 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 15 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 16 jMaki Architecture 17 jMaki Demo 18 jMaki Styles and Templates 19 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 20 WYSIRWYG 21 What You See Is REALY What You Get Template HTML ... ... 22 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; } ... 23 jMaki Widgets 24 Hello World Widget component.htm

component.js jmaki.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" %> 25 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"%> 26 Multi-Server support JSP - index.jsp <%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> PHP - index.php Phobos index.ejs <% library.jmaki.insert({ component:"hello", args: {name: 'Greg'} }); %> 27 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 } 28 Wrapping other Widgets dojo.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(); } } 29 jMaki config.json A central place for defining jMaki configuration information which includes JavaScript library dependencies including API keys, CSS dependencies, and jMaki Glue handler mappings. 30 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: [] };" } ] } 31 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" } ] } ] } } 32 jMaki Publish/Subscribe A means for one or more jMaki widgets to communicate with each other in a page using topics. Publish/Subscribe is much like a server side messaging system by it runs in the scope of an HTML page. https://ajax.dev.java.net/publishsubscribe.html 33 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 34 Publishing Events icon.onClick = function (){ jmaki.publish("/dojo/fisheye", this); } 35 Subscribing to Events 36 jMaki Injector A JavaScript Utility for loading content from a URL (same domain) and properly loading scripts and CSS styles into the document and the contents a into a target element. 37 jMaki Injector Use Cases ● Build Composite Widgets – – Tabbed Views Accordions Support page as an application pattern ● Do partial page refresh – 38 Injector : Page Developer View index.jsp <%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> tab2.jsp <%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> 39 Injector : Yahoo Tabbed View 40 Injector : Tabbed View Dojo 41 jMaki API Injector Useage var divId = widget.uuid + "_tab" + i; var _c = dojo.widget.createWidget("ContentPane", {label: _row.label, selected: i==1}); _c.setContent("

Loading " + divId + "

"); tabbedview.addChild(_c); var _i = new jmaki.Injector(); _i.inject({url:_row.url, injectionPoint: divId}); 42 https://ajax.dev.java.net/injector.html jMaki Glue jMaki Glue lets you wire together jMaki widgets together using JavaScript action handlers which is called on a publish subscribe events. 43 Glue Mapping - config.json {"config": { "version": "1.2", "glue" : { "includes": ["glue.js"], "listeners": [ {"topic" : "/debug", "action": "call", "target": { "object": "jmaki.listeners", "functionName": "debug" } } ] } } 44 Glue JavaScript Action handler glue.js jmaki.listeners = function() { this.debug = function(args) { alert("debug: " + args); } } 45 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 46 XMLHttpProxy Use Case want to use Yahoo’s Geocoder API It’s provided as a RESTful web service I can’t access a domain from the browser I Requirements:    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 47 jMaki XMLHttpProxy 48 http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html JavaScript View var 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); } }); 49 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" } 50 http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html What Yahoo Returns 37.426357121.905617

MILPITAS CAUS 51 XML to JSON Conversion using XSLT {"coordinates": [ ]} { "address" : "", "city" : "", "state" : "", "zip" : "", "latitude" : "", "longitude" : "" } , 52 XMLHttpProxy Returns JSON {"coordinates": [ { "address" : "", "city" : "MILPITAS", "state" : "CA", "zip" : "", "latitude" : "37.426357", "longitude" : "121.905617" } ]} 53 End Result 54 Session Based Restriction HttpSession session = req.getSession(false); if (session == null){ res.setStatus(HttpServletResponse.SC_FORBIDDE N); return; } 55 http://weblogs.java.net/blog/gmurray71/archive/2006/08/restricting_acc.html Tool Support ● ● ● ● Full jMaki Support in Sync with releases jMaki Web Application has all the pieces Drag and Drop Support Stylized jMaki Pages 56 Netbeans Plugin 57 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! 58 jMaki Futures ● ● ● ● ● Considering jMaki 1.0 in spring – We're in beta now Support more libraries Support more widgets More layouts Even better tooling 59 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 60 https://ajax.dev.java.net or www.jmaki.com 61