Using jMaki Technology for Building Web 2.0/Ajax Applications

1. Select Tools from the top-level menu and select Plugins. (Figure-0.17 below)


Figure-0.17: Select Tools->Plugins

2. Click Available Plugins tab window and then select jMaki AJax Support.
3. Click Install button. (Figure-0.18 below)


Figure-0.18: Install jMaki Ajax Support plug-in

4.  Click Next. (Figure-0.19 below)


Figure-0.19: NetBeans IDE Installer

5. Check "I accept the terms ..". (Figure-0.20 below)
6. Click Install.


Figure-0.20: Accept the license

7. Check "Restart IDE Now". (Figure-0.21 below)


Figure-0.21: Restart the IDE

In case you don't have an internet connection, the jMaki NetBeans plug-in is provided in the hands-on lab zip file as <LAB_UNZIPPED_DIRECTORY>/benchmarkwebapp/jMakiPlugin/org-netbeans-modules-sun-jmaki.nbm. 

1. Select Tools from the top-level menu and select Plugins. (Figure-0.17 above)
2. Select Downloaded tab window.
3. Click Add Plugins. (Figure-0.22 below)


Figure-0.22: Add Plug-in from local file system

4. Drill down to <LAB_UNZIPPED_DIRECTORY>/benchmarkwebapp/jMakiPlugin directory.
5. Select org-netbeans-modules-sun-jmaki.nbm and click Open button. (Figure-0.23 below)


Figure-0.23: Select jMaki plug-in

6. Follow the instruction of the installation.

In this step, you are going to select the Firefox browser as the default browser of the NetBeans IDE.  What this means is that every time a browser is started by the NetBeans, the Firefox browser will be displayed.

1. Start NetBeans IDE.
2. Select Tools from the top-level menu bar of NetBeans IDE.
3. Select Options. The Options dialog box appears.
4. Select Firefox for the Web Browser.
5. Click OK to close the Options dialog box. (Figure-0.14 below)


Figure-0.14: Configure Firefox as default browser for the NetBeans

                                                                                                                        return to the top

• Select File->New Project (Ctrl+Shift+N).
  
• Observe that the New Project dialog box appears.
• Under Choose Project pane, select Web under Categories and Web Application with Existing Sources under Projects. (Make sure you choose Web Application with Existing Sources not Web Application.)
  

Figure-1.10: Create Web Application with Existing Sources

• Observe that Add Existing Sources pane appears.
• For the Location field, click Browse.  This is to specify the location where the source files are located.
• Observe that Browse Existing Source Location dialog box appears.
• Browse down to <LAB_UNZIPPED_DIRECTORY>/ajaxjmakiintro/samples directory and select jMakiDemo. (Figure-1.11 below)
• If you unzipped the hands-on lab zip file, 4270_ajaxjmakiintro.zip, under C:\handsonlabs directory under Windows, the directory to which you want to browse down should be C:\handsonlabs\ajaxjmakiintro\samples
• If you unzipped the 4270_ajaxjmakiintro.zip file under $HOME/handsonlabs directory under Solaris/Linux, the directory to which you want to browse down should be $HOME/handsonlabs/ajaxjmakiintro/samples
• Click Open.
  

Figure-1.11: Select Existing Source Location

• Observe that the New Web Project with Existing Sources dialog box appears.
  
• For the Project Folder field, enter a directory you want to keep this NetBeans project.  (Figure-1.12 below)
• Click Next.
  

Figure-1.12: Project Folder already contains

• Make sure the Java EE Version field is set to Java EE 5.
• Click Next.
  

• Observe that the Existing Sources and Libraries pane appears with Web Pages Folder and Libraries Folder fields are set with proper values.
• Click Finish. (Figure-1.14 below)
  

Figure-1.14: Existing Sources and Libraries pane

• Observe that jMakiDemo project appears under Projects tab window of the NetBeans IDE.
  

• Right click jMakiDemo project node and select Run.  (Figure-1.15 below)
• Observe that the build process of the jMakiDemo project gets started.
  

Figure-1.15: Run jMakiDemo project

• Observe that jMaki Sample Application for Java page gets displayed in the browser.  You can now play around all the jMaki widgets that are provided within this application.
  

Figure-1.16: jMaki demo application

                                                                                                                        return to top of the exercise

1. Try Sliding Menu widget

• Select the DHTML Goodies Widgets link on the left side bar of the browser.
• Observe that the links to three widgets are displayed on the right pane.
• Click Sliding Menu. (Figure-1.20 below)

Figure-1.20: Sliding Menu widget

• Observe that six vertically aligned menu items are displayed.
• Move your mouse over the 6 vertically aligned menu items and observe that sub-menu items are being displayed.  (Figure-1.21 below)

Figure-1.21: DHTML Goodies Sliding Menu Test

2.  Try Tooltip widget

• Click Back to Simples link.
• Click Tooltip.
• Move your mouse over Move over me link and observe a Tool Tip box appears.  (Figure-1.22 below)

Figure-1.22: Tooltip test

3. Change the message content of the Tool Tip box

• From the NetBeans IDE, double click tooltip.jsp under jMakiDemo->Web Pages->dhtmlgoodies to open it in the source editor.
• Observe that the tooltipContent.html is set as a source of the tooltip message via service attribute for the Tooltip widget, which is represented as name="dhtmlgoodies.tooltip".  (Figure-1.23 below)
  

Figure-1.23: Tooltip widget

• Double click tooltipContent.html under jMakiDemo->Web Pages->dhtmlgoodies to open it in the source editor.
• Modify the wording to whatever you want - in this example, it is changed to This is my own tooltip.  Life is all about Passion!.  (Figure-1.24 below)
  

Figure-1.24: Provide your own tooltip.

• Right click jMakiDemo project node and select Run Project.
• Select the DHTML Goodies Widgets link on the left side bar of the browser.
• Click Tooltip.
• Move your mouse over Move over me link and observe a Tool Tip box appears with your own tooltip.
  

Figure-1.25: Observe that your own tooltip is used

                                                                                                                        return to top of the exercise

In this step, you are going to play around with Dojo Widgets.

1. Try Editable Table widget

• Select the Dojo Widgets link on the left side bar of the browser.
• Observe that the links to Dojo widgets are displayed on the right pane.  Note that there are two links for each widget. The first one is using JSP tag while the 2nd link uses JSF tag.
  
• Click Editable Table. (Figure-1.30 below)

Figure-1.30: Explore Editable Table widget

• Observe that the table is displayed. 
  
• Click Author column name (or other column name) to sort the items.  (Figure-1.31 below)
• Click Author column name again to sort the items in the reserve order.
  

Figure-1.31: Sort the table

• Double click any field in the table. (Figure-1.32 below)
• Observe that the field is now editable.
• Change the value of the editable field
  
• Press Enter key.
  

Figure-1.32: Edit the table field

2. Change the table content of the Editable Table Widget.

• From the NetBeans IDE, double click etable.jsp under jMakiDemo->Web Pages->dojo to open it in the source editor.
• Observe that the books.json is used as a source of the table content as service attribute for the Tooltip widget, which is represented as name="dojo.etable" attribute.  (Figure-1.33 below)
  

Figure-1.33: Editable table widget

• Double click books.json under jMakiDemo->Web Pages->dojo to open it in the source editor.
• Modify the contents of the books.json to whatever you want.  An example is shown in Code-1.34 below.  Please feel free to copy and paste.
  

{ "columns": { "title" : "Title", "author":"Author", "isbn": "ISBN #", "description":"Description"}, "rows":[  ['Life is good', 'Doris Chen','441234', 'You must be kidding!'],  ['Save the earth', 'Me','441322', 'Some long description'],  ['The Sun rises again','Whoever', '441234','Yes, indeed'],  ['javapassion.com', 'Sang Shin', '441335', 'Some long description'],  ['passion', 'Sang Shin', '451335', 'Some long description']  ] }

Code-1.34: Modified contents of books.json

• Right click jMakiDemo project node and select Run Project.
• Select the Dojo Widgets link on the left side bar of the browser.
• Click Editable Table and observe the changed table contents. (Figure-1.34 below)

Figure-1.34: New table contents

3. Try Editable Table widget using JSF tag

• From the browser, select the Dojo Widgets link on the left side bar of the browser.
• Click JSF.
  
• Observe the same result as shown in Figure-1.34 above.

4. Take a look at the JSP page that uses JSF tag

• From the NetBeans IDE, double click etable-jsf.jsp under jMakiDemo->Web Pages->dojo to open it in the source editor.
• Observe that the file uses the JSF tags.
  

Figure-1.35: etable-jsf.jsp

5. Try Fish Eye List Dojo widget.

• From the browser, select the Dojo Widgets link on the left side bar of the browser.
• Click Fish Eye List.
  
• Move your mouse over the pictures and observe the Fisheye behavior.  (Figure-1.36 below)
  

Figure-1.36: Fish Eye List widget

6. Add a few more Fish Eye List items

• From the NetBeans IDE, double click fisheye.jsp under jMakiDemo->Web Pages->dojo to open it in the source editor.
• Modify fisheye.jsp as shown in Code-1.37 below.  The code fragment that needs to be added are highlighted in bold and blue-colored font.
  

<%@ taglib prefix="a" uri="http://java.sun.com/jmaki" %> <h2>Dojo Fish Eye List Test</h2> <a href="index.jsp">Back to Samples</a> <hr>     <a:ajax name="dojo.fisheye"             args="{items:[                   {iconSrc:'images/JayashriVisvanathan.jpg',caption:'Jayashri', index:1},                   {iconSrc:'images/chinnici.jpg',caption:'Roberto',index:2},                   {iconSrc:'images/blog_murray.jpg',caption:'Greg',index:3},                   {iconSrc:'images/edburns.jpg',caption:'Ed',index:4},                   {iconSrc:'images/icon_browser.png',caption:'You are here!',index:5},                   {iconSrc:'images/icon_calendar.png',caption:'my caption2',index:6},                   {iconSrc:'images/icon_update.png',caption:'passion',index:7}             ]}"     /> <script type="text/javascript">   function fisheyeListener(item) {       var targetDiv = document.getElementById("newpage");       var responseText = "";      var index = Number(item.index);       switch(index){         case 1:  responseText += '<img src="images/JayashriVisvanathan.jpg"/><p>I am Jayashri Visvanathan and I work on Java Studio Creator. My area of interest/expertise is JSF components. Before I joined Creator team, I used to work on the JSF Reference Implementation (RI). I have been part of JSF team since its inception and have contributed to various releases including the current release JSF 1.2. I was also managing the JSF project on java.net since its launch. Prior to joining the JSF team, I worked on various client and server side web products/technologies within Sun including Mozilla, WebTop Registry Server and HotJava Browser.';     break;         case 2:  responseText +='<img src="images/chinnici.jpg"/><p>Roberto Chinnici is a senior staff engineer at Sun Microsystems, Inc. where he works on the Java™ Platform, Enterprise Edition, with particular focus on Web Services and Ease of Development. He is the specification lead for the JAX-RPC 1.1 and JAX-WS 2.0 technologies, both developed under the Java Community Process. He is also Sun\'s principal representative in the Web Services Description Working Group at W3C and has been a member of the WS-I Basic Profile Working Group. Mr. Chinnici holds an M.S. in Computer Science from the University of Milan, Italy.';     break;         case 3: responseText += '<img src="images/blog_murray.jpg"/><p>Appointed as AJAX Architect for Sun Microsystems, Greg Murray is deeply involved in the AJAX movement through his participation in the OpenAJAX Alliance and contributions to the Dojo Foundation\'s open-source JavaScript toolkit. Within Sun, Greg lead a grass roots effort advancing the integration of client-side scripting with Java technologies and is the creator and principal architect of Project jMaki. jMaki uses the best parts of Java and the best parts of JavaScript to deliver rich AJAX style widgets through a singe, easy-to-use interface that accesses components from popular widget libraries such as Dojo, Script.aculo.us, Yahoo\'s UI Library, Spry, DHTML Goodies, and Google\'s Web Toolkit. Greg recently contributed to the design and development of the AJAX-based Java Pet Store 2.0 Demo and helped create Java BluePrints solutions for using AJAX with Java technologies.';     break;         case 4: responseText += '<img src="images/edburns.jpg"/><p>Ed Burns is a senior staff engineer at Sun Microsystems. Ed has worked on a wide variety of client and server side web technologies since 1994, including NCSA Mosaic, Mozilla, the Sun Java Plugin, Jakarta Tomcat and, most recently JavaServer Faces. Ed is currently the co-spec lead for JavaServer Faces.  Ed has contributed JSF support to jMaki in the form of bug-fixes, nags, and tersely worded emails.</p>';     break;     default: responseText += 'Click on one of the photos above';     break;       }       targetDiv.innerHTML = responseText;   }   jmaki.subscribe("/dojo/fisheye", fisheyeListener); </script> <p> <h3><div id="newpage"></div></h3>

Code-1.37: Modified fisheye.jsp

• Right click jMakiDemo project node and select Run Project.
• Select the Dojo Widgets link on the left side bar of the browser.
• Click Fish Eye List and observe the newly added items. (Figure-1.38 below)

Figure-1.38: Newly added Fisheye items

7.  Try other Dojo widgets.

• Clock
• Date Picker
• Drop Down Date Picker
• Editor
• Inline Edit
• Resiable Text Area
• Table
• Tree
• Tabbed View
• Time Picker
• Yahoo Map (internet access required)
• Multiple Components
  

                                                                                                                        return to top of the exercise

Play around other widgets from the jMaki demo applications.

• Select File->New Project (Ctrl+Shift+N). The New Project dialog box appears.
• Under Choose Project pane, select Web under Categories and Web Application under Projects. (Figure-2.10 below)
  

• Observe the Name and Location pane appears.
  
• For the Project Name field, type in jMakiFisheye as project name.
  
• Click Next. (Figure-2.11 below)
  

Figure-2.11: Give a project name

• Observe Frameworks pane appears.
• Select jMaki Ajax Framework.
• Observe that CSS Layout pane gets displayed.
• Select Standard No Sidebars under CSS Layout. (Figure-2.12 below)  You can choose any CSS Layout of your choice.
  
• Select Finish.
  

Figure-2.12: Select jMaki Ajax Framework and CSS Layout

• Observe that the jMakiFisheye project node appears and the IDE generated index.jsp is displayed in the source editor.
• Observe also jMaki widgets are displayed in the right side of the IDE.  (Figure-2.13 below) 
  

Figure-2.13: jMakiFisheye project is created

---

Trouble-shooting: If for some reason, you don't see the Palette, it is highly because you closed the Palette window before. 
Solution: In order to reopen the Palette, select Window from the top-level menu and then select Palette.

---

2. Add Dojo Fish Eye List widget to the application

• Expand jMaki Dojo widgets under Palette on the right side (if it has not been expanded yet).
• Drag the Fish Eye  widget from the Palette and drop it under the line of Main Content Area (the line number of which is around 31)
  
• Observe that Fish Eye List tag - <a:ajax name="dojo.fisheye" .. /> - is added to the index.jsp.

Figure-2.14: Fish Eye idget is added to the application

Since you might be running this application without internet access, we will modify the index.jsp to use locally available images.

• Right click images directory under jMakiDemo>Web Pages->dojo and select Copy.  (Figure-2.15 below)
  

Figure-2.15: Copy images

• Right click Web Pages under jMakiFisheye project node and select Paste. (Figure-2.16 below)

Figure-2.16: Paste the images

4. Modify images sources of the Fish Eye jMaki tag to use locally available images.

• Modify the index.jsp as shown in Code-2.17 below.  The code fragment that need to be modified are highlighted in bold and blue-colored font.
  

<%@ taglib prefix="a" uri="http://jmaki/v1.0/jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>     <head>         <link rel="stylesheet" href="jmaki-standard-no-sidebars.css" type="text/css"></link>         <title>Page Title</title>         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />     </head>     <body>         <div id="outerBorder">                         <div id="header">                 <div id="banner">Application Name</div>                                 <div id="subheader">                                         <div>                         <a href="mailto:feedback@youraddress">Feedback</a> |                         <a href="#">Site Map</a> |                         <a href="#">Home</a>                     </div>                 </div> <!-- subheader  -->             </div> <!-- header -->             <div id="main">                                 <div id="content" style="height:400px">                                         Main Content Area                     <a:widget name="dojo.fisheye"                               value="[                             {iconSrc:'images/icon_browser.png',caption:'browser', index:1},                             {iconSrc:'images/icon_calendar.png',caption:'calendar', index:2},                             {iconSrc:'images/icon_email.png',caption:'email',index:3},                             {iconSrc:'images/icon_texteditor.png',caption:'text editor',index:4},                             {iconSrc:'images/icon_update.png',caption:'update',index:5}                                               ]"/>                                               </div> <!-- content -->             </div> <!-- main -->         </div> <!-- outerborder -->     </body> </html>

Code-2.17: Use locally available images.

5. Build and run the application.

• Right click jMakiFisheye project node and select Run.
• Browser gets displayed with icons.
  
• Move the mouse over the icons and observe the Fish Eye behavior. (Figure-2.18 below)
  

Figure-2.18: Fish Eye

                                                                                                                        return to top of the exercise

In this step, you are going to use different widgets using various CSS layouts.

1. Create a new jMaki NetBeans project

• Select File->New Project (Ctrl+Shift+N). The New Project dialog box appears.
• Under Choose Project pane, select Web under Categories and Web Application under Projects.  (Figure-2.29 below)
  

Figure-2.29: Create a new Web Application project

• Observe the Name and Location pane appears.
  
• For the Project Name field, type in jMakiCSSLayout as project name.
  
• Click Next.
  

• Observe Frameworks pane appears.
• Select jMaki Ajax Framework and Three Column under CSS Layout. (Figure-2.30 below)
  
• Select Finish.

Figure-2.30: Three Column layout

2. Add widgets to the Three Column layout

• Drag and drop Accordion under jMaki Dojo section of the Palette replacing "Left Conect Pane". 
• Drag and drop Tree under jMaki Yahoo section of the Palette replacing "Right Content Pane".
• Drag and drop Editable Table under jMaki Dojo section of the Palettereplacing "Center Content Pane".  (Figure-2.31 below)
  

Figure-2.31: Add 3 widgets to three column CSS layout

3.  Build and run the project

• Right click jMakiCSSLayout project node and select Run.
• Observe the three widgets are displayed in three column format. (Figure-2.32 below)
  

Figure-2.32: Three column format

4. Remove  the height attributes from the widgets.

• Remove the line of style="height:400px" from the <div class="rightSidebar" style="height:400px">
• Remove the line of  style="height:400px" from the <div class="center" style="height:400px">  (Figure-2.34 below)

Figure-2.34: Remove height attributes

5.  Click Save All button to save the change. (Figure-2.35 below) Note your don't have to rebuild or rerun the project.


Figure-2.35: Save the changes

6. From the browser, click Refresh button to see the change. (Figure-2.36 below)


Figure-2.36: Change is reflected.


                                                                                                                        return to top of the exercise

• Select File->New Project (Ctrl+Shift+N).
• Observe that the New Project dialog box appears.
• Under Choose Project pane, select Web under Categories and Web Application under Projects.
  

• Observe the Name and Location pane appears.
  
• For the Project Name field, type in jMakiInplace as project name. (Figure-4.10 below)
  
• Click Next.
  

Figure-4.10: Create jMakiInplace project

• Observe Frameworks pane appears.
• Select jMaki Ajax Framework and Standard No Sidebars under CSS Layout. (Figure-2.12 below)  You can choose any CSS Layout of your choice.  We chose No CSS Style for the sake of simplicity of this application.
  
• Select Finish.

Figure-4.11: Use jMaki Ajax Framework

• Observe that the jMakiInplace project node appears under Project pane of the IDE and the IDE generated index.jsp is displayed in the source editor.
• Observe also jMaki widgets are displayed in the right side of the IDE. 
  

2. Add jMaki Inplace widget to the application

• Expand jMaki widgets under Palette on the right side
• Drag the Inplace widget from the Palette and drop it in the area that has Main Contente Here whose line number is around 37.
• Observe that jMaki tag - <a:widget name="scriptaculous.inplace" .. />- is added to the index.jsp. (Figure-4.12 below)
  

Figure-4.12: Inplace widget is added

3. Build and run the application.

• Right click jMakiInplace project node and select Run Project.
• Browser gets displayed .
  
• Click click me to replace link. (Figure-4.13 below)

Figure-4.13: Running jMaki application that uses Inplace widget









                                                                                                                        return to top of the exercise

In this step, you will look under the hood of the Inplace widget you used above.  Note that each widget is made of the following files.

• component.htm
• component.js
• component.css

1.  See what make up the Inplace widget.

• Within NetBeans IDE, expand resources->scriptaculous->inplace under jMakiInplace project node.
• Observe that there are three files - component.css, component.htm, component.js - are present.  You will see all widgets have these files.  (Figure-4.20 below)
  

Figure-4.20: Inplace widget has list directory with necessary files

2. Study component.css of the Inplace widget.

The component.css defines the style of the widget. 

• Double click component.css to open it in the source editor. 
  

.selected { background-color: #888; }

Code-4.21: component.css

3. Study the component.htm of the Inplace widget.

<Learning point> Each widget instance in a page will be assigned a uuid (Universally Unique Identifier) by the jMaki framework.  In the component.htm, it is represented by ${uuid}. 

• Double click component.htm to open it in the source editor.

<a id="${uuid}" href="#">${value}</a>

Code-4.22: component.htm

4. Study the component.js of the Inplace widget.

• Double click component.js to open it in the source editor.

/* Copyright 2007 You may not modify, use, reproduce, or distribute this software except in compliance with the terms of the License at:  http://developer.sun.com/berkeley_license.html  $Id: component.js,v 1.0 2007/04/15 19:39:59 gmurray71 Exp $ */ // define the namespaces if (!jmaki.widgets.scriptaculous) {     jmaki.widgets.scriptaculous = {}; } jmaki.widgets.scriptaculous.inplace = {}; /**  * @constructor  */ jmaki.widgets.scriptaculous.inplace.Widget = function(wargs) {     var wInstance = this;       var service;   if (!wargs.service) {         jmaki.log("You did need to provide a service for the completer to use. Defaulting to an _inplace.html file in the widget directory.");      service =  wargs.widgetDir + "/_inplace.html";   } else service = wargs.service;   this.wrapper = new Ajax.InPlaceEditor(wargs.uuid, service,   { ajaxOptions:         {method: 'post'},         widget: wargs,         callback: function(form, value) {         var result = null;       wInstance.wrapper.value = value;       jmaki.publish("/scriptaculous/inplace/valueUpdate",             {target:wInstance, wargs:wargs, value : value});       if (null != wargs.outResult) {           result = wargs.outResult;       }       else {           result = Form.serialize(form);           if (!wargs.service) wInstance.wrapper.element.innerHTML = value;       }       return result;       },       onComplete: function(transport, element) {             element.innerHTML = wInstance.wrapper.value;         if (null == transport || null == element) {         return;         }         jmaki.publish("/scriptaculous/inplace/response",               {target:wInstance, wargs:wargs, transport:transport,                element:element});       }   }); }

Code-4.23: component.js

4. Study the widget.js of the Inplace widget.

{     'name': 'Inplace',     'type': 'scriptaculous',     'version': '1.0',     'jmakiVersion': '1.0',        'image': 'images/scriptaculus-inplace.jpg',     'description': 'A autocomplete widget.',     'value': {         'required':'true',     'type': 'STRING',     'defaultValue': 'click me to replace me'     },     'config' : {         'type' :     {'id': 'scriptaculous',          'version': '1.6.4',          'libs': [                   '../resources/libs/scriptaculous/v1.6.4/prototype.js',                   '../resources/libs/scriptaculous/v1.6.4/scriptaculous.js',                   '../resources/libs/scriptaculous/v1.6.4/dragdrop.js',                   '../resources/libs/scriptaculous/v1.6.4/effects.js',                   '../resources/libs/scriptaculous/v1.6.4/builder.js',                   '../resources/libs/scriptaculous/v1.6.4/slider.js',                   '../resources/libs/scriptaculous/v1.6.4/controls.js'                  ],     'resources': 'services/inplaceService.jsp'         }     },     'topicInfo': {     'type': 'publish',     'topicName': '/scriptaculous/inplace/valueUpdate',     'description':'publish to topicName when the value is updated.  If there is a service, publish to /scriptaculous/inplace/response on onComplete event'     } }

                                                                                                                        return to top of the exercise

 

                                                                                                                        return to the top

0. Start NetBeans IDE 6.0. (If you have not done so yet)
1. Create a new jMaki NetBeans project

• Select File->New Project (Ctrl+Shift+N). The New Project dialog box appears.
• Under Choose Project pane, select Web under Categories and Web Application under Projects.
  
• Observe the Name and Location pane appears.
  
• For the Project Name field, type in jMakiHelloWorld as project name.
  
• Click Next.
  
• Observe Frameworks pane appears.
• Select jMaki Ajax Framework and No CSS Style under CSS Layout.
  
• Select Finish.

                                                                                                                        return to top of the exercise

In this step, you are going to create the following three template files under jMakiHelloWorld->Web Pages->resources->helloworld directory.  The resources directory maintains all the jMaki widgets.

• component.htm
• component.js
• component.css

1.  Create helloworld folder under resources.

• Expand jMakiHelloWorld->Web Pages.
  
• Right click resources and select  New->File/Folder.  The New File dialog box appears. (Figure-5.21 below)
  

Figure-5.21: Create a new folder

• Select Other under Categories and Folder under File Types.  (Figure-5.22 below)
• Click Next. 

Figure-5.22: Create a new folder

• For the Folder Name field, type in helloworld. Click Finish. (Figure-5.23 below) 
  
• Click Finish.
  
• Observe that the helloworld folder appears under jmaki.

Figure-5.23: Create helloworld folder

2. Create component.htm template file

• Right click helloworld folder and select  File/Folder. 
  
• Observe that the New File dialog box appears.
• Select Other under Categories and Empty File under File Types.  (Figure-5.24 below)
  
• Click Next.
  

Figure-5.24: Create Empty File

• For File Name field, type in component.htm.  (Figure-5.25 below)
  
• Click Finish. 
  

Figure-5.25: Give it a file name

• Observe that the empty component.htm file is displayed in the source editor.
• Add the code in the Code-5.22 below to the component.htm.

<form>  <input id="${uuid}_name" type="text" size="20" value="Enter your name"             onkeyup="jmaki.attributes.get('${uuid}').submitData()"> </from> <div id="${uuid}_hello" class="helloDiv"></div> </div>

Code-5.22: component.htm of the HelloWorld jMaki widget

3.  Create component.css file

• Right click helloworld folder and select  Empty File. 
  
• For File Name field, type in component.css. (Figure-5.23 below)
  
• Click Finish.

Figure-5.23: Create component.css

• Observe that the empty component.css file is displayed in the source editor.
• Add the code in the Code-5.24 below to the component.css.

.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; } .helloDiv {     position: relative;     width: 400px;     height: 300px;     overflow: auto; }

Code-5.24: component.js of the HelloWorld jMaki widget

4. Create component.js

• Right click helloworld folder and select  Empty File. 
  
• Click Next. 
• For File Name field, type in component.js.
  
• Click Finish.
• Observe that the empty component.js file is displayed in the source editor.
• Add the code in the Code-5.25 below to the component.js

// define the namespaces if (!jmaki.widgets.jmaki) {     jmaki.widgets.jmaki = {}; } jmaki.widgets.jmaki.helloworld = {}; jmaki.widgets.jmaki.helloworld.Widget = function(wargs) {     // The jMaki framework must have created widget JavaScript object.     var uuid = wargs.uuid;     var service = wargs.service;        function getXHR(url) {         if (window.XMLHttpRequest) {             return new XMLHttpRequest();         } else if (window.ActiveXObject) {             return new ActiveXObject("Microsoft.XMLHTTP");         }     }        // This function gets called when a user typed some characters     // in the input text field whose id is set as ${uuid}_hello in     // component.htm template file.     this.submitData = function() {         var target = document.getElementById(uuid + "_hello");         var req = getXHR(service);         req.onreadystatechange = function() {             if (req.readyState == 4) {                 if (req.status == 200) {                     target.innerHTML = req.responseText;                 }             }         };         req.open("POST", service, true);         var name= document.getElementById(uuid + "_name");         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");         req.send("name=" + name.value + "&uuid=" + uuid);     }    }

Code-5.25: component.js of the HelloWorld jMaki widget

                                                                                                                        return to top of the exercise

In this step, you are going to create a service page called helloService.jsp.

1. Create helloService.jsp

• Right click Web Pages under  jMakiHelloWorld and select New->JSP.
• Observe that the New JSP File dialog box appears.
• For JSP File Name field, type in helloService. (Figure-5.30 below) 
• Click Finish.
  
• Observe that the IDE generated helloService.jsp file appears in the source editor.

Figure-5.30: helloService.jsp

2. Replace the IDE generated  helloService.jsp file with the code in Code-5.31 below.

<ol> <% String name= request.getParameter("name"); out.println("Hello, " + name + "!"); %> </ol>

Code-5.31: helloService.jsp


Figure-5.32: helloService.jsp

                                                                                                                        return to top of the exercise

In this step, you are going to modify the index.jsp to use the HelloWorld jMaki widget you just created.

1. Modify the index.jsp under jMakiHelloWorld->Web Pages as shown in Code-5.32 below.  The code fragment that needs to be added is highlighted in bold and blue-colored font.

<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <%@ 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>Use my own HelloWorld jMaki widget</h1>         <a:ajax name="helloworld"   service="helloService.jsp"  />     </body> </html>

Code-5.32: Modified index.jsp

                                                                                                                        return to top of the exercise

1. Right click jMakiHelloWorld and select Run Project.
2. In the text field, type something like Sang Shin (without pressing Enter key) as shown in Figure-5.50 below  
3. Observe that Hello, Sang Shin! message should get displayed. 


Figure-5.50: Observe that the values typed in are redisplayed

4. See the values of the request and response.

• If you have installed Firebug debugger, press F12 to enable to see the Console.
• Observe that the name field has whatever you typed in, Sang Shin, in this example. (Figure-5.51 below)
  

Figure-5.51: Result of running an application that uses HelloWorld jMaki widget

• Click Response tab to see the response from the server.
• Observe the value that is returned from the server, Hello, Sang Shin!, in this example. (Figure-5.52 below)
  

Figure-5.52: See the value that is returned from the server

                                                                                                                        return to top of the exercise

Solution

The solution to this exercise is provided as a ready-to-open-and-run NetBeans project as part of hands-on lab zip file. You can find it under <LAB_UNZIPPED_DIRECTORY>/ajaxjmakiintro/solutions/jMakiHelloWorld-solution.  You can just open it as a NetBeans project and run it. 

In this exercise, you have created your own jMaki widget called helloworld and used it in your application. You also observed the Ajax-based behavior of the helloworld wiget through Firebug debugger.


                                                                                                                        return to the top

1. The homework is to create a new jMaki widget of your own by slightly modifying the helloworld jMaki widget you built above as following:

2. Send the following files to ajaxhomework@sun.com with Subject as AJAXHomework-ajaxjmakiintro.