Page History

...

The colId attributes of each column header cell should match the column identifier values defined in the AppUiMessageHandler class (see above).

Table Body <div>

...

It's job is to take the data from the payload of the event (passed in as the data parameter) and store it in our scope, so that it is available for the details panel directive to reference.

...

The controller() function is invoked on the module to define our controller. The first argument – '"OvSampleCtrl'" – is the name of our controller, as registered with angular. Once again, the naming convention is to start with "Ov", followed by the identifier for our view , (first letter capitalized), followed by "Ctrl". Case is important. The second argument is an array...

...

Inside our controller function, we start by saving injected references inside our closure, so that they are available from to other functions, as well as initializing . We also initialize our state:

$log = _$log_;
$scope = _$scope_;
fs = _fs_;
wss = _wss_;

var handlers = {};
$scope.panelDetails = {};

...

Note that we do not need to worry about handling the basic table event response ("sampleDataResponse" in our case), as that is handled behind the scenes by the table builder, which we will see shortly.

Next we define the row selection callback function; this is invoked when the user clicks on a row in the table:

// custom selection callback
function selCb($event, row) {
    if ($scope.selId) {
        wss.sendEvent(detailsReq, { id: row.id });
    } else {
        $scope.hidePanel();
    }
    $log.debug('Got a click on:', row);
}

Behind the scenes, the table builder code will set the selId property on our scope to the identity (value of the "id" column) of the selected row (or null if no row is selected). It then invokes our callback function, passing it a reference to the event object, as well as the data structure for the row in question.

Our function uses the web socket service (wss) to send the details request event to the server, embedding the item identifier in the event payload.

In the case where there is no longer an item selected, the behavior is to hide the details panel.

Now we delegate the bulk of the work to the table builder service, providing it with the necessary references:

// TableBuilderService creating a table for us
tbs.buildTable({
    scope: $scope,
    tag: 'sample',
    selCb: selCb
}); 

The buildTable() function takes an options object as its single argument, to configure the table. The properties of the object are:

• scope: a reference to our view's $scope (as injected into our controller by Angular)
• tag: our table's "tag" used to derive the request and response event names and the "root" tag for the payload data (as described above; see SampleDataRequestHandler)
• selCb: a reference to our row selection callback, described above

Finally we register a cleanup function with Angular, to be invoked when our view is destroyed (when the user navigates away to some other view):

// cleanup
$scope.$on('$destroy', function () {
    wss.unbindHandlers(handlers);
}); 

Here, we simply need to unbind our event handlers from the websocket service.

Defining the Details Panel Directive

Chained onto the .controller() function call is a call to .directive() to define our details panel directive. Again, let's break the code down into chunks...

.directive('ovSampleItemDetailsPanel', ['PanelService', 'KeyService',
    function (ps, ks) {
        return {
            ...
        };
    }]);

The two arguments to directive() are:

• the name of our directive
• an array

The name, once again, follows the naming convention of starting with our prefix, "ovSample". The whole name – "ovSampleItemDetailsPanel" – is understood by Angular to relate to the HTML "tag" <ov-sample-item-details-panel> that we saw at the bottom of the HTML file.

All elements of the array (except the last) are the names of services to inject into the directive function (the last element of the array). In this case we are injecting references to the Panel Service and the Key Service.

sample.css

Stylesheet for the sample view. Again, a number of naming conventions are in use here:

...