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