API
Chipmunk provides an API for the UI, which gives access to major core events, UI of the core and plugin IPC (required for communication beteween the host and render of plugin). The API for the UI is named chipmunk.client.toollkit and holds different modules.
1. How to use the API
Method 1: Bind the api to the component
One way to use the API is by binding it to the main component of the plugin (component.ts).
IMPORTANT: When the
APIis bound to component directly, theAPIis bound to the life cycle of the component and gets destroyed together with the component. It is advised to bind theAPIto the component if it is going to be used locally only by the component itself and nothing else. If theAPIshould be used globally (in scope of the plugin), the second method is more suited.
The example code below shows an example plugin with the API bound to it. The example also includes three methods that are being called upon specific events from the sessions/tabs. To demonstrate how to use the API, each time the session changes the session ID will be printed out in the console.
<p>Example</p>
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
@Input() public session: string; // [optional] Session ID assignment
@Input() public sessions: Toolkit.ControllerSessionsEvents; // [optional] Session event listener assignment
private _subs: { [key: string]: Toolkit.Subscription } = {}; // [optional] Hashlist for session events
constructor() {
this._subs.onSessionChange = this.sessions.subscribe().onSessionChange(this._onSessionChange.bind(this)); // [optional] Subscribe to session change event
this._subs.onSessionOpen = this.sessions.subscribe().onSessionOpen(this._onSessionOpen.bind(this)); // [optional] Subscribe to new session open event
this._subs.onSessionClose = this.sessions.subscribe().onSessionClose(this._onSessionClose.bind(this)); // [optional] Subscribe to session close event
}
private _onSessionChange(session: string) { // [optional] Method when session changes
this.session = session; // Reassign the session to the session, to which has been changed to
console.log(`Session id: ${this.api.getActiveSessionId()}`); // Print session ID in the console when the session changes
}
private _onSessionOpen(session: string) { } // [optional] Method when new session opens
private _onSessionClose(session: string) { } // [optional] Method when session closes
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
NOTE: The lines commented with [optional] will be covered in ControllerSessionsEvents and serves in this example just for demonstration
Method 2: Create a service for the api
Another way to make use of the API is by creating a service, which can be accessed from any part of the plugin. To make it work, it is important to export the service file in public_api.ts, the library management file of the plugin (generated by Angular automatically).
To demonstrate how to use the API, each time the session changes the session ID will be printed out in the console.
IMPORTANT: Compared to the first method, when the
APIis created in a service file, theAPIwill be accessable globally (in scope of the plugin) and will only get destroyed when the application is closed.
<p>Example</p>
p {
color: #FFFFFF;
}
import * as Toolkit from 'chipmunk.client.toolkit';
export class Service extends Toolkit.PluginService { // The service class has to inherit the PluginService from chipmunk.client.toolkit to get access the the API methods
private api: Toolkit.IAPI | undefined; // Instance variable to assign API
private session: string; // [optional]
private _subs: { [key: string]: Toolkit.Subscription } = {}; // [optional] Hashlist of subscriptions for API
constructor() {
super(); // Call parent constructor
this._subs.onReady = this.onAPIReady.subscribe(this._onReady.bind(this)); // Subscribe to the onAPIReady method from the API to see when the API is ready
}
private _onReady() { // Method to be called when the API is ready
this.api = this.getAPI(); // Assign the API to instance variable
if (this.api === undefined) { // Check if the API is defined to prevent errors
console.log('API not defined!');
return;
}
this._subs.onSessionOpen = this.api.getSessionsEventsHub().subscribe().onSessionOpen(this._onSessionOpen.bind(this)); // [optional] Subscribe to session change event
this._subs.onSessionClose = this.api.getSessionsEventsHub().subscribe().onSessionClose(this._onSessionClose.bind(this)); // [optional] Subscribe to new session open event
this._subs.onSessionChange = this.api.getSessionsEventsHub().subscribe().onSessionChange(this._onSessionChange.bind(this)); // [optional] Subscribe to session close event
}
private _onSessionChange(session: string) { // [optional] Method when session changes
this.session = session; // Reassign the session to the session, to which has been changed to
console.log(`Session id: ${this.api.getActiveSessionId()}`); // Print session ID in the console when the session changes
}
private _onSessionOpen(session: string) { } // [optional] Method when new session opens
private _onSessionClose(session: string) { } // [optional] Method when session closes
}
export default (new Service()); // Export the instantiated service class
NOTE:The lines commented with [optional] will be covered in ControllerSessionsEvents and serves in this example just for demonstration
import { Component } from '@angular/core';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
constructor() { } // Constructor not necessary for API assignment
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
import Service from './service';
export * from './component';
export * from './module';
export { Service };
IMPORTANT: It's important to note, that the
ServiceHAS to be exported to be used globally (in scope of the plugin)
API - Interfaces
2. IAPI interface
// Typescript
export interface IAPI {
/**
* @returns {PluginIPC} Returns PluginAPI object for host and render plugin communication
*/
getIPC: () => PluginIPC | undefined;
/**
* @returns {string} ID of active stream (active tab)
*/
getActiveSessionId: () => string;
/**
* Returns hub of viewport events (resize, update and so on)
* Should be used to track state of viewport
* @returns {ControllerViewportEvents} viewport events hub
*/
getViewportEventsHub: () => ControllerViewportEvents;
/**
* Returns hub of sessions events (open, close, changed and so on)
* Should be used to track active sessions
* @returns {ControllerSessionsEvents} sessions events hub
*/
getSessionsEventsHub: () => ControllerSessionsEvents;
/**
* Open popup
* @param {IPopup} popup - description of popup
*/
addPopup: (popup: IPopup) => string;
/**
* Closes popup
* @param {string} guid - id of existing popup
*/
removePopup: (guid: string) => void;
/**
* Adds sidebar title injection.
* This method doesn't need "delete" method, because sidebar injection would be
* removed with a component, which used as sidebar tab render.
* In any way developer could define an argument as "undefined" to force removing
* injection from the title of sidebar
* @param {IComponentDesc} component - description of Angular component
* @returns {void}
*/
setSidebarTitleInjection: (component: IComponentDesc | undefined) => void;
/**
* Opens sidebar app by ID
* @param {string} appId - id of app
* @param {boolean} silence - do not make tab active
*/
openSidebarApp: (appId: string, silence: boolean) => void;
/**
* Opens toolbar app by ID
* @param {string} appId - id of app
* @param {boolean} silence - do not make tab active
*/
openToolbarApp: (appId: string, silence: boolean) => void;
/**
* Adds new notification
* @param {INotification} notification - notification to be added
*/
addNotification: (notification: INotification) => void;
}
getIPC
/**
* @returns {PluginIPC} Returns PluginAPI object for host and render plugin communication
*/
getIPC: () => PluginIPC | undefined;
Example - getIPC
In this example the API will be assigned to the instance variable of the main component of the plugin
<p>Example</p> <!-- Show session ID -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
public api_copy: Toolkit.IAPI;
constructor() {
this.api_copy = this.api.getIPC(); // Assign API to instance variable
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
getActiveSessionId
/**
* @returns {string} ID of active stream (active tab)
*/
getActiveSessionId: () => string;
Example - getActiveSessionId
In this example the session id will be shown in the plugin
<p>{{sessionID}}</p> <!-- Show session ID -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
public sessionID: string;
constructor() {
this.sessionID = this.api.getActiveSessionId(); // Assign session id to local variable
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
getViewportEventsHub
/**
* Returns hub of viewport events (resize, update and so on)
* Should be used to track state of viewport
* @returns {ControllerViewportEvents} viewport events hub
*/
getViewportEventsHub: () => ControllerViewportEvents;
Example - getViewportEventsHub
<p #element>Example</p> <!-- Create a line of text -->
p {
color: #FFFFFF;
}
import { Component, Input, ViewChild } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
})
export class ExampleComponent {
@ViewChild('element', {static: false}) _element: HTMLParagraphElement;
@Input() public api: Toolkit.IAPI; // API assignment
private _subs: { [key: string]: Toolkit.Subscription } = {}; // Hashlist for subscriptions
constructor() {
this._subs.onRowSelected() = this.api.getViewportEventsHub().subscribe().onRowSelected(this._onRow.bind(this)); // Subscribe to the row selection event and call _onRow in case a row is selected
}
private _onRow() {
const selected = this.api.getViewportEventsHub().getSelected();
this._element.innerHTML = `Line: ${selected.row}: ${selected.str}`; // Reassign the text of the plugin paragraph with the selected line and its text
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
getSessionsEventsHub
/**
* Returns hub of sessions events (open, close, changed and so on)
* Should be used to track active sessions
* @returns {ControllerSessionsEvents} sessions events hub
*/
getSessionsEventsHub: () => ControllerSessionsEvents;
Example - getSessionsEventsHub
This example shows the usage of getSessionsEventsHub by creating methods to be called when a session opens/closes/changes:
<p>Example</p> <!-- Create a line of text -->
p {
color: #FFFFFF;
}
import * as Toolkit from 'chipmunk.client.toolkit';
export class Service extends Toolkit.PluginService { // The service class has to inherit the PluginService from chipmunk.client.toolkit to get access the the API methods
private api: Toolkit.IAPI | undefined; // Instance variable to assign API
private session: string; // Instance variable to assign session ID
private _subs: { [key: string]: Toolkit.Subscription } = {}; // Hashlist of subscriptions for API
constructor() {
super(); // Call parent constructor
this._subs.onReady = this.onAPIReady.subscribe(this._onReady.bind(this)); // Subscribe to the onAPIReady method from the API to see when the API is ready
}
private _onReady() { // Method to be called when the API is ready
this.api = this.getAPI(); // Assign the API to instance variable
if (this.api === undefined) { // Check if the API is defined to prevent errors
console.log('API not defined!');
return;
}
this._subs.onSessionOpen = this.api.getSessionsEventsHub().subscribe().onSessionOpen(this._onSessionOpen.bind(this)); // <-- Subscribe to session change event
this._subs.onSessionClose = this.api.getSessionsEventsHub().subscribe().onSessionClose(this._onSessionClose.bind(this)); // <-- Subscribe to new session open event
this._subs.onSessionChange = this.api.getSessionsEventsHub().subscribe().onSessionChange(this._onSessionChange.bind(this)); // <-- Subscribe to session close event
}
private _onSessionChange(session: string) { // Method when session changes
this.session = session; // Reassign the session to the session, to which has been changed to
console.log(`Session id: ${this.api.getActiveSessionId()}`); // Print session ID in the console when the session changes
}
private _onSessionOpen(session: string) { } // Method when new session opens
private _onSessionClose(session: string) { } // Method when session closes
}
export default (new Service()); // Export the instantiated service class
import { Component } from '@angular/core';
import Service from './service'
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
constructor() { }
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { Example } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ] // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
import Service from './service';
export * from './component';
export * from './module';
export { Service };
IMPORTANT: It's important to note, that the
ServiceHAS to be exported to be used globally (in scope of the plugin)
addPopup
/**
* Open popup
* @param {IPopup} popup - description of popup
*/
addPopup: (popup: IPopup) => string;
Example - addPopup
To create a popup, a plugin to host the popup and the popup itself have to be defined.
<p>{{msg}}</p> <!-- Show message from component -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core'; // Import necessary components for popup
@Component({
selector: 'example-popup-com', // Choose the selector name of the popup
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class PopupComponent {
constructor() { }
@Input() public msg: string; // Expect input from host component
}
<p>Example</p>
<button (click)="_ng_popup()"></button> <!-- Button to open popup -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core'; // Import necessary components for plugin
import { PopupComponent } from './popup/components'; // Import the popup module
@Component({
selector: 'example', // Choose the selector name of the popup
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
@Input() public msg: string; // Expect input from host component
constructor() { }
public _ng_popup() {
this.api.addPopup({
caption: 'Example',
component: {
factory: PopupComponent, // Assign the popup module to factory
inputs: {
msg: 'Hello World!', // Provide the popup with a message as input
}
},
buttons: []
});
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
removePopup
/**
* Closes popup
* @param {string} guid - id of existing popup
*/
removePopup: (guid: string) => void;
Example - removePopup
To remove the popup, one way is to create a button on the popup, which calls the method to remove the popup upon clicking.
<p>{{msg}}</p> <!-- Show message from component -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core'; // Import necessary components for popup
@Component({
selector: 'example-popup-com', // Choose the selector name of the popup
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class PopupComponent {
constructor() { }
@Input() public msg: string; // Expect input from host component
}
<p>Example</p>
<button (click)="_ng_popup()"></button> <!-- Button to open popup -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core'; // Import necessary components for plugin
import { PopupComponent } from './popup/components'; // Import the popup module
@Component({
selector: 'example', // Choose the selector name of the popup
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
@Input() public msg: string; // Expect input from host component
constructor() { }
public _ng_popup() {
this.api.addPopup({
caption: 'Example',
component: {
factory: PopupComponent, // Assign the popup module to factory
inputs: {
msg: 'Hello World!', // Provide the popup with a message as input
}
},
buttons: [ // Create a button on the popup to close it
{
caption: 'close',
handler: () => {
this.api.removePopup(); // close and remove popup
}
}
]
});
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
setSidebarTitleInjection
/**
* Adds sidebar title injection.
* This method doesn't need "delete" method, because sidebar injection would be
* removed with a component, which used as sidebar tab render.
* In any way developer could define an argument as "undefined" to force removing
* injection from the title of sidebar
* @param {IComponentDesc} component - description of Angular component
* @returns {void}
*/
setSidebarTitleInjection: (component: IComponentDesc | undefined) => void;
Example - setSidebarTitleInjection
In this example a button will be created in the title of the sidebar which will log a message when clicked.
<!-- Create the title component of the button. -->
<span>+</span> <!-- Create '+' as button -->
span {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'lib-add',
templateUrl: './template.html',
styleUrls: ['./styles.less']
})
export class ExampleTitleComponent {
@Input() public _ng_click: () => void; // Take method from host component and execute when clicked
}
<p>Example</p> <!-- Show example string -->
p {
color: #FFFFFF;
}
import { Component, AfterViewInit } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent implements AfterViewInit {
@Input() public api: Toolkit.IAPI; // API assignment
ngAfterViewInit() {
this.api.setSidebarTitleInjection({ // Create button in title
factory: ExampleTitleComponent, // Assign component for button
inputs: {
_ng_click: () => { console.log('Clicked!') }, // Provide function, which logs a string in console, as input
}
});
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
openSidebarApp
/**
* Opens sidebar app by ID
* @param {string} appId - id of app
* @param {boolean} silence - do not make tab active
*/
openSidebarApp: (appId: string, silence: boolean) => void;
Example - openSidebarApp
In this example the plugin serial will be opened and set as the active plugin 2 seconds after the example plugin is opened.
<p>Wait for it...</p> <!-- Show example string -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
constructor() {
setTimeout(() => { // Set a timeout of 2000 ms before opening the plugin
this.api.openSidebarApp('serial', false); // Open the serial plugin and set it as the active plugin
}, 2000);
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
openToolbarApp
/**
* Opens toolbar app by ID
* @param {string} appId - id of app
* @param {boolean} silence - do not make tab active
*/
openToolbarApp: (appId: string, silence: boolean) => void;
Example - openToolbarApp
In this example the xterminal app will be opened and set as active 2 seconds after the example plugin is opened.
<p>Wait for it...</p> <!-- Show example string -->
p {
color: #FFFFFF;
}
import { Component, Input, AfterViewInit } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent implements AfterViewInit {
@Input() public api: Toolkit.IAPI; // API assignment
constructor() {
setTimeout(() => { // Set a timeout of 2000 ms before opening the app
this.api.openToolbarApp('xterminal', false); // Open the xterminal app and set it as active
}, 2000);
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
addNotification
/**
* Adds new notification
* @param {INotification} notification - notification to be added
*/
addNotification: (notification: INotification) => void;
Example - addNotification
In this example the xterminal app will be opened and set as active 2 seconds after the example plugin is opened.
The following example shows an example plugin with a line of text and a button which creates a notification.
<p>Example</p> <!-- Create a line of text -->
<button (click)="_ng_notify()"></button> <!-- Create a button with a method to be called from the components.ts file -->
p {
color: #FFFFFF;
}
button {
height: 20px;
width: 50px;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
import { ENotificationType } from 'chipmunk.client.toolkit'; // Import notification type
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file
})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
public _ng_notify() {
this.api.addNotification({
caption: 'Info', // Caption of the notification
message: 'You just got notified!', // Message of the notification
options: {
type: ENotificationType.info // Notification type
}
});
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
3. Abstract classes
chipmunk.client.toolkit provides different kinds of abstract classes from which classes can extend from.
3.1 Parsers
These abstract classes allow to create parsers that can modify the output in the rows (e.g: change text color, convert into different format).
| Parser name | Description |
|---|---|
RowBoundParser | Parse only data received from the process part of the plugin |
RowCommomParser | Parse data from any kind of source |
RowTypedParser | Parse only specific type of source (e.g. DLT) |
SelectionParser (coming soon) | Parse only selected line(s), right-click to see self-chosen name as option to see the parsed result in the tab Details below |
TypedRowRender (coming soon) | Parser for more complex stream output |
TypedRowRenderAPIColumns - show stream line as columns | |
TypedRowRenderAPIExternal - use custom Angular component as stream |
RowBoundParser
// Typescript
/**
* Allows creating row parser, which will bound with plugin's host.
* It means: this row parser will be applied only to data, which was
* received from plugin's host.
* It also means: usage of this kind of plugin makes sense only if plugin has
* host part (backend part), which delivery some data. A good example would be:
* serial port plugin. Host part extracts data from serial port and sends into
* stream; render (this kind of plugin) applies only to data, which were gotten
* from serial port.
* @usecases decoding stream output content; converting stream output into human-readable format
* @requirements TypeScript or JavaScript
* @examples Base64string parser, HEX converting into a string and so on
* @class RowBoundParser
*/
export declare abstract class RowBoundParser {
/**
* This method will be called with each line in stream was gotten from plugin's host
* @param {string} str - single line from stream (comes only from plugin's host)
* @param {EThemeType} themeTypeRef - reference to active theme (dark, light and so on)
* @param {IRowInfo} row - information about current row (see IRowInfo for more details)
* @returns {string} method should return a string.
*/
abstract parse(str: string, themeTypeRef: EThemeType, row: IRowInfo): string;
}
Example - RowBoundParser
import * as Toolkit from 'chipmunk.client.toolkit'; // Import UI API to extend Parser class
class ParseMe extends Toolkit.RowBoundParser { // Extend parser class with Abstract parser class
public parse(str: string, themeTypeRef: Toolkit.EThemeType, row: Toolkit.IRowInfo): string { // Create parser which modifies and returns parsed string
return `--> ${str}`; // Return string with --> in front
}
}
const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer; // Identification of the plugin
if (gate === undefined) { // If binding didn't work print out error message
console.error(`Fail to find logviewer gate.`);
} else {
gate.setPluginExports({ // Set parser(s) to export here (Setting Multiple parsers possible)
parser: new ParseMe() // Create parser instance (Free to choose parser name)
});
}
RowCommomParser
// Typescript
/**
* Allows creating row parser, which will be applied to each new line in stream.
* @usecases decoding stream output content; converting stream output into human-readable format
* @requirements TypeScript or JavaScript
* @examples Base64string parser, HEX converting into a string and so on
* @class RowCommonParser
*/
export declare abstract class RowCommonParser {
/**
* This method will be called with each line in stream
* @param {string} str - single line from stream
* @param {EThemeType} themeTypeRef - reference to active theme (dark, light and so on)
* @param {IRowInfo} row - information about current row (see IRowInfo for more details)
* @returns {string} method should return a string.
*/
abstract parse(str: string, themeTypeRef: EThemeType, row: IRowInfo): string;
}
Example - RowCommonParser
import * as Toolkit from 'chipmunk.client.toolkit'; // Import UI API to extend Parser class
class ParseMe extends Toolkit.RowCommonParser { // Extend parser class with Abstract parser class
public parse(str: string, themeTypeRef: Toolkit.EThemeType, row: Toolkit.IRowInfo): string { // Create parser which modifies and returns parsed string
return `--> ${str}`; // Return string with --> in front
}
}
const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer; // Identification of the plugin
if (gate === undefined) { // If binding didn't work print out error message
console.error(`Fail to find logviewer gate.`);
} else {
gate.setPluginExports({ // Set parser(s) to export here (Setting Multiple parsers possible)
parser: new ParseMe() // Create parser instance (Free to choose parser name)
});
}
RowTypedParser
// Typescript
/**
* Allows creating row parser with checking the type of source before.
* It means this parser could be bound with some specific type of source,
* for example with some specific file's type (DLT, log and so on)
* @usecases decoding stream output content; converting stream output into human-readable format
* @requirements TypeScript or JavaScript
* @examples Base64string parser, HEX converting into a string and so on
* @class RowTypedParser
*/
export declare abstract class RowTypedParser {
/**
* This method will be called with each line in stream
* @param {string} str - single line from stream
* @param {EThemeType} themeTypeRef - reference to active theme (dark, light and so on)
* @param {IRowInfo} row - information about current row (see IRowInfo for more details)
* @returns {string} method should return a string.
*/
abstract parse(str: string, themeTypeRef: EThemeType, row: IRowInfo): string;
/**
* This method will be called for each line of stream before method "parse" will be called.
* @param {string} sourceName - name of source
* @returns {boolean} - true - method "parse" will be called for this line; false - parser will be ignored
*/
abstract isTypeMatch(sourceName: string): boolean;
}
Example - RowTypedParser
import * as Toolkit from 'chipmunk.client.toolkit'; // Import UI API to extend Parser class
class ParseMe extends Toolkit.RowTypedParser { // Extend parser class with Abstract parser class
public parse(str: string, themeTypeRef: Toolkit.EThemeType, row: Toolkit.IRowInfo): string { // Create parser which modifies and returns parsed string
return `--> ${str}`; // Return string with --> in front
}
public isTypeMatch(fileName: string): boolean { // Typecheck for each line of stream before parsing
if (typeof fileName === 'string' && fileName.search(/\.txt/) > -1) { // Check if source is a .txt file
return true; // Return true in case the it is a .txt file
}
}
}
const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer; // Identification of the plugin
if (gate === undefined) { // If binding didn't work print out error message
console.error(`Fail to find logviewer gate.`);
} else {
gate.setPluginExports({ // Set parser(s) to export here (Setting Multiple parsers possible)
parser: new ParseMe() // Create parser instance (Free to choose parser name)
});
}
SelectionParser
// Typescript
/**
* Allows creating parser of selection.
* Name of the parser will be shown in the context menu of selection. If a user selects parser,
* parser will be applied to selection and result will be shown on tab "Details"
* @usecases decoding selected content; converting selected content into human-readable format
* @requirements TypeScript or JavaScript
* @examples encrypting of data, Base64string parser, HEX converting into a string and so on
* @class SelectionParser
*/
export declare abstract class SelectionParser {
/**
* This method will be called on user selection
* @param {string} str - selection in main view or search results view
* @param {EThemeType} themeTypeRef - reference to active theme (dark, light and so on)
* @returns {string} method should return a string or HTML string
*/
abstract parse(str: string, themeTypeRef: EThemeType): string | THTMLString;
/**
* Should return name of parser to be shown in context menu of selection
* @param {string} str - selection in main view or search results view
* @returns {string} name of parser
*/
abstract getParserName(str: string): string | undefined;
}
Example - SelectionParser
import * as Toolkit from 'chipmunk.client.toolkit'; // Import UI API to extend Parser class
class ParseMe extends Toolkit.SelectionParser { // Extend parser class with Abstract parser class
public parse(str: string, themeTypeRef: Toolkit.EThemeType): string { // Create parser which modifies and returns parsed string
return `--> ${str}`; // Return string with --> in front
}
public getParserName(str: string) { // Create a parser that checks if the string only consists of digits
if ( str.search(/^\d+$/) { // If the string only consists of numbers
return 'Hightlight number'; // return the name of the parser and create an option upon right-clicking
}
return undefined; // if it's not the case, return 'undefined' to not create an option upon right-clicking
}
}
const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer; // Identification of the plugin
if (gate === undefined) { // If binding didn't work print out error message
console.error(`Fail to find logviewer gate.`);
} else {
gate.setPluginExports({ // Set parser(s) to export here (Setting Multiple parsers possible)
parser: new ParseMe() // Create parser instance (Free to choose parser name)
});
}
TypedRowRender
// Typescript
/**
* This class is used for more complex renders of stream output. Like:
* - TypedRowRenderAPIColumns - to show stream line as columns
* - TypedRowRenderAPIExternal - to use custom Angular component as stream
* line render
*
* @usecases to show content in columns; to have full HTML/LESS features for rendering
* @class TypedRowRender
*/
export declare abstract class TypedRowRender<T> {
/**
* This method will be called for each line of a stream before method "parse" will be called.
* @param {string} sourceName - name of source
* @returns {boolean} - true - method "parse" will be called for this line; false - parser will be ignored
*/
abstract isTypeMatch(sourceName: string): boolean;
/**
* This method will return one of the supported types of custom renders:
* - columns
* - external
* @returns {ETypedRowRenders} - type of custom render
*/
abstract getType(): ETypedRowRenders;
/**
* Should return an implementation of custom render. An instance of one of the next renders:
* - TypedRowRenderAPIColumns
* - TypedRowRenderAPIExternal
*/
abstract getAPI(): T;
}
Example - TypedRowRender
IMPORTANT: It's important to note, that
TypedRowRendercannot be used by itself, but instead used to createTypedRowRenderAPIColumnsandTypedRowRenderAPIExternalrenderers. For examples and further information check out the sections TypedRowRenderAPIColumns and TypedRowRenderAPIExternal
Identification
The abstract classes listed below are necessary for the identification and registration of the plugin.
PluginNgModule
// Typescript
/**
* Root module class for Angular plugin. Should be used by the developer of a plugin (based on Angular) to
* let core know, which module is a root module of plugin.
* One plugin can have only one instance of this module.
* @usecases views, complex components, addition tabs, Angular components
* @requirements Angular, TypeScript
* @class PluginNgModule
*/
export declare class PluginNgModule {
constructor(name: string, description: string) {}
}
Example - PluginNgModule
This example shows how to create a simple plugin along with the usage of PluginNgModule:
<p>Example</p>
p {
color: #FFFFFF;
}
import { Component } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
constructor() { }
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // <-- The module class of the plugin extends from Toolkit.PluginNgModule
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
PluginService
// Typescript
/**
* Service which can be used to get access to plugin API
* Plugin API has a collection of methods to listen to major core events and
* communicate between render and host of plugin.
* Into plugin's Angular components (like tabs, panels, and dialogs) API object will be
* delivered via inputs of a component. But to have global access to API developer can
* create an instance of this class.
*
* Note: an instance of this class should be exported with PluginNgModule (for Angular plugins) or
* with PluginServiceGate.setPluginExports (for none-Angular plugins)
*
* @usecases Create global (in the scope of plugin) service with access to plugin's API and core's API
* @class PluginService
*/
export declare abstract class PluginService {
private _apiGetter;
/**
* @property {Subject<boolean>} onAPIReady subject will be emitted on API is ready to use
*/
onAPIReady: Subject<boolean>;
/**
* Should be used to get access to API of plugin and core.
* Note: will return undefined before onAPIReady will be emitted
* @returns {API | undefined} returns an instance of API or undefined if API isn't ready to use
*/
getAPI(): IAPI | undefined;
}
Example - PluginService
This example shows how to create a service class, that extends from PluginService, which allows global access to the API by import the service class:
<p>Example</p>
p {
color: #FFFFFF;
}
import * as Toolkit from 'chipmunk.client.toolkit';
export class Service extends Toolkit.PluginService { // The service class has to inherit the PluginService from chipmunk.client.toolkit to get access the the API methods
private api: Toolkit.IAPI | undefined; // Instance variable to assign API
constructor() {
super(); // Call parent constructor
}
private _onReady() { // Method to be called when the API is ready
this.api = this.getAPI(); // Assign the API to instance variable
if (this.api === undefined) { // Check if the API is defined to prevent errors
console.log('API not defined!');
return;
}
}
public printID(): string {
console.log(`Session id: ${this.api.getActiveSessionId()}`); // Prints session ID in the console
}
}
export default (new Service()); // Export the instantiated service class
import { Component } from '@angular/core';
import Service from './service.ts' // Import the service class to use in main component of plugin
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
constructor() {
Service.printID(); // Print session ID in the console
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
import Service from './service';
export * from './component';
export * from './module';
export { Service };
IMPORTANT: It's important to note, that the
ServiceHAS to be exported to be used globally (in scope of the plugin)
PluginServiceGate
// Typescript
/**
* Used for none-Angular plugins to delivery plugin's exports into the core of chipmunk
* Developer can create none-Angular plugin. In global namespace of the main javascript file will be
* available implementation of PluginServiceGate.
* For example:
* =================================================================================================
* const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer;
* gate.setPluginExports({
* parser: new MyParserOfEachRow(),
* });
* =================================================================================================
* This code snippet registered a new parser for output "MyParserOfEachRow"
* @usecases should be used for none-angular plugins to register parsers
* @class PluginServiceGate
*/
export declare abstract class PluginServiceGate {
/**
* Internal usage
*/
abstract setPluginExports(exports: IPluginExports): void;
/**
* Internal usage
*/
abstract getCoreModules(): ICoreModules;
/**
* Internal usage
*/
abstract getRequireFunc(): TRequire;
}
Example - PluginServiceGate
This example shows how to create a parser, that puts '-->' in front of every line in the output.
import * as Toolkit from 'chipmunk.client.toolkit'; // Import front-end API to extend Parser class
class ParseMe extends Toolkit.RowCommonParser { // Extend parser class with Abstract parser class
public parse(str: string, themeTypeRef: Toolkit.EThemeType, row: Toolkit.IRowInfo): string { // Create parser which modifies and returns parsed string
return `--> ${str}`; // Return string with --> in front
}
}
const gate: Toolkit.PluginServiceGate | undefined = (window as any).logviewer; // <-- Usage of PluginServiceGate, Identification of the plugin
if (gate === undefined) { // If binding didn't work print out error message
console.error(`Fail to find logviewer gate.`);
} else {
gate.setPluginExports({ // Set parser(s) to export here (Setting Multiple parsers possible)
parser: new ParseMe() // Create parser instance (Free to choose parser name)
});
}
4. Classes
4.1 ControllerSessionsEvents
// Typescript
/**
* This class provides access to sessions events (like close, open, change of session).
*
* @usecases to track sessions state
* @class ControllerSessionsEvents
*/
export class ControllerSessionsEvents {
public static Events = {
/**
* Fired on user switch a tab (session)
* @name onSessionChange
* @event {string} sessionId - active session ID
*/
onSessionChange: 'onSessionChange',
/**
* Fired on user open a new tab (session)
* @name onSessionOpen
* @event {string} sessionId - a new session ID
*/
onSessionOpen: 'onSessionOpen',
/**
* Fired on user close a new tab (session)
* @name onSessionClose
* @event {string} sessionId - ID of closed session
*/
onSessionClose: 'onSessionClose',
/**
* Fired on stream has been changed
* @name onStreamUpdated
* @event {IEventStreamUpdate} event - current state of stream
*/
onStreamUpdated: 'onStreamUpdated',
/**
* Fired on search results has been changed
* @name onSearchUpdated
* @event {IEventSearchUpdate} event - current state of stream
*/
onSearchUpdated: 'onSearchUpdated',
};
private _emitter: Emitter = new Emitter();
public destroy() {
this._emitter.unsubscribeAll();
}
public unsubscribe(event: any) {
this._emitter.unsubscribeAll(event);
}
/**
* Emits event
* @returns {Event Emitter} - function event emitter
*/
public emit(): {
onSessionChange: (sessionId: string) => void,
onSessionOpen: (sessionId: string) => void,
onSessionClose: (sessionId: string) => void,
onStreamUpdated: (event: IEventStreamUpdate) => void,
onSearchUpdated: (event: IEventSearchUpdate) => void,
} {
return {
onSessionChange: this._getEmit.bind(this, ControllerSessionsEvents.Events.onSessionChange),
onSessionOpen: this._getEmit.bind(this, ControllerSessionsEvents.Events.onSessionOpen),
onSessionClose: this._getEmit.bind(this, ControllerSessionsEvents.Events.onSessionClose),
onStreamUpdated: this._getEmit.bind(this, ControllerSessionsEvents.Events.onStreamUpdated),
onSearchUpdated: this._getEmit.bind(this, ControllerSessionsEvents.Events.onSearchUpdated),
};
}
/**
* Subscribes to event
* @returns {Event Subscriber} - function-subscriber for each available event
*/
public subscribe(): {
onSessionChange: (handler: TSubscriptionHandler<string>) => Subscription,
onSessionOpen: (handler: TSubscriptionHandler<string>) => Subscription,
onSessionClose: (handler: TSubscriptionHandler<string>) => Subscription,
onStreamUpdated: (handler: TSubscriptionHandler<IEventStreamUpdate>) => Subscription,
onSearchUpdated: (handler: TSubscriptionHandler<IEventSearchUpdate>) => Subscription,
} {
return {
onSessionChange: (handler: TSubscriptionHandler<string>) => {
return this._getSubscription<string>(ControllerSessionsEvents.Events.onSessionChange, handler);
},
onSessionOpen: (handler: TSubscriptionHandler<string>) => {
return this._getSubscription<string>(ControllerSessionsEvents.Events.onSessionOpen, handler);
},
onSessionClose: (handler: TSubscriptionHandler<string>) => {
return this._getSubscription<string>(ControllerSessionsEvents.Events.onSessionClose, handler);
},
onStreamUpdated: (handler: TSubscriptionHandler<IEventStreamUpdate>) => {
return this._getSubscription<IEventStreamUpdate>(ControllerSessionsEvents.Events.onStreamUpdated, handler);
},
onSearchUpdated: (handler: TSubscriptionHandler<IEventSearchUpdate>) => {
return this._getSubscription<IEventSearchUpdate>(ControllerSessionsEvents.Events.onSearchUpdated, handler);
},
};
}
Example - ControllerSessionEvents
This example shows how to call specific methods when a session is created/closed/changed:
<p>Example</p> <!-- Create a line of text -->
p {
color: #FFFFFF;
}
import { Component, Input } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
@Input() public api: Toolkit.IAPI; // API assignment
@Input() public session: string; // Session ID assignment
@Input() public sessions: Toolkit.ControllerSessionsEvents; // Session event listener assignment
private _subs: { [key: string]: Toolkit.Subscription } = {}; // Hashlist for session events
constructor() {
this._subs.onSessionChange = this.sessions.subscribe().onSessionChange(this._onSessionSessionChange.bind(this)); // Subscribe to session change event
this._subs.onSessionOpen = this.sessions.subscribe().onSessionOpen(this._onSessionOpen.bind(this)); // Subscribe to new session open event
this._subs.onSessionClose = this.sessions.subscribe().onSessionClose(this._onSessionClose.bind(this)); // Subscribe to session close event
}
private _onSessionChange(session: string) { // Method when session changes
this.session = session; // Reassign the session to the session, to which has been changed to
}
private _onSessionOpen(session: string) { } // Method when new session opens
private _onSessionClose(session: string) { } // Method when session closes
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
})
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';
4.4 Logger
The API also offers a logger to log any kind of errors or warnings in the UI.
// Typescript
export default class Logger {
private _signature;
private _parameters;
/**
* @constructor
* @param {string} signature - Signature of logger instance
* @param {LoggerParameters} params - Logger parameters
*/
constructor(signature: string, params?: LoggerParameters) {}
/**
* Publish info logs
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
info(...args: any[]): string;
/**
* Publish warnings logs
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
warn(...args: any[]): string;
/**
* Publish verbose logs
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
verbose(...args: any[]): string;
/**
* Publish error logs
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
error(...args: any[]): string;
/**
* Publish debug logs
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
debug(...args: any[]): string;
/**
* Publish environment logs (low-level stuff, support or tools)
* @param {any} args - Any input for logs
* @returns {string} - Formatted log-string
*/
env(...args: any[]): string;
private _console;
private _output;
private _getMessage;
private _getTime;
private _log;
}
Example - Logger
In the example below a plugin is created which logs a message.
<p>Example</p>
p {
color: #FFFFFF;
}
import { Component } from '@angular/core';
import * as Toolkit from 'chipmunk.client.toolkit';
@Component({
selector: 'example', // Choose the selector name of the plugin
templateUrl: './template.html', // Assign HTML file as template
styleUrls: ['./styles.less'] // Assign LESS file as style sheet file})
export class ExampleComponent {
private _logger: Toolkit.Logger = new Toolkit.Logger('Plugin: example: '); // Instantiate logger with signature
constructor() {
this._logger.debug('Plugin started!'); // Create debug message
}
}
import { NgModule } from '@angular/core'; // Import the Angular component that is necessary for the setup below
import { ExampleComponent } from './component'; // Import the class of the plugin, mentioned in the components.ts file
import * as Toolkit from 'chipmunk.client.toolkit'; // Import Chipmunk Toolkit to let the module class inherit
@NgModule({
declarations: [ ExampleComponent ], // Declare which components, directives and pipes belong to the module
imports: [ ], // Imports other modules with the components, directives and pipes that components in the current module need
exports: [ ExampleComponent ] // Provides services that the other application components can use
}
export class PluginModule extends Toolkit.PluginNgModule { // Create module class which inherits from the Toolkit module
constructor() {
super('Example', 'Create an example plugin'); // Call the constructor of the parent class
}
}
export * from './component';
export * from './module';