provided by: 
Originally published at Internet.com1. The YUI
The Yahoo User Interface (YUI) library is a collection of JavaScript and CSS resources that make it easy to build a wide variety of interactive web pages. It also includes easy-to-use widgets that can be directly dropped into a page.
YUI not only handles the cross-browser challenges for developers, from JavaScript to font sizes, but it also includes CSS that can be included to minimize the time to implement a widget. In addition to JavaScript and CSS, the library also includes test scripts, examples, and documentation for YUI components. Using YUI, you can minimize your effort to create a feature rich web interface.
2. Manipulating the DOM
Creating interactive interfaces on the web requires interacting with the Document Object Model. It's okay if you don't have the innermost knowledge of the DOM because YUI does a lot of this work for you in one of its core libraries.
The YUI DOM class offers convenient methods to access DOM elements. This library is a singleton and doesn't require instantiation. Simply put, just include the prerequisite yahoo.js and the library, dom.js, and call the methods directly.
You can do a lot using the DOM Collection library, including easily accessing page elements for manipulation. You also can get and set styles, the XY coordinate of an element, manipulate class names, and even get the Viewport size.
The DOM library is probably most often used to retrieve page elements by either ID or class for manipulation. You also can shorten your code by assigning this singleton object to a variable at the beginning of a function or class. You can do this with almost all of the YUI utility classes. $D = YAHOO.util.Dom;
This allows you to call any method of the DOM class using a much shorter line of code throughout your function or class. $D.get('myid');
3. AJAX Requests
There are a lot of AJAX libraries these days. YUI's AJAX implementation has a lighter footprint than some other libraries. The Connection Manager class handles AJAX requests in YUI. It provides a simple but powerful interface while handling cross-browser instantiation of the XMLHttpRequest, handles' states, and server responses.
To use the Connection Manager, include the prerequisites Yahoo and Custom Event, and then the Connection Manager.
When you want to handle a response from an AJAX call, create a callback object to handle the server response and the returned data. If you don't care what information comes back from the server, you can omit the callback object. var callback = { success: function(o) {/*success handler code*/}, failure: function(o) {/*failure handler code*/}, }
The response object is passed into each function in your callback object. If you need to pass in additional objects, numbers, strings, or arrays to your callback methods, you can do this by using the optional argument member.
Each of these members is optional. The Connection Manager will automatically call either success or response member functions depending on the server response. Each of these members is optional because you are overriding the callback object in the Connection Manager and passing in a custom methods for handling the response. If there is no response method defined in your code, nothing happens.
To make an AJAX request, you also need to define the data you want to send to the server, the URL to send the data to, and the method to use. In this example, you'll use the following URL, URL param string, and the HTTP POST method. If the data string has special characters, you would need to encode the postData string. var sUrl = 'http://myserver.com/ajax_url'; var postData = 'username=anonymous&password=blank'; var myMethod = 'POST';
At this point, you have defined methods defined to handle success and failure, your designation URL, your POST data string, and your HTTP method. Now, you just need to make your AJAX request using the Connection Manager. Use the asyncRequest method of the Connection Manager to query the server. var request = YAHOO.util.Connect.asyncRequest(myMethod, sUrl, callback, postData); Note:
You also could retrieve a form element from the page by using the DOM class and pass the form object in to the Connection Manager.
4. Drag and Drop
Drag and drop is a cool effect that interacts with the DOM of a web page. It's been gaining popularity over the last few years, cropping up in shopping carts and other interactive interfaces.
Creating drag and drop interaction is easy using the DragDrop library in YUI. To create this effect in YUI, first include the Yahoo DOM Event and the DragDrop classes in the head of your HTML document.
Then, add an element to the page that you want to drag and drop.
Drag & drop this element around the page.
Finally, instantiate the DragDrop object. var dd1 = new YAHOO.util.DD("element1");
5. Displaying Tabular Data on a Web Page
At some point, almost everyone needs to represent tabular data on a web page. The DataTable control provides a simple but powerful way to display tabular data on a web page. This YUI widget also offers interactive features including sortable and resizable columns, row selection, pagination, scrolling, and inline editing.
The DataTable control is dynamically marked up as a table, with a and two
elements. The is populated by the ColumnSet class and the relies on the DataSource, RecordSet classes and DOM UI. The DataTable has quite a few prerequisites, but don't be intimidated. Once you're set up, using the DataTable in your web page is pretty painless. You can use the included CSS to style the data table, without worrying about browser display issues. Dependancies are contingent upon the features you want to include. For instance, resizable columns require the DragDrop library and AJAX requires the Connection Manager. More information on the various features of the DataTable widget is available in the YUI documentation and examples.
A table is useless without data, so you first need to define the data that will be used for the table. Do this by instantiating a DataSource object that will contain your data for the rows in the table. YAHOO.example.fruit = [ {name:"Plum",price:"$2.50"}, {name:"Fig",price:"$3.50"}, {name:"Orange",price:"$3.99"}, {name:"Apple",price:"$2.00"} ];
Instantiation of the DataSource object is, of course, done by calling the method 'new' on the DataSource utility class. The first and only argument to 'new' is the data structure for the class uses to build the object. In this case, the argument is the array Yahoo.example.fruit. var myDataSource = new YAHOO.util.DataSource(YAHOO.example.fruits);
You also could use JSON, XML, Text, or a HTML table but for this example, use a JavaScript array to keep things simple.
Next, you need to set the responseType and define your responseSchema for your DataSource object. Because you're using a JavaScript array, set the responseType to TYPE_JSArray. The responseSchema defines the names of the columns the object will receive. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["name","price"] };
Now, you can instantiate the DataTable object. All you need to pass in is an ID or element reference of a DIV element that will act as a container for the DataTable, the column definitions, and the newly created DataSource object. var myColumnDefs = [ {key:"name", label:"Fruit Type"}, {key:"price", label:"Price"} ]; var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource);
As you can see, the keys for the column definitions match the fields defined in our rresponseSchema. The labels in the column definitions are used in the markup for the table for the visible table headers.
You also could pass in a forth parameter to the DataTable object containing configuration options. There are a lot of options to the DataTable control in YUI. Again, I would highly recommend reviewing the examples and documentation to see the full list of options and features for this widget.
5a. Pagination
One of the features of the DataTable widget that I find most useful is pagination. Pagination makes interaction with large datasets much easier for the end user and keeps the design of a page intact.
Pagination also occurs without page reloads and the pagination elements are configurable. A user can choose how many rows to show on a page and easily access other pages in the DataTable. // Configure pagination features // The following object literal reiterates default values var myConfigs = { paginated:true, // Enables built-in client-side pagination paginator:{ // Configurable options containers: null, // Create container DIVs dynamically currentPage: 1, // Show page 1 // Show these in the rows-per-page dropdown dropdownOptions: [10,25,50,100,500], pageLinks: 0, // Show links to all pages rowsPerPage: 100 // Show up to 100 rows per page } }; var myDataTable = new YAHOO.widget.DataTable("myContainer", myColumnDefs, myDataSource, myConfigs);
6. Rich Text Editor Widget
The Rich Text Editor widget was just added to YUI in version 2.3.0. The YUI editor is cross-browser compatible and includes a lot of the standard features you would expect for a simple text editor.
The Rich Text Editor has been designed to replace an existing HTML