Every plugin must include the following JavaScript library: '''<tt>[http://orionhub.org/orion/plugin.js plugin.js]</tt>'''

−

* <tt>[http://orionhub.org/orion/plugin.js plugin.js]</tt>

+

You can copy-paste its contents into a &lt;script&gt; tag in your plugin, or load it externally like so:

You can copy-paste its contents into a &lt;script&gt; tag in your plugin, or load it externally like so:

−

<source lang="html4strict">

+

−

<script src="plugin.js" />

+

<script src="plugin.js"></script>

−

</source>

+

+

The plugin.js file is also an AMD module, so you can alternatively load it through a module loader like [http://requirejs.org/ RequireJS].

+

+

require(['plugin'], function(PluginProvider) {

+

// ...

+

});

== Writing the plugin ==

== Writing the plugin ==

Line 26:

Line 31:

=== Creating the HTML file ===

=== Creating the HTML file ===

Create a new HTML file called <tt>reversePlugin.html</tt> with the following content:

Create a new HTML file called <tt>reversePlugin.html</tt> with the following content:

−

<source lang="html4strict">

+

−

<!DOCTYPE html>

+

<!DOCTYPE html>

−

<html>

+

<html>

−

<head>

+

<head>

−

<meta charset="UTF-8" />

+

<meta charset="UTF-8" />

−

<title>Reverse Plugin</title>

+

<title>Reverse Plugin</title>

−

</head>

+

</head>

−

<body></body>

+

<body></body>

−

</html>

+

</html>

−

</source>

+

−

What we have now isn't a plugin yet. It's just a bare-bones HTML file. The next step is to include the API we'll need to talk to Orion.

+

What we have now isn't a plugin yet. It's just a bare-bones HTML file. The next step is to include the API we'll need to talk to Orion. Grab the <tt>plugin.js</tt> file (see [[#What you need|What you need]]) and put it in the same folder as <tt>reversePlugin.html</tt>. Then add this inside the &lt;head&gt; tags of the HTML file:

−

Grab the <tt>plugin.js</tt> file (see [[#What you need|What you need]]) and put it in the same folder as <tt>reversePlugin.html</tt>. Then add this inside the &lt;head&gt; tags of the HTML file:

+

−

<source lang="html4strict">

+

<script src="plugin.js"></script>

−

<script src="plugin.js" />

+

−

</source>

+

=== Making it a plugin ===

=== Making it a plugin ===

−

Next, we'll add some code that exposes a service to Orion. Add the following, again inside the &lt;head&gt; tags:

+

Next, we'll add some code that connects our file to Orion. Add the following, again inside the &lt;head&gt; tags:

−

<source lang="javascript">

+

−

<script>

+

<script>

−

window.onload = function() {

+

window.onload = function() {

−

var provider = new eclipse.PluginProvider();

+

var headers = {

+

name: "My Plugin",

+

version: "1.0",

+

description: "My first Orion plugin."

+

};

+

var provider = new orion.PluginProvider(headers);

+

provider.connect();

+

};

+

</script>

−

provider.connect();

+

At this point, we've got an honest-to-goodness Orion plugin, albeit one that does nothing. Let's go over the various parts in detail.

−

}

+

* <tt>window.onload</tt> — Runs our function after <tt>plugin.js</tt> has been loaded by the browser. This ensures that the <tt>orion.PluginProvider</tt> constructor is available.

−

</script>

+

* <tt>var headers = ...</tt> - An optional object supplying metadata about the plugin's name, version and description. This is used to display information about the plugin on the plugin settings page.

−

</source>

+

* <tt>var provider = new orion.PluginProvider(headers)</tt> — Creates a new PluginProvider. The PluginProvider may provide one or more services, but right now ours doesn't provide any.<br>Optionally, an object giving metadata about the plugin can be provided as an argument to the constructor.

−

At this point, we've got an honest-to-goodness Orion plugin, albeit one that does nothing. Let's go over the various parts in detail:

+

* <tt>provider.connect()</tt> — This is where the magic happens. When our plugin is activated from Orion, this call opens an asynchronous communication channel. Orion adds information about our plugin, and any service contributions it makes, to the Orion registry.

−

<!-- ** <tt>window.onload</tt> — -->

+

−

* <tt>var provider = new eclipse.PluginProvider()</tt> — <span style="background-color: #00ff00;">TODO</span><br>Optionally, an object giving metadata about the plugin can be provided as an argument to the constructor.

Now we're going to create and register a service with the [[Orion/Documentation/Developer Guide/Plugging into the editor#orion.edit.command|"orion.edit.command"]] service type.

+

Now we're going to expose a service to Orion. We'll create and register a service with the [[Orion/Documentation/Developer Guide/Plugging into the editor#orion.edit.command|orion.edit.command]] service type.

* <tt>var serviceImpl</tt>: This object gives the implementation of our service, the part that will do the actual work. When someone requests our service,<!-- — for example, by getting a <tt>ServiceReference</tt> object and calling getService() &mdash; --> the plugin is loaded into an IFrame, and the service's methods are made available. The <tt>function</tt>-typed properties of the <tt>serviceImpl</tt> object define the service methods.<br />

+

* <tt>var serviceImpl</tt>: This object gives the implementation of our service, the part that will do the actual work. When someone requests our service,<!-- — for example, by getting a <tt>ServiceReference</tt> object and calling getService() &mdash; --> our plugin is loaded into an IFrame, and the service's methods are made available. The <tt>function</tt>-typed properties of the <tt>serviceImpl</tt> object define the service methods.

−

* <tt>var serviceProperties</tt>: Every service provider can supply '''properties''', which is an object that holds metadata about the service provider. <!-- Orion stores these properties when a plugin is installed <span style="background-color: #00ff00;">(?)</span>, and they can later be queried without causing the plugin to be loaded.<br>Properties are often used to filter out service providers that are irrelevant to a particular task. For example, if you're writing a service provider for content assist, you'd specify what file types your provider applies to in its properties. The content assist loader then only loads plugins that provide content assist for the particular file type being edited. This is important because plugin load can be an expensive operation, so we want to avoid doing it if possible. since these can be queried without loading the plugin itself. --> If you're familiar with Eclipse desktop, you can think of service properties as analogous to the extensions declared in a plugin.xml file.<br />

+

* <tt>var serviceProperties</tt>: Every service provider can supply '''properties''', which is an object that holds metadata about the service provider. <!-- Orion stores these properties when a plugin is installed <span style="background-color: #00ff00;">(?)</span>, and they can later be queried without causing the plugin to be loaded.<br>Properties are often used to filter out service providers that are irrelevant to a particular task. For example, if you're writing a service provider for content assist, you'd specify what file types your provider applies to in its properties. The content assist loader then only loads plugins that provide content assist for the particular file type being edited. This is important because plugin load can be an expensive operation, so we want to avoid doing it if possible. since these can be queried without loading the plugin itself. --> If you're familiar with Eclipse desktop, you can think of service properties as analogous to the extensions declared in a plugin.xml file.

−

* <tt>provider.registerServiceProvider("orion.edit.command", serviceImpl, serviceProperties);</tt>: This call registers our service implementation and properties with the service type "orion.edit.command". At this point, if we were to install our plugin into Orion, we've got enough to make the Orion editor see our contribution. However, our contribution still does nothing. Let's fix that.<br />

+

* <tt>provider.registerService("orion.edit.command", serviceImpl, serviceProperties);</tt>: This call registers our service implementation and properties with the service type [[Orion/Documentation/Developer_Guide/Plugging_into_the_editor#orion.edit.command|"orion.edit.command"]]. At this point, if we tried installing our plugin into Orion, we'd have enough to make the Orion editor see our contribution. However, our contribution still does nothing. Let's fix that.

=== Implementing the service ===

=== Implementing the service ===

Line 81:

Line 89:

Change the <tt>serviceImpl</tt> object to look like this:

Change the <tt>serviceImpl</tt> object to look like this:

−

<source lang="javascript">

+

var serviceImpl = {

−

var serviceImpl = {

+

run: function(text) {

−

run: function(text) {

+

return text.split("").reverse().join("");

−

return text.split("").reverse().join("");

+

}

−

}

+

};

−

};

+

−

</source>

+

−

- run() is a method expected by the orion.edit.command service API.

+

Note that the functions defined in the service will depend on what service type you're contributing to. In our case, we're contributing to [[Orion/Documentation/Developer_Guide/Plugging_into_the_editor#orion.edit.command|"orion.edit.command"]], which expects a <tt>run()</tt> function. (See the [[Orion/Documentation/Developer_Guide|Developer Guide]] for a list of extension points and their API.)

−

- note about how it's called

+

Change the serviceProperties object to look like this:

Change the serviceProperties object to look like this:

−

<source lang="javascript">

+

−

var serviceProperties = {

+

var serviceProperties = {

−

name: "Reverse Text",

+

name: "Reverse Text",

−

key: ["e", true, true] // Ctrl+Shift+e

+

key: ["e", true, true] // Ctrl+Shift+e

−

};

+

};

−

</source>

+

=== The finished plugin file ===

=== The finished plugin file ===

Make sure that your copy of <tt>reversePlugin.html</tt> looks like this:

Make sure that your copy of <tt>reversePlugin.html</tt> looks like this:

* If you have a personal web server available, you can copy <tt>reversePlugin.html</tt> and <tt>plugin.js</tt> there.

* If you have a personal web server available, you can copy <tt>reversePlugin.html</tt> and <tt>plugin.js</tt> there.

* If you're using Orionhub, you can put the plugin in a new folder in your Orionhub workspace. Then create a Site Configuration in Orion that launches your folder. See [[Orion/Documentation/User Guide/Getting started#Launching_your_project_as_a_website|Launching your project as a website]].

* If you're using Orionhub, you can put the plugin in a new folder in your Orionhub workspace. Then create a Site Configuration in Orion that launches your folder. See [[Orion/Documentation/User Guide/Getting started#Launching_your_project_as_a_website|Launching your project as a website]].

−

* You can also use a pre-built version at http://mamacdon.github.com/0.2/reverse/reversePlugin.html

+

* You can also use a pre-built version at [http://mamacdon.github.io/1.0/plugins/reverse/reversePlugin.html http://mamacdon.github.io/1.0/plugins/reverse/reversePlugin.html].

−

Now that you've got a URL for reversePlugin, install it:

+

Now that you've got a URL for reversePlugin.html, install it into Orion:

: Contributes a "Beautify JS" button to the editor toolbar by using the <tt>orion.edit.command</tt> service type. Visit http://mamacdon.github.com for a directory of other available plugins, organized by Orion version.

+

: Contributes extended search completion in addition to recent searches by using the <tt>orion.search.proposal</tt> service type.

+

+

; http://mamacdon.github.io/0.5/plugins/beautify/jsbeautify.html

+

: Contributes a "Beautify JS" button to the editor toolbar by using the <tt>orion.edit.command</tt> service type. Visit http://mamacdon.github.io for a directory of other available plugins, organized by Orion version.

−

; http://mamacdon.github.com/0.2/uglify/uglify-plugin.html

+

; http://mamacdon.github.io/0.5/plugins/uglify/uglify-plugin.html

−

: Contributes an "Uglify JS" button to the editor toolbar byusing the <tt>orion.edit.command</tt> service type.

+

: Contributes an "Uglify JS" (minify, in other words) button to the editor toolbar by using the <tt>orion.edit.command</tt> service type.

== See also ==

== See also ==

* [[Orion/How Tos/Installing A Plugin|Installing a plugin]]

* [[Orion/How Tos/Installing A Plugin|Installing a plugin]]

Revision as of 11:26, 24 June 2013

This section explains how to write a plugin for Orion. It is intended for developers who want to extend Orion's functionality.

What you need

You can copy-paste its contents into a <script> tag in your plugin, or load it externally like so:

<script src="plugin.js"></script>

The plugin.js file is also an AMD module, so you can alternatively load it through a module loader like RequireJS.

require(['plugin'], function(PluginProvider) {
// ...
});

Writing the plugin

Let's make a plugin that adds a button to the toolbar of the Orion editor. When clicked, it will reverse the selected text in the editor. This is not a very useful feature, but it'll be a good introduction to the concepts involved.

Creating the HTML file

Create a new HTML file called reversePlugin.html with the following content:

What we have now isn't a plugin yet. It's just a bare-bones HTML file. The next step is to include the API we'll need to talk to Orion. Grab the plugin.js file (see What you need) and put it in the same folder as reversePlugin.html. Then add this inside the <head> tags of the HTML file:

<script src="plugin.js"></script>

Making it a plugin

Next, we'll add some code that connects our file to Orion. Add the following, again inside the <head> tags:

At this point, we've got an honest-to-goodness Orion plugin, albeit one that does nothing. Let's go over the various parts in detail.

window.onload — Runs our function after plugin.js has been loaded by the browser. This ensures that the orion.PluginProvider constructor is available.

var headers = ... - An optional object supplying metadata about the plugin's name, version and description. This is used to display information about the plugin on the plugin settings page.

var provider = new orion.PluginProvider(headers) — Creates a new PluginProvider. The PluginProvider may provide one or more services, but right now ours doesn't provide any.Optionally, an object giving metadata about the plugin can be provided as an argument to the constructor.

provider.connect() — This is where the magic happens. When our plugin is activated from Orion, this call opens an asynchronous communication channel. Orion adds information about our plugin, and any service contributions it makes, to the Orion registry.

Registering the service

Now we're going to expose a service to Orion. We'll create and register a service with the orion.edit.command service type.
Add the additional lines as shown:

var serviceImpl: This object gives the implementation of our service, the part that will do the actual work. When someone requests our service, our plugin is loaded into an IFrame, and the service's methods are made available. The function-typed properties of the serviceImpl object define the service methods.

var serviceProperties: Every service provider can supply properties, which is an object that holds metadata about the service provider. If you're familiar with Eclipse desktop, you can think of service properties as analogous to the extensions declared in a plugin.xml file.

provider.registerService("orion.edit.command", serviceImpl, serviceProperties);: This call registers our service implementation and properties with the service type "orion.edit.command". At this point, if we tried installing our plugin into Orion, we'd have enough to make the Orion editor see our contribution. However, our contribution still does nothing. Let's fix that.

Implementing the service

We'll fill in the serviceImpl and serviceProperties objects with the actual details of the service.
Change the serviceImpl object to look like this:

Note that the functions defined in the service will depend on what service type you're contributing to. In our case, we're contributing to "orion.edit.command", which expects a run() function. (See the Developer Guide for a list of extension points and their API.)

Testing the plugin

First we need to host our plugin somewhere.

If you have a personal web server available, you can copy reversePlugin.html and plugin.js there.

If you're using Orionhub, you can put the plugin in a new folder in your Orionhub workspace. Then create a Site Configuration in Orion that launches your folder. See Launching your project as a website.

Contributes a "Beautify JS" button to the editor toolbar by using the orion.edit.command service type. Visit http://mamacdon.github.io for a directory of other available plugins, organized by Orion version.