Home

Adding a YUI Sortable DataTable to a NetBeans Web Project

Submitted by giunipero on Tue, 2009/01/27 - 2:27pm
  • Delicious
  • Digg
  • StumbleUpon
  • Reddit
  • Technorati
Tags:

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.

Article Type: 
How-to
0

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

bet replied on Tue, 2009/06/09 - 2:23pm

My name is lucas, I have started my edveture with bookmakers 2 years ago.Since this time I have won around 100 000 usd. Would You like do same?? Think about Sports betting and change Your life. Nice post Regards

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.