Register and Trigger View-Specific Events in Pluggable Views

View-specific events in pluggable views are generally fired when users perform an action in the view. In addition to updating the visual user interface of the view, theses events publish messages that can be wired to create interactions with other apps in a workspace app. They do not trigger interactions in other views included in the same basic app.

Trigger events with the Presto.view.trigger(element, event, data) method. See Triggering an Event for an example.

Declare the names of supported events in the Presto.view.register(config) method. See Registering the Event for an example.

This example is part of a pie view based on the D3js library. For the completed example, see Example: Complete D3 Pie with View-Specific and DataTable Events. In this example, the view must respond to user clicks in pie slices.

To trigger an event in a pluggable view class, you add an event handler that calls Presto.view.trigger to fire this event. In this example, the onClick handler for a click event is defined and then registered for each slice of the pie in the draw method:

self.draw = function(dataTable, config){
config = config || self.config;
var el = $(selector),
onClick = function(event){
//update user interface
//trigger view-specific event
var eventData = {};
eventData[props.label] = d3.select(this).attr("name");
eventData[props.series] = event.value;
Presto.view.trigger(el, 'click', eventData);
return false;
}, ...
arcs.append("path")
.attr("fill", function(d, i) {
return color(i);
})
.attr("d", arc)
.attr("name", function(d, i){
return labels[i];
})
.on('click', onClick);

The handler typically updates the view user interface in an appropriate manner for this type of visualization. Visual updates must handle both new selection and deselection of rows. To do this properly, views must know the current selected state of rows which is automatically handled by the DataTable for the view. For this example, updating the view is discussed in Support DataTable Row Selection Events in Pluggable Views instead.

The handler must also build the event object for this view-specific event. You can include data for any column that has been included in the view during view configuration. Data for columns that have been removed from the view is not available.

Once the event data object is built, the handler simply calls Presto.view.trigger(el,event,data) with a CSS selector or the actual DOM node for the view container (the node in the app or page where the view is rendered), the name of the event to fire and the event object.

Finally, the view implementation must register this handler for appropriate user actions in the view. In this example, onClick is registered as the handler for click events on each slice of the pie.

You plug view-specific events for a pluggable view into the MashZone NextGen App Framework so they may be used to wire interactions between different apps. The view class must declare the names of all view-specific events in the call to Presto.view.register, such as this example:

...
Presto.view.register({
clazz: Sample.d3.Pie,
lib: "d3-pie",
events: ["click"]
});

}(jQuery));

Simply add an events property to the configuration object and assign an array with the names of each view-specific event to support.