jmaki overview jmaki overview
TRANSCRIPT
jMaki Overview jMaki Overview
Sang ShinSang ShinJava Technology ArchitectJava Technology ArchitectSun Microsystems, Inc.Sun Microsystems, [email protected]@sun.comwww.javapassion.comwww.javapassion.com
2
Agenda
• What is and Why jMaki?• jMaki widgets • Using jMaki widget - List widget• What makes up a jMaki widget?• Using jMaki widget - Dojo Fisheye widget• jMaki application • jMaki plug-in for NetBeans IDE 5.5• Resources
What is and Why jMaki?What is and Why jMaki?
4
Motivations for jMaki
• You want to leverage widgets from existing and future AJAX toolkits and frameworks> Dojo, Scriptaculus, Yahoo UI Widgets and DHTML
Goodies• Today, there are multiple AJAX frameworks with
their own widgets and with different syntax > There is a need for a common programming model to
these various widgets• Too much of JavaScript code required for Java
developers> There is a need for Java Language view of JavaScript-
based widgets
5
What is jMaki?• Project jMaki is a wrapper framework that allows
developers to take widgets from popular AJAX frameworks, and wrap them into a JSP or JSF tag> Provides a common programming model to developers> Leverages the widgets from popular frameworks > Familiar to Java EE application developers
• JavaScript Wrapper framework for the Java platform> The name, jMaki, was derived from "j," for Java, and "Maki," a
Japanese word for wrap
6
Why jMaki?• Project jMaki makes it easier to use popular AJAX
frameworks within the Java EE Platform• It provides a base set of wrappers around some of
the widgets from the more popular frameworks (such as Dojo, Prototype and Yahoo Widgets)• Project jMaki is easily extensible, allowing
developers to use the latest and most useful widgets as they appear
7
Why jMaki?• Enables Java developers to use JavaScript in their
Java based applications as either a JSP tag library or a JSF component• Uses the best parts of Java and the best parts of
JavaScript to deliver a rich AJAX style widgets• Promotes a program methodology that cleanly
separates behavior (JavaScript), from Styles (CSS), from template HTML
jMaki Widgets jMaki Widgets Available NowAvailable Now
9
jMaki Widgets• jMaki currently provides bootstrap widgets for many
components from Dojo, Scriptaculus, Yahoo UI Widgets and DHTML Goodies• Also includes a set of AJAX widgets with a focus on
Web 2.0 such as a RSS widget, a del.icio.us Bookmark widget, a Chat widget, and many more to come
Using jMaki Widgets:Using jMaki Widgets:Using a List WidgetUsing a List Widget
11
Usage Example of jMaki Widget (List) in a JSP page<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %>
<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body>
<h1>JSP Page</h1> <a:ajax name="list" service="listService.jsp" /> </body></html>
Declare JMaki Tag Lib
Place a jMaki Widget
12
HTML that is Rendered by jMaki<html>... <body> <script type="text/javascript" src="http://localhost:8080/jMakiList/jmaki.js"></script> <script type="text/javascript">jmaki.webRoot='http://localhost:8080/jMakiList';</script>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/jMakiList/resources/list/component.css"></link>
<div id="list0" class="listContainer"> <form onsubmit="jmaki.attributes.get('list0').submitData(); return false;"> <input id="list0_entryField" type="text" size="20" value="Enter new Value"> <input type="button" onclick="jmaki.attributes.get('list0').submitData(); return false;" value="Add to List"></from>
<div id="list0_list" class="listDiv"></div> </div>
<script type="text/javascript"> jmaki.addWidget
({service:'listService.jsp',script:'http://localhost:8080/jMakiList/resources/list/component.js',uuid:'list0', name:'list'});</script>
</body>
CSS
HTML
JavaScript
13
How Does jMaki Know Which HTML Template to use for Rendering?• jMaki (actually jMaki tag handler) takes the value
from the name attribute - list in the example below> <a:ajax name="list" service="listService.jsp" />
• jMaki then finds the widget named as list• list widget has the following 3 files associated with it
- these files are parameterized> HTML template: list/component.html> CSS template: list/component.css> JavaScript code: list/component.js
• When rendered, the parameters are set with values
14
15
Demo: Build & Run Demo: Build & Run a simple app that a simple app that
uses a List Widgetuses a List Widget
16
Demo Scenario
• Build and run a simple app that uses a List widget• Observe the HTML page rendered by the jMaki• Use FireBug JavaScript debugger to step through
code to understand the internal flow of jMaki operations> You are going to try this yourself in your jMaki hands-on lab
17
Build & Run
18
Observe HTML Page Rendered
19
Make a Breakpointusing Firebug
What Makes UpWhat Makes Upa jMaki Widget?a jMaki Widget?
21
What Makes Up a jMaki Widget?
22
What Makes up a Widget?• HTML template> Defines the page layout
• JavaScript file> Defines behavior
• CSS file> Defines style
In-pace parameters of these files such as ${uuid} will be replaced by the real values by the jMaki during runtime.
23
HTML Template of List Widget<div id="${uuid}" class="listContainer"> <form onsubmit="jmaki.attributes.get('${uuid}').submitData(); return false;"> <input id="${uuid}_entryField" type="text" size="20" value="Enter new Value"> <input type="button" onclick="jmaki.attributes.get('${uuid}').submitData(); return false;" value="Add
to List"></from>
<div id="${uuid}_list" class="listDiv"></div></div>
Parameter that will be replaced by real value by jMaki during runtime
24
JavaScript File of List Widgetfunction List() {var uuid = widget.uuid;var service = widget.service;
function getXHR(url) {
if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); }}
this.submitData = function() { var list = document.getElementById(uuid + "_list"); var req = getXHR(service); req.onreadystatechange = function() { if (req.readyState == 4) { if (req.status == 200) { list.innerHTML = req.responseText; } } }; req.open("POST", service, true); var entryField = document.getElementById(uuid + "_entryField"); req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); req.send("command=add&entry=" + entryField.value + "&uuid=" + uuid);}
jMaki creates widget JavaScript object which captures all the values of the parameters before this JavaScript code - List() function - is invoked.
25
CSS File of List Widget.plain { color: black; height:25; font-size:18px; font-weight: bold; font-family: Arial; background: white;}
.over { color: white; height:25; font-size:18px; font-weight: bold; font-family: Arial; background: blue; cursor: pointer;}
.listDiv {position: relative;width: 400px;height: 300px;overflow: auto;}
.listContainer {width: 400px;height: 350px;}
How Does jMaki Work?How Does jMaki Work?
27
How Does jMaki Work• jMaki puts the right pieces together using Java to
render the initial page> HTML template, CSS template, JavaScript file
• In the case of both the JSF component and the JSP tag the inputs are the same and the output should be the same> Output is HTML page
• The service behind the widget may differ if there is one• Under the covers jMaki widgets are re-usable
parameterized JavaScript widgets
28
How Does jMaki Work• jMaki makes sure the proper parameters passed to
individual widget code using a JavaScript bootrapper that initializes the widgets in a page• In the case of both JSP tags and JSF the inputs (a
JavaScript/CSS/Template HTML file) produce the same resulting widget• jMaki's design makes it very easy to create widgets
and support upcoming JavaScript libraries• These widgets are fully configurable in a running
web application.
Using jMaki Widgets:Using jMaki Widgets:Using a FishEye WidgetUsing a FishEye Widgetfrom Dojo Toolkitfrom Dojo Toolkit
30
Fisheye From Dojo Toolkit• This is an example jMaki widget which is built over
existing widget from a popular 3rd-party framework - Dojo toolkit• jMaki version of HTML template, CSS template, and
JavaScript file from the corresponding files of the Fisheye widget of the Dojo toolkit are created
31
FishEye Widget
32
FishEye jMaki Widget
33
FishEye's component.htm<div class="outerbar"><div dojoType="FisheyeList"
itemWidth="50" itemHeight="50"itemMaxWidth="200" itemMaxHeight="200"orientation="horizontal"effectUnits="2"itemPadding="10"attachEdge="top"labelEdge="bottom"enableCrappySvgSupport="false"id="${uuid}"
>
<div dojoType="FisheyeListItem" onClick="load_app(1);" iconsrc="images/icon_browser.png" caption="Web Browser">
</div>
<div dojoType="FisheyeListItem" onClick="load_app(2);"iconsrc="images/icon_calendar.png" caption="Calendar">
</div>
...
34
FishEye's component.css.dojoHtmlFisheyeListBar {
margin: 0 auto;text-align: center;
}
.outerbar {background-color: #666;text-align: center;position: relative;left: 0px;top: 0px;width: 100%;
}
35
FishEye's component.jsdojo.require("dojo.widget.FisheyeList");dojo.widget.createWidget(widget.uuid);
jMaki ApplicationjMaki Application
37
Examples of jMaki Applications• Basic jMaki Application• Using a 3rd-party library• Resource resolution with jMaki
38
Basic jMaki Sample Application• The most basic web application contains a single
jMaki widget declared in the index.jsp page with the name "delicious" which will display a set of bookmarks maintained by the Delicious website• The index.jsp file containing a tag library defined as:
<a:ajax name="delicious"/>
39
Application Structure of the Basic jMaki Sample Application
• 'delicious' directory contains component.js, component.css, and component.htm files• jmaki.js JavaScript file
should be located at the top directory• jmaki.jar needs to be
placed in the /WEB-INF/lib directory
40
Application Structure of the “Using 3rd-party Lib (Dojo)” Sample Application
• dojo.js and the src directory which contains the Dojo source needed by the client
41
jMaki Runtime• jMaki is written as a JSP 2.0/JSF 1.1 tag library and
should run on earlier containers that support JSP 2.0 and/or JSF 1.1 specfications
jMaki Plug-in forjMaki Plug-in forNetBeans IDE 5.5 &NetBeans IDE 5.5 &GlassFishGlassFish
43
jMaki Widgets from The Plug-in
44
Demo: Building an Demo: Building an AJAX App using AJAX App using jMaki NetBeans jMaki NetBeans
Plug-inPlug-in
45
Demo Scenario
• Use various jMaki widgets to build a Web application through NetBeans jMaki plug-in> https://ajax.dev.java.net/screencast/jMakiDemo.html
jMaki Overview jMaki Overview
Sang ShinSang ShinJava Technology ArchitectJava Technology ArchitectSun Microsystems, Inc.Sun Microsystems, [email protected]@sun.comwww.javapassion.comwww.javapassion.com