...
Code Block |
---|
|
private static final String SAMPLE_TABLE_DATA_REQ = "sampleTableDataRequest";
private static final String SAMPLE_TABLE_DATA_RESP = "sampleTableDataResponse";
private static final String SAMPLE_TABLES = "sampleTables";
...
private final class SampleTableDataRequestHandler extends TableRequestHandler {
private SampleTableDataRequestHandler() {
super(SAMPLE_TABLE_DATA_REQ, SAMPLE_TABLE_DATA_RESP, SAMPLE_TABLES);
}
...
} |
...
Code Block |
---|
|
private static final String MAC = "mac";
...
@Override
protected String defaultColumnId() {
return MAC;
} |
...
Code Block |
---|
|
private static final String SAMPLE_TABLE_DETAIL_REQ = "sampleTableDetailsRequest";
...
private final class SampleTableDetailRequestHandler extends RequestHandler {
private SampleTableDetailRequestHandler() {
super(SAMPLE_TABLE_DETAIL_REQ);
}
...
} |
...
Code Block |
---|
|
private static final String SAMPLE_TABLE_DETAIL_RESP = "sampleTableDetailsResponse";
private static final String DETAILS = "details";
...
private static final String COMMENT = "comment";
private static final String RESULT = "result";
...
@Override
public void process(long sid, ObjectNode payload) {
String id = string(payload, ID, "(none)");
// SomeService ss = get(SomeService.class);
// Item item = ss.getItemDetails(id)
// fake data for demonstration purposes...
Item item = getItem(id);
ObjectNode rootNode = objectNode();
ObjectNode data = objectNode();
rootNode.set(DETAILS, data);
if (item == null) {
rootNode.put(RESULT, "Item with id '" + id + "' not found");
log.warn("attempted to get item detail for id '{}'", id);
} else {
rootNode.put(RESULT, "Found item with id '" + id + "'");
data.put(ID, item.id());
data.put(LABEL, item.label());
data.put(CODE, item.code());
data.put(COMMENT, "Some arbitrary comment");
}
sendMessage(SAMPLE_TABLE_DETAIL_RESP, 0, rootNode);
} |
...
The <div> with class "summary-list" defines the actual table.
Code Block |
---|
|
<div class="summary-list" onos-table-resize>
...
</div> |
...
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> |
...
Next we define the callback function to be invoked when a "sampleTableDetailsResponse" event arrives with details about a selected item:
Code Block |
---|
|
function respDetailsCb(data) {
$scope.panelDetails = data.details;
$scope.$apply();
} |
...
The last file in our client-side trio is the stylesheet for the sample view.
Code Block |
---|
language | css | linenumbers | true |
---|
collapse | true |
---|
|
/* css for sample app view */
#ov-sample-table h2 {
display: inline-block;
}
/* Panel Styling */
#ov-sample-table-item-details-panel.floatpanel {
position: absolute;
top: 115px;
}
.light #ov-sample-table-item-details-panel.floatpanel {
background-color: rgb(229, 234, 237);
}
.dark #ov-sample-table-item-details-panel.floatpanel {
background-color: #3A4042;
}
#ov-sample-table-item-details-panel h3 {
margin: 0;
font-size: large;
}
#ov-sample-table-item-details-panel h4 {
margin: 0;
}
#ov-sample-table-item-details-panel td {
padding: 5px;
}
#ov-sample-table-item-details-panel td.label {
font-style: italic;
opacity: 0.8;
} |
...
Recall in AppUiTableComponent we defined the resource path when building the UiExtension instance...
Code Block |
---|
|
private static final String VIEW_ID = "sampleTable";
...
protected UiExtension extension =
new UiExtension.Builder(getClass().getClassLoader(), uiViews)
.resourcePath(VIEW_ID)
... |
...