Extensibility workbench of the web UI framework for application developers

The Web UI Framework includes an Extensibility Workbench that allows you to use WYSIWYG tools in an existing application to put overlays on a screen's user interface configuration. 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.

The Web UI framework includes the following components:
  • Extensibility Workbench

    Used to extend an out-of-the-box screen. JavaScript source files are generated containing the overlays, and are included along with the out-of-the-box screen's source files. This is accomplished by the loading of JavaScript libraries.

  • Designer Workbench

    Used to design new screens.

The Extensibility Workbench can be run and used only within an existing installation of an application. The Designer Workbench can be run as either a stand-alone application or it can be accessed from the Extensibility Workbench. If you access the Designer Workbench from the Extensibility Workbench, you can use the Back button to return to an application. However, you will need to re-activate the Extensibility Workbench.

Screens designed in the Designer Workbench have to be deployed and run in an existing installation of an application to see the functional behavior. In the Extensibility Workbench, extensions are added to a screen in a live application. If a change is made to a screen, the changes can be viewed instantly.

To extend a screen using the Extensibility Workbench, navigate to the corresponding screen and then start extending it.

Functional overview

The user interface layout of the Extensibility Workbench is similar to the Designer Workbench, with multi-tabbed editors and views. In the Designer Workbench, the components are edited on a canvas. With the Extensibility Workbench, the screen acts as a canvas that allows the editing of out-of-the-box components on an existing screen. You can show a screen with and without extensions applied to it.

Tools for model validators and screen localization are available to assist extension development.

Technical overview

The Extensibility Workbench is built using the Ext JS JavaScript framework. Differential extensions to a screen are stored in a file in the JSON metadata format. This format stores the extension's properties overlays to be applied onto the base screen. It also is used to generate extension code blocks to which a template is applied.

The following is an example of metadata for differential extensibility. The overlays item shows what was changed using the Extensibility Workbench.

{
   type: "SCREEN_EXTENSION",
   version: "",
   extension: {
       className: "com.zzz.AnExtension",
       superclassName: "sc.plat.ui.Extension",'
       overlays: [
            {
               op: 'change',  //operation type
               sciId: 'view',   //reference of the component being change'd
               config: <a_config_object_metadata>
            },
            { ... }, { ... }
       ]
    }
}

This metadata references the config object metadata a_config_object_metadata.

A property can have different types of values, so the config object metadata needs to capture the property type. Additionally, every config object needs a definition that provides properties and validation rules for the object.

The following is an example of config object metadata:

a_config_object_metadata = {
   property1: {
       type: <type_of_property>,
       value: <property_value>
    },
   property_string: {
       type: 'string',
       value: 'aString'
    },
   property_expr: {
       type: 'expr',
       value: '(x+y)'
    },
   property_object: {
       type: 'object',
       value: <another_config_object_metadata: { ... }>
   },
    defid: <id_of_config_object_definition>
}

From the above metadata, the resulting config object would be: 

a_config_object = {
    property1: <aValue>,
    property_string: 'aString',
    property_expr: (x+y),
    property_object: <another_config_object>
}