The ProgressBar can be used within other widgets. Here we are using Yahoo! Query Language, YQL, to find sushi restaurants in San Francisco, CA and display the information in a DataTable. We are showing most of the fields as plain text, but the restaurant ratings are displayed using the ProgressBar.
The Rating.AverageRating values from the YQL response are displayed as YUI ProgressBars. The YQL query for this example is:
The code to build the DataTable on that query is:
We create a simple DataTable with the columns Title, Address and Phone as simple text fields that are displayed just as they are received. A fourth column receives data held in the nested field Rating.AverageRating. We use a custom formatter to render ProgressBars instead of showing the plain numbers. All columns are sortable, even the Ratings column.
ratingFormatter is the function that will create the ProgressBars:
The core of it is the creation of the ProgressBar 90px wide and 18px high. We
set this size because our star image is a 18-pixel square and we want to fit
up to five stars horizontally. Five is, indeed, the
maxValue that the rating
might reach. We add a className
"ratings" to the widget, which will help us with some formatting details
and, finally, we set the current value for the progressBar to the cell value.
Every time the DataTable is sorted or redrawn for any reason (such as call to the
render method or paging),
the formatter function will be called again. As with any widget, the ProgressBar might take resources that might not be
automatically cleared by the garbage collector, so it is vital to call
destroy method to make sure all such
resources are cleared. We store each ProgressBar instance in the array
pbs. Before any render,
we iterate over this array and destroy every instance we have stored.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.