Page History

...

Note that the directory naming convention must be observed for the files to be placed in the correct location when the archive is built. Since our view has the unique identifier "sample", its client source files should be placed under the directory ~/src/main/resources/app/view/sample.

...

The <div> with class "table-header" provides a fixed header (i.e. it does not scroll with the table contents) header, with "click-to-sort" actions on the column labels.

...

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

Table Row Template <div>

bar.

Image Added

The <div> with class "table-body" provides a template row for Angular to use to format and populate the table data.

Code Block
language xml
<div class="table-body"> <table> ...   </table> </div>

There are two <tr> elements defined in the inner <table> element:

The first is displayed only if there is no table data (i.e. no rows to display). The colspan value should equal the number of columns in the table, so that the single cell spans the whole table width:

Code Block
language xml
<tr ng-if="!tableData.length" class="no-data"> <td colspan="3"> No Items found </td> </tr>

The second is used as a template to stamp out rows; one per data item:

Code Block
<tr ng-repeat="item in tableData track by $index" ng-click="selectCallback($event, item)" ng-class="{selected: item.id === selId}"> <td>{{item.id}}</td> <td>{{item.label}}</td> <td>{{item.code}}</td> </tr>

The ng-repeat directive tells angular to repeat this structure for each item in the tableData array.

The ng-click directive binds the click handler to the selectCallback() function (defined in the view controller).

The ng-class directive sets the "selected" class on the element if needed (to highlight the row).

Note the use of Angular data-binding (double braces {{ ... }} ) to place the values in the cells.

Details Panel Directive

Finally, a directive is defined to house the "fly-in" details panel, in which to display data about a selected item.

<ov-sample-item-details-panel></ov-sample-item-details-panel>

Following the naming convention, the prefix to this directive is ov-sample-. More details on what this directive does is shown below. 

sample.js

blah

sample.css

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

...