Adding a YUI Sortable DataTable to a NetBeans Web Project
Submitted by giunipero on Tue, 2009/01/27 - 1:27pm
Ads by DZone
Add YUI Dependency References
- Scroll to the bottom of the DataTable demo page, where you see Configuration for This Example.
- 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. - In the YUI Configurator, deselect the 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).
- Copy all of the code listed in the Loading Script and CSS Directly tab, and paste
it into
yahooUIDemo.htmlin place of the<!-- TODO: Link to source libraries here -->comment. - Add a
classdeclaration 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> - 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.htmlpage displays.
Note: Because you are referencing Yahoo!'s hosted YUI resources, you must be connected to the Internet to view the page properly.
Article Type:
How-to
- Login or register to post comments
- 9389 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