Você está na página 1de 45
Web Dynpro for ABAP Elaborada por Roberto Felipe Gritenas Incluir logo do cliente 22 de
Web Dynpro
for ABAP
Elaborada por Roberto Felipe Gritenas
Incluir logo
do cliente
22 de Maio de 2007
Dados para Logon
Dados para Logon

• Estaremos utilizando durante este treinamento o ambiente abaixo mencionado:

• Estaremos utilizando durante este treinamento o ambiente abaixo mencionado: • Usuário: TREINA01 • Senha: 123456

• Usuário: TREINA01

• Senha:

123456

Diagrama RFC: View_Main LISTA_MATERIAIS MAKT ECC 5.0 R/3 – 4.7
Diagrama
RFC:
View_Main
LISTA_MATERIAIS
MAKT
ECC 5.0
R/3 – 4.7
Criando Componente Web Dynpro
Criando Componente Web Dynpro

Execute a Transação SE80, selecionar o objeto “Web Dynpro Comp./Inrf.” e escolha um nome para sua aplicação ZTREINAMENTO_XX.

objeto “Web Dynpro Comp./Inrf.” e escolha um nome para sua aplicação ZTREINAMENTO_XX. • . Pressione “Enter”

.

Pressione “Enter”

Criando Componente Web Dynpro
Criando Componente Web Dynpro

• Confirme a criação do objeto.

Componente Web Dynpro • Confirme a criação do objeto. • Preencha os dados referentes a criação

• Preencha os dados referentes a criação da nova Window (janela composta por Views).

Confirme a criação do objeto. • Preencha os dados referentes a criação da nova Window (janela
Criando Componente Web Dynpro
Criando Componente Web Dynpro

Pode-se observar que foi criada uma estrutura de projeto contendo:

– WINDOW_MAIN – Interface Views

– WINDOW_MAIN – Windows

que foi criada uma estrutura de projeto contendo: – WINDOW_MAIN – Interface Views – WINDOW_MAIN –
Importando RFC
Importando RFC

• Clicar com o botão direito do mouse sobre nosso projeto e escolha a opção conforme figura abaixo.

com o botão direito do mouse sobre nosso projeto e escolha a opção conforme figura abaixo.

• Clicar sobre o Ícone

com o botão direito do mouse sobre nosso projeto e escolha a opção conforme figura abaixo.
Importando RFC
Importando RFC

• Selecionar a opção para importar a RFC para uma Controller já existente.

RFC • Selecionar a opção para importar a RFC para uma Controller já existente. • Clique

• Clique sobre o botão Continue.

Importando RFC
Importando RFC

• Confirmar opção para importar RFC.

Importando RFC • Confirmar opção para importar RFC. 9
Importando RFC
Importando RFC

• Selecionar a função criada.

Importando RFC • Selecionar a função criada. O Destinantion indica onde a RFC está, caso ela

O Destinantion indica onde a RFC está, caso ela esteja em outro ambiente.

Importando RFC
Importando RFC

• Marque os campos conforme figura abaixo para importar todos os parâmetros.

Importando RFC • Marque os campos conforme figura abaixo para importar todos os parâmetros. • Clique

• Clique em Continue.

Importando RFC
Importando RFC

• Preencha o campo método conforme abaixo, esse será o método para execução da RFC.

• Clique em Continue

o campo método conforme abaixo, esse será o método para execução da RFC. • Clique em

• Clique em

o campo método conforme abaixo, esse será o método para execução da RFC. • Clique em
Importando RFC
Importando RFC

• A RFC foi importada com sucesso.

Importando RFC • A RFC foi importada com sucesso. • Ative os objetos inerentes ao seu

• Ative

Importando RFC • A RFC foi importada com sucesso. • Ative os objetos inerentes ao seu

os objetos inerentes ao seu projeto.

Criando uma View
Criando uma View
Criando uma View 14
Importando RFC para sua View
Importando RFC para sua View

• Clique duas vezes na View em que usaremos a RFC.

Importando RFC para sua View • Clique duas vezes na View em que usaremos a RFC.
Importando RFC 1. Clique na aba Context 2. Arraste nossa RFC para o Context da
Importando RFC
1. Clique na
aba Context
2. Arraste
nossa RFC
para o
Context da
View
Importando RFC 1. Clique na aba Context 2. Arraste nossa RFC para o Context da View

Confirme a Copia.

Importando RFC
Importando RFC
Importando RFC 1. Clique na aba Layout 17

1. Clique na aba Layout

Montando o Layout de sua View
Montando o Layout de sua View
Montando o Layout de sua View Nome do grupo que organizará seus componentes de tela 18
Montando o Layout de sua View Nome do grupo que organizará seus componentes de tela 18
Montando o Layout de sua View Nome do grupo que organizará seus componentes de tela 18

Nome do grupo que organizará seus componentes de tela

Montando o Layout de sua View
Montando o Layout de sua View
Montando o Layout de sua View Escolha a opção GridLayout Preencha com o valor 2 19

Escolha a opção GridLayout

Montando o Layout de sua View Escolha a opção GridLayout Preencha com o valor 2 19

Preencha com o valor

2

Utilizando a RFC em nossa View
Utilizando a RFC em nossa View
Utilizando a RFC em nossa View Agora estaremos utilizando a RFC importada em nossa View. Clique

Agora estaremos utilizando a RFC importada em nossa View. Clique com o botão direito sobre o grupo e escolha o item conforme a figura ao lado.

Utilizando a RFC em nossa View
Utilizando a RFC em nossa View

• Clique em

Utilizando a RFC em nossa View • Clique em 21
Utilizando a RFC em nossa View
Utilizando a RFC em nossa View

• Passagem de parâmetros para RFC.

Utilizando a RFC em nossa View • Passagem de parâmetros para RFC. Duplo clique Confirme a

Duplo clique

Utilizando a RFC em nossa View • Passagem de parâmetros para RFC. Duplo clique Confirme a

Confirme a Criação

Montando o Layout de sua View
Montando o Layout de sua View
Montando o Layout de sua View Clique sobre as Labels. Digite o texto relativo a cada

Clique sobre as Labels.

Montando o Layout de sua View Clique sobre as Labels. Digite o texto relativo a cada

Digite o texto relativo a cada Label

Utilizando a RFC em nossa View
Utilizando a RFC em nossa View
Utilizando a RFC em nossa View 24
Criando a tabela de retorno na View
Criando a tabela de retorno na View
Criando a tabela de retorno na View Clique sobre o elemento e arraste para a tela

Clique sobre o elemento e arraste para a tela de layout

Criando a tabela de retorno na View Clique com o botão direito e escolha a
Criando a tabela de retorno na View
Clique com o
botão direito e
escolha a
opção “Create
Binding” para
ligar nossa
tabela da
View com o
retorno da
RFC
Criando a tabela de retorno na View
Criando a tabela de retorno na View

• Clique em

Criando a tabela de retorno na View • Clique em Duplo Clique 27
Criando a tabela de retorno na View • Clique em Duplo Clique 27

Duplo

Clique

Criando a tabela de retorno na View
Criando a tabela de retorno na View

• Confirme a Criação.

Criando a tabela de retorno na View • Confirme a Criação. 28
Criando um botão de ação
Criando um botão de ação
Criando um botão de ação Arraste o componente botão para tela 29
Criando um botão de ação Arraste o componente botão para tela 29

Arraste o componente botão para tela

Criando um botão de ação
Criando um botão de ação
Criando um botão de ação Clique no botão e digite um texto para exibição 30

Clique no botão e digite um texto para exibição

Criando Action para o botão criado
Criando Action para o botão criado
Criando Action para o botão criado Clique no ícone para criar ação para o clique no

Clique no ícone para criar ação para o clique no novo botão

Criando Action para o botão criado Clique no ícone para criar ação para o clique no
Associando clique no botão a execução da RFC
Associando clique no botão a execução
da RFC

• Clique sobre a aba “Methods” da View.

da RFC • Clique sobre a aba “Methods” da View. • Clique duas vezes sobre o

Clique duas vezes sobre o método referente a ação criada.

Associando clique no botão a execução da RFC
Associando clique no botão a execução
da RFC
Associando clique no botão a execução da RFC 33
Associando clique no botão a execução da RFC
Associando clique no botão a execução
da RFC

• Clique sobre o botão

• Clique sobre a ajuda de pesquisa do item “Componente Name”

a execução da RFC • Clique sobre o botão • Clique sobre a ajuda de pesquisa

.

a execução da RFC • Clique sobre o botão • Clique sobre a ajuda de pesquisa
Associando clique no botão a execução da RFC Escolha o Controller principal
Associando clique no botão a execução
da RFC
Escolha o
Controller
principal
Associando clique no botão a execução da RFC Clique
Associando clique no botão a execução
da RFC
Clique
Associando clique no botão a execução da RFC Clique Escolha o método criado para Execução da

Escolha o método criado para Execução da RFC

Associando clique no botão a execução da RFC
Associando clique no botão a execução
da RFC

• Foi criada uma linha de código no método para execução da RFC.

a execução da RFC • Foi criada uma linha de código no método para execução da

• Ative seu projeto

a execução da RFC • Foi criada uma linha de código no método para execução da
Incluindo View na janela principal
Incluindo View na janela principal
Incluindo View na janela principal Clique na Windows principal 38

Clique na Windows principal

Incluindo View na janela principal
Incluindo View na janela principal
Incluindo View na janela principal Arraste a View para a Windows principal. 39

Arraste a View para a Windows principal.

Criando aplicação (URL) para acessar o projeto.
Criando aplicação (URL) para acessar
o projeto.
Criando aplicação (URL) para acessar o projeto. 40
Criando aplicação (URL) para acessar o projeto.
Criando aplicação (URL) para acessar
o projeto.
Criando aplicação (URL) para acessar o projeto. • Confirme a criação . 41

• Confirme a criação

Criando aplicação (URL) para acessar o projeto. • Confirme a criação . 41

.

Ativando o projeto/objeto
Ativando o projeto/objeto

• Ative seu projeto

Ativando o projeto/objeto • Ative seu projeto 42
URL para a aplicação
URL para a aplicação
Testando a aplicação
Testando a aplicação

• Clique com o botão direito sobre a aplicação e em seguida escolha a opção “Test”.

Testando a aplicação • Clique com o botão direito sobre a aplicação e em seguida escolha
Resultado
Resultado