jMaki Overview jMaki Overview
Upcoming SlideShare
Loading in...5

jMaki Overview jMaki Overview






Total Views
Views on SlideShare
Embed Views



1 Embed 2 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

jMaki Overview jMaki Overview jMaki Overview jMaki Overview Presentation Transcript

  • jMaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.
  • 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 2
  • What is and Why jMaki? View slide
  • 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 4 View slide
  • 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 5
  • 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 6
  • 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 7
  • jMaki Widgets Available Now
  • 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 Bookmark widget, a Chat widget, and many more to come 9
  • Using jMaki Widgets: Using a List Widget
  • Usage Example of jMaki Widget (List) in a JSP page <%@ taglib prefix="a" uri="" %> Declare JMaki Tag Lib <%@ taglib prefix="a" uri="" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> Place a jMaki Widget <h1>JSP Page</h1> <a:ajax name="list" service="listService.jsp" /> </body> </html> 11
  • 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"> CSS <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> HTML <script type="text/javascript"> jmaki.addWidget ({service:'listService.jsp',script:'http://localhost:8080/jMakiList/resources/list/component.js',uuid:'list0', name:'list'});</script> </body> JavaScript 12
  • 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 13
  • 14
  • Demo: Build & Run a simple app that uses a List Widget 15
  • 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 16
  • Build & Run 17
  • Observe HTML Page Rendered 18
  • Make a Breakpoint using Firebug 19
  • What Makes Up a jMaki Widget?
  • What Makes Up a jMaki Widget? 21
  • 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. 22
  • 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> Parameter that will be </div> replaced by real value by jMaki during runtime 23
  • JavaScript File of List Widget function List() { var uuid = widget.uuid; jMaki creates widget var service = widget.service; JavaScript object which function getXHR(url) { captures all the values of if (window.XMLHttpRequest) { the parameters before this return new XMLHttpRequest(); JavaScript code - List() } else if (window.ActiveXObject) { return new ActiveXObject("Microsoft.XMLHTTP"); function - is invoked. } } 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; } } };"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); } 24
  • 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; } 25
  • How Does jMaki Work?
  • 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 27
  • 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. 28
  • Using jMaki Widgets: Using a FishEye Widget from Dojo Toolkit
  • 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 30
  • FishEye Widget 31
  • FishEye jMaki Widget 32
  • 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> ... 33
  • 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%; } 34
  • FishEye's component.js dojo.require("dojo.widget.FisheyeList"); dojo.widget.createWidget(widget.uuid); 35
  • jMaki Application
  • Examples of jMaki Applications • Basic jMaki Application • Using a 3rd-party library • Resource resolution with jMaki 37
  • 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"/> 38
  • 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 39
  • 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 40
  • 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 41
  • jMaki Plug-in for NetBeans IDE 5.5 & GlassFish
  • jMaki Widgets from The Plug-in 43
  • Demo: Building an AJAX App using jMaki NetBeans Plug-in 44
  • Demo Scenario • Use various jMaki widgets to build a Web application through NetBeans jMaki plug-in > 45
  • jMaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.