Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
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"> | ||
− | == | + | == 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 <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 <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.
Contents
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:
- OpenAjax: defined in OpenAjaxManagedHub-all.js
- Orion Provider API: plugin.js
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
- Installing a plugin
- eclipse.PluginProvider JSdoc