Extensibility Workbench de la infraestructura de interfaz de usuario web para desarrolladores de aplicaciones

La infraestructura de interfaz de usuario web incluye el entorno de trabajo Extensibility Workbench, que permite utilizar herramientas WYSIWYG en una aplicación existente para colocar superposiciones en una configuración de la interfaz de usuario de la pantalla. Aunque los desarrolladores de aplicaciones utilizan en su mayoría el entorno de trabajo Designer Workbench, Extensibility Workbench resulta de utilidad para probar y simular el comportamiento de las herramientas de la infraestructura de interfaz de usuario web de la interfaz de usuario real.

La infraestructura de interfaz de usuario web incluye los componentes siguientes:
  • Extensibility Workbench

    Se utiliza para ampliar una pantalla estándar. Los archivos de origen JavaScript se generan con los preformatos y se incluyen junto con los archivos de origen de la pantalla predefinidos. Esto se consigue cargando las bibliotecas de JavaScript .

  • Designer Workbench

    Se utiliza para diseñar pantallas nuevas.

Extensibility Workbench se puede ejecutar y utilizar sólo dentro de una instalación existente de una aplicación. El entorno de trabajo de Designer Workbench se puede ejecutar como una aplicación autónoma o se puede acceder a él desde Extensibility Workbench. Si accede a Designer Workbench desde Extensibility Workbench, puede utilizar el botón Atrás para volver a una aplicación. No obstante, deberá volver a activar Extensibility Workbench.

Las pantallas diseñadas con Designer Workbench deben desplegarse y ejecutarse en una instalación existente de una aplicación para ver el comportamiento funcional. En Extensibility Workbench, las extensiones se añaden a la pantalla en una aplicación activa. Si se realizan cambios en una pantalla, éstos se verán inmediatamente.

Para ampliar una pantalla mediante Extensibility Workbench, vaya a la pantalla correspondiente y empiece a ampliarla.

Visión general funcional

El diseño de la interfaz de usuario de Extensibility Workbench es similar al de Designer Workbench, con editores y vistas de varias fichas. En Designer Workbench, los componentes se editan en un lienzo. Con Extensibility Workbench, la pantalla actúa como un lienzo donde puede editar componentes estándar de una pantalla existente. Puede mostrar una pantalla con o sin las extensiones aplicadas.

Para facilitar el desarrollo de las extensiones tiene a su disposición herramientas para validadores de modelo y localización de pantallas.

Visión general técnica

Extensibility Workbench se crea utilizando la infraestructura JavaScript de Ext JS. Las extensiones diferenciales de una pantalla se almacenan en un archivo en el formato de metadatos JSON. Este formato almacena las superposiciones de propiedades de la extensión para que se apliquen sobre la pantalla base. También se utiliza para generar bloques de código de extensión al que se aplica una plantilla.

A continuación se muestra un ejemplo de metadatos de la extensibilidad diferencial. El elemento de superposición muestra lo que se ha modificado mediante 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>
            },
            { ... }, { ... }
       ]
    }
}

Estos metadatos hacen referencia a los metadatos de objeto a_config_object_metadata.

Una propiedad puede tener distintos tipos de valores, de modo que los metadatos de objetos de configuración deben capturar el tipo de propiedad. Adicionalmente, cada objeto de configuración necesita una definición que proporcione propiedades y reglas de validación al objeto.

A continuación se muestra un ejemplo de metadatos de objeto de configuración:

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>
}

A partir de los metadatos anteriores, el objeto de configuración resultante sería:

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