Show TOC

Step 1: Creating PanesLocate this document in the navigation structure

Use

An editor contains one or more panes that contain the input fields, buttons and other controls that make up the user interface.

An editor with a single visible pane displays the title of the pane in the title bar of the editor, just below the toolbar. An editor with more than one visible pane displays in the title bar a radio button group that enables the user to navigate between panes.

Note

When possible, use wizard framework controls for building the pane's user interface. Each of these controls enable you to associate it with an item in the data model so that the wizard framework automatically saves the control's value to the data model.

If the wizard framework does not contain the control that you need, you can use HTMLB controls, but you will have to manually save the control's value to the data model in the processInput() method for that pane.

Procedure

For each pane, perform the following:

  1. Create a new class that implements IEditorPane .

  2. Implement createUI() , in which you build a user interface with the help of wizard framework and HTMLB controls. The following is the method's signature:

                      public void createUI(IEditorContext context, IWorkspace workspace) {
    }
    
                   

    The IWorkspace object passed into the method represents the entire editor window.

  3. From the workspace, get the IEditorContainer , which represents the area of the editor window set aside for your custom user interface.

                      public void createUI(IEditorContext context, IWorkspace workspace) {
    }
    
                   
  4. Create your user interface with wizard framework and HTMLB controls that you add to the editor's IEditorContainer object.

    For example, the following adds an input field called lastnameID, whose initial value is set to the value stored in the data model property called details.lastName , and the field is enabled or disabled based on whether the editor is read only.

                      InputField lastName = new InputField("lastNameID");
    lastName.setValue(ctx.getProperty("details.lastName"));
    container.addComponent("Last Name", lastName);
    lastName.setEnabled(!ctx.isReadOnly());
    
                   

    For more information on HTMLB controls, see HTML-Business for Java .

  5. Implement the following IEditorPane methods, which are called on every request for the pane:

    • init(): Perform any initialization for the pane.

    • getEditorResources(): Load any resources for the pane, such as JavaScript files or style sheets.

    • processInput(): Store user input from HTMLB controls in the editor context. The editor context and the HTMLB page context are passed into the method.

      For example, for an HTMLB input control called lastNameID , the following stores the user input in the editor context property called details.lastName :

                              context.setProperty("details.lastName",
         pageContext.getDataForComponentId("lastNameID").
            getValueAsString());
      
                           

      User input for wizard framework controls are automatically stored in the editor context.

Options

The following lists additional steps that you can perform within the pane class:

  • Set Read-Only State: You can determine if the editor and, therefore, the pane should be read only, and then set the editor context to read only for the current request, as follows:

                         context.setReadOnly();
                      
  • Navigate to Another Pane: To navigate to another pane, trigger the server event that was set for that pane. For example, the following creates an HTMLB button called creditCardID whose onClick event raises the creditPane event:

                         Button creditCard = new Button("creditCardID");
    creditCard.setOnClick("creditPane");
    
                      

    This causes the creditPane server event to be triggered. The editor navigates to the credit pane if the credit pane's activating event was set to creditPane , as follows:

                         creditCard.setActivatingEvent("creditPane");
                      

    For more information on creating instances of panes and setting the activating event, see Step 2: Creating an Editor Component .

    For more information on events, see Events .

  • Create a Custom Toolbar: You can create a toolbar of custom buttons at the bottom of the pane. The following example shows how to create a custom toolbar button:

                         Action action = new Action("myAction","My Action");
    workspace.getToolBar().add(action);
    
                      

    When an administrator clicks the custom button, a server-side event is triggered whose name is the first parameter in the constructor for the button. In the above example, an event called myAction is triggered, and the event is handled by the pane's doMyAction() method.