Skip Navigation

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.