Download the Required Libraries

1. From the GoogleImageSearchStore widget demo, click on the HTML tab and note that the widget requires the base Dojo library, as well as the Dijit, and DojoX libraries.

   ...
   <script type="text/javascript">
     dojo.require("dojox.data.GoogleSearchStore");
     dojo.require("dijit.form.Button");
     dojo.require("dojo.fx");
     dojo.require("dojox.fx.easing");
   ...
   

2. Visit the Dojo Downloads page and download the Dojo Toolkit 1.2.3, which includes Dojo, Dijit, and DojoX.
   
   Note: You need to download a zip file of the release in order to register the toolkit as a library in the IDE, so if you are working on a *nix machine (including Mac), visit the download index for version 1.2.3 and select dojo-release-1.2.3.zip.

Register the Libraries in the IDE

1. In the IDE, choose Tools > Libraries to open the Libraries Manager. In the left pane, scroll down to the bottom of the list to view the JavaScript libraries included in your installation of the IDE.
2. Click New Library, and in the dialog that displays type in Dojo_1.2.3 for the library name, then select JavaScript Libraries from the Library Type dropdown menu.
   
3. Click OK to close the dialog. Note that a node for the new library now displays under JavaScript Libraries in the left pane of the Library Manager.
4. In the Library Manager, click the Add Zip button, and in the dialog that displays, navigate to and select the dojo-release-1.2.3.zip file on your computer. The path to the zip file displays in the Library Scriptpath text area.
   
   Note: If you plan to reuse the toolkit in multiple projects, you should consider placing the zip file in a more permanent location on your computer. When you register a JavaScript library with the IDE, you are pointing the IDE to a resource stored on your computer. Upon registration, the IDE does not copy the zip file to a second location, so if you later delete the zip file, you can no longer use the JavaScript library in the IDE.
5. Click OK to exit the Library Manager. The toolkit that you downloaded is now registered as a JavaScript library with the IDE.

Add the Libraries to your Project

1. If you have not already done so, open the sample project in the IDE. If you are using the Java-based project, choose File > Open Project (Ctrl-Shift-O; ⌘-Shift-O on Mac) and use the Open Project wizard. If you are using the PHP-based project, use the New Project Wizard (Ctrl-Shift-N; ⌘-Shift-N on Mac) and choose PHP Application with Existing Sources, then set the project up based on your local settings. If you require help, refer to Setting Up a PHP Project.
2. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties. The Project Properties window opens.
3. Select the JavaScript Libraries category, then click the Add button. The dialog that displays shows all of the JavaScript libraries that are registered with the IDE (minus any that you may have already added to your project).
4. Select Dojo_1.2.3, and note that the physical path to the location within your project where the library will be extracted to displays in the dialog.
   
   Note: By default, the IDE extracts JavaScript libraries to a web/resources folder within your project. You could modify the path by clicking the ellipsis button ( ) in the above dialog, then navigating to a new path.
5. Click OK. When you do so, the library is extracted to the specified location in your project.
6. Click OK to exit the Project Properties window. In your Projects window, note that a Dojo_1.2.3 node is now listed under Web Pages > resources. If you drill down into the node, you can see that the Dojo, Dijit, and DojoX libraries are contained therein.
   
   The JavaScript libraries are now added to your project.

Link to the Libraries from a Project File

1. In the Projects window, double-click the dojoDemo.html file within the sample project to open it in the editor.
2. Find the following <script> tags:

   <script type="text/javascript">
   
       // TODO: Link to source libraries
   
   </script>

   and replace them with:

   <script type="text/javascript"
       src="resources/Dojo_1.2.3/dojo-release-1.2.3/dojo/dojo.js"
       djConfig="parseOnLoad: true"></script>

   This code uses the src attribute to define the URL to the dojo.js file, relative to the current file. Dojo also requires the djConfig block to enable its page parsing infrastructure. For more information on the Dojo parser, refer to the official documentation.

Add Demo HTML code

1. Return to the widget's demo page and click on the HTML tab.
2. Copy the entire contents listed under the HTML tab, then return to the IDE's editor and paste them into dojoDemo.html in place of the TODO: Add template content here statement.
   

   You can reformat code by right-clicking in the editor and choosing Format.

View the File in a Browser

1. To view the file in a browser, right-click either in the editor, or the file's node in the Projects window and choose View. The IDE opens your default browser and the dojoDemo.html page displays.
   
2. Type in a random search string, then click Search. Provided you are connected to the Internet, the image results fall individually onto the page, just as they do in the live demo.
   

Add the Script.aculo.us Library to your Project

1. If you have not already done so, open the sample project in the IDE. If you are using the Java-based project, choose File > Open Project (Ctrl-Shift-O; ⌘-Shift-O on Mac) and use the Open Project wizard. If you are using the PHP-based project, use the New Project Wizard (Ctrl-Shift-N; ⌘-Shift-N on Mac) and choose PHP Application with Existing Sources, then set the project up based on your local settings. If you require help, refer to Setting Up a PHP Project.
2. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties. The Project Properties window opens.
3. Select the JavaScript Libraries category, then click the Add button. The dialog that displays shows all of the JavaScript libraries that are registered with the IDE (minus any that you may have already added to your project).
4. Select Scriptaculous 1.8.1, and note that the physical path to the location within your project where the library will be extracted to displays in the dialog.
   
   Note: By default, the IDE extracts JavaScript libraries to a web/resources folder within your project. You could modify the path by clicking the ellipsis button ( ) in the above dialog, then navigating to a new path.
5. Click OK. When you do so, the library is extracted to the specified location in your project.
6. Click OK to exit the Project Properties window. In your Projects window, note that a scriptaculous_js_1.8.1 node is now listed under Web Pages > resources. If you expand this node, you can see the JavaScript files contained in the library, including the prototype.js file, which is required for the Script.aculo.us toolkit.
   
   The Script.aculo.us library is now added to your project.

Add Puzzle Images to your Project

1. Download the zip file containing the required images for this project from: http://www.netbeans.org/files/documents/4/2415/puzzle-images.zip.
2. Extract the folder to a temporary location on your computer.
3. Copy the folder (Ctrl-C; ⌘-C on Mac), then in the IDE's Projects window, paste the folder into the Web Pages folder (Source Files folder for PHP projects). You can accomplish this by right-clicking the folder and choosing Paste. The puzzle-images folder then displays in the Projects window, containing the sample images.
   
   The sample puzzle images are now included in your project.

Link to the Library from a Project File

1. In the Projects window, double-click the scriptaculous.html file within the sample project to open it in the editor.
2. Find the following <script> tags:

   <script type="text/javascript">
   
       // TODO: Link to source libraries
   
   </script>

   and replace them with:

   <script type="text/javascript" src="resources/scriptaculous_js_1.8.1/lib/prototype.js"></script>
   <script type="text/javascript" src="resources/scriptaculous_js_1.8.1/src/scriptaculous.js"></script>

   This code uses the src attribute to define the URLs to the prototype.js and scriptaculous.js files, relative to the current file. The Script.aculo.us toolkit is based on the Prototype framework, and requires prototype.js file. The scriptaculous.js file is a loader script that automatically loads in the other libraries. For more information on Scriptaculous, see the official documentation.

Add Demo HTML Code

1. Return to the widget's demo page and scroll down to view the source code.
2. Copy all of the example source code, then return to the IDE's editor and paste it into scriptaculous.html in place of the TODO: Add template content here statement. Note that the source code is JavaScript, and you are pasting the code into an HTML area between the <body> tags. In the next step you will surround the code with <script> tags.
   
   Note: The example source code includes a variable: p = $('puzzle'), however it is removed in the below code snippet as it is not required for this exercise.
3. Surround the source code with <script> tags, then reformat the page by right-clicking in the editor and choosing Format. The content between the <body> tags should now look as follows:

   <body>
       <h1>Script.aculo.us Demo</h1>
   
       <script>
           (function() {
               var info = $('puzzleinfo'), moves = 0;
   
               Sortable.create('puzzle', {
                   tag: 'img', overlap: 'horizontal', constraint: false,
                   onUpdate: function() {
                       info.update('You\'ve made ' + (++moves) + ' move' + (moves > 1 ? 's' : ''));
                       if (Sortable.sequence('puzzle').join('') == '123456789')
                           info.update('You\'ve solved the puzzle in ' + moves + ' moves!').morph('congrats');
                   }
               });
           })();
       </script>
   </body>

   This function uses Sortable.create to initialize a sortable element, i.e., the image puzzle. The first argument of the function, 'puzzle', is the id of the page element that contains the images (This will be defined in the next step). The other arguments, i.e., tag, overlap, and onUpdate, are options that define the behavior of the sortable element. Refer to the official documentation on Sortable.create to better understand how these options are handled.
   

   The Sortable.create function exists in the dragdrop.js file of the library you added to your project. If you open this file in the editor, you can see the function definition on line 624.

4. Add the following div element to the area just above the <script> tags you just implemented:

   <div id="puzzle">
       <img style="position: relative;" id="image_5" src="puzzle-images/puzzle5.jpg" alt="">
       <img style="position: relative;" id="image_1" src="puzzle-images/puzzle1.jpg" alt="">
       <img style="position: relative;" id="image_9" src="puzzle-images/puzzle9.jpg" alt="">
       <img style="position: relative;" id="image_7" src="puzzle-images/puzzle7.jpg" alt="">
       <img style="position: relative;" id="image_4" src="puzzle-images/puzzle4.jpg" alt="">
       <img style="position: relative;" id="image_8" src="puzzle-images/puzzle8.jpg" alt="">
       <img style="position: relative;" id="image_3" src="puzzle-images/puzzle3.jpg" alt="">
       <img style="position: relative;" id="image_6" src="puzzle-images/puzzle6.jpg" alt="">
       <img style="position: relative;" id="image_2" src="puzzle-images/puzzle2.jpg" alt="">
   </div>

   The div element contains the puzzle images which you added to the project. It is referenced by the function from the previous step to initialize a sortable element.
5. Add the following code to the area just beneath the div element you created in the previous step:

   <p>
       <span id="puzzleinfo">(no move made yet)</span>
   </p>

   If you examine the live demo, you can see that the widget records the number of times a user moves a puzzle piece, and outputs this data beneath the puzzle.
   
   Looking back at the function in Step 3, you can see that two variables are declared and initialized:

   var info = $('puzzleinfo'), moves = 0;

   The moves variable is used as a counter, while the info variable is used by the function to reference the line within the <p> tags and update it according to user actions.
6. Finally, include some CSS rules between the <head> tags:

   <style>
       #puzzle { width:450px }
       .congrats { color: #222; background: #c5e7e0 }
   </style>

   Each square image is 150px in width, so adding a width:450px declaration has the effect of limiting 3 images per row. The declarations for the congrats class apply to the output message the user sees upon solving the puzzle. Reviewing the function from Step 3, note that the toolkit's morph effect is applied to the congrats class.
   
   At this stage, the contents of the <html> tags should look as follows:

   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
   
           <script type="text/javascript" src="resources/scriptaculous_js_1.8.1/lib/prototype.js"></script>
           <script type="text/javascript" src="resources/scriptaculous_js_1.8.1/src/scriptaculous.js"></script>
   
           <style>
               #puzzle { width:450px }
               .congrats { color: #222; background: #c5e7e0 }
           </style>
   
           <title>Script.aculo.us Demo</title>
       </head>
       <body>
           <h1>Script.aculo.us Demo</h1>
   
           <div id="puzzle">
               <img style="position: relative;" id="image_5" src="puzzle-images/puzzle5.jpg" alt="">
               <img style="position: relative;" id="image_1" src="puzzle-images/puzzle1.jpg" alt="">
               <img style="position: relative;" id="image_9" src="puzzle-images/puzzle9.jpg" alt="">
               <img style="position: relative;" id="image_7" src="puzzle-images/puzzle7.jpg" alt="">
               <img style="position: relative;" id="image_4" src="puzzle-images/puzzle4.jpg" alt="">
               <img style="position: relative;" id="image_8" src="puzzle-images/puzzle8.jpg" alt="">
               <img style="position: relative;" id="image_3" src="puzzle-images/puzzle3.jpg" alt="">
               <img style="position: relative;" id="image_6" src="puzzle-images/puzzle6.jpg" alt="">
               <img style="position: relative;" id="image_2" src="puzzle-images/puzzle2.jpg" alt="">
           </div>
   
           <p>
               <span id="puzzleinfo">(no move made yet)</span>
           </p>
   
           <script>
               (function(){ 
                   var info = $('puzzleinfo'), moves = 0;
   
                   Sortable.create('puzzle', {
                       tag:'img',overlap:'horizontal',constraint: false,
                       onUpdate:function(){
                           info.update('You\'ve made ' + (++moves) + ' move' + (moves>1 ? 's' : ''));
                           if(Sortable.sequence('puzzle').join('')=='123456789')
                               info.update('You\'ve solved the puzzle in ' + moves + ' moves!').morph('congrats');
                       }
                   });
               })();
           </script>
       </body>
   </html>

View the File in a Browser

1. To view the scriptaculousDemo.html file in a browser, right-click either in the editor, or the file's node in the Projects window and choose View. The IDE opens your default browser and the page displays.
   
2. As in the live demo, you can drag puzzle pieces to new positions, and the text beneath the puzzle updates according to your actions.
   

Download jQuery Resources

1. Visit jQuery's customizable download page, select Datepicker under the Widgets category, then click Download to download the zip file to a location on your computer. You can leave any download settings (i.e., Version or Compression) at their defaults.
   
   Note: In a real-world environment, it might make more sense to download all widgets and register them as a JavaScript library in the IDE. For simplicity, this exercise demonstrates how to add a downloaded widget directly to a project.
2. Go to jQuery's ThemeRoller. The ThemeRoller allows you to select and download a theme from its Gallery, otherwise you can configure your own using the provided settings.
3. Click the Gallery tab in the left column, then scroll down and click Humanity to view the theme in the main window. Click Download and download the zip file to a location on your computer.

Add Resources to your Project

There are three resources that you need to add to the project: the jQuery core library, the Datepicker widget, and the Humanity theme.

jQuery Core Library

1. If you have not already done so, open the sample project in the IDE. If you are using the Java-based project, choose File > Open Project (Ctrl-Shift-O; ⌘-Shift-O on Mac) and use the Open Project wizard. If you are using the PHP-based project, use the New Project Wizard (Ctrl-Shift-N; ⌘-Shift-N on Mac) and choose PHP Application with Existing Sources, then set the project up based on your local settings. If you require help, refer to Setting Up a PHP Project.
2. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties. The Project Properties window opens.
3. Select the JavaScript Libraries category, then click the Add button. The dialog that displays shows all of the JavaScript libraries that are registered with the IDE (minus any that you may have already added to your project).
4. Select jQuery 1.2.6, and note that the physical path to the location within your project where the library will be extracted to displays in the dialog.
   
   Note: By default, the IDE extracts JavaScript libraries to a web/resources folder within your project. You could modify the path by clicking the ellipsis button ( ) in the above dialog, then navigating to a new path.
5. Click OK. When you do so, the library is extracted to the specified location in your project.
6. Click OK to exit the Project Properties window. In your Projects window, note that a jquery_1.2.6 node is now listed under Web Pages > resources. If you expand the node, you can see the core jquery-1.2.6.js file contained therein.
   

Datepicker Widget

1. Navigate to the location on your computer where you downloaded the Datepicker widget. The folder is called jquery-ui-personalized-xxx (where xxx is the jQuery version selected at download).
2. Copy the folder (Ctrl-C; ⌘-C on Mac), then in the IDE's Projects window, paste the folder into the resources folder. You can accomplish this by right-clicking the folder and choosing Paste. The Datepicker widget then displays in the Projects window.
3. For the sake of clarity, rename the folder to jquery_datepicker. You can accomplish this by single-clicking on the folder's name in the Projects window, and typing in a new name.
   

Humanity Theme

If you navigate to where you downloaded the Humanity theme and open the demo.html file in your browser, you can see that the theme contains resources for all of the basic widgets that jQuery offers. For this demo however, you only require those that relate to the Datepicker widget so it is not necessary to add the entire theme to the project. In fact, you only need to add the images and several CSS files.

1. In the IDE, create a new folder for your project to contain the Humanity theme's resources. To do so, in the Projects window, right-click your project's resources node and choose New > Folder.
2. Name the folder jquery-humanity-theme and click OK. The new folder should now be visible in the Projects window within the resources node.
3. Return to the Humanity theme folder on your computer and copy (Ctrl-C; ⌘-C on Mac) the following CSS files:
   
   
   • ui.all.css
   • ui.core.css
   • ui.datepicker.css
   • ui.theme.css
4. Paste these files into the jquery-humanity-theme folder you just created. You can do so by right-clicking the jquery-humanity-theme folder and choosing Paste.
5. Return to the Humanity theme folder on your computer and copy the images folder (including all of the image files it contains).
6. In the IDE, paste the images folder into the jquery-humanity-theme folder. The Projects window should now appear as follows:
   

Link to Resources from a Project File

1. Double-click the jQueryDemo.html file to open it in the IDE's editor
2. Between the <head> tags, enter the following statements:

   <script src="resources/jquery_1.2.6/jquery-1.2.6.js"></script>
   <script src="resources/jquery_datepicker/jquery-ui-personalized-1.6rc5.min.js"></script>
   
   <link rel="stylesheet" href="resources/jquery_humanity_theme/ui.all.css" type="text/css" media="screen">
   

   The two <script> elements link the page to the jQuery core library and Datepicker widget contained in your project, respectively. The <link> element points the page to the ui.all.css file, which you included when you added the Humanity theme to your project.
3. Open the ui.all.css file in the editor. The file contains three import statements:

   @import "ui.core.css";
   @import "ui.theme.css";
   @import "ui.allplugins.css";

   Remember that you did not copy ui.allplugins.css from the Humanity theme into your project. That file contains import statements for all of the widgets, but since you only copied Datepicker into your project, you can simply replace the import for ui.allplugins.css with an import for ui.datepicker.css (changes in bold):

   @import "ui.core.css";
   @import "ui.theme.css";
   @import "ui.datepicker.css";

Add Demo HTML code

1. Visit the jQuery documentation page for the Datepicker widget: http://docs.jquery.com/UI/Datepicker. Scroll down to the bottom of the page, which contains a demo and source code.
2. Click the View Source tab and examine the code. Note that all of the URIs for links to external files are absolute (i.e., they begin with http://). Therefore, if you were to run this file on its own, it would request the required resources over an Internet connection. To take advantage of the resources you have already added to your project however, you only need to copy over the script that calls the Datepicker widget, and the two text input fields.
3. Copy the <script> element from the example source code, and add it to jQueryDemo.html in the IDE's editor. You can do so by replacing the TODO: Add template content here statement (changes in bold):

   <h1>jQuery Demo</h1>
   
   <script>
       $(document).ready(function(){
           $('#example').datepicker();
           $('#exampleRange').datepicker({rangeSelect: true, firstDay: 1});
       });
   </script>
   

4. Copy the two HTML text input fields from the example source code and paste them into jQueryDemo.html:

   <input type="text" id="example" value="Click inside me to see a datepicker" style="width:300px;"/>
   <input type="text" id="exampleRange" value="Range datepicker starting on Monday." style="width:300px;"/>
   

   You can put these directly beneath the <script> element that you added in the previous step.

View the File in a Browser

1. To view the file in a browser, right-click jQueryDemo.html either in the editor, or the file's node in the Projects window and choose View. The IDE opens your default browser and the page displays.
   
   You can use your mouse to select a date, which is then entered into the text field, or you can use your keyboard to navigate the calendar (e.g., pressing Ctrl-Up/Down/Left/Right enables you to choose a day; pressing Page Up/Down (Opt-Left/Right on Mac) enables you to select the previous/next month).

Add Sample Code to the Project File

1. If you have not already done so, open the sample project in the IDE. If you are using the Java-based project, choose File > Open Project (Ctrl-Shift-O; ⌘-Shift-O on Mac) and use the Open Project wizard. If you are using the PHP-based project, use the New Project Wizard (Ctrl-Shift-N; ⌘-Shift-N on Mac) and choose PHP Application with Existing Sources, then set the project up based on your local settings. If you require help, refer to Setting Up a PHP Project.
2. In the Projects window (Ctrl-1; ⌘-1 on Mac), double-click the yahooUIDemo.html file to open it in the editor.
3. Open the DataTable demo page and scroll down to the heading entitled Sample Code for this Example.
4. Copy all of the code from the Markup section, then return to the IDE and paste the code into yahooUIDemo.html in place of the TODO: Add template content here statement.
   
   Click the 'view plain' option in the top border of the sample code in order to avoid copying line numbers.
5. Right-click inside the editor and choose View. The file opens in the browser and you can see how the basic HTML table is rendered.
   
6. Switch back to the DataTable demo page and copy all of the code from the JavaScript section.
7. Return to the IDE and paste the JavaScript code into yahooUIDemo.html in place of the // TODO: Add JavaScript sample code here comment.
   
   

   You can reformat code by right-clicking in the editor and choosing Format.

Add YUI Dependency References

1. Scroll to the bottom of the DataTable demo page, where you see Configuration for This Example.
2. Click on the link to the YUI Dependency Configurator. This link is:
   
   http://developer.yahoo.com/yui/articles/hosting/?datatable&MIN#configure
   
   which opens the Configurator with settings preconfigured for the DataTable. The YUI Dependency Configurator enables you to specify settings for any combination of Yahoo! UI resources.
3. In the YUI Configurator, deselect the Combine Files option.
   
   Combining files into a single JavaScript resource is ordinarily advantageous because it reduces communication overhead to a single HTTP request, which improves performance. However, here it makes sense to disable this option so that it is clear what files your demo page needs to link to. Notice that toggling this option affects the way links to JavaScript and CSS files display under the YUI Configurator's Loading Script and CSS Directly tab.
   
4. Copy all of the code listed in the Loading Script and CSS Directly tab, and paste it into yahooUIDemo.html in place of the <!-- TODO: Link to source libraries here --> comment.
5. Add a class declaration to the page's <body> tags in order to apply the demo's stylesheet to all elements in the page (in this case, just the DataTable).

   <body class="yui-skin-sam">

   To learn more about Yahoo! UI skins, see Understanding YUI Skins.
   
   The content between your <html> tags should now appear as follows:

   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
   
           <!-- Individual YUI CSS files -->
           <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
           <!-- Individual YUI JS files -->
           <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
           <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
           <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
           <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
   
           <script>
               YAHOO.util.Event.addListener(window, "load", function() {
                   YAHOO.example.EnhanceFromMarkup = new function() {
                       var myColumnDefs = [
                           {key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
                           {key:"account",label:"Account Number", sortable:true},
                           {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
                           {key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
                       ];
   
                       this.parseNumberFromCurrency = function(sString) {
                           // Remove dollar sign and make it a float
                           return parseFloat(sString.substring(1));
                       };
   
                       this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
                       this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
                       this.myDataSource.responseSchema = {
                           fields: [{key:"due", parser:"date"},
                               {key:"account"},
                               {key:"quantity", parser:"number"},
                               {key:"amount", parser:this.parseNumberFromCurrency} // point to a custom parser
                           ]
                       };
   
                       this.myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, this.myDataSource,
                       {caption:"Example: Progressively Enhanced Table from Markup",
                           sortedBy:{key:"due",dir:"desc"}}
                   );
                   };
               });
           </script>
   
           <title>YahooUI Demo</title>
       </head>
       <body class="yui-skin-sam">
           <h1>YahooUI Demo</h1>
   
           <div id="markup">
               <table id="accounts">
                   <thead>
                       <tr>
                           <th>Due Date</th>
                           <th>Account Number</th>
                           <th>Quantity</th>
                           <th>Amount Due</th>
                       </tr>
                   </thead>
                   <tbody>
                       <tr>
                           <td>1/23/1999</td>
                           <td>29e8548592d8c82</td>
                           <td>12</td>
                           <td>$150.00</td>
                       </tr>
                       <tr>
                           <td>5/19/1999</td>
                           <td>83849</td>
                           <td>8</td>
                           <td>$60.00</td>
                       </tr>
                       <tr>
                           <td>8/9/1999</td>
                           <td>11348</td>
                           <td>1</td>
                           <td>$34.99</td>
                       </tr>
                       <tr>
                           <td>1/23/2000</td>
                           <td>29e8548592d8c82</td>
                           <td>10</td>
                           <td>$1.00</td>
                       </tr>
                       <tr>
                           <td>4/28/2000</td>
                           <td>37892857482836437378273</td>
                           <td>123</td>
                           <td>$33.32</td>
                       </tr>
                       <tr>
                           <td>1/23/2001</td>
                           <td>83849</td>
                           <td>5</td>
                           <td>$15.00</td>
                       </tr>
                       <tr>
                           <td>9/30/2001</td>
                           <td>224747</td>
                           <td>14</td>
                           <td>$56.78</td>
                       </tr>
                   </tbody>
               </table>
           </div>
   
       </body>
   </html>

6. To view the file in a browser, right-click either in the editor, or the file's node in the Projects window and choose View. The IDE opens your default browser and the yahooUIDemo.html page displays.
   
   Note: Because you are referencing Yahoo!'s hosted YUI resources, you must be connected to the Internet to view the page properly.

Reference a Local Copy of the YUI Library

As you probably noticed in the previous series of steps, the YUI Dependency Configurator provides code that enables you to reference Yahoo!'s hosted YUI resources online. In a deployed application this may be preferable, but if you are developing with the YUI library, you may prefer to have it included in your project (i.e., for debugging or benchmarking purposes, or simply because you do not have Internet access all the time when working).

To add the 2.6.0 version of the YUI library to your project (which is necessary for the DataTable), you download it, register it with the IDE, add it to your project, and finally, reference it from a project file.

Note: NetBeans IDE 7.0 Milestone 1 includes version 2.6.0 of the YUI library. If you are using this version of the IDE, you do not need to download and register the library and can skip ahead to step 7 below.

1. Visit the YUI home page and download a copy of the YUI 2.6.0 library to your computer.
   
   You can extract the zip file and remove all resources except for the assets and build folders, then recompress the folder into a zip file to attain a smaller library size. These two folders are the only essential resources for YUI widgets. On the other hand, the downloadable zip includes many useful resources, such as documentation and examples.
2. In the IDE, choose Tools > Libraries to open the Libraries Manager. In the left pane, scroll down to the bottom of the list to view the JavaScript libraries included in your installation of the IDE.
3. Click New Library, and in the dialog that displays type in YahooUI_2.6.0 for the library name, then select JavaScript Libraries from the Library Type dropdown menu.
   
4. Click OK to close the dialog. Note that a node for the new library now displays under JavaScript Libraries in the left pane of the Library Manager.
5. In the Library Manager, click the Add Zip button, and in the dialog that displays, navigate to and select the yui_2.6.0.zip file on your computer. The path to the zip file displays in the Library Scriptpath text area.
   
   Note: If you plan to reuse the toolkit in multiple projects, you should consider placing the zip file in a more permanent location on your computer. When you register a JavaScript library with the IDE, you are pointing the IDE to a resource stored on your computer. Upon registration, the IDE does not copy the zip file to a second location, so if you later delete the zip file, you can no longer use the JavaScript library in the IDE.
6. Click OK to exit the Library Manager. The toolkit that you downloaded is now registered as a JavaScript library with the IDE.
7. In the Projects window (Ctrl-1; ⌘-1 on Mac), right-click your project node and choose Properties. The Project Properties window opens.
8. Select the JavaScript Libraries category, then click the Add button. The dialog that displays shows all of the JavaScript libraries that are registered with the IDE (minus any that you may have already added to your project).
9. Select YahooUI_2.6.0, and note that the physical path to the location within your project where the library will be extracted to displays in the dialog.
   
   Note: By default, the IDE extracts JavaScript libraries to a web/resources folder within your project. You could modify the path by clicking the ellipsis button ( ) in the above dialog, then navigating to a new path.
10. Click OK. When you do so, the library is extracted to the specified location in your project.
11. Click OK to exit the Project Properties window. In your Projects window, note that a YahooUI_2.6.0 node is now listed under Web Pages > resources.
    
    The YUI library is now added to your project.
12. In yahooUIDemo.html, examine the references that you previously added using the YUI Dependency Configurator. Note that the URIs are absolute, and reference Yahoo!'s hosted YUI resources:

    <!-- Individual YUI CSS files -->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css">
    <!-- Individual YUI JS files -->
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datatable/datatable-min.js"></script>
    

13. Modify the URIs to reference the YUI library you just added to your project (changes in bold):

    <!-- Individual YUI CSS files -->
    <link rel="stylesheet" type="text/css" href="resources/YahooUI_2.6.0/yui/build/datatable/assets/skins/sam/datatable.css">
    <!-- Individual YUI JS files -->
    <script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/yahoo-dom-event/yahoo-dom-event.js"></script>
    <script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/element/element-beta-min.js"></script>
    <script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="resources/YahooUI_2.6.0/yui/build/datatable/datatable-min.js"></script>
    

View the File in a Browser.

1. To view the file in a browser, right-click either in the editor, or the file's node in the Projects window and choose View. The IDE opens your default browser and the yahooUIDemo.html page displays. You can click on column headers to sort the listed data.