Step 2: Creating an Editor Component

Context

Each editor contains an editor component, whose Java class extends AbstractEditorComponent , a descendent of AbstractPortalComponent , making the editor a portal component that can be displayed as an View in the administration pages of the portal.

AbstractEditorComponent implements IEditorBuilder , which defines only one method, setupEditor() , which is passed an IEditorConfiguration object. In this method, the editor does the following:

Creates instances of the panes as PaneMetaData objects.
Adds the panes to the IEditorConfiguration object.
Sets the default pane (that is, the pane that is displayed when the editor is launched).

Procedure

Create a new class that extends AbstractEditorComponent .

Implement setupEditor() , in which you will create instances of the panes, configure them, and add them to the editor. The following is the method's signature:

public void setupEditor(
    IEditorConfiguration editorConfig,
    IPortalComponentProfile profile,
    Map params,
    ResourceBundle editorTexts) {
 
}

Create instances of the panes for the editor and configure the panes. For each pane, do the following:
1. Create a PaneMetaData object for representing the pane. The PaneMetaData constructor takes the Class object of your pane class, and a string that is the name of the pane.
```
PaneMetaData personalDetailsPane =
    new PaneMetaData(PersonalDetailsPane.class, "Personal Info");

                           
```
2. Set the tooltip displayed when hovering over the radio button that displays the pane.
```
personalDetailsPane.setDescription("personal details information");
                           
```
3. Set the server event that causes the pane to be displayed.
```
personalDetailsPane.setActivatingEvent("personalDetails");
                           
```
  A pane can also be displayed by the user by clicking the pane's radio button at the top of the editor.
4. Indicate whether a radio button is displayed for this pane in the pane selection area at the top of the editor.
```
personalDetailsPane.setPaneSelectionMember(true);
                           
```
  If no radio button is displayed for the pane, the only way to display the pane is via an activating event.
Add each pane to the editor by calling addEditorPane() on the IEditorConfiguration object that is passed into the setupEditor() method.
```
editorConfig.addEditorPane(personalDetailsPane);
                     
```

Specify the default pane, that is, the pane that is displayed when the editor is launched.

editorConfig.setDefaultEditorPane(paymentPane);

Create an entry in the portalapp.xml for the editor component. The <component> element is similar to a standard component, except that you specify the following in the <component-profile> element:
- Data Handler: In the com.sap.portal.admin.editorframework.dataHandler property, specify the class or service that implements the data handler.
  
  For more information on creating the data handler, see Step 3: Creating a Data Handler and portalapp.xml .
- JavaScript Resource: If you are including a JavaScript resource for the editor, specify in the com.sap.portal.admin.editorframework.jsResource property the path to the JavaScript file.
- Generic Events Handler: If you are including a custom generic events handler, specify in the com.sap.portal.admin.editorframework.eventsHandler property the class that implements the events handler.
  
  For more information on creating custom generic events handlers, see Generic Events .
- iView Properties: Specify iView properties in order to properly display the editor. For example, remove the iView tray and set the isolation mode to URL.
The following is an example <component> element for an editor component:
```
    <components>
        <component name="TrainEditor">
            <component-config>
                <property name="ClassName" value="myPackage.TrainEditor"/>
                <property name="SafetyLevel" value="low_safety"/>
            </component-config>
            <component-profile>
                <property name=
                    "com.sap.portal.admin.editorframework.dataHandler"
                    value="myEditor.myDataHandler"/>
                <property name="com.sap.portal.iview.ShowTray" value="false"/>
                <property name="com.sap.portal.reserved.iview.IsolationMode"
                    value="URL"/>
                <property name="com.sap.portal.iview.HeightType"
                    value="FULL_PAGE"/>
                <property name="isStateless" value="false" /> 
            </component-profile>
        </component>
    </components>

                     
```

Results

The following is an example of setupEditor() for creating and configuring two panes:

public void setupEditor(
    IEditorConfiguration editorConfig,
    IPortalComponentProfile profile,
    Map params,
    ResourceBundle editorTexts) {
 
    //Create and configure personal info pane.
    PaneMetaData personalDetailsPane =
        new PaneMetaData(PersonalDetailsPane.class, "Personal Info");
    personalDetailsPane.setDescription("personal details information");
    personalDetailsPane.setActivatingEvent("personalDetails");
    personalDetailsPane.setPaneSelectionMember(true);
 
    //Create and configure the payment info pane.
    PaneMetaData paymentPane =
        new PaneMetaData(PaymentPane.class, "Payment Info");
    paymentPane.setPaneSelectionMember(true);
    paymentPane.setActivatingEvent("paymentPane");
 
    //Add panes to the editor.
    editorConfig.addEditorPane(personalDetailsPane);
    editorConfig.addEditorPane(paymentPane);
 
    //Set default pane.
    editorConfig.setDefaultEditorPane(PersonalDetailsPane.class);
 
}