Web Dynpro – UI Elements – SAP – Abap

Publicado: 7 de fevereiro de 2015 em Abap

O Web Dynpro fornece várias categorias com elementos de interface de usuário e estes elementos estão disponíveis no explorador Web Dynpro através de sua caixa de ferramentas em uma interface RAD para que você possa criar seu layout de um modo simples e fácil. Estes elementos da interface padrão incluem botões, etiquetas, campos de entrada e vários outros elementos.

Como sabemos podemos facilmente utilizar os dados entrados por qualquer interface e grava-los em uma tabela do banco de dados utilizando o dicionário ABAP e o Open SQL. Entretanto a linguagem de programação ABAP não possui Arrays no sentido clássico da palavra, então para que possamos popular as propriedades dos elementos que exigem um índice e valores simples criados manualmente como os ComboBox, Radio Buttons ou outros elementos da interface gráfica como normalmente é utilizado em qualquer outra linguagem de programação, precisamos recorrer a um recurso que os domínios do dicionário ABAP nos disponibilizam chamados de Fixed Values.

Os Fixed Values são faixas de valores de um domínio que especificam uma faixa de valores e podem ser ainda mais restritas, definindo apenas valores fixos. Dos valores fixos definidos para um domínio, estes são utilizados na verificação de entrada de dados em modelos de triagem nos elementos de tela. Você pode criar os valores fixos diretamente na criação de um domínio ou dinamicamente através de código ABAP.

Fixed Values: Valores fixos dos Atributos.

Utilizando os Elementos da UI Web Dynpro

1 – Primeiro precisamos criar um domínio para os elementos de valores fixos que serão utilizados como as tradicionais Arrays para popular os elementos da UI. Entre na transação SE11 e crie um Domain para campo de caixa de escolha no qual utilizaremos na pagina web, este elemento na UI será do tipo DropDownByKey:

Domain - DropDownByKey

Domain – DropDownByKey

2 – Na aba Value Range você pode alimentar os valores fixos ou cria-los manualmente através de código dinâmico:

Value Range - DropDownByKey

Value Range – DropDownByKey

3 – Após criar e ativar o domínio, crie um novo Data Type para a caixa de seleção utilizando o domínio criado, neste caso você pode utilizar o mesmo nome para o Domain e Data Type:

Data Type - DropDownByKey

Data Type – DropDownByKey

OBS: Repita os passos 1 ao 3 para o de botão de radio onde utilizaremos o elemento da UI chamado RadioButtonGroupByKey:

4 – Crie um novo componente Web Dynpro e para o seu controlador crie um node e os atributos para os campos da interface de usuário, você pode utilizar os tipos do ABAP e os Data Types criados acima para manipular os seus atributos. Neste exemplo utilizamos String para os campos Nome, Sobrenome, Salário e Observação. Os Data Types criados acima para os campos Cargo e Gênero, o tipo d para a Data de Admissão e Abap_bool para o campo Ativo:

Controller - Atributos

Controller – Atributos

5 – Crie um layout baseado na figura abaixo, link os atributos do controlador nos atributos de sua View e os ligue aos seus respectivos elementos através de suas propriedades:

View - Layout

View – Layout

6 – Salve e ative seu componente Web Dynpro, crie uma aplicação e a teste. Você pode utilizar uma nova View para exibir os valores dos atributos ou grava-los em uma tabela Z transparente que você também pode criar. Utilize o evento clique do botão para exibir a visão de resultado ou gravar os dados no banco de dados.

Web Dynpro - Aplicação

Web Dynpro – Aplicação

Exemplo:

Neste exemplo utilizamos o paradigma declarativo da interface do Web Dynpro para criar uma pagina web com os elementos básicos de entrada disponíveis pela UI do Web Dynpro. Você encontra os detalhes de como realizar cada procedimento utilizado acima para criar o layout e os elementos básicos da UI nos exemplos anteriores.

 

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s