SAP – Web Dynpro – Label – Input_Field – ViewText – Button – onAction – Abap

Publicado: 3 de janeiro de 2015 em Abap

A interface gráfica das ferramentas do Web Dynpro nos proporciona um modo de criar aplicações web usando um ambiente RAD que em português significa, desenvolvimento rápido de aplicações. Além do ambiente RAD, o Web Dynpro nos proporciona o paradigma da programação declarativa, que significa que vamos desenvolver uma aplicação escrevendo o mínimo de código fonte possível. Vamos fazer isto utilizando o Pattern mais difundido para aplicações para web na atualidade, o MVC, que nos permite maior controle sobre os elementos e objetos da aplicação em relação aos modelos e visões.

Criando um Aplicação Web Dynpro

1 – Crie um novo componente Web Dynpro e arraste para a tela um elemento Header, um TransparentContainer, um Label, um Input_Field e um Button. Preencha os campos textos e para o elemento Header e ligue a propriedade Label For no elemento Input_Field. Para o elemento TransparentContainer mude a propriedade Height para 10 px:

View - Main - Layout

View – Main – Layout

2 – Clique em Views e com o botão direito crie uma nova View chamada Saudação:

Nova - View - Saudacao

Nova – View – Saudação

3 – Abra a nova View e insira em seu Layout os elementos Header, TransparentContainer e 2 TextView. Mude as propriedades Text dos elementos TextViews para “Bem-vindo:” e “usuário” e a propriedade Height do TransparentContainer para 10px:

View - Saudação - Layout

View – Saudação – Layout

4 – Agora vamos utilizar atributos para guardar o valor do campo de entrada de texto, vamos fazer isto no contexto do controlador. No seu componente Dynpro, clique em COMPONENTCONTROLLER e selecione Context e com o botão direito Create->Node:

Controller - Contexto

Controller – Contexto

5 – Crie um Node para o controlador chamado Usuario_Controller, este node será onde guardaremos nosso atributo, ele está localizado no contexto do controlador, isto significa que todas as visões podem vê-lo:

Node - Controle Usuário

Node – Controle Usuário

6 – No novo Node crie um atributo chamado usuario_login do tipo string, este atributo será usado para guardar o valor digitado no campo de texto:

Atributo - Usuário - String

Atributo – Usuário – String

7 – ATENÇÃO – Neste momento vamos ligar os componentes para que obtenhamos a funcionalidade desejada para a aplicação. Clique na View Main e na aba Context, arraste o Node criado no controlador para o contexto da View:

Main - Contexto - Atributos

Main – Contexto – Atributos

8 – Agora podemos enxergar o atributo do controlador em nossa View, clique em Layout e clique no elemento Input_Field, vamos ligar o atributo no valor da propriedade Value do elemento:

Ligação - Atributo - Valor

Ligação – Atributo – Valor

9 – Abra a View Saudacao e na aba Context faça a mesma coisa, arraste o Node do controlador para o contexto da View para que possamos enxergar o atributo:

View - Saudação - Contexto - Atributo

View – Saudação – Contexto – Atributo

10 – Abra a aba Layout e clique no segundo elemento TextView no qual está reservado para exibir o nome digitado pelo usuário e ligue a propriedade Text do elemento ao atributo da View:

View - Atributo - Text

View – Atributo – Text

11 – IMPORTANTE – Agora vamos criar a regra para uma ação, ou seja vamos criar plugs dizendo que queremos que a View Main abra a View Saudação. Para isto abra a aba OutBound Plugs e crie um Plug de saída chamado ir_saudação:

Plugs - OutBound - Saida

Plugs – OutBound – Saida

12 – Abra a View Saudação e na aba InBound Plugs vamos criar um plug de entrada chamado vir_main:

Plugs - InBound - Entrada

Plugs – InBound – Entrada

13 – No seu componente Dynpro abra o item Windows e arraste a View Saudação para a estrutura do objeto Window:

Window - Estrutura das Views

Window – Estrutura das Views

14 – Agora vamos plugar os plugs criados anteriormente arraste o plug Out (vermelho) IR_SAUDACAO para o plug In VIR_MAIN:

Ligação - Plugar Out -> In

Ligação – Plugar Out -> In

15 – Volte para a View Main e clique no elemento Button, em sua propriedade onAction vamos criar uma ação para o evento de clique do botão, preencha os dados para o evento e escolha o plug de saída IR_SAUDACAO:

Eventos - Botão - Ação

Eventos – Botão – Ação

16 -Salve, ative o componente e teste sua aplicação. Alimente o usuário e senha para login, com o navegador aberto entre seu nome no campo de texto e clique no botão enviar:

Aplicação - View - Main

Aplicação – View – Main

17 – O controlador processará a ação alimentando o valor ligado ao atributo ao dado inserido na propriedade de texto do campo de entrada e o enviará para a visão de saudação alimentando a propriedade de texto do elemento de texto, criando assim a funcionalidade da aplicação:

View - Saudação

View – Saudação

Como utilizamos o paradigma de programação declarativa não escrevemos uma única linha de código sequer, mas isto não significa que não haja código fonte.  Para ver o código da aplicação, clique na View Main e na aba Action e dê um duplo clique na ação criada, você será levado ao método criado para executar o evento de clique do botão.

Abap

method ONACTIONACAO_BOTAO_ENVIAR .
  wd_this->fire_ir_saudacao_plg(
  ).
endmethod.

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s