Updated the GUI2 archetype with real gui code
Change-Id: If0fb2a6cb38bff69a978a7a23dd2e3a6212d67f3
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
index ac5d669..a5f3a76 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/README.md
@@ -9,10 +9,6 @@
in to a running ONOS system
* A JavaScript library that may be embedded within an Angular Web project
-${symbol_h2} web/gitignore
-The file **web/gitignore** should be renamed to **web/.gitignore** before the app is added
-to any git repository
-
${symbol_h2} Standalone Application outside of ONOS
In the standalone scenario this library can continue to be built with Maven like:
* mvn clean install
@@ -45,12 +41,12 @@
```angular2
{
path: '${artifactId}-gui',
- loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
+ loadChildren: '${artifactId}-gui-lib#${appNameTitle}GuiLibModule'
}
```
and
```angular2
- import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+ import { ${appNameTitle}GuiLibModule } from '${artifactId}-gui-lib';
```
in the imports section at the top of the same file.
@@ -96,10 +92,12 @@
Run
```bash
-cd ${artifactId} && mvn install && mvn clean
+cd ~/onos/apps/${artifactId} && \
+ mvn -pl web/${artifactId}-gui install && \
+ mvn -pl web/${artifactId}-gui clean
```
-once inside the folder - this will fetch the dependent node modules for the
-Angular application.
+once inside the folder - this is the easiest way to fetch the dependent node
+modules for the Angular application.
To ensure it gets built along with ONOS rename the files **BUILD.rename**,
**app/BUILD.rename** and **web/${artifactId}/BUILD.rename** to **BUILD**, and
@@ -117,7 +115,6 @@
rm -rf web/${artifactId}-gui/node_modules/rxjs/src
```
-
In the file
* ~/onos/apps/${artifactId}/web/${artifactId}-gui/projects/${artifactId}-gui-lib/package.json
change the version to be the current version of ONOS e.g. 2.2.0
@@ -150,12 +147,12 @@
```angular2
{
path: '${artifactId}-gui',
- loadChildren: '${artifactId}-gui-lib#${appNameCap}${appNameEnd}GuiLibModule'
- }
+ loadChildren: '${artifactId}-gui-lib#${appNameTitle}GuiLibModule'
+ },
```
and in the imports section at the top of the same file
```angular2
- import { ${appNameCap}${appNameEnd}GuiLibModule } from '${artifactId}-gui-lib';
+ import { ${appNameTitle}GuiLibModule } from '${artifactId}-gui-lib';
```
### Run the build
@@ -165,3 +162,56 @@
ob
```
or equivalent.
+
+### Run the application
+Start ONOS in the normal way.
+
+Using the ONOS command line, activate the application:
+```bash
+app activate ${artifactId}
+```
+
+To turn on ONOS Server side logging, from the same ONOS CLI use:
+```bash
+log:set DEBUG ${package}
+log:set DEBUG org.onosproject.ui.impl
+```
+
+On the ONOS GUI the navigation menu should show the new application link. Clicking
+on it will navigate to the new app (there is a system of lazy-loading implemented
+here so that applications are not loaded until they are first used).
+
+### Rebuild
+To rebuild and run the **web** side of the application do:
+```bash
+bazel build //web/gui2:onos-web-gui2-oar && \
+ onos-app localhost reinstall! bazel-bin/web/gui2/onos-web-gui2-oar.oar
+```
+
+To rebuild and run the **server** side of the application do:
+```bash
+bazel build //apps/${artifactId}:onos-apps-${artifactId}-oar && \
+ onos-app localhost reinstall! bazel-bin/apps/${artifactId}/onos-apps-${artifactId}-oar.oar
+```
+
+
+### App structure
+The application demonstrates some major concepts:
+* The use of Angular 7 concepts like Modules, Components, Service
+
+* The top level component - contains the "Fetch Data" button and the connection
+to the server backend through a WebSocket
+ * Passing a number in the request
+ * Receiving a JSON object in reply
+
+* Reuse of items from the **gui2-fw-lib** - with LogService, WebSocketService and
+IconComponent
+
+* The use of a child component (WelcomeComponent) in 3 different ways
+ * The passing of Inputs to this component
+ * The passing of an Event out when the component is clicked
+
+* The embedding of SVG content in to the web page
+
+* The use of TypeScript (as opposed to JavaScript or ECMAScript directly) to ensure
+type safety
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
index 75a1c31..4a7c9fd 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/pom.xml
@@ -34,7 +34,7 @@
<properties>
<onos.app.name>${package}.${artifactId}</onos.app.name>
- <onos.app.title>${appNameCap}${appNameEnd} App</onos.app.title>
+ <onos.app.title>${appNameTitle} App</onos.app.title>
<onos.app.origin>Foo, Inc.</onos.app.origin>
<onos.app.category>UI</onos.app.category>
<onos.app.url>http://onosproject.org</onos.app.url>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
similarity index 89%
rename from tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java
rename to tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
index 4522692..a1d8b33 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiComponent.java
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiComponent.java
@@ -37,10 +37,10 @@
* Skeletal ONOS UI Custom-View application component.
*/
@Component(immediate = true)
-public class AppUiComponent {
+public class ${appNameTitle}UiComponent {
- private static final String VIEW_ID = "sampleCustom";
- private static final String VIEW_TEXT = "Sample Custom";
+ private static final String VIEW_ID = "${artifactId}-gui";
+ private static final String VIEW_TEXT = "${appNameTitle} UI";
private final Logger log = LoggerFactory.getLogger(getClass());
@@ -55,14 +55,15 @@
// Factory for UI message handlers
private final UiMessageHandlerFactory messageHandlerFactory =
() -> ImmutableList.of(
- new AppUiMessageHandler()
+ new ${appNameTitle}UiMessageHandler()
);
- // Application UI extension
+ // ${appNameTitle} UI extension
protected UiExtension extension =
new UiExtension.Builder(getClass().getClassLoader(), uiViews)
.resourcePath(VIEW_ID)
.messageHandlerFactory(messageHandlerFactory)
+ .ui2()
.build();
@Activate
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
similarity index 79%
rename from tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java
rename to tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
index 0a35370..18c0968 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/AppUiMessageHandler.java
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/app/src/main/java/__appNameTitle__UiMessageHandler.java
@@ -30,10 +30,10 @@
/**
* Skeletal ONOS UI Custom-View message handler.
*/
-public class AppUiMessageHandler extends UiMessageHandler {
+public class ${appNameTitle}UiMessageHandler extends UiMessageHandler {
- private static final String SAMPLE_CUSTOM_DATA_REQ = "sampleCustomDataRequest";
- private static final String SAMPLE_CUSTOM_DATA_RESP = "sampleCustomDataResponse";
+ private static final String ${appNameAllCaps}_DATA_REQ = "${appNameAllLower}DataRequest";
+ private static final String ${appNameAllCaps}_DATA_RESP = "${appNameAllLower}DataResponse";
private static final String NUMBER = "number";
private static final String SQUARE = "square";
@@ -49,15 +49,15 @@
@Override
protected Collection<RequestHandler> createRequestHandlers() {
return ImmutableSet.of(
- new SampleCustomDataRequestHandler()
+ new ${appNameTitle}DataRequestHandler()
);
}
// handler for sample data requests
- private final class SampleCustomDataRequestHandler extends RequestHandler {
+ private final class ${appNameTitle}DataRequestHandler extends RequestHandler {
- private SampleCustomDataRequestHandler() {
- super(SAMPLE_CUSTOM_DATA_REQ);
+ private ${appNameTitle}DataRequestHandler() {
+ super(${appNameAllCaps}_DATA_REQ);
}
@Override
@@ -71,7 +71,7 @@
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, result);
+ sendMessage(${appNameAllCaps}_DATA_RESP, result);
}
}
}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
index 53d7322..c1465c7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/pom.xml
@@ -6,9 +6,10 @@
#set ($artifactId = "${artifactId}")
#set ($appNameCap = $artifactId.substring(0,1).toUpperCase())
#set ($appNameEnd = $artifactId.substring(1).replace("-","").toLowerCase())
+#set ($appNameTitle = $appNameCap + $appNameEnd)
#set ($appNameAllCaps = $artifactId.replace("-","_").toUpperCase())
+#set ($appNameAllLower = $artifactId.replace("-","").toLowerCase())
#set( $symbol_h2 = '##' )
-
<?xml version="1.0" encoding="UTF-8"?>
<!--
~ Copyright ${year} Open Networking Foundation
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
index 0d28862..50cada3 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/BUILD.rename
@@ -190,7 +190,7 @@
" See bazel-genfiles/apps/${artifactId}/web/${artifactId}-gui/${artifactId}-gui-lib-test.log for more details' >&2;" +
" exit 1;" +
" fi;",
- message = "Angular ${appNameCap}${appNameEnd} Lib lint and test",
+ message = "Angular ${appNameTitle} Lib lint and test",
)
"""
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
index a06c138..3c87895 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/README.md
@@ -1,4 +1,4 @@
-# ${appNameCap}${appNameEnd}GuiLib
+# ${appNameTitle}GuiLib
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.0.4.
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
index 6a20ad8..06a05c7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-gui-lib.module.ts
@@ -15,17 +15,19 @@
*/
import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
import { Gui2FwLibModule } from 'gui2-fw-lib';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
-import { ${appNameCap}${appNameEnd}RoutingModule } from './${artifactId}-routing.module';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}RoutingModule } from './${artifactId}-routing.module';
import { WelcomeComponent } from './welcome/welcome.component';
@NgModule({
- declarations: [${appNameCap}${appNameEnd}Component, WelcomeComponent],
+ declarations: [${appNameTitle}Component, WelcomeComponent],
imports: [
- ${appNameCap}${appNameEnd}RoutingModule,
- Gui2FwLibModule
+ ${appNameTitle}RoutingModule,
+ Gui2FwLibModule,
+ CommonModule
],
- exports: [${appNameCap}${appNameEnd}Component, WelcomeComponent]
+ exports: [${appNameTitle}Component, WelcomeComponent]
})
-export class ${appNameCap}${appNameEnd}GuiLibModule { }
+export class ${appNameTitle}GuiLibModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
index 07a1621..255633c 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__-routing.module.ts
@@ -15,17 +15,17 @@
*/
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}/${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}/${artifactId}.component';
const appRoutes: Routes = [
{
path: '',
- component: ${appNameCap}${appNameEnd}Component
+ component: ${appNameTitle}Component
},
];
/**
- * ONOS GUI -- ${appNameCap}${appNameEnd} View Feature Routing Module - allows it to be lazy loaded
+ * ONOS GUI -- ${appNameTitle} View Feature Routing Module - allows it to be lazy loaded
*
* See https://angular.io/guide/lazy-loading-ngmodules
*/
@@ -33,4 +33,4 @@
imports: [RouterModule.forChild(appRoutes)],
exports: [RouterModule]
})
-export class ${appNameCap}${appNameEnd}RoutingModule { }
+export class ${appNameTitle}RoutingModule { }
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
index 9be9aeb..1ec2298 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.css
@@ -13,3 +13,32 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+
+#ov-${appNameAllLower} {
+ padding: 20px;
+ color: navy;
+}
+
+#ov-${appNameAllLower} .button-panel {
+ margin: 10px;
+ width: 200px;
+ background-color: #ccf;
+}
+
+#ov-${appNameAllLower} .my-button {
+ cursor: pointer;
+ padding: 4px;
+ text-align: center;
+ color: white;
+ background-color: #99d;
+}
+
+#ov-${appNameAllLower} .number {
+ font-size: 140%;
+ text-align: right;
+}
+
+#ov-${appNameAllLower} .quote {
+ margin: 10px 20px;
+ font-style: italic;
+}
\ No newline at end of file
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
index 4891ab3..626e2d7 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.html
@@ -14,4 +14,41 @@
~ limitations under the License.
-->
-<p>${artifactId} works!</p>
+<div id="ov-${appNameAllLower}">
+ <div class="button-panel">
+ <div class="my-button" (click)="getData()">Fetch Data</div>
+ </div>
+
+ <div class="data-panel">
+ <table>
+ <tr>
+ <td> Number </td>
+ <td class="number"> {{socketData.number}} </td>
+ </tr>
+ <tr>
+ <td> Square </td>
+ <td class="number"> {{socketData.square}} </td>
+ </tr>
+ <tr>
+ <td> Cube </td>
+ <td class="number"> {{socketData.cube}} </td>
+ </tr>
+ </table>
+ <onos-icon [iconId]="'bird'" [iconSize]="40" [toolTip]="'ONOS bird icon'" [classes]="'enabled'"></onos-icon>
+ <p>
+ A message from our sponsors:
+ </p>
+ <p>
+ <span class="quote"> {{socketData.message}} </span>
+ </p>
+ <p>Request Number: {{requestNumber}}</p>
+ </div>
+</div>
+<!-- Create an instance of a component passing it lteral value for colour and bind to the socketData.number-->
+<${artifactId}-app-welcome [message]="socketData.number" [colour]="'magenta'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.square" [colour]="'aqua'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+<${artifactId}-app-welcome [message]="socketData.cube" [colour]="'orange'" (welcomeEventEmitter)="childClicked($event)"></${artifactId}-app-welcome>
+
+
+<p>Click one of the circles: </p>
+<p [ngStyle]="{'background-color': childSelected }">Child selected: {{childSelected}}</p>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
index 5d0c76a..86954c8 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.spec.ts
@@ -15,8 +15,10 @@
*/
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { ${appNameCap}${appNameEnd}Component } from './${artifactId}.component';
+import { ${appNameTitle}Component } from './${artifactId}.component';
+import { WelcomeComponent } from '../welcome/welcome.component';
import {ActivatedRoute, Params} from '@angular/router';
+import {CommonModule} from '@angular/common';
import { of } from 'rxjs';
import { } from 'jasmine';
import {
@@ -41,13 +43,13 @@
loadIconDef() { }
}
-describe('${appNameCap}${appNameEnd}Component', () => {
+describe('${appNameTitle}Component', () => {
let fs: FnService;
let ar: MockActivatedRoute;
let windowMock: Window;
let logServiceSpy: jasmine.SpyObj<LogService>;
- let component: ${appNameCap}${appNameEnd}Component;
- let fixture: ComponentFixture<${appNameCap}${appNameEnd}Component>;
+ let component: ${appNameTitle}Component;
+ let fixture: ComponentFixture<${appNameTitle}Component>;
beforeEach(async(() => {
const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
@@ -67,8 +69,11 @@
fs = new FnService(ar, logSpy, windowMock);
TestBed.configureTestingModule({
- imports: [BrowserAnimationsModule, FormsModule, RouterTestingModule],
- declarations: [ ${appNameCap}${appNameEnd}Component ],
+ imports: [BrowserAnimationsModule, CommonModule, FormsModule, RouterTestingModule],
+ declarations: [
+ ${appNameTitle}Component,
+ WelcomeComponent
+ ],
providers: [
{ provide: FnService, useValue: fs },
{ provide: LogService, useValue: logSpy },
@@ -81,7 +86,7 @@
}));
beforeEach(() => {
- fixture = TestBed.createComponent(${appNameCap}${appNameEnd}Component);
+ fixture = TestBed.createComponent(${appNameTitle}Component);
component = fixture.componentInstance;
fixture.detectChanges();
});
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
index d510867..d7107c4 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/__artifactId__/__artifactId__.component.ts
@@ -13,46 +13,90 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
import {LogService, WebSocketService} from 'gui2-fw-lib';
-const SAMPLE_CUSTOM_DATA_REQ = 'sampleCustomDataRequest';
-const SAMPLE_CUSTOM_DATA_RESP = 'sampleCustomDataResponse';
+const SAMPLE_CUSTOM_DATA_REQ = '${appNameAllLower}DataRequest';
+const SAMPLE_CUSTOM_DATA_RESP = '${appNameAllLower}DataResponse';
+
+/**
+ * Model of the data sent in ${appNameAllLower}DataResponse from ${appNameTitle}DataRequestHandler
+ */
+export interface ${appNameTitle}Data {
+ number: number;
+ square: number;
+ cube: number;
+ message: string;
+}
+
+export interface ${appNameTitle}Req {
+ reqnumber: number;
+}
@Component({
selector: '${artifactId}-app-sample',
templateUrl: './${artifactId}.component.html',
styleUrls: ['./${artifactId}.component.css']
})
-export class ${appNameCap}${appNameEnd}Component implements OnInit {
- private handlers: string[] = [];
+export class ${appNameTitle}Component implements OnInit, OnDestroy {
private openListener: any;
+ socketData: ${appNameTitle}Data = <${appNameTitle}Data>{
+ number: 0,
+ square: 0,
+ cube: 0,
+ message: undefined
+ };
+ requestNumber: number = 0;
+ childSelected: string = '(none)';
+
constructor(
protected log: LogService,
protected wss: WebSocketService
) {
- this.log.debug('${appNameCap}${appNameEnd}Component constructed');
+ this.log.debug('${appNameTitle}Component constructed');
}
ngOnInit() {
this.wss.bindHandlers(new Map<string, (data) => void>([
[SAMPLE_CUSTOM_DATA_RESP, (data) => {
- this.log.debug(SAMPLE_CUSTOM_DATA_RESP, data);
+ this.socketData = <${appNameTitle}Data>data;
+ this.log.debug(SAMPLE_CUSTOM_DATA_RESP, this.socketData);
}
]
]));
- this.handlers.push(SAMPLE_CUSTOM_DATA_RESP);
-
// in case we fail over to a new server,
// listen for wsock-open events
- this.openListener = this.wss.addOpenListener(() => this.wsOpen);
+ this.openListener = this.wss.addOpenListener((h, u) => this.wsOpen(h, u));
+ }
+
+ ngOnDestroy(): void {
+ this.wss.unbindHandlers([SAMPLE_CUSTOM_DATA_RESP]);
}
wsOpen(host: string, url: string) {
this.log.debug(SAMPLE_CUSTOM_DATA_RESP, ': WSopen - cluster node:', host, 'URL:', url);
// tell the server we are ready to receive topo events
- this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, {});
+ const requestObj = <${appNameTitle}Req>{
+ reqnumber: this.requestNumber
+ };
+ this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+ }
+
+ // When the FetchData button is clicked
+ getData() {
+ this.requestNumber++;
+ const requestObj = <${appNameTitle}Req>{
+ reqnumber: this.requestNumber
+ };
+ this.wss.sendEvent(SAMPLE_CUSTOM_DATA_REQ, requestObj);
+ this.log.debug('Getting data', this.requestNumber);
+ }
+
+ // when we recieve an event from the child
+ childClicked(colour: string) {
+ this.log.debug('Received event', colour);
+ this.childSelected = colour;
}
}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
index 819f7e2..9e6bb90 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.html
@@ -14,4 +14,12 @@
~ limitations under the License.
-->
-<p>welcome works!</p>
+<svg:svg xmlns:svg="http://www.w3.org/2000/svg">
+ <svg:g (click)="welcomeClicked(colour)">
+ <svg:circle r="50" cx="100" cy="55" [attr.fill]="colour">
+ </svg:circle>
+ <svg:text x="100" y="60" width="200" text-anchor="middle" style="font-weight:bold;">Welcome: {{message}}</svg:text>
+ <svg:use [attr.xlink:href]="'#bird'" style="fill-opacity:0.2" width="80" height="80" x="60" y="10">
+ </svg:use>
+ </svg:g>
+</svg:svg>
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
index db3a2f3..728d716 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/projects/__artifactId__-gui-lib/src/lib/welcome/welcome.component.ts
@@ -13,7 +13,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import {LogService} from 'gui2-fw-lib';
@Component({
@@ -22,6 +22,9 @@
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
+ @Input() message: string = 'Welcome';
+ @Input() colour: string;
+ @Output() welcomeEventEmitter = new EventEmitter<string>();
constructor(
protected log: LogService,
@@ -30,6 +33,11 @@
}
ngOnInit() {
+ this.log.debug('WelcomeComponent initialized', this.message, this.colour);
}
+ welcomeClicked(colour: string) {
+ this.log.debug(colour, 'WelcomeComponent clicked - sending event to parent');
+ this.welcomeEventEmitter.emit(colour);
+ }
}
diff --git a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
index 6ddb6b2..9a19c5e 100644
--- a/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
+++ b/tools/package/archetypes/ui2/src/main/resources/archetype-resources/web/__artifactId__-gui/tslint.json
@@ -60,7 +60,7 @@
"no-empty-interface": true,
"no-eval": true,
"no-inferrable-types": [
- true,
+ false,
"ignore-params"
],
"no-misused-new": true,