jMaki: The power of Ajax made easy Carla Mott, Staff Engineer, Sun Microsystems Jennifer Myers, Staff Engineer, Sun Microsystems Daniel Ziaoure, Lead Web Developer, TravelMuse, Inc Greg Murray, Ajax Architect, Sun Microsystems

Learn how to write Ajax enabled web applications using jMaki framework

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki Webtop More Demos Summary

What is jMaki? Open Source (BSD) Lightweight framework 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, Eclipse, Ant support

Why use jMaki? Performance enhancments built-in Defaults set out of the box Convention over configuration Portable Widget libraries Share your extensions / widgets libraries Standardizes Event / Data Models Consistent programming model Use the tool of your choice Theming Support

jMaki Framework Client runtime services Widget component model Data Models Events = Actions / Glue Layouts / Theming model Server side services XmlHttpProxy Extensions

Multi-Server Support JSP / JSF technology: index.jsp PHP: index.php <%@ 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( array( name=>"hello", args => "{name: 'Greg'}")); ?> Ruby: index.php <%= jmaki_widget name='hello', args => {:name => 'Greg'} -%> Phobos index.ejs <% library.jmaki.insert({ component:"hello", args: {name: 'Greg'} }); %>

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki Webtop More Demos Summary

jMaki widgets

Hello World Widget component.htm component.js index.jsp <div id="${uuid}"></div> component.js jmaki.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:widget name="hello" args="{name: 'world'}" />

jMaki Data Value Inline for simple components Service Uses Ajax request to fetch data

jMaki Data - value <a:widget name="jmaki.tabMenu" value="{menu : [ { label: 'Link', href : 'http://www.jmaki.com' }, { label: 'Action', action :{topic: '/tabview/select', message: { targetId : 'main'}} } ] }" />

jMaki Data - service <a:widget name=”yahoo.dataTable" service=“tabledata.jsp" /> tabledata.jsp returns: {"columns":[ { "label" : "Title", "id" : "title"}, { "label":"Author", "id" : "author"}, { "label": "ISBN #", "id" : "isbn"}, { "label": "Description", "id" : "description"} ], "rows":[ { "title" : "Book Title 1", "author" : "Author 1", "isbn": "4412", "description" : "A Some long description"}, { "id" : "foo", "title" : "Book Title 2", "author" : "Author 2", "isbn": "4412", "description" : "A Some long description"} ] }

Agenda What is jMaki? jMaki model jMaki events Ajax Performance in jMaki Tooling jMaki Webtop Demo Summary

jMaki Events Based on publish and subscribe mechanism Anonymous communication Allows for dynamic number of consumers and producers Decouples producers from consumers Declarative events Action property No additional JavaScript code Programmatic events Allows you to provide un-obtrusive application behavior in a single place Ties the widgets together (loosely) based on topic names

jMaki Events using Actions <a:widget name="yahoo.button" value=" {label : 'select row 2', action : {topic : '/table/select', message: {targetId:'row2'}} }"/> action property publishes to topic /table/select message sends targetId row2

jMaki Events using Actions <a:widget name="dojo.table" subscribe=”/table” value="{columns : [ { label : 'Title', id : 'title'}, { label :'Author', id : 'author'}, { label : 'ISBN', id : 'isbn'}, { label : 'Description', id : 'description'} ], rows : [ { title : 'Book Title 1', author : 'Author 1', isbn: '4412', description : 'A Some long description'}, { id : 'row2', title : 'Book Title 2', author : 'Author 2', isbn : '4412', description : 'A Some long description'} ] }" />

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki WebTop More Demos Summary

Netbeans and Eclipse Tool Support Same source, build, dev team, releases Same web site, forums download area Deploy only once Save Reload page in browser Edit, save, test, edit, save, test Debug with FireBug / jMaki debugger as needed

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki Webtop More Demos Summary

jMaki Project Miso TravelMuse, Inc

Miso/jMaki Demo Introduction Miso provides search and indexing services Deep, fast and broad searching capability Supports various documents (ODF, PDF, MS) Exposes RESTful web services OpenSearch 1.1; RSS 2.0, Atom 1.0 or JSONP formats Initial release focused on E-Mail, Calendar, Instant Messaging Has a plug-in architecture to enable support for other data types, e.g., source code

Miso/jMaki Demo Implementation jMaki used to rapidly develop a sample client No prior experience with Ajax Started with bundled sample code add/customize widgets use pub/sub to communicate to new widgets Source code and demo available at the OpenOffice.Org Pod during JavaOne Future direction: integrate jMaki Webtop into Sun Convergence web-based communications services client

jMaki: The power of Ajax made easy Daniel Ziaoure Lead Web Developer TravelMuse, Inc. 24

TravelMuse Company founded in April 2007 Imagine. Experience. Share Company founded in April 2007 Alpha site launched in January 2008 and “Almost Beta” site launched in April 2008 11 full-time employees, 40 freelance writers, 5 developers in India Public beta site launch scheduled for June 2008 Funded by Azure Capital Partners, California Technology Ventures and other investors TravelMuse: Helps travelers save time and make better decisions at every step of the travel planning process by providing the Web’s most user-friendly travel planning experience. Understands the specific requirements of traveling with children and enables families to make the best travel decisions Provides inspiration, planning and booking services to the user through an advanced and unique Web 2.0 experience, unlike the competition which provides commodity user experience, fragmented services, and generic content

TravelMuse JSP Page Architecture

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance jMaki Webtop More Demos Summary

Ajax Performance in jMaki 1.8 Minimizes number of HTTP requests Combines CSS and Script resources Put CSS at the beginning of documents Puts scripts at the end of documents Writes correct Expires Headers Removes duplicate JavaScript and CSS requests Writes the correct headers Cache-Control Etag Expires Gzips Content

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki Webtop More Demos Summary

jMaki Webtop Problem Trying to Solve Create Mashups Features Needed Create a Ajax User interface Manage Widget State Mange Users Integrate Services

jMaki Webtop - What is it? Like a wiki but the core unit of modularity is a widget, gadget, or included URL Optimized for building mashups Using publish subscribe Service integration using the XmlHttpProxy https://jmaki-webtop.dev.java.net

jMaki Webtop - Features Visual Palette Resizable column based layout Available as a widget Widget state managed JSON based Available with widget management PHP JSP

jMaki Webtop - Architecture View JavaServer Pages JSP tag based jMaki Widget Management Java Persistence / MySQL User Management

Agenda What is jMaki? jMaki model jMaki events Tooling Demos Ajax Performance in jMaki jMaki Webtop More Demos Summary

Summary jMaki Provides a comprehensive solution for Ajax Component model Data Models Events Performance enhancements Tooling Support is essential Templates Customization jMaki allows you to create sophisticated mashups easily

Carla Mott, Staff Engineer, Sun Microsystems Jennifer Myers, Staff Engineer, Sun Microsystems Daniel Ziaoure, Lead Web Developer, TravelMuse, Inc Greg Murray, Ajax Architect, Sun Microsystems