diff options
Diffstat (limited to 'framework/src/onos/tools/package/archetypes/ui')
9 files changed, 183 insertions, 143 deletions
diff --git a/framework/src/onos/tools/package/archetypes/ui/pom.xml b/framework/src/onos/tools/package/archetypes/ui/pom.xml index 8dd3a8e0..9bebe9da 100644 --- a/framework/src/onos/tools/package/archetypes/ui/pom.xml +++ b/framework/src/onos/tools/package/archetypes/ui/pom.xml @@ -26,6 +26,6 @@ <artifactId>onos-ui-archetype</artifactId> <packaging>maven-archetype</packaging> - <description>ONOS UI overlay archetype</description> + <description>ONOS UI Custom-View overlay archetype</description> </project> diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/pom.xml b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/pom.xml index 2e1f091e..d67c181a 100644 --- a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/pom.xml +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/pom.xml @@ -22,7 +22,7 @@ <version>${version}</version> <packaging>bundle</packaging> - <description>ONOS OSGi UI bundle archetype</description> + <description>ONOS OSGi UI Custom-View bundle archetype</description> <url>http://onosproject.org</url> <properties> diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiComponent.java b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiComponent.java index f40bcb5f..e44b34d5 100644 --- a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiComponent.java +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiComponent.java @@ -34,11 +34,14 @@ import org.slf4j.LoggerFactory; import java.util.List; /** - * Skeletal ONOS UI application component. + * Skeletal ONOS UI Custom-View application component. */ @Component(immediate = true) public class AppUiComponent { + private static final String VIEW_ID = "sampleCustom"; + private static final String VIEW_TEXT = "Sample Custom"; + private final Logger log = LoggerFactory.getLogger(getClass()); @Reference(cardinality = ReferenceCardinality.MANDATORY_UNARY) @@ -46,7 +49,7 @@ public class AppUiComponent { // List of application views private final List<UiView> uiViews = ImmutableList.of( - new UiView(UiView.Category.OTHER, "sample", "Sample") + new UiView(UiView.Category.OTHER, VIEW_ID, VIEW_TEXT) ); // Factory for UI message handlers diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiMessageHandler.java b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiMessageHandler.java index d9d68b53..d6486328 100644 --- a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiMessageHandler.java +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/java/AppUiMessageHandler.java @@ -22,168 +22,56 @@ import com.fasterxml.jackson.databind.node.ObjectNode; import com.google.common.collect.ImmutableSet; import org.onosproject.ui.RequestHandler; import org.onosproject.ui.UiMessageHandler; -import org.onosproject.ui.table.TableModel; -import org.onosproject.ui.table.TableRequestHandler; import org.slf4j.Logger; import org.slf4j.LoggerFactory; -import java.lang.Override; -import java.util.ArrayList; import java.util.Collection; -import java.util.List; /** - * Skeletal ONOS UI message handler. - * <p> - * This example specifically supporting a "table" view. + * Skeletal ONOS UI Custom-View message handler. */ public class AppUiMessageHandler extends UiMessageHandler { - private static final String SAMPLE_DATA_REQ = "sampleDataRequest"; - private static final String SAMPLE_DATA_RESP = "sampleDataResponse"; - private static final String SAMPLES = "samples"; + private static final String SAMPLE_CUSTOM_DATA_REQ = "sampleCustomDataRequest"; + private static final String SAMPLE_CUSTOM_DATA_RESP = "sampleCustomDataResponse"; - private static final String SAMPLE_DETAIL_REQ = "sampleDetailsRequest"; - private static final String SAMPLE_DETAIL_RESP = "sampleDetailsResponse"; - private static final String DETAILS = "details"; - - private static final String ID = "id"; - private static final String LABEL = "label"; - private static final String CODE = "code"; - private static final String COMMENT = "comment"; - private static final String RESULT = "result"; - - private static final String[] COLUMN_IDS = { ID, LABEL, CODE }; + private static final String NUMBER = "number"; + private static final String SQUARE = "square"; + private static final String CUBE = "cube"; + private static final String MESSAGE = "message"; + private static final String MSG_FORMAT = "Next incrememt is %d units"; private final Logger log = LoggerFactory.getLogger(getClass()); + private long someNumber = 1; + private long someIncrement = 1; @Override protected Collection<RequestHandler> createRequestHandlers() { return ImmutableSet.of( - new SampleDataRequestHandler(), - new SampleDetailRequestHandler() + new SampleCustomDataRequestHandler() ); } - // handler for sample table requests - private final class SampleDataRequestHandler extends TableRequestHandler { - - private SampleDataRequestHandler() { - super(SAMPLE_DATA_REQ, SAMPLE_DATA_RESP, SAMPLES); - } - - // if necessary, override defaultColumnId() -- if it isn't "id" + // handler for sample data requests + private final class SampleCustomDataRequestHandler extends RequestHandler { - @Override - protected String[] getColumnIds() { - return COLUMN_IDS; - } - - @Override - protected void populateTable(TableModel tm, ObjectNode payload) { - // === set custom column cell formatters/comparators if need be... - // tm.setFormatter(CODE, new CodeFormatter()); - // tm.setComparator(CODE, new CodeComparator()); - - // === retrieve table row items from some service... - // SomeService ss = get(SomeService.class); - // List<Item> items = ss.getItems() - - // fake data for demonstration purposes... - List<Item> items = getItems(); - for (Item item: items) { - populateRow(tm.addRow(), item); - } - } - - private void populateRow(TableModel.Row row, Item item) { - row.cell(ID, item.id()) - .cell(LABEL, item.label()) - .cell(CODE, item.code()); - } - } - - - // handler for sample item details requests - private final class SampleDetailRequestHandler extends RequestHandler { - - private SampleDetailRequestHandler() { - super(SAMPLE_DETAIL_REQ); + private SampleCustomDataRequestHandler() { + super(SAMPLE_CUSTOM_DATA_REQ); } @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 = MAPPER.createObjectNode(); - ObjectNode data = MAPPER.createObjectNode(); - 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_DETAIL_RESP, 0, rootNode); - } - } - - - // =================================================================== - // NOTE: The code below this line is to create fake data for this - // sample code. Normally you would use existing services to - // provide real data. - - // Lookup a single item. - private static Item getItem(String id) { - // We realize this code is really inefficient, but - // it suffices for our purposes of demonstration... - for (Item item : getItems()) { - if (item.id().equals(id)) { - return item; - } + someIncrement++; + someNumber += someIncrement; + log.debug("Computing data for {}...", someNumber); + + ObjectNode result = objectNode(); + result.put(NUMBER, someNumber); + result.put(SQUARE, someNumber * someNumber); + result.put(CUBE, someNumber * someNumber * someNumber); + result.put(MESSAGE, String.format(MSG_FORMAT, someIncrement + 1)); + sendMessage(SAMPLE_CUSTOM_DATA_RESP, 0, result); } - return null; - } - - // Produce a list of items. - private static List<Item> getItems() { - List<Item> items = new ArrayList<>(); - items.add(new Item("item-1", "foo", 42)); - items.add(new Item("item-2", "bar", 99)); - items.add(new Item("item-3", "baz", 65)); - return items; - } - - // Simple model class to provide sample data - private static class Item { - private final String id; - private final String label; - private final int code; - - Item(String id, String label, int code) { - this.id = id; - this.label = label; - this.code = code; - } - - String id() { return id; } - String label() { return label; } - int code() { return code; } } }
\ No newline at end of file diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.css b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.css new file mode 100644 index 00000000..ffeac0aa --- /dev/null +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.css @@ -0,0 +1,48 @@ +/* css for sample app custom view */ + +#ov-sample-custom { + padding: 20px; +} +.light #ov-sample-custom { + color: navy; +} +.dark #ov-sample-custom { + color: #88f; +} + +#ov-sample-custom .button-panel { + margin: 10px; + width: 200px; +} + +.light #ov-sample-custom .button-panel { + background-color: #ccf; +} +.dark #ov-sample-custom .button-panel { + background-color: #444; +} + +#ov-sample-custom .my-button { + cursor: pointer; + padding: 4px; + text-align: center; +} + +.light #ov-sample-custom .my-button { + color: white; + background-color: #99d; +} +.dark #ov-sample-custom .my-button { + color: black; + background-color: #aaa; +} + +#ov-sample-custom .number { + font-size: 140%; + text-align: right; +} + +#ov-sample-custom .quote { + margin: 10px 20px; + font-style: italic; +}
\ No newline at end of file diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.html b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.html new file mode 100644 index 00000000..d3d79a10 --- /dev/null +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.html @@ -0,0 +1,32 @@ +<!-- partial HTML --> +<div id="ov-sample-custom"> + <div class="button-panel"> + <div class="my-button" ng-click="getData()"> + Fetch Data + </div> + </div> + + <div class="data-panel"> + <table> + <tr> + <td> Number </td> + <td class="number"> {{data.number}} </td> + </tr> + <tr> + <td> Square </td> + <td class="number"> {{data.square}} </td> + </tr> + <tr> + <td> Cube </td> + <td class="number"> {{data.cube}} </td> + </tr> + </table> + + <p> + A message from our sponsors: + </p> + <p> + <span class="quote"> {{data.message}} </span> + </p> + </div> +</div> diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.js b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.js new file mode 100644 index 00000000..21058640 --- /dev/null +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/app/view/sampleCustom/sampleCustom.js @@ -0,0 +1,69 @@ +// js for sample app custom view +(function () { + 'use strict'; + + // injected refs + var $log, $scope, wss, ks; + + // constants + var dataReq = 'sampleCustomDataRequest', + dataResp = 'sampleCustomDataResponse'; + + function addKeyBindings() { + var map = { + space: [getData, 'Fetch data from server'], + + _helpFormat: [ + ['space'] + ] + }; + + ks.keyBindings(map); + } + + function getData() { + wss.sendEvent(dataReq); + } + + function respDataCb(data) { + $scope.data = data; + $scope.$apply(); + } + + + angular.module('ovSampleCustom', []) + .controller('OvSampleCustomCtrl', + ['$log', '$scope', 'WebSocketService', 'KeyService', + + function (_$log_, _$scope_, _wss_, _ks_) { + $log = _$log_; + $scope = _$scope_; + wss = _wss_; + ks = _ks_; + + var handlers = {}; + $scope.data = {}; + + // data response handler + handlers[dataResp] = respDataCb; + wss.bindHandlers(handlers); + + addKeyBindings(); + + // custom click handler + $scope.getData = getData; + + // get data the first time... + getData(); + + // cleanup + $scope.$on('$destroy', function () { + wss.unbindHandlers(handlers); + ks.unbindKeys(); + $log.log('OvSampleCustomCtrl has been destroyed'); + }); + + $log.log('OvSampleCustomCtrl has been created'); + }]); + +}()); diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/css.html b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/css.html index c4697256..4e7b7092 100644 --- a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/css.html +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/css.html @@ -1 +1 @@ -<link rel="stylesheet" href="app/view/sample/sample.css">
\ No newline at end of file +<link rel="stylesheet" href="app/view/sampleCustom/sampleCustom.css">
\ No newline at end of file diff --git a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/js.html b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/js.html index 7cacc707..6550b85e 100644 --- a/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/js.html +++ b/framework/src/onos/tools/package/archetypes/ui/src/main/resources/archetype-resources/src/main/resources/js.html @@ -1 +1 @@ -<script src="app/view/sample/sample.js"></script>
\ No newline at end of file +<script src="app/view/sampleCustom/sampleCustom.js"></script>
\ No newline at end of file |