Monterey plugins | Plugin API

Implementation - as a Tile

Work done so far

This section follows the information presented in the Creating a simple plugin section. We will use the same numbering (1. to 5.) for the steps to be performed in order to create the Layout manager tile.

Some initial code is also written (with built in bugs that still need to be squished) in the dev-editor branch of the Monterey GitHub repository

Step 1 - create Layout manager folder

Created here

Step 2 - Create an index.ts file in the Layout manager folder:

import {PluginManager} from '../../shared/plugin-manager';
import {BasePlugin}    from '../base-plugin';

export function configure(aurelia) {
 let pluginManager = <PluginManager>aurelia.container.get(PluginManager);

 pluginManager.registerPlugin(aurelia.container.get(Plugin));
}

class Plugin extends BasePlugin {
 getTiles(project, showIrrelevant) {
   return [{
     name: 'layout-manager',
     viewModel: 'plugins/layout-manager/tile'
   }];
 }
}

Step 3 - Create a tile.ts file in the Layout manager folder:

import {useView} from 'aurelia-framework';

@useView('plugins/default-tile.html')
export class Tile {
 title: string;
 img: string;

 constructor() {
   this.title = 'Layout';
   this.img = 'http://icons.iconarchive.com/icons/custom-icon-design/flatastic-8/72/Layout-icon.png';
 }

 async onClick() {
   alert('Layout manager responding');
 }
}


Step 4 - register the plugin in the index.ts file of the plugins folder:

Done here.


Step 5

With this code I could run Monterey and observe how the clock on the Layout manager tile results with the alert:



Image 1

Next steps

Pick it up from here

results matching ""

    No results matching ""