Extensibility in the web UI framework for application developers

Extensibility allows you to customize the user interface of an out-of-the-box installation of an application using the Extensibility Workbench. Although application developers mostly use the Designer Workbench, the Extensibility Workbench is useful for testing and simulating the behavior of the Web UI Framework tools of the actual user interface.

You can open an existing screen and bring up the same user interface tools that were used by application developers to build the screen using the Designer Workbench. You can add controls (like buttons, labels, and grid columns), panels, data sources, and other items. The Extensibility Workbench allows you to personalize and localize an application.

Note: When customizing the interface, copy the standard resources of an application and then modify your copy. Do not modify the standard resources of an application.

Functional overview

Extensibility allows you to customize an existing installation of an application at runtime without recompiling or changing the original source code.

Extensibility works in two areas of an application:
  • Extensibility in the UI helps to show more relevant and organized data to the end user. It also helps in showing a personalized or a localized version of an application.

    UI extensibility allows you to add new widgets to a UI screen, hide existing widgets, override default field labels, customize the theme for an application , and other UI-related tasks.

    UI extensibility takes two basic forms:
    • Override extensibility, in which you completely replace the out-of-the-box screens with new screens. Use the Designer Workbench for this task.
    • Differential extensibility, in which you change parts of the out-of-the-box screens. Use the Extensibility Workbench for this task.

      The changes that one can make to an existing component using differential extensibility are limited to a particular set of properties. This ensures that arbitrary properties are not allowed to change, resulting in upgrade issues.

    You can work with override extensibility in the following layers: Struts, mashup, presentation, and XAPI mashup. With differential extensibility, you can work with only the presentation and XAPI mashup layers.

  • Extensibility in the backend helps you perform custom business logic and processing. Custom logic can be driven by integration with other applications, changed use cases, and other special requirements of an application.

    Backend extensibility allows you to change the server-side APIs to perform the customized business logic.

Technical overview

UI framework extensibility has the following technical details:
  • The HTML UI is based on the Ext JS JavaScript framework.

    In the Ext JS-based class hierarchy, various JavaScript libraries have their own class-based hierarchy for creating object models. The Web UI Framework uses the Ext JS-based class hierarchy for this purpose.

  • Every screen is identified by an identifier (className) that must be unique across an application.
  • Every component within a screen is identified by an identifier (sciId) that must be unique within the screen.
  • Once a component has been added to the base screen, it should not be removed. If a component is removed, and an extension was applied with regard to the removed component, the extension might not display after an upgrade.
Backend extensibility has the following technical details:
  • To get the extended JSP file, the extensibility mechanism appends extn to the path to get the complete src (source) path of the extension file.
  • Applications consuming only the Base UI Framework will provide the custom extensibility mechanism as defined in the Base UI Framework's interface contract. There will not be any default implementation in the Base UI Framework.
  • The extended mashup class makes XAPI calls and other kinds of calls. If a XAPI mashup is being extended, then a XAPI call also should be made.
  • If the extensibility mechanism is not given in the backend of an application, an error will occur and be logged.
  • If the mashup implementation is not given in the backend of an application, an error will occur and be logged.
To build an extensible application, it is essential to follow strict design guidelines. In the Web UI Framework, this involves the following:
  • Adding business logic (rules and conditions) in a mashup so that it is easy to re-use and change.
  • Using the client-side JavaScript component (Ext JS) to build a rich and responsive user interface (without business logic).