Building Rich Web Building Rich Web Applications Applications

1

Building Rich WebBuilding Rich WebApplications Applications using jMakiusing jMaki

Sang ShinSang ShinJava Technology EvangelistJava Technology EvangelistSun Microsystems, Inc.Sun Microsystems, Inc.www.javapassion.comwww.javapassion.com

1

2

Topics

• What is and Why jMaki?• jMaki Architecture• Widget model• Layout and Themes• Multi-Language support• Accessing external resources• Event model• jMaki Library Structure

What is & Why jMaki?What is & Why jMaki?

4

Origins of jMaki?

• ‘j’ is for JavaScript™ technology • Maki == to wrap in Japanese• Started as a way of wrapping JavaScript technology

functionality• Project jMaki has evolved to provide more

5

jMaki Features

• Widgets from popular toolkits> Dojo, Yahoo, Script.aculo.us, Spry, Google

• Make JavaScript technology accessible to Java technology, Phobos, PHP and Ruby

• Standardize event and data models> Consistent programming model

• XmlHttpProxy> Access to RESTful web services not in the web app domain

• Integrated Tools support> NetBeans and Eclipse plug-in's

6

Benefits of using jMaki

jMaki ArchitecturejMaki Architecture

8

jMaki Architecture

Dojo

Yahoo

Scriptaculous

Google

Spry

Widget Model jMaki Client Services jMaki Layouts

jMaki Client Runtime

jMaki Server Side Runtime XmlHttpProxy

Enterprise Resources External Services

Html

CSS

widget. json Injector

XHR Publish/Subscribe

Glue/Timers

Script/CSS Links

UUID Generator

Shared Configuration

Template Renderer

Runtime to JavaScript Parameter Convertor

XSL Style Sheets

XSL Transformer

ServiceConfiguration

HTTP Client

RESTServices

YahooServices

FlickrServices

RSSFeeds

Service DataBase

ManagedObjects

WebServices

JavaScript

9

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

10

Client Services API

• jmaki.publish/subscribe• jmaki.Timer• jmaki.doAjax• jmaki.loadScript/loadStyle• jmaki.namespace• jmaki.extend• jmaki.log

Widget ModelWidget Model

12

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

13

Widget Model

https://ajax.dev.java.net/widget-model.html

component.htmHTML Template

component.cssCS Styles

component.jsBehavior

Bootstrap Code

jMaki Widget

14

Hello World Widgetcomponent.htm

<div id=”${uuid}”></div>

component.js id valuejmaki.namespace(“jmaki.widgets.hello”); servicejmaki.widgets.hello.Widget = function(wargs) { argsvar mydiv = document.getElementById(wargs.uuid); selected mydiv.innerHTML = “Hello “ + wargs.args.name;}

index.jsp

<%@ taglib prefix=”a” uri=”http://jmaki/v1.0/jsp” %><a:widget name=”hello” args=”{name: 'world'}” />

Layout and ThemesLayout and Themes

16

jMaki Layouts

17

jMaki Layouts and Themes• Provide templates written in CSS and HTML• Gives you a place to put your widgets• Web designer friendly• Easy to customize

18

demo

Multi-Language SupportMulti-Language Support

20

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'}}); %>

Ruby: index.rb<%= jmaki_widget 'hello', :args => { :name => name }, :value => { 'Greg' }%>

jMaki: Multi-Language support

21

jMaki on Java• Taglibs on Java Server Pages (JSP)• Components on Java Server Faces (JSF)• Comprehensive Tooling and Runtime support • Recipe

> Choose a Layout> Add Widgets> Configure Services> Add Glue

22

jMaki & Phobos: Made for each other• Phobos

> Lightweight scripting-friendly web application environment> Runs on Java platform> Primary supported language is JavaScript

> No impedance mismatch> NetBeans IDE plug-in

• Recipe> Choose a Layout> Add Widgets> Configure Services> Add Glue

23

jMaki & Rails• Rails

> Open source full-stack Ruby-based web framework> Database-backed web application> Model-View-Control pattern> Convention over Configuration

• Recipe> Add jMaki Rails plugin> Add widgets to Rails View> Connect ActiveRecord and jMaki data model

24

demo

Steps for Writing Steps for Writing jMaki ApplicationsjMaki Applications

26

Steps for Writing jMaki Application

1.Choose a layout2.Drop widgets into a layout3.Configure widgets (if necessary)4.Provide glue if widgets interact5.Choose a theme

27

jMaki Palette in NetBeans IDE

Accessing ExternalAccessing ExternalResourcesResources

29

Access External Services

30

XMLHttpProxy (XHP)

• Access to RESTful web services not in the web app domain> Yahoo GeoCoder

• Provides customizable XSL-to-JSON transformations

• Access to RSS feeds> Atom/RSS

• Widgets are tuned to use it

A Window to the Outside World

31

Accessing External Services<a:widget name="jmaki.blockList" service="/xhp?id=rss" />

"rss"configured in the configuration file"xhp.json"

xhp.json:

{ "id": "rss", "url":"http://weblogs.java.net/blog/ludo/index.rdf", "xslStyleSheet": "rss.xsl"}

32

Access Enterprise ResourcesjMaki work with JPA

<a:widget name="yahoo.dataTable" args="{ columns :[ {label : 'Company', id : 'company'}, {label : 'Price', id : 'price'}, {label : 'Change', id : 'change'}, {label : '% Change', id : 'pchange'}, {label : 'Last Updated', id : 'lupdate'} ]}" service="data.jsp" />

data.jsp provides dynamic data from persistence using JPA

33

Access Enterprise Resourcesdata.jsp dynamic data using JPA

<%@ page import="java.util.*" %><%@ page import="server.Company" %><%@ page import="javax.persistence.*" %><% EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmaki-jpaPU"); EntityManager em = emf.createEntityManager(); List<Company> list = em.createQuery("select c from Company c").getResultList(); out.println("["); for (int i=0; i<list.size(); i++) { Company c = list.get(i); out.println("['" + c.getCompanyname() + "'," + c.getPrice() + "," + c.getChange() + "," + c.getPercentchange() + ",'" + c.getLastupdated() + "']"); if (i < list.size()-1) out.println(","); } out.println("]");%>

34

demo

Event ModelEvent Model

36

How the widgets talk to each other?jMaki Events

• Publish/Subscribe is much like a server-side messaging system by it runs in the scope of an HTML page

• A means for one or more Project jMaki widgets to communicate with each other in a page using topics

• Action – Simple events that are declarative• Glue – For processing dynamic events where you

provide the logic in JavaScript

37

<a:widget name="dojo.fisheye" value="[ { iconSrc:'https://ajax.dev.java.net/images/blog_murray.jpg', label : 'You are here!', action : { topic : '/foo/select', message : {targetId : 'bar'}} }, { iconSrc:'https://ajax.dev.java.net/images/chinnici.jpg', label : 'test3'}]"/>

<a:widget name="dojo.tabbedview" subscribe="/foo" value="{items:[ {label : 'My Tab', content : 'Some Content'}, {id : 'bar', label : 'My Tab 2', include : 'test.jsp ', lazyLoad : true }, {label : 'My Tab 3', content : 'More Content', selected : true} ] }" />

Action Example

38

jMaki Glue: Publish/Subscribe• jMaki widgets communicate within the page

in JavaScript programming language via jMaki glue• Glue:

> JavaScript technology-based and loaded application-wide or based on a page

> JavaScript technology handlers mappedto topic names

• Steps to using the glue mechasim> Declare the topic you want to subscribe or listen to> Declare the name of the function (listener) which will handle the

notification> Provide the code to handle the notification

• Widgets configured to work by default

39

Publish/Subscribe• A means for jMaki widgets to communicate with each

other in a page using topics> Much like server-side messaging system but runs in the

scope of HTML pagePublish Subscribeicon.onClick = function() { function fisheyeListener(item) { jmaki.publish(“/dojo/fisheye”, this); var targetDiv = document.getElementById(“new”);} var responseText = “”; var index = Number(item.index); switch (index) { case 1: // set response text break; ... } targetDiv.innerHTML = responseText; } jmaki.susbscribe(“/dojo/fisheye”, fisheyelistener);

40

icon.onClick = function (){jmaki.publish("/dojo/fisheye/onSelect", {type :

"onSelect", targetId : id}); }

Publish Example

/dojo/fisheye is the base topic of the widget (“/onSelect” which is the sub-type gets appended)

41

jmaki.subscribe("/dojo/fisheye/*", fisheyeListener); function fisheyeListener(item) { var targetDiv = document.getElementById("newpage"); var responseText = ""; var index = Number(item.index); switch(index){ case 1: // Set responseText equal to Greg's bio

break; case 2: // Set responseText equal to Roberto's bio

default: responseText += 'Click on one of the photos above';break;

} targetDiv.innerHTML = responseText; }

Subscribe Example

42

Sample in glue.js jmaki.namespace("jmaki.listeners");

jmaki.subscribe("/grizzly/message", "jmaki.listeners.sendMessage");

jmaki.listeners.sendMessage = function(message) { jmaki.doAjax({ method : "post", url : "words", content : { callback : "jmaki.CometClient.callback, action : "post", message: "{message : \"" + escape(message) + "\" }}

43

demo

jMaki Library StructurejMaki Library Structure

45

jMaki Library Structure• Collection of named components

> Name if directory path of the component> A component is component.html, component.js,

component.css and widget.json• The toolkit library content

> For example, dojo or yahoo libs• Snippets for JSP technology, EJS, PHP, Rails, etc.• Palette entry names in a bundle file• All this packaged as a zip file for installation

46

jMaki Library Structure

47

config.json or widget.json Files

• A central place for defining Project jMaki configuration information > JavaScript programming language library dependencies > API keys> CSS dependencies> Project jMaki Glue handler mappings

48

widget.json for Dojo Clock Widget{ "name" : "Clock", "type" : "dojo", 'version' : '.8', 'jmakiVersion' : '.8.2.3', "image" : "images/dojo-clock.jpg", "description" : "This widget is a clock.", "args": [ {"clockType" : { "type":"STRING", "description" : "The clock type.", "defaultValue" : 'plain', 'values': [ {'name' : 'Plain', 'value' : 'plain', 'description' : 'Clock with blue background.'}, {'name' : 'Black', 'value' : 'black', 'description' : 'Clock with black background.'},

49

widget.json for Dojo Clock... 'config' : { 'type' : { 'id' : 'dojo', 'libs' : [ '../resources/libs/dojo/v.4.2/dojo.js' ], 'preload' : 'if (typeof djConfig ==\'undefined\') djConfig = { parseWidgets: false, searchIds: [] };', 'resources' : [ '../resources/libs/dojo/v.4.2/src' ] }

}

50

• id: You can override the automatic numbering• value: In-line a value for simple cases• service: Requires a corresponding server-side

component• args: JavaScript programming language Object

Literal/Associative Array• publish – topic events are published to• subscribe – topic to listen to for change events

Configure Widgets

51

jMaki Component Customizer

52

• Download jMaki NetBeans and Eclipse plug-ins

• Watch Screencasts• Read tutorials• Join and contribute!• Participate on jMaki forums• Create something cool!

jMaki

What toDo

http://jmaki.com

53

jMaki Resources• jMaki Project Site: ajax.dev.java.net (jmaki.com)

> Download binaries, IDE Plugins, Tutorials• Getting Started: ajax.dev.java.net/getstarted.html• Samples: ajax.dev.java.net/samples.html• Wiki: wiki.java.net/bin/view/Projects/jMaki• Aliases: dev@ajax.dev.java.net• jMaki Forum: forums.java.net/jive/forum.jspa?forumID=96• Blogs:

> weblogs.java.net/blog/gmurray71> weblogs.java.net/blog/carlavmott> blogs.sun.com/arungupta> weblogs.java.net/blog/ludo> weblogs.java.net/blog/ntruchsess

54

Building Rich WebBuilding Rich WebApplications Applications using jMakiusing jMaki

Sang ShinSang ShinJava Technology EvangelistJava Technology EvangelistSun Microsystems, Inc.Sun Microsystems, Inc.www.javapassion.comwww.javapassion.com

54