Adding a YUI Sortable DataTable to a NetBeans Web Project
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:
- Add the demo's sample code to a project file.
- Add YUI dependency references to the file.
- Reference a local copy of the YUI library instead of hosted resources.
- View the file in a browser.
Add Sample Code to the Project File
- 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.
- In the Projects window (Ctrl-1; ⌘-1 on Mac), double-click the
yahooUIDemo.htmlfile to open it in the editor. - Open the DataTable demo page and scroll down to the heading entitled Sample Code for this Example.
- Copy all of the code from the Markup section, then return to the IDE and paste the code
into
yahooUIDemo.htmlin place of theTODO: Add template content herestatement.
Tip: Click the 'view plain' option in the top border of the sample code in order to avoid copying line numbers. - 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.
- Switch back to the DataTable demo page and copy all of the code from the JavaScript section.
- Return to the IDE and paste the JavaScript code into
yahooUIDemo.htmlin place of the// TODO: Add JavaScript sample code herecomment.
Tip: You can reformat code by right-clicking in the editor and choosing Format.
- Login or register to post comments
- 8981 reads
- Printer-friendly version
(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 - 1:23pm