Adding a YUI Sortable DataTable to a NetBeans Web Project

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.
   
   


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:

    <!-- 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.