Extensibility Workbench do Web UI Framework para Desenvolvedores de Aplicativos

O Web UI Framework inclui um Extensibility Workbench que permite usar as ferramentas WYSIWYG em um aplicativo existente para colocar sobreposições em uma configuração da interface com o usuário da tela. Apesar de os desenvolvedores de aplicativos usarem mais o Ambiente de Trabalho de Designer, o Ambiente de Trabalho de Extensibilidade é útil para testar e simular o comportamento das ferramentas do Web UI Framework na interface com o usuário real.

O Web UI framework inclui os componentes a seguir:
  • Extensibility Workbench

    Utilizado para estender uma tela pronta para uso. Os arquivos de origem JavaScript são gerados contendo as sobreposições e são incluídos juntamente com os arquivos de origem da tela prontos para uso.. Isso é realizado pelo carregamento de bibliotecas JavaScript ..

  • Designer Workbench

    Utilizado para projetar novas telas.

O Extensibility Workbench pode ser executado e usado apenas dentro de uma instalação existente de um aplicativo. O Designer Workbench pode ser executado como um aplicativo independente ou pode ser acessado do Extensibility Workbench. Se você acessar o Designer Workbench a partir do Extensibility Workbench, será possível usar o botão Voltar para retornar para um aplicativo. Entretanto, será necessário reativar o Extensibility Workbench.

As telas projetadas no Designer Workbench devem ser implementadas e executadas em uma instalação existente de um aplicativo para ver o comportamento funcional. No Extensibility Workbench, as extensões são incluídas em uma tela em um aplicativo em tempo real. Se uma mudança é feita em uma tela, as mudanças podem ser visualizadas instantaneamente.

Para estender uma tela usando o Extensibility Workbench, navegue até a tela correspondente e comece a estendê-la.

Visão Geral Funcional

O layout da interface com o usuário do Extensibility Workbench é semelhante ao do Designer Workbench, com editores e visualizações com diversas guias. No Designer Workbench, os componentes são editados em um painel. Com o Extensibility Workbench, a tela age como um painel que permite editar componentes prontos para uso em uma tela existente. É possível mostrar uma tela com ou sem extensões aplicadas a ela.

Ferramentas para validadores de modelos e localização de telas estão disponíveis para ajudar o desenvolvimento da extensão.

Visão geral técnica

O Extensibility Workbench é construído usando a estrutura Ext JS JavaScript . As extensões diferenciadas de uma tela são armazenadas em um arquivo no formato de metadados JSON. Este formato armazena as sobreposições de propriedades da extensão a serem aplicadas na tela de base. Ele também é usado para gerar blocos de códigos de extensão em que um modelo é aplicado.

A seguir, está um exemplo de metadados para extensibilidade diferenciada. O item de sobreposições mostra que foi alterado usando o 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>
            },
            { ... }, { ... }
       ]
    }
}

Estes metadados referenciam os metadados do objeto de configuração a_config_object_metadata.

Uma propriedade pode ter tipos de valores diferentes, de forma que os metadados do objeto de configuração precisam capturar o tipo de propriedade. Além disso, cada objeto de configuração precisa de uma definição de que forneça propriedades e regras de validação para o objeto.

A seguir há um exemplo de metadados de objeto de configuração.

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 dos metadados acima, o objeto de configuração resultante seria:

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