td mxc jmaki chen

8/14/2019 TD MXC jMaki Chen

1/37

Building Rich WebApplications using

jMaki

1

Doris Chen Ph.D.Staff Engineer/Technology EvangelistSun Microsystems, Inc.


2/37

Agenda

Introduction to jMaki

jMaki Architecture

jMaki Recipe jMaki Work with External Resources

jMaki Widgets Work Together

Summary and Resources


3/37

Introduction to jMakiIntroduction to jMaki


4/37

Origins of jMaki?

j is for JavaScript technology

Maki == to wrap in Japanese

Started as a way of wrapping JavaScript technologyfunctionality

Project jMaki has evolved to provide more


5/37

A Client-Server Lightweight Framework for Providing JavaScriptTechnology-Centric User Interfaces

What Is jMaki

Open Source (BSD)

Allows you to integrate the best of breed JavaScripttechnology into your applications

Ajax Application model built in

A widget model for creating widgets or wrappingexisting functionality

Netbeans, Eclipse, Ant support


6/37


7/37

Why Use jMaki?

Defaults set out of the box> Convention over configuration

Consistent programming model>

Universal tag library for widgets from popular toolkits> Standardizes Event / Data Models> Mashup Capabilities built in

Portable Widget libraries> Share your extensions / widgets libraries

Ajax Acceleration built in

Multi-server runtime support

> PHP / JSP / JSF / Ruby / Phobos


8/37


9/37

JSP technology: index.jsp

PHP: index.php


10/37

jMaki ArchitecturejMaki Architecture


11/37

jMaki Framework

Widget component / library models

Data Models

Events using Publish / Subscribe> Actions / Glue

Layouts / Theming model

XmlHttpProxy Extensions


12/37

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

Service

Configuration

HTTP Client

REST

Services

Yahoo

Services

Flickr

Services

RSS

FeedsService

Data

Base

Managed

Objects

Web

Services

JavaScript


13/37

Simple

Widget Model

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

component.htmHTML Template

component.css

CS Styles

component.js

BehaviorBootstrap Code

jMaki Widget


14/37

Hello World Widget

component.htm

component.js id

value jmaki.namespace(jmaki.widgets.hello); jmaki.widgets.hello.Widget = function(wargs) { argsvar mydiv = document.getElementById(wargs.uuid); selected

mydiv.innerHTML = Hello + wargs.args.name;}

index.jsp


15/37

jMaki Layouts and Themes

Layouts> Layouts use common naming conventions> Widgets size to fit the layouts

> HTML templates provided for the layouts Themes

> CSS-based and separate from the layouts> Widgets provide default themes which

are overridden


16/37

jMaki Layouts


17/37

jMaki RecipejMaki Recipe


18/37


19/37


20/37

jMaki Recipe

Choose a layout

Drop widgets into a layout

Configure widgets (if necessary)

Provide glue if widgets interact

Choose a theme


21/37

jMaki Work with ExternaljMaki Work with ExternalResourcesResources


22/37

Access External Services


23/37

XMLHttpProxy (XHP)

Access to RESTful webservices not in the webapp domain>

Yahoo GeoCoder Provides customizable

XSL-to-JSONtransformations

Access to RSS feeds> Atom/RSS

Widgets are tuned to

use it

A Window to the Outside World


24/37

Accessing External Services

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

xhp.json:

{ "id": "rss",

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

}


25/37

Access Enterprise ResourcesjMaki work with JPA

data.jsp provides dynamic data from persistence using JPA


26/37

Access Enterprise Resourcesdata.jspdynamic data using JPA


27/37

DEMO

Work with external resources


28/37

jMaki Widgets WorkjMaki Widgets Work

TogetherTogether


29/37

How the widgets talk to each other?jMaki Events

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

topics: a means for multiple jMaki widgets tocommunicate with each other in a page

Action: declarative events> Action property> No additional JavaScript code

Glue: programmatic events> Allows you to provide unobtrusive application behavior in a

single place> Ties the widgets together (loosely) based on topic names


30/37

Action Example
https://ajax.dev.java.net/images/chinnici.jpghttps://ajax.dev.java.net/images/chinnici.jpg


31/37

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


32/37

Publish/Subscribe

A means for jMaki widgets to communicate with eachother 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 textbreak;

...}

targetDiv.innerHTML = responseText;}

jmaki.susbscribe(/dojo/fisheye, fisheyelistener);


33/37

DEMO

Widgets working together


34/37

Summary and ResourcesSummary and Resources


35/37

Summary

jMaki allows you to easily create rich webapplications

jMaki allows you to use the best Ajax components

and toolkits Consistent data and event models

jMaki supports server side implementation for

multiple languages and platforms


36/37

Resources Main jMaki site

> https://ajax.dev.java.net/ jMaki Widgets site

> https://widgets.dev.java.net/

Send your questions to the public mailing lists and forums> jMaki mailing alias

> mailto:[email protected]

> jMaki Forum> http://forums.java.net/jive/forum.jspa?forumID=96

NetBeans IDE> http://netbeans.org/

Project GlassFish

> http://glassfish.dev.java.net/


37/37

Building Rich Web

Applications using jMaki

Doris Chen Ph.D.

[email protected]

Staff Engineer/Technology EvangelistSun Microsystems, Inc.

td mxc jmaki chen

Documents