Post on 30-Oct-2019
jMaki : July 25, 2007
jMakiCreating Ajax Applications Made Easy
Greg Murray
Ajax Architect / jMaki Lead
Sun Microsystemshttp://jmaki.com
jMaki 2
Goal
Build Ajax-enabled Web 2.0 applications using jMaki framework.
jMaki 3
Agenda
● What Is Project jMaki?● Core functionality● Widget libraries● Glue● jMaki Recipe● Demo
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
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
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
jMaki 7
jMaki Framework
● Client runtime services● Server side services● Widget component model● Layout● Themes● XmlHttpProxy● Model● Extensions
jMaki 8
Project jMaki Architecture
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
jMaki 10
Layouts
● Standard based CSS and HTML
● Templates provided
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
jMaki 12
Client Runtime
● Manages widgets● Namespace● Publish / Subscribe● Script / Style Loading● Generic Container
jMaki 13
Server Side Runtime
● Ties client runtime to server side technology
● Renders script/CSS based on library types
● Handles data conversion as needed
jMaki 14
XmlHttpProxy
● Access to RESTful web services not in the web app domain
● Provides customizable XSL-to-JSON transformations
● RSS Data – Lingua Franca
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
jMaki 16
Common Properties
● id● label● href● include● action
● topic● message
● targetId
jMaki 17
Accordion Model{rows : [ { label : 'Books', content : 'Book content'}, { label : 'Magazines', content : 'Magazines here'}, { label :'Newspaper', include : 'foo.jsp', lazyLoad : true} ]}
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} ]}
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' }} ]}
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
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>
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
jMaki 23
Widgets
Project
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
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
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
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.
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
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)
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
jMaki 31
Common Published Events
● onSelect● onClick● onExpand● onCollapse
jMaki 32
Common Payload Properties
● widgetId● targetId● value
jMaki 33
jmaki.publish("/yahoo/tabbedview/select", {targetId : 'foo'});
Publish Example
jMaki 34
jmaki.subscribe("/yahoo/button/*", function (e) {
// do something
} );
Subscribe Example
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} ]}
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
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'}}} ] } ] } }
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});
jMaki 39
Project jMaki Recipe
● Choose a Layout● Add Widgets● Configure services● Add Glue● Done!
The Zen of jMaki 40
DEMO
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
jMaki 42
For More Information
See Project jMaki website● http://jmaki.com
The Zen of jMaki 43
Q&A