Adding User Interface Code to XHTML

To display information in a table

1. Use HTML table tag to create a table.

2. Add the HTML below to the gadget's view.xhtml file.

<table class="table table-bordered">
<thead>
<tr>
<th>Host</th>
<th>Port</th>
<th>Uptime (sec)</th>
<th>Free/Max Memory(MB)</th>
</tr>
</thead>
<tr>

<td>{{restData.host}}</td>
<td>{{restData.httpPort}}</td>
<td>{{restData.uptime}}</td>
<td>
{{Math.round(restData.freeMemory/1000000)}}/{{Math.round(restData.
maxMemory/1000000)}}
</td>
</tr>
</table>

Note:table, table-bordered from bootstrap enhances the look and feel of the table. You can add more styles to the gadget.scss if required.

The restData object that was associated with $scope object is directly accessible in the user interface. If restData is an Array, you can iterate restData by using an data-ng-repeat tag of AngularJS to populate multiple rows of the table.