Web Dynpro - Aula 05

Desenvolvimento Pessoal
Agenda
Ajuda semântica;
Reutilização de componentes;
Popups;
Ajuda semântica
Existem diferentes possibilidades para exibição de textos de ajuda no WebDynpro.
Textos de ajuda podem estar relacionados a elementos de UI.
Um bom exemplo destes são os “tool tips”: ajudas disponibilizadas quando movemos
o cursor em cima de um determinado campo.
Para informações mais detalhadas, podemos exibir textos explicativos logo abaixo do
campo em questão.
Podemos também utilizar a tecla de atalho “F1” para exibir uma ajuda.
Ajuda semântica
Tool Tips
Permitem que pequenos textos (< 255) sejam exibidos destacados em uma caixa
amarela.
Esta caixa aparece quando o mouse é posicionado em cima do campo contendo a

informação.
A informação desaparece quando retiramos o cursor do campo.
Adicionamos um tool tip a um elemento de UI através da propriedade tooltip do

mesmo.
O texto relacionado na mesma pode possuir uma das origens vistas anteriormente
(dicionário de dados, atributo do contexto, etc).
Ajuda semântica
Tool Tips
Ajuda semântica
Textos explicativos
Assim como o tooltip, o texto explicativo irá aparecer quando posicionamos o cursor
sobre o label do elemento de UI relacionado.
O label de um elemento de UI ficará sublinhado de verde caso o mesmo possua um

texto explicativo.
Adicionamos um texto explicativo a um elemento através da propriedade

explanation.
Ajuda semântica
Textos explicativos
Ajuda semântica
Textos explicativos
O usuário pode habilitar e desabilitar os textos explicativos através do menu de

contexto da aplicação.
Podemos definir a propriedade explanation para os seguintes elementos:
• TableColumn, Button,
• CheckBox, RadioButton, TriStateCheckBox,
• DropDownByIndex, DropDownByKey,
• FileUpload, InputField, ItemListBox, TextEdit.
Ajuda semântica
Textos explicativos
Ajuda semântica
F1
Por padrão, a ajuda acessada via F1 definida para um determinado elemento de
dados será exibida para um elemento de UI, caso este esteja relacionado a um
atributo de contexto deste tipo.
Para exibir a ajuda do campo, o usuário deve pressionar CTRL + F1 (estando o cursor
posicionado sobre o campo).
Outra maneira é utilizar o botão direito do mouse e selecionar a opção “Mais ajuda
de campo...”
Ajuda semântica
F1
Ajuda semântica
Ajudas independentes de campo
Para exibir textos de ajuda independentes ou que sirvam para mais de um campo
podemos utilizar o elemento Explanation UI.
Utilizamos este elemento para disponibilizar um texto de maneira permanente na

tela, em uma área reservada.
Obs: Não é possível associar a propriedade text deste elemento (responsável pelo
texto) com um nó do contexto.
Ajuda semântica
Ajuda semântica
Reutilização de componentes
Se uma funcionalidade será aproveitada em mais de uma aplicação WebDynpro,

devemos componentizar a implementação da mesma, tornando-a reutilizável.
Além disto, existem alguns componentes já disponíveis no WebDynpro que

implementam soluções específicas, tais como:
WDR_OVS: search help;
WDR_MESSAGE_AREA: exibição de mensagens;
SALV_WD_TABLE: exibição de dados através de um List Viewer;
WDR_SELECT_OPTIONS: utilização de seletores…
Podemos ter um componente que irá funcionar como um consumidor de demais

componentes.
Em tempo de projeto, o desenvolvedor prepara este consumidor para a reutilização

de cada sub-componente.
Em tempo de execução é possível dar ao usuário a capacidade de escolher qual

componente será utilizado em uma determinada área.
O acesso externo a um componente é fornecido através da interface do controlador

(1) e das interfaces das visões (n).
Podem existir compenentes sem nenhuma interface visual, chamados de “faceless

components”.
A interface do controlador pode possuir métodos, eventos e nós do contexto.
Para tornar métodos e eventos disponíveis devemos marcar a propriedade Interface

de cada um.
Para tornar um nó no contexto disponível, devemos marcar a propriedade

InterfaceNode do mesmo.
Todos os filhos deste nó (atributos e nós) também farão parte da interface.
Se marcarmos a opção Input Element (Ext.) tornamos obrigatório o mapeamento

deste nó em qualquer componente consumidor.
Para cada janela definida em um componente, uma interface de visão será gerada.
Cada janela pode possuir plugs (inbound e outbound) que podem ser expostos
através da interface.
Ao criarmos uma janela, um inboud plug dafault é criado, de maneira a permitir o

acesso à mesma.
Declarando o uso de um componente
Se um componente pretende consumir outro, este último deve estar declarado na
aba propriedades como um “Used controller”.
A coluna Utilização Componente contém o nome da variável de referência ao

controlador utilizado, sendo esta utilizada ao longo do código para acesso às
funcionalidades do mesmo.
Declarando o uso de um componente
Instanciando um componente
A simples declaração de utilização de um determinado componente não implica em
sua instanciação.
Devemos realizar esta instanciação no código fonte.
Para cada componente utilizado, um método wd_cpuse_<comp_usage>( ) é criado,

sendo acessado pela referência wd_this.
Este método irá retornar um objeto do tipo if_wd_component_usage.

Instanciando um componente
Dentre outros, esta interface possui os seguintes métodos:
• CREATE_COMPONENT: instancia e retorna um objeto;
• DELETE_COMPONENT: libera o endereço de memória de uma instância;
• HAS_ACTIVE_COMPONENT: indica se já existe uma instância para o controlador
em questão.
O uso do método delete_component é “opcional”. Não sendo utilizado, o

componente estará ativo enquanto o consumidor estiver.
Interface de visões
Através das interfaces das visões a parte visual de um componente fica disponível
para utilização em outros componentes.
Um outbound plug de um componente consumidor pode ser conectado a um

inbound plug do componente consumido.
Podemos passar parâmetros nesta ligação, assim como podemos apresentar

diferentes visualizações de acordo com o outbound plug disparado.
Interface de visões
Métodos da interface
Métodos definidos na interface do componente podem ser acessados por qualquer
controlador do componente consumidor.
O componente a ser utilizado deve ser declarado na aba propriedades do

controlador em questão.
Devemos obter uma referência para a interface do controlador que será utilizado
(diferente de obter uma referência ao próprio controlador.
Para cada componente delclarado como utilizado, um método

wd_cpifc_<used_component>( ) será criado pelo framework na referência wd_this.
lo_cmp_usage: referência ao componente.

Lo_interfacecontroller: referência à interface do controlador.
Eventos da interface
No componente consumidor, podemos definir métodos que tratem eventos
definidos na interface dos componentes utilizados.
O componente utilizado pode passar informações ao consumidor através dos

parâmetros do evento.
O componente utilizado dispara um evento. No componente consumidor existe um

método para tratar este evento disparado.
Lembrando que, em cada controlador que utilize o componente, este deve estar
delarado na aba properties.
Contexto
Existem duas maneiras para mapearmos contextos presentes em componentes
diferentes:
1. Mapeamento de contexto direto: O contexto de origem é definido na interface
do componente utilizado.
2. Mapeamento de contexto externo: O contexto de origem é definido no
componente consumidor.
Utilizamos o mapeamento direto quando o componente utilizado fornece dados

para o componente consumidor.
O mapeamento externo é utilizado quando o componente utilizado precisa de

informações do componente consumidor para realizar a ação.
Contexto
Ao utilizarmos o mapeamento direto, devemos ter atenção ao ciclo de vida do
componente utilizado.
Conforme vimos, podemos explicitamente encerrar a atividade de um componente

utilizado.
Ao realizar tal procedimento, o contexto de origem não estará mais disponível.
O mapeamento direto é realizado de forma semelhante ao que vimos durante o

curso, tendo somente que o componente utilizado estar listado na aba propriedades
do controlador.
Contexto
Contexto
De maneira a estabelecer um mapeamento externo, a interface do componente
utilizado precisa acessar o contexto definifo em um controlador consumidor.
Temos então que o componente consumidor deve estar declarado como utilizado.
Para tal, devemos realizar o seguinte procedimento:

1. Selecionar os checkboxes Interface Node and Input Element (ext.) do nó de
destino;
2. No componente consumidor, declarar a utilização do componente utilizado
(properties);
3. No componente consumidor, declarar a utilização da interface do componente
utilizado (properties);
4. Dar um duplo clique nesta última;
5. Adicionar o componente consumidor na aba propriedades;
6. O mapeamento pode então ser realizado conforme padrão.
Utilização dinâmica de componentes
É possível tornar a utilização de componentes dinâmica, de maneira que a escolha

de qual componente será utilizado se dá em tempo de execução, dependendo de
determinada escolha do usuário.
A programação fica facilitada se todos os componentes passíveis de utilização

possuírem a mesma interface.
Para garantir que todos tenham a mesma interface, podemos definir esta como um
objeto independente.
Um componente WebDynpro pode implementar n interfaces:

• Cada interface implementada deve estar declarada na aba Interfaces
Implementadas do componente.
• Toda vez que a interface for atualizada, temos que atualizar a mesma no
componente que a implementa.
• O botão “Implementar de novo” dispara esta ação.
• Os métodos, o contexto e os eventos passam então a fazer parte do

componente.
Apagar uma interface da aba Interfaces utilizadas não apaga seus métodos, contexto
e eventos já definidos no componente que a implementa.
Os métodos, o contexto e os eventos não são diretamente mapeados para a

interface do componente, devendo o flag Interface ser marcado caso a caso.
Popups
Caixas de diálogo são utilizadas para exibir informações ao usuário ou possíveis

configurações em uma visão que será exibida em um popup, ou seja, em uma janela
destacada da atual.
Existem dois diferentes tipos d caixas de diálogo:
Externa: São abertas em outra janela do navegador, podendo ser descolcadas

ao redor da tela de maneira independente da janela que a chamou.
Modal: Aberta na janela corrente do browser.
Popups
A primeira parte do código fonte de uma caixa de diálogo independe de seu tipo,
consistindo das seguintes partes:
1. Primeiramente devemos obter uma referência para a API do controlador,
utilizando o método wd_get_api() da referência WD_COMP_CONTROLLER.
2. Este método irá retornar uma referência (ex: lo_api_comment) instância de
uma classe que implementa a interface IF_WD_COMPONENT.
3. Chamar o método lo_api_component->get_window_manager( ) de
maneira a obter uma referência para o gerenciador de mensagens.
Popups
A primeira parte do código fonte de uma caixa de diálogo independe de seu tipo,
consistindo das seguintes partes:
1. Primeiramente devemos obter uma referência para a API do controlador,
utilizando o método wd_get_api() da referência WD_COMP_CONTROLLER.
2. Este método irá retornar uma referência (ex: lo_api_comment) instância de
uma classe que implementa a interface IF_WD_COMPONENT.
3. Chamar o método lo_api_component->get_window_manager( ) de maneira
a obter uma referência (lo_window_manager) para o gerenciador de
mensagens.
4. Podemos então criar diferentes tipos de caixas de diálogo através de métodos
apropriados obtidos de lo_window_manager.
5. Uma referência do tipo IF_WD_WINDOW será obtida.
Popups
Popups
Caixas de diálogo externas
O método create_external_window() do gerenciador de janelas irá criar uma caixa de

diálogo externa.
Os parâmetros deste método permitem a configuração da URL e do título da página.
Existem também parâmetros booleanos para habilitar ou desabilitar:

• A barra de menu do navegador;
• Barras de rolagem;
• Barra de status;
• Barra de endereços;
• Barra de ferramentas.
O desenvolvedor pode também decidir se a janela poderá ser redimensionada ou

não.
Popups
Popups
Popups
Caixas de diálogo modais
Existem três diferente tipos de caixas de diálogo modais no WebDynpro:
• Confirmação: Utilizada para a exibição de textos simples, utilizando um padrão

de botões que irão definir o passo seguinte.
• Janela do componente: Exibe qualquer conteúdo desejado em uma janela do

próprio componente.
• Interface view de um componente utilizado: Exibe uma visão definida em outro

componente na forma de um popup.
Popups
Caixas de diálogo: Confirmação
Permitem a exibição de um texto qualquer.
Criada através do método create_popup_to_confirm() do gerenciador de janelas.
Podemos definir parâmetros para o texto e o título da janela.
Imagens podem ser associadas ao texto de acordo com o significado do mesmo.
Botões podem ser utilizados para associar determinada ação ao clique do usuário.
Popups
Popups
Popups
Caixas de diálogo: Janela do componente
Criada através do método create_window() do gerenciador de janela.
Podemos definir parâmetros que irão indicar qual janela do componente será
exibida, assim como seu título.
Também podemos definir botões e suas respectivas ações.
Um ícone, que irá aparecer no canto superior esquerdo, pode ser definido.
Popups
Popups
Popups
Caixas de diálogo: janela de outro componente
Criada através do método create_window_for_cmp_usage() do gerenciador de

janela.
Os parâmetros irão indicar qual janela do componente será exibida, assim como seu
título.
Também podemos definir botões e suas respectivas ações.Entretanto, estes não são
definidos no método de criação.
Através do mapeamento dos contextos, podemos passar informações entre os

componentes.
Popups
Popups
Popups

Web Dynpro - Aula 05

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Dynpro - Aula 05

Enviado por

Direitos autorais:

Formatos disponíveis

Desenvolvimento Pessoal

Existem diferentes possibilidades para exibição de textos de ajuda no WebDynpro.

Textos de ajuda podem estar relacionados a elementos de UI.

Esta caixa aparece quando o mouse é posicionado em cima do campo contendo a

A informação desaparece quando retiramos o cursor do campo.

Adicionamos um tool tip a um elemento de UI através da propriedade tooltip do

O label de um elemento de UI ficará sublinhado de verde caso o mesmo possua um

Adicionamos um texto explicativo a um elemento através da propriedade

O usuário pode habilitar e desabilitar os textos explicativos através do menu de

Utilizamos este elemento para disponibilizar um texto de maneira permanente na

Se uma funcionalidade será aproveitada em mais de uma aplicação WebDynpro,

Além disto, existem alguns componentes já disponíveis no WebDynpro que

Podemos ter um componente que irá funcionar como um consumidor de demais

Em tempo de projeto, o desenvolvedor prepara este consumidor para a reutilização

Em tempo de execução é possível dar ao usuário a capacidade de escolher qual

O acesso externo a um componente é fornecido através da interface do controlador

Podem existir compenentes sem nenhuma interface visual, chamados de “faceless

A interface do controlador pode possuir métodos, eventos e nós do contexto.

Para tornar métodos e eventos disponíveis devemos marcar a propriedade Interface

Para tornar um nó no contexto disponível, devemos marcar a propriedade

Todos os filhos deste nó (atributos e nós) também farão parte da interface.

Se marcarmos a opção Input Element (Ext.) tornamos obrigatório o mapeamento

Ao criarmos uma janela, um inboud plug dafault é criado, de maneira a permitir o

A coluna Utilização Componente contém o nome da variável de referência ao

Devemos realizar esta instanciação no código fonte.

Para cada componente utilizado, um método wd_cpuse_<comp_usage>( ) é criado,

Este método irá retornar um objeto do tipo if_wd_component_usage.

O uso do método delete_component é “opcional”. Não sendo utilizado, o

Um outbound plug de um componente consumidor pode ser conectado a um

Podemos passar parâmetros nesta ligação, assim como podemos apresentar

O componente a ser utilizado deve ser declarado na aba propriedades do

Para cada componente delclarado como utilizado, um método

lo_cmp_usage: referência ao componente.

O componente utilizado pode passar informações ao consumidor através dos

O componente utilizado dispara um evento. No componente consumidor existe um

Utilizamos o mapeamento direto quando o componente utilizado fornece dados

O mapeamento externo é utilizado quando o componente utilizado precisa de

Conforme vimos, podemos explicitamente encerrar a atividade de um componente

Ao realizar tal procedimento, o contexto de origem não estará mais disponível.

O mapeamento direto é realizado de forma semelhante ao que vimos durante o

Para tal, devemos realizar o seguinte procedimento:

É possível tornar a utilização de componentes dinâmica, de maneira que a escolha

A programação fica facilitada se todos os componentes passíveis de utilização

Um componente WebDynpro pode implementar n interfaces:

• O botão “Implementar de novo” dispara esta ação.

• Os métodos, o contexto e os eventos passam então a fazer parte do

Os métodos, o contexto e os eventos não são diretamente mapeados para a

Caixas de diálogo são utilizadas para exibir informações ao usuário ou possíveis

Existem dois diferentes tipos d caixas de diálogo:

Externa: São abertas em outra janela do navegador, podendo ser descolcadas

O método create_external_window() do gerenciador de janelas irá criar uma caixa de

Os parâmetros deste método permitem a configuração da URL e do título da página.

Existem também parâmetros booleanos para habilitar ou desabilitar:

O desenvolvedor pode também decidir se a janela poderá ser redimensionada ou

Existem três diferente tipos de caixas de diálogo modais no WebDynpro:

• Confirmação: Utilizada para a exibição de textos simples, utilizando um padrão

• Janela do componente: Exibe qualquer conteúdo desejado em uma janela do

• Interface view de um componente utilizado: Exibe uma visão definida em outro

Permitem a exibição de um texto qualquer.

Criada através do método create_popup_to_confirm() do gerenciador de janelas.

Podemos definir parâmetros para o texto e o título da janela.

Imagens podem ser associadas ao texto de acordo com o significado do mesmo.

Criada através do método create_window() do gerenciador de janela.

Também podemos definir botões e suas respectivas ações.