Usando o Extensibility Workbench do Web UI Framework para Modificar um Widget

É possível modificar um widget usando o Web UI Framework Extensibility Workbench.

Procedimento

  1. No aplicativo, abra a tela que deseja alterar.
  2. Clique em Shift + barra de espaço.
  3. Revise e aceite os Termos e Condições de Uso do Extensibility Workbench.

    O Extensibility Workbench é ativado, contanto que você também tenha concluído o Mapeamento de Diretório para URL e associado um arquivo à tela. Qualquer uso subsequente da tecla de atalho Shift + barra de espaço oculta e, em seguida, reativa o ambiente de trabalho até que o navegador seja atualizado ou uma nova tela seja aberta, no caso em que a janela de Termos e Condições é exibida novamente.

    Se você recusar os termos e condições, o ambiente de trabalho não ativará.

    As ferramentas do Extensibility Workbench aparecerão em diferentes visualizações. Pode ser necessário clicar no botão de sinal de mais na barra de ferramentas do Extensibility Workbench para exibir todas as visualizações.

  4. Clique no botão de sinal de mais para mostrar todas as visualizações ou no botão de sinal de menos para minimizar todas as visualizações. Quando todas as visualizações estiverem minimizadas, será possível clicar na guia de uma visualização para exibir apenas essa visualização. Quando uma visualização é exibida, é possível minimizar a visualização ao clicar no sinal de menos no canto superior direito da visualização.
  5. Antes de poder trabalhar com um widget em uma tela, será necessário selecionar ou associar o arquivo de extensão à tela. O arquivo de extensão armazena as extensões (mudanças) na tela. A caixa de diálogo Incluir arquivo de extensão para a tela aparece quando você tenta trabalhar em um widget pela primeira vez.

    O arquivo de extensão contém metadados sobre suas mudanças. Os arquivos de extensão são salvos em seu diretório de trabalho atual. Eles podem ser visualizados na guia Arquivos da visualização Paleta & Arquivos.

    Quando o Extensibility Workbench está ativado pela primeira vez, o diretório de trabalho atual é padronizado para o diretório inserido durante o mapeamento. É possível alterar isso posteriormente na guia Arquivos.

    1. Na caixa de diálogo Incluir arquivo de extensão para a tela , especifique o arquivo de extensão usando o botão de procura para selecionar um arquivo existente ou digitando o nome do arquivo no campo Arquivo de extensão

      Digite o nome do arquivo se você deseja associar/criar um novo arquivo. Se já tiver estendido a tela e tiver um arquivo de extensão para a tela, é possível procurar o arquivo.

    2. Clique no botão OK .

      Se aparecer uma caixa de diálogo que inclua a mensagem O arquivo selecionado contém a origem que não corresponde à tela atual., clique em OK para sobrescrever o arquivo ou Cancelar para escolher outro arquivo. Esta mensagem geralmente significa que você escolheu o arquivo de metadados errado.

    Após salvar as extensões em uma tela e implementar essas mudanças no aplicativo, não será necessário incluir o arquivo de extensão para fazer mudanças adicionais na tela. O arquivo de extensão será automaticamente carregado com a tela.

    Após selecionar esse arquivo de extensão, as ações de visualização a seguir ocorrerão:
    • A visualização da Estrutura de Tópicos preenche com informações sobre os widgets na tela.
    • A Visualização Detalhes da Tela preenche com informações sobre o arquivo de extensão.

      O campo Nome da Classe de Extensão exibe o nome da classe de extensão gerada. É possível mudar esse nome.

    • A visualização Propriedades exibe as propriedades originais do widget.
  6. Para incluir um widget na tela, selecione o widget na guia Paleta. Clique com o botão direito ou esquerdo no local na tela onde deseja que o widget apareça.

    Quando incluir um novo widget, a propriedade sciId do widget deverá incluir o prefixo extn_ padrão. Isso diferencia um componente estendido de um componente pronto para uso.

  7. Para alterar um widget, selecione na tela ou na visualização de Estrutura de Tópicos.
  8. Para alterar ou criar uma propriedade de widget, faça o seguinte. Para obter mais informações sobre propriedades de widget, consulte a documentação da estrutura Ext JS para a Versão 2.2.1 ou Versão 3.0.2.
    • Se desejar alterar as propriedades de um item, clique no botão Atualizar Instâncias na visualização Detalhes da Tela para tornar essas mudanças de propriedade ativas.

      Se desejar alterar as propriedades de um item existente, uma grade separada intitulada “Propriedades Originais” aparece, exibindo os valores da propriedade original deste item.

      A grade “Propriedades Originais” não é mostrada para nenhum novo componente incluído pela extensibilidade. Quaisquer novas propriedades incluídas pela extensibilidade são listadas em uma grade separada acima da grade "Propriedades Originais" (se o componente estiver presente na tela de base).

      Não é possível alterar uma propriedade listada em “Propriedades Originais”. Entretanto, é possível substituir uma propriedade existente ou incluir novas propriedades em um componente pronto para uso.

    • Para criar uma nova propriedade para um item, clique no botão Incluir na visualização Propriedades. Antes de clicar no botão Incluir, a propriedade desejada deverá ser selecionada na lista suspensa de propriedades disponíveis.
  9. Para salvar suas alterações no diretório do projeto (mas não implementá-las), clique no botão Salvar na visualização Detalhes da Tela.
  10. Para trabalhar em outra tela, acesse a outra tela e, em seguida, reative o Extensibility Workbench clicando em Shift + barra de espaço.
  11. Depois de ter salvo todas as extensões de tela, você deve implementar as mudanças nelas para que entrem em vigor no aplicativo.