Over a million developers have joined DZone.

Adding a YUI Sortable DataTable to a NetBeans Web Project

· Web Dev Zone

This exercise demonstrates how to add a sortable YUI DataTable to a web page. As Yahoo! UI's demo page states,

"[The] DataTable instance [is] based on markup that already exists on the page. By progressively enhancing markup with higher order functionality, users who do not have JavaScript enabled are still able to view the page's content and experience core functionality."

Because this exercise demonstrates progressively enhanced markup, you start by adding the sample HTML table which contains data, and view the table in a browser. You then add references to Yahoo!'s hosted YUI resources (i.e., to a YUI skin and the JavaScript necessary for the DataTable's sorting functionality). Finally, instead of linking to Yahoo!'s hosted resources, you download and register the 2.6.0 version of the YUI library, and link to it directly from your project file.

You can complete this exercise by performing the following steps:

  1. Add the demo's sample code to a project file.

  2. Add YUI dependency references to the file.

  3. Reference a local copy of the YUI library instead of hosted resources.

  4. View the file in a browser.

Add Sample Code to the Project File


  1. Open the sample project (Java Web or PHP) 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.

    Tip: 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.

    The basic HTML table displayed in browser

  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.
    Tip: 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.

    YUI Dependency Configurator 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 (click to enlarge).

    YUI Dependency Configurator - Links to JavaScript and CSS files displayed differently

  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">
    Tip: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.

    The DataTable displayed in browser
    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.
    Tip: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.

    New Library dialog

  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.

    Library Manager
    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.

    Add JavaScript Libraries 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 ( 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.

    Projects window
    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:
    <!-- 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.

    The DataTable displayed in browser
For examples of other toolkits such as Dojo, jQuery, and Script.aculo.us, see Applying JavaScript Toolkits to Web Projects.
 
Topics:

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}