jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.

Size: px

Start display at page:

Download "jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc."

Maximillian Fletcher
5 years ago
Views:

1 jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.

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 2

3 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 JavaScriptbased widgets 4

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

8 jmaki Widgets Available Now

9 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

10 Using jmaki Widgets: Using a List Widget

11 11 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> <h1>jsp Page</h1> <a:ajax name="list" service="listservice.jsp" /> </body> </html> Place a jmaki Widget

12 HTML that is Rendered by jmaki <html>... <body> <script type="text/javascript" src=" <script type="text/javascript">jmaki.webroot=' <link rel="stylesheet" type="text/css" href=" <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:' name:'list'});</script> </body> JavaScript 12

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 13

14 14

15 15 Demo: Build & Run a simple app that uses a List Widget

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

18 Observe HTML Page Rendered 18

19 Make a Breakpoint using Firebug 19

20 What Makes Up a jmaki Widget?

21 What Makes Up a jmaki Widget? 21

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

23 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 Widget function 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"); } jmaki creates widget JavaScript object which captures all the values of the parameters before this JavaScript code - List() 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; } } }; 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); } 24

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; } 25

26 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 27

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

29 Using jmaki Widgets: Using a FishEye Widget from Dojo Toolkit

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

32 FishEye jmaki Widget 32

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

34 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 35 FishEye's component.js dojo.require("dojo.widget.fisheyelist"); dojo.widget.createwidget(widget.uuid);

36 jmaki Application

37 37 Examples of jmaki Applications Basic jmaki Application Using a 3rd-party library Resource resolution with jmaki

38 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 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 40 Application Structure of the Using 3rdparty Lib (Dojo) Sample Application dojo.js and the src directory which contains the Dojo source needed by the client

41 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

42 jmaki Plug-in for NetBeans IDE 5.5 & GlassFish

43 jmaki Widgets from The Plug-in 43

44 44 Demo: Building an AJAX App using jmaki NetBeans Plug-in

45 45 Demo Scenario Use various jmaki widgets to build a Web application through NetBeans jmaki plug-in >

46 jmaki Overview Sang Shin Java Technology Architect Sun Microsystems, Inc.

GWT and jmaki: Expanding the GWT Universe. Carla Mott, Staff Engineer, Sun Microsystems Greg Murray, Ajax Architect, Sun Microsystems

GWT and jmaki: Expanding the GWT Universe Carla Mott, Staff Engineer, Sun Microsystems Greg Murray, Ajax Architect, Sun Microsystems Learn how to enhance Google Web Toolkit (GWT) to include many Ajax enabled