Designer Workbench do Web UI Framework para Desenvolvedores de Aplicativos

O Designer Workbench permite usar as ferramentas WYSIWYG para construir novas telas para um aplicativo. Ele possui ferramentas semelhantes às ferramentas do Extensibility Workbench, que é usado para alterar as telas de uma instalação pronta para uso de um aplicativo.

É possível acessar o Designer Workbench de duas formas:

Uma URL.
Os desenvolvedores de aplicativos acessam o Designer Workbench com esse método.
Um link no Extensibility Workbench.
Os desenvolvedores customizados acessam o Designer Workbench com esse método.

Nota: Embora seja possível acessar o Designer Workbench a partir de uma instalação pronta para uso de um aplicativo, você está limitado nas mudanças que podem ser feitas. Trabalhe com o Suporte ao Cliente do IBM® ao mudar uma instalação pronta para uso usando o Designer Workbench

Visão Geral Funcional

O layout da interface com o usuário do Designer Workbench inclui editores e visualizações em formato de diversas guias. Use essas visualizações para trabalhar com:

Widgets
Origens de dados
Arquivos do projeto
Layouts de Tela
Hierarquia de componente
Propriedades do Componente
Modelos de Códigos

Visão geral técnica

A UI do Designer Workbench é construída usando a estrutura Ext JS JavaScript . Os elementos de UI de uma tela são armazenadas em um arquivo no formato de metadados do JSON. Estes metadados são usados para gerar objetos de configuração de extensão, que podem ser editadas no Ext JS. O Ext JS suporta a edição de objetos de configuração apenas para criar ou alterar componentes da UI

Os componentes da paleta residem em um registro de componente. A classe de componente estende a classe sci.ide.DefComponent. Use os atributos a seguir da classe sci.ide.DefComponent para incluir um novo componente no registro do componente do Designer Workbench:

Atributo	Descrição
ID	O ID exclusivo do componente que é usado para distinguir entre todos os componentes disponíveis no Designer Workbench.
tipo	O tipo registrado do componente. Geralmente é o xtype do componente.
Texto	O texto de exibição do componente.
acrônimo	O acrônimo do componente. É usado para nomear automaticamente as instâncias de variáveis.
iconCls	A classe de ícone css que é usada como o ícone do componente.
categoria	A categoria na qual o componente é agrupado. Para incluir o componente no Design Workbench, ele deverá ser agrupado em Controles, Painéis ou Outros. Se uma nova categoria precisar ser criada, essa categoria deverá ser registrada.
nomeada	Uma propriedade booleana que é padronizada para true se o componente estender sci.ide.DefComponent. Quando um componente nomeado é incluído em uma tela, uma propriedade sciId autogerada é incluída nele.
applyDefaults	Esse método aceita o modelo (um objeto que contém propriedades associadas a um componente) do componente que está sendo criado como seu argumento e aplica as propriedades padrão do componente no modelo.
getProperties	Esse método retorna uma coleção (Ext.util.MixedCollection) de todas as definições de propriedade do componente. O ID da propriedade é a chave que é mapeada para uma definição de propriedade. As propriedades podem ser incluídas em um Registro de Propriedades para acesso global. Uma definição de propriedade é um objeto JavaScript com os seguintes atributos: ID O identificador exclusivo de uma propriedade. Se a propriedade estiver presente em Ext docs, ela poderá ser igual à opção de configuração do construtor do Componente. tipo O tipo de dados da definição de propriedade. isArray Um valor booleano que indica se a propriedade atual é uma matriz. getDefaultValue Um método que retorna o valor padrão da propriedade. getDefObject Um método que fornece a definição de propriedade para o responsável pela chamada. getValues Um método que retorna uma matriz de todos os valores possíveis da propriedade.
resolveLink	Esse método deve ser implementada se o componente sendo incluído for um contêiner, ou seja, ele pode aceitar qualquer outro componente/contêiner do Designer Workbench. Ele é usado para decidir se o componente que está sendo incluído pode ser aceito como um filho.
validar	Esse método aceita o modelo do componente como o argumento e verifica se o componente está no estado de erro. Se o modelo possuir erros (conjunto inconsistente de propriedades e valores), ele poderá mostrar erros, avisos ou sugerir correções (se disponível).