Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "Orion/Documentation/Developer Guide/Simple plugin example"

m (→‎See also)
(more stuff)
Line 19: Line 19:
 
  <script src="orion-plugin.js">
 
  <script src="orion-plugin.js">
  
−
== Services ==
+
== Writing the plugin ==
−
TODO
+
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.
 +
 
 +
=== Writing the HTML ===
 +
* Create a new HTML file called <tt>reversePlugin.html</tt> with the following content:
 +
<!DOCTYPE html>
 +
<html>
 +
    <head>
 +
        <meta charset="UTF-8" />
 +
        <title>Reverse Plugin</title>
 +
    </head>
 +
<body></body>
 +
</html>
 +
* 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>orion-plugin.js</tt> file (see [[#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 file:
 +
<script src="orion-plugin.js" />
 +
* Now we'll add a template
 +
<script>
 +
    window.onload = function() {
 +
        var provider = new eclipse.PluginProvider();
 +
        var serviceImpl = { /* TODO */ };
 +
        var serviceProperties = { /* TODO */ };
 +
        provider.registerServiceProvider("editorAction", serviceImpl, serviceProperties);
 +
        provider.connect();
 +
    }
 +
</script>
 +
TODO Go through what we have piece-by-piece and explain it
 +
 
 +
* At this point, we've got an honest-to-goodness Orion plugin, albeit one that doesn't do anything.
 +
 
 +
TODO fill in the serviceImpl and serviceProperties
 +
 
 +
* Before continuing, make sure that <tt>reversePlugin.html</tt> looks like this:
 +
 
 +
=== Testing the plugin ===
 +
First we need to host our plugin somewhere.
 +
* If you have a personal web server available
 +
* 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/Getting_Started_with_Orion#Launching_your_project_as_a_website Launching your project as a website].
 +
 
 +
Once you've got a URL
 +
- install it
 +
- run the action
  
 
== Examples ==
 
== Examples ==

Revision as of 17:05, 5 May 2011

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

What's a plugin?

A plugin is basically just an HTML file that knows how to connect to the Orion client. A plugin can be hosted on any web server. Plugins are written in HTML and JavaScript.

In order to be useful, a plugin should provide one or more services. When Orion needs a service contributed by a plugin, it loads the plugin inside an IFrame.

Orion currently supports a small set of extension points — service types that plugins can contribute to, in order to customize the client and add more functionality. These include:

  • Adding more commands to the editor toolbar
  • Adding more commands to the navigator view
  • Adding content assist for new file types
  • Adding syntax highlighting rules for new file types

What you need

Every plugin must include the following JavaScript dependencies:

The easiest way to satisfy these is to get orion-plugin.js, which is a minified file that includes both of them. You can then copy-paste its contents into a <script> tag in your plugin, or load it externally like so: 

<script src="orion-plugin.js">

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.

Writing the HTML

  • Create a new HTML file called reversePlugin.html with the following content:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Reverse Plugin</title>
    </head>
<body></body>
</html>
  • 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 orion-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 file:
<script src="orion-plugin.js" />
  • Now we'll add a template
<script>
    window.onload = function() {
        var provider = new eclipse.PluginProvider();
        var serviceImpl = { /* TODO */ };
        var serviceProperties = { /* TODO */ };
        provider.registerServiceProvider("editorAction", serviceImpl, serviceProperties);
        provider.connect();
    }
</script>

TODO Go through what we have piece-by-piece and explain it

  • At this point, we've got an honest-to-goodness Orion plugin, albeit one that doesn't do anything.

TODO fill in the serviceImpl and serviceProperties

  • Before continuing, make sure that reversePlugin.html looks like this:

Testing the plugin

First we need to host our plugin somewhere.

  • If you have a personal web server available
  • 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/Getting_Started_with_Orion#Launching_your_project_as_a_website Launching your project as a website].

Once you've got a URL - install it - run the action

Examples

Here are some existing plugins we've written. View their source code to see how they work:

http://bokowski.github.com/format-js.html
Contributes a "Beautify JS" button to the editor toolbar by using the editorAction service type.
http://mamacdon.github.com/m6/uglify/uglify-plugin.html
Contributes an "Uglify JS" button to the editor toolbar byusing the editorAction service type.
http://orionhub.org/plugins/sampleCommandsPlugin.html
Contributes several sample actions to the Orion navigator by using the fileCommands service type.
http://orionhub.org/plugins/htmlSyntaxHighlightPlugin.html
Contributes syntax highlighting support for HTML files by using the ISyntaxHighlight service type.

See also

Retrieved from "https://wiki.eclipse.org/index.php?title=Orion/Documentation/Developer_Guide/Simple_plugin_example&oldid=249638"

Back to the top