Step 2: Creating an Editor Component

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:
Syntax
1. ```
public void setupEditor(
    IEditorConfiguration editorConfig,
    IPortalComponentProfile profile,
    Map params,
    ResourceBundle editorTexts) {

}
```
End of the code.
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.
  Syntax
  1. PaneMetaData personalDetailsPane = new PaneMetaData(PersonalDetailsPane.class, "Personal Info");
  End of the code.
2. Set the tooltip displayed when hovering over the radio button that displays the pane.
  Syntax
  1. personalDetailsPane.setDescription("personal details information");
  End of the code.
3. Set the server event that causes the pane to be displayed.
  Syntax
  1. personalDetailsPane.setActivatingEvent("personalDetails");
  End of the code.
  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.
  Syntax
  1. personalDetailsPane.setPaneSelectionMember(true);
  End of the code.
  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.
Syntax
1. ```
editorConfig.addEditorPane(personalDetailsPane);
```
End of the code.
Specify the default pane, that is, the pane that is displayed when the editor is launched.
Syntax
1. ```
editorConfig.setDefaultEditorPane(paymentPane);
```
End of the code.
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:
Syntax
1. ```
    <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>
```
End of the code.

Result

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

Syntax Syntax

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);

}

End of the code.