Show TOC

Procedure documentationAdding Custom Controls to Mobile Applications for Handhelds Locate this document in the navigation structure

 

You add the custom control to the required View in the UI component to use the nonstandard UI functions of the custom control.

All custom controls are represented using the Interactive Form control. The Interactive Form control is added as a placeholder in the view. You can include the common properties of the custom control and native control in the Properties View. All properties that are specific to a custom control are coded in the view of the UI component.

Prerequisites

You have created and packaged one or more custom controls.

More information:

Procedure

  1. In the Mobile Applications for Handhelds perspective, navigate to the Handhelds UI Explorer tab page.

  2. Under   Web Dynpro   Components   <<Component Name>>   Views  , double-click the required view to open the view editor.

  3. Select the Interactive Form control.

  4. Edit the properties of the control in the Properties tab page.

  5. Navigate to the Java perspective.

  6. Create a custom_control.properties file and place it in the src/packages folder in the UI component.

  7. Specify the key values in the custom_control.properties file.

    1. Assign the factory class for the Wdlite-custom-control-factory-class-1 key.

    2. Assign the custom control ID for the Wdlite-custom-control-factory-ids-1 key.

    Example Example

    There are two keys listed in the custom_control.properties file:

    • Wdlite-custom-control-factory-class-1=com.sap.SampleFlatButtonCustomWidgetFactory

      The SampleFlatButtonCustomWidgetFactory implements IUIElementFactory interface.

    • Wdlite-custom-control-factory-ids-1=FlatButton

      This key lists the ID of the custom control. If there are multiple custom controls, these are separated by commas.

    End of the example.

  8. In the Mobile Applications for Handhelds perspective, navigate to the Handhelds UI Explorer tab page.

  9. In the Java Editor of the view, add the nonstandard properties of the custom control in the wdDoModifyView(App1ViewView view, boolean firstTime) method.

    Example Example

    public void wdDoModifyView(CustomappCompViewView view, boolean firstTime)

    { //@@begin wdDoModifyView()

    // Gets the UI control based on the ID given in the custom_control.properties

    view.getInteractiveFormViewItem().setUIControlSubType("Test");

    //Setting the text property of the button

    view.getInteractiveFormViewItem().setPropertyValue("text", "custom button");

    //@@end }

    End of the example.

  10. Write the event handling code for the custom control.

    Example Example

    /**

    * Event handler [onActionOnclick]

    */ public void onActionOnclick (Event wdEvent) {

    //@@begin onActionOnclick(ServerEvent)

    if(wdEvent.getEventData("EventData").toString()=="CreateEmployee") {

    //Write code for the Onclick event

    }

    //@@end

    }

    End of the example.

  11. Build and deploy the UI component.