SAP – Web Dynpro – Hello World – Abap

Publicado: 2 de janeiro de 2015 em Abap

O Web Dynpro é a tecnologia padrão SAP para o desenvolvimento de aplicações Web no ambiente ABAP. Ela consiste de um ambiente de tempo de execução e um ambiente gráfico de desenvolvimento com ferramentas Dynpro especiais para web que estão integradas no ABAP Workbench. O modelo de programação Web Dynpro é baseado no Design Pattern Model View Controller (MVC) entretanto sua UI utiliza o paradigma de programação declarativa.

O Web Dynpro possui ferramentas gráficas para o desenvolvimento que de certo modo são similares a outras soluções para web que utilizam programação declarativa como por exemplo, o Oracle Application Express que também utiliza o paradigma declarativo, no entanto diferente do Web Dynpro o APEX possui uma IDE RAD que é executada inteiramente no navegador web e é parte integrante do Oracle Database. A principal característica deste paradigma de programação é a pouca necessidade de escrever código fonte para criar aplicações robustas.

Criando Sua Primeira Aplicação Web Dynpro

Para criar um aplicação Web Dynpro você precisa criar um componente Dynpro que é nada mais que um tipo de projeto MVC.

1- Abra ABAP Development Workbench com a transação SE80, escolha “Web Dynpro Comp./ Inf.” e preencha o campo de busca como ZMeuDynpro.

SE80 - Web Dynpro - Componente

SE80 – Web Dynpro – Componente

2- Clique em pesquisar, quando indagado escolha criar um componente Web Dynpro:

Dynpro - Criar Componente

Dynpro – Criar Componente

3 – Expanda Views e clique em Main. Na aba Layout clique com o botão direito em ROOTUIELEMENT e escolha Insert Element:

Dynpro - View

Dynpro – View

4 – Escolha um ID para o elemento e escolha o tipo Page Header:

Tipo de Elemento

Tipo de Elemento

5 – Com o elemento criado, o selecione e em sua propriedade title, escolha um titulo:

Modifica Elemento

Modifica Elemento

6 – ATENÇÃO – Clique no botão Show/Hide Layout Preview. O Preview irá lhe mostrar o design da pagina, entretanto todos os serviços necessários para que o Web Dynpro funcione precisam estar ativados, caso lhe mostre algum erro nesta tela, saia, ative os serviços requisitados e volte.

O Preview lhe permite utilizar uma caixa de ferramentas para que você arraste os elementos na pagina e monte seu design mais rapidamente. Adicione na tela um elemento TransparentContainer e um Label, mude a propriedade text do Label e associe sua propriedade Label For no TransparentContainer. A propriedade Label For é obrigatória e geralmente é associada a uma caixa de texto:

Layout Preview

Layout Preview

7 – Clique no seu componente com o botão direito e o ative:

Ativar - Dynpro

Ativar – Dynpro

8 – Agora precisamos criar uma aplicação Web Dynpro, com o botão direito escolha Create e Web Dynpro Application:

Criar Aplicação

Criar Aplicação

9 – Defina uma descrição para sua aplicação:

Descrição da Aplicação

Descrição da Aplicação

10 – Em sua aplicação, clique com o botão direito e escolha Test:

Testar Aplicação

Testar Aplicação

11 – O seu navegador padrão será aberto, no entanto ainda não definimos um protocolo seguro para aplicação e uma pagina lhe questionará sobre a autenticação, clique em Log On:

Web Dynpro - Log On

Web Dynpro – Log On

12 – Digite o seu usuário e senha:

Log On

Log On

13 – Pronto sua aplicação foi executada com sucesso:

Web Dynpro App

Web Dynpro App

Não se esqueça que todos os serviços básicos ICM e ICF precisam estar ativados para que você possa desenvolver e rodar aplicações Web Dynpro. A Aplicação é criada como um serviço ICF no seguinte local, Virtual Host: sap/bc/webdynpro/sap/SuaApp.

Para saber como configurar um ambiente básico para criar e rodar aplicações Web Dynpro clique aqui.

 

 

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 )

w

Conectando a %s