Pluggable View Classes: Using Mashable/Mashup Data
To render a pluggable view in most cases, the pluggable view class must map columns from response data for the view’s mashable or mashup to particular visual aspects of the view. To render a pie chart, for example, a view must know which field has the label for each slice and which field has the value to use to calculate the arc for the pie slice.
Note: This topic discusses specific aspects of how to implement pluggable view classes. For the basic implementation techniques, see
Implement a Pluggable View Class.
MashZone NextGen views use a MashZone NextGen DataTable instance as the client-side data model of a tabular dataset contained in the mashable or mashup response. The MashZone NextGen View Maker wizard also uses Data Table information to let users configure which dataset columns serve specific purposes for the view. Pluggable views can make use of both during view configuration and view rendering.
This example allows users who create views based on this pluggable view to select one column as configuration for the view in the MashZone NextGen View Maker wizard. It then uses this selected column configuration, plus any formatting configuration that users may have set for dataset columns and the Data Table with response data to access and format the correct data to render:
(function($){
var id = "show-column";
Presto.namespace('Sample.view');
Sample.view.ShowColumn = function(selector, dataTable, config){
config = config || {};
var self = this, el = $(selector);
self.config = config;
self.draw = function(dataTable, config){
var column = config.selectedColumn,
rows = Presto.view.getRows(dataTable, config.columns, {"flatten":"true"});
if(rows && rows.length && column){
el.empty();
el.append('<div
>' + column + '</div>');
rows.each(function(row, i){
el.append('<div
>' + row[column] + '</div>');
});
}
};
self.showConfig = function(dataTable, selector, config){
config = config || self.config;
var form = $(selector);
self.form = form;
form.html('<div><div>Select Column:</div><div><select></select></div></div>');
config.columns.each(function(col){
var name = col.name,
selected = name == config.selectedColumn ? 'selected="selected"' : '';
form.find('select').append('<option value="' + name + '" ' + selected + ' >' + name + '</option>');
});
};
self.getConfig = function(){
if(self.form){
self.config.selectedColumn = self.form.find('select').val();
}
return self.config;
};
self.validate = function(){
var config = self.getConfig();
return config.selectedColumn ? true : false;
};
};
|
Presto.view.register({
cls: Sample.view.ShowColumn,
lib: id
});
}(jQuery));