1. 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

2. Learn how to write Ajax enabled web applications using jMaki framework

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

4. 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

5. 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

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

7. Multi-Server Support JSP / JSF technology: index.jsp PHP: index.php
taglib prefix="a" uri=" %>
<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'}
}); %>

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

9. jMaki widgets

10. 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=" %>
<a:widget name="hello" args="{name: 'world'}" />

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

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

13. 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"} ] }

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

15. 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

16. 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

17. 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'} ]
}" />

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

19. 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

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

21. jMaki Project Miso TravelMuse, Inc

22. 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 , Calendar, Instant Messaging
Has a plug-in architecture to enable support for other data types, e.g., source code

23. 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

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

25. 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

26. TravelMuse JSP Page Architecture

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

28. 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

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

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

31. 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

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

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

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

35. 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

36. 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