2007 javaone conference presentation...
TRANSCRIPT
![Page 1: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/1.jpg)
jMaki : July 25, 2007
jMakiCreating Ajax Applications Made Easy
Greg Murray
Ajax Architect / jMaki Lead
Sun Microsystemshttp://jmaki.com
![Page 2: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/2.jpg)
jMaki 2
Goal
Build Ajax-enabled Web 2.0 applications using jMaki framework.
![Page 3: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/3.jpg)
jMaki 3
Agenda
● What Is Project jMaki?● Core functionality● Widget libraries● Glue● jMaki Recipe● Demo
![Page 4: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/4.jpg)
jMaki 4
What Is Project jMaki?
● Lightweight framework● Open Source (BSD)● Use the best of breed libraries and tools
● Dojo, Yahoo, Script.aculo.us, Spry, Google, Gears, Flash, and your code
● Support for Java, Server JavaScript, PHP, Ruby● Netbeans and Eclipse Tool support
![Page 5: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/5.jpg)
jMaki 5
● Defaults set out of the box● Generic Component libraries
● Share with project, organization or company● Standardizes data model
● publish and subscribe● Normalized toolkit APIs and interaction model
Why use jMaki
![Page 6: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/6.jpg)
jMaki 6
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'} }); %>
Multi-Server Support
![Page 7: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/7.jpg)
jMaki 7
jMaki Framework
● Client runtime services● Server side services● Widget component model● Layout● Themes● XmlHttpProxy● Model● Extensions
![Page 8: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/8.jpg)
jMaki 8
Project jMaki Architecture
![Page 9: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/9.jpg)
jMaki 9
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
![Page 10: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/10.jpg)
jMaki 10
Layouts
● Standard based CSS and HTML
● Templates provided
![Page 11: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/11.jpg)
jMaki 11
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
![Page 12: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/12.jpg)
jMaki 12
Client Runtime
● Manages widgets● Namespace● Publish / Subscribe● Script / Style Loading● Generic Container
![Page 13: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/13.jpg)
jMaki 13
Server Side Runtime
● Ties client runtime to server side technology
● Renders script/CSS based on library types
● Handles data conversion as needed
![Page 14: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/14.jpg)
jMaki 14
XmlHttpProxy
● Access to RESTful web services not in the web app domain
● Provides customizable XSL-to-JSON transformations
● RSS Data – Lingua Franca
![Page 15: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/15.jpg)
jMaki 15
● Tabbed Views● Trees● Accordions● Menus● Data Grids/Tables
Project jMaki Data Models
Learn one model and use any widget implementation
http://wiki.java.net/bin/view/Projects/jMakiDataModels
![Page 16: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/16.jpg)
jMaki 16
Common Properties
● id● label● href● include● action
● topic● message
● targetId
![Page 17: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/17.jpg)
jMaki 17
Accordion Model{rows : [ { label : 'Books', content : 'Book content'}, { label : 'Magazines', content : 'Magazines here'}, { label :'Newspaper', include : 'foo.jsp', lazyLoad : true} ]}
![Page 18: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/18.jpg)
jMaki 18
Tab Model{ tabs :[ {label: 'My Tab', content : 'Some Content', tabid: 'tab1', selected: true}}, {label: 'My Tab 2', content : '', action:{topic: '/mytopic', message : { value : 'data.jsp'} }}, {label: 'My Tab 3', include: 'tab3.jsp', lazyload: true} ]}
![Page 19: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/19.jpg)
jMaki 19
Menu Model{menu: [ { label:'Must Read', menu: [ { label: 'Slashdot', href:'http://www.slashdot.org' }, { label: 'dev.java.net', menu: [ {label : 'GlassFish', href: 'http://glassfish.dev.java.net'} ] } ] }, { label : 'Click me for fun!', action:{message: '/fun.jsp'}}, { label : 'Sun Microsystems', href: 'http://www.sun.com', action:{topic: '/my/topic',message:'http://www.sun.com'} }, { label:'Oracle', href: 'http://www.oracle.com', action:{message:'http://www.oracle.com' }} ]}
![Page 20: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/20.jpg)
jMaki 20
Layout and Templates
● We are a cut-and-paste generation● Gives you a place to put your widgets● Uses standard approach● Web Designer friendly● Easy to customizing
![Page 21: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/21.jpg)
jMaki 21
CSS Templates
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.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 22: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/22.jpg)
jMaki 22
.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;}...
CSS
![Page 23: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/23.jpg)
jMaki 23
Widgets
Project
![Page 24: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/24.jpg)
jMaki 24
component.htm
<div id="${uuid}"></div>
component.jsjmaki.namespace("jmaki.widgets.hello");
jmaki.widgets.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'}" />
Hello World Widget
![Page 25: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/25.jpg)
jMaki 25
dojo.require("dojo.widget.Editor");
jmaki.namespace("jmaki.widgets.dojo.editor");
jmaki.widgets.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();
}
}
Wrapping a Dojo Widget
![Page 26: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/26.jpg)
jMaki 26
● id: You can override the automatic numbering● value: In-line a value for simple cases● service: Requires a corresponding server-side
component● args: JavaScript Object Literal/Associative Array● publish – over-ride default publish topic● subscribe – over-ride default subscribe topic
Configure Widgets
![Page 27: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/27.jpg)
jMaki 27
config.json or widget.json Files
A central place for defining configuration information which includes JavaScript library dependencies including API keys, CSS dependencies, extensions, and glue handler mappings used by both the server runtime and tools.
![Page 28: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/28.jpg)
jMaki 28
{"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: [] };" } ]}
External Libraries
![Page 29: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/29.jpg)
jMaki 29
{"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"
}]
}]
}}
External Services (Google)
![Page 30: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/30.jpg)
jMaki 30
https://ajax.dev.java.net/publishsubscribe.html
Publish/Subscribe
● A means for one or more Project jMaki widgets to communicate with each other in a page using topics
● Publish/Subscribe is much like a server-side messaging system but it runs in the scope of an HTML page
![Page 31: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/31.jpg)
jMaki 31
Common Published Events
● onSelect● onClick● onExpand● onCollapse
![Page 32: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/32.jpg)
jMaki 32
Common Payload Properties
● widgetId● targetId● value
![Page 33: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/33.jpg)
jMaki 33
jmaki.publish("/yahoo/tabbedview/select", {targetId : 'foo'});
Publish Example
![Page 34: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/34.jpg)
jMaki 34
jmaki.subscribe("/yahoo/button/*", function (e) {
// do something
} );
Subscribe Example
![Page 35: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/35.jpg)
jMaki 35
actions
{ tabs :[ {label: 'My Tab', content : 'Some Content', id : 'tab1', selected: true}}, {label: 'My Tab 2', content : '', action:{ topic: '/mytree/collapse', message : { targetId : 'foo'} }}, {label: 'My Tab 3', include: 'tab3.jsp', lazyload: true} ]}
![Page 36: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/36.jpg)
jMaki 36
jMaki Glue
● Allows you to provide un-obtrusive application behavior in a single place
● Based on publish/subscribe● Ties the widgets together (loosely)● Very similar to struts actions
![Page 37: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/37.jpg)
jMaki 37
Tree Model{ root : { label : 'Ext Tree Root Node', action : { topic : '/dojo/table/select', message : { targetId : 'foo'}, children : [ { label : 'Node 1.1', id : 'foo', children : [ { label : 'Node 3.1', action : {topic : '/tree/1', message : { url : 'foo'}}} ] } ] } }
![Page 38: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/38.jpg)
jMaki 38
Model updates var node = { label : 'Graft', expanded : true, children : [ {label : 'Graft .1'}, {label : 'Graft .2'} ] };
jmaki.publish("/Ext/tree/addNodes", {nodeId : 'foo', value : node});
![Page 39: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/39.jpg)
jMaki 39
Project jMaki Recipe
● Choose a Layout● Add Widgets● Configure services● Add Glue● Done!
![Page 40: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/40.jpg)
The Zen of jMaki 40
DEMO
![Page 41: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/41.jpg)
jMaki 41
Summary
● Lightweight framework for building Ajax enabled Web 2.0 applications
● Support for Java code, PHP, JavaScript, and Ruby
● Tool support with NetBeans™ architecture and Eclipse
● Simple recipe
![Page 42: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/42.jpg)
jMaki 42
For More Information
See Project jMaki website● http://jmaki.com
![Page 43: 2007 JavaOne Conference Presentation Templateajaxexperience.techtarget.com/images/Presentations/Mott_Carla_jMaki.pdf · Injector loads the contents of external page in current page](https://reader033.vdocuments.us/reader033/viewer/2022041418/5e1d2dbffe98ca1de379d4f5/html5/thumbnails/43.jpg)
The Zen of jMaki 43
Q&A