Skip to main content

Creating Red App using WebKit Browser editor

In existing Red App plug-in (created in the same way as e.g. browser plug-in) developer can add customized editor with his own web application. There are several ways to create your own editor:

  1. Add following plugins to required bundles in MANIFEST.MF file:

Require-Bundle:

  • org.eclipse.ui

  • org.eclipse.core.runtime

  • com.sabre.edge.platform.optional.webkit

 

  1. Define your editor in plugin.xml (this method uses default WebKit Editor implementation provided by com.sabre.edge.platform.optional.webkit plugin - DefaultWebkitEditor class) as presented below:

<extension point="org.eclipse.ui.editors">
       <editor
             class="com.sabre.edge.platform.optional.webkit.editors.DefaultWebkitEditor"
             icon="images/icon.png"
             id="com.sabre.redapp.example.webkit.editor.SimpleBrowserEditor"
             name="Simple Browser">
       </editor>
</extension>

 <extension point="com.sabre.edge.platform.core.editor.editorApp">
       <editorApp
             browserURL="https://www.sabreredappcentre.sabre.com/"
             class="com.sabre.edge.platform.optional.webkit.editors.DefaultWebkitEditor"
             constraintMaximum="1"
             constraintStartup="0"
             editorId="com.sabre.redapp.example.webkit.editor.SimpleBrowserEditor"
             evalId="com.sabre.redapp.example.simple.browser.editor"
             name="Simple Browser"
             order="100"
             toolTipText="Simple Browser">
       </editorApp>
 </extension>

WebKit editor can also contribute to menu:

<extension
         point="org.eclipse.ui.commands">
      <command
            id="com.sabre.redapp.example.webkit.OpenSimpleEditorCommand"
            name="Open Simple Webkit Browser Editor">
         <commandParameter
               id="editorId"
               name="editorId"
               optional="true">
         </commandParameter>
      </command>
 </extension>
   <extension
         point="org.eclipse.ui.handlers">
      <handler
            class="com.sabre.edge.platform.core.editor.commands.handlers.FocusOrOpenEditorHandler"
            commandId="com.sabre.redapp.example.webkit.OpenSimpleEditorCommand">
      </handler>
   </extension>
<extension
         point="org.eclipse.ui.menus">
      <menuContribution
            locationURI="menu:com.sabre.edge.toolbar.launcher.other">
         <command
               commandId="com.sabre.redapp.example.webkit.OpenSimpleEditorCommand"
               icon="images/icon.png"
               label="Simple Webkit Browser Editor"
               style="push">
            <parameter
                  name="editorId"
                  value="com.sabre.redapp.example.webkit.editor.SimpleBrowserEditor">
            </parameter>
         </command>
      </menuContribution>
</extension>

 

  1. Create your own implementation of WebKit editor. Extend class DefaultWebkitEditor, create own handler class and configure extension points as presented below:

ExampleBrowserEditor.java

package com.sabre.redapp.example.webkit.editor;

import com.sabre.edge.platform.optional.webkit.editors.DefaultWebkitEditor;

public class ExampleBrowserEditor extends DefaultWebkitEditor
{

}

ExampleFocusOrOpenEditorHandler.java

package com.sabre.redapp.example.webkit.editor.handlers;

import com.sabre.edge.platform.optional.webkit.handlers.DefaultFocusOrOpenWebkitEditorHandler;

public class ExampleFocusOrOpenEditorHandler extends DefaultFocusOrOpenWebkitEditorHandler>
{
    public String getEditorUrl(Map <String, String> parameters)
    {
        return "http://www.sabre.com";
    }
}

plugin.xml

<extension point="org.eclipse.ui.editors">
        <editor
             class="com.sabre.redapp.example.webkit.editor.ExampleBrowserEditor"
             id="com.sabre.redapp.example.webkit.editor.ExampleBrowserEditor"
             icon="images/icon.png"
             name="Example Webkit Browser" />
</extension>

<extension point="com.sabre.edge.platform.core.editor.editorApp">
       <editorApp
             class="com.sabre.redapp.example.webkit.editor.ExampleBrowserEditor"
             editorId="com.sabre.redapp.example.webkit.editor.ExampleBrowserEditor"
             evalId="com.sabre.redapp.example.webkit.editor"
             inputClass="com.sabre.edge.platform.optional.webkit.inputs.WebkitEditorInput"
             name="Example Webkit Browser"
             constraintStartup="0"
             toolTipText="Example Webkit Browser"
             constraintMaximum="1"
             order="100"/>
</extension>

<extension point="org.eclipse.ui.handlers">
       <handler
            class="com.sabre.redapp.example.webkit.editor.handlers.ExampleFocusOrOpenEditorHandler"
            commandId="com.sabre.redapp.example.webkit.OpenExampleEditorCommand">
       </handler>
</extension>

<extension point="org.eclipse.ui.menus">
      <menuContribution
            locationURI="menu:com.sabre.edge.toolbar.launcher.other">
         <command
               commandId="com.sabre.redapp.example.webkit.OpenExampleEditorCommand"
               icon="images/icon.png"
               label="Example Webkit Browser Editor"
               style="push">
            <parameter
                  name="editorId"
                  value="com.sabre.redapp.example.webkit.editor.ExampleBrowserEditor">
            </parameter>
            <parameter
                  name="name"
                  value="Example Webkit Browser">
            </parameter>
         </command>
      </menuContribution>
</extension>

images directory should be placed in main plug-in directory.

 

NOTES: See com.sabre.redapp.example.webkit sample for details.