Desenvolvimento Código Aberto

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:

2 – Clique em Views e com o botão direito crie uma nova View chamada 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:

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:

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:

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:

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:

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:

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:

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:

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:

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

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

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

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:

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:

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:

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.