abap web dynpro - pratica

ABAP Web Dynpro Prtica

Treinamento ABAP Web Dynpro Tutorial prtico: Flight ModelO objetivo deste tutorial utilizar o modelo de negcio Flight Model, fornecido pela SAP, para montar um sistema de busca e reservas de vos utilizando ABAP Web Dynpro.

O modelo de dados simples, e iremos considerar que os dados para estas tabelas j estejam carregados no Client utilizado. Para tal, poderemos executar o programa SAPBC_DATA_GENERATOR:

Pgina | 1

ABAP Web Dynpro PrticaAps a execuo, as seguintes tabelas estaro preenchidas com dados para teste: SCURX: Moedas SBUSPART: Parceiros STRAVELAG: Agncias de Viagem SCUSTOM: Clientes SCARR: Companhias Areas SCOUNTER: Pontos de Venda por Companhia area SPFLI: Itinerrios de Vos SFLIGHT: Vos SBOOK: Reservas de Vos

Pgina | 2


Primeiro Componente Web DynproNo primeiro exemplo, iremos criar um Componente Web Dynpro, que ir conter as Views necessrias para que o usurio possa pesquisar por vos disponveis, utilizando diversas opes para filtros.

Passo 1 Criao do ComponentePara criar um Componente Web Dynpro ABAP, utilizaremos o ABAP Workbench, transao SE80: Na aba Repository Browser, escolha a opo Web Dynpro Comp. / Intf.

Entre com o nome para o novo Componente e clique em

Responda que Sim, deseja criar um novo Objeto.

Pgina | 3

ABAP Web Dynpro PrticaEntre com os dados para o novo Objeto. Observe que j sugerido um nome para uma nova Window e uma nova View. Aceite as sugestes e clique em .

Indique o pacote. Para o nosso exemplo, utilizaremos a opo

.

Temos a seguinte estrutura criada:

Pgina | 4


Passo 2 Criando um ModelNo passo anterior, pudemos notar que, ao criarmos um Componente Web Dynpro, duas camadas do modelo MVC j so claramente visveis: View e Controller. Neste passo, usaremos uma BAPI para criar um Model. Abra o menu de contexto do Componente Web Dynpro: Create -> Service Call.

Um novo Wizard apresentado. Seguindo os seus passos, possvel, de forma declarativa, criar uma chamada uma BAPI, ou a um mdulo de funo arbitrrio, um mtodo de uma classe ABAP ou ainda consumir um WebService, atravs da gerao de um Proxy.

Pgina | 5

ABAP Web Dynpro PrticaPara criar tal chamada, preciso selecionar um Controller. Pode-se tambm criar um novo Controller. Neste momento, usaremos o Controller do Componente.

Para o tipo do servio a ser chamado, selecionemos Function Module.

Vamos usar, para nossa busca de vos, a funo BAPI_FLIGHT_GETLIST. Deixe o campo Destination em branco.

Pgina | 6


Na tela seguinte, possvel determinarmos como sero nomeados os parmetros da chamada ao servio e como estes parmetros se comportaro dentro no nosso Componente Web Dynpro. Na coluna New Name, podemos aceitar a sugesto, onde os nomes dos parmetros no Componente Web Dynpro, ou seja, as variveis declaradas dentro de nosso Controller, sero idnticos aos parmetros do servio a ser chamado, respeitando-se o limite de 20 caracteres para se nome-los. Esta uma boa prtica, por isso vamos segui-la. Quanto ao tipo dos parmetros, ou seja, como ser seu comportamento em nosso Componente Web Dynpro, devemos configurar a coluna Object Type de cada parmetro. Aqueles parmetro que so do tipo Root Node e Parameter Group, sempre sero transformados em Ns dentro do Context. Esta uma boa hora para pensarmos em quais parmetros estaro de fato disponveis para a pesquisa em nossa View, pois neste momento devemos configurar seu tipo como Context (Ns/Atributos). Isso nos permitir executar as tarefas de Context Mapping e Data Binding para dentro da View, construindo assim a nossa interface com o usurio. Vamos configurar os parmetros AIRLINE, DESTINATION_FROM, DESTINATION_TO, DATE_RANGE, FLIGHT_LIST como do tipo Context.

Pgina | 7


Finalmente, devemos definir um nome de mtodo que ser usado para fazer a chamada ao Servio. Aceitaremos a sugesto do assistente.

Um resumo ento exibido e podemos completar a tarefa de gerar a chamada ao Servio.

Pgina | 8


O resultado que, dentro do Controller, geramos todos as declaraes necessrias para a chamada ao servio escolhido, um mdulo de funo, que corresponder a camada Model.

Pgina | 9


Passo 3 Construindo a View Pesquisa de VosContext Mapping Clique duas vezes na View MAIN, a aba Context: Do lado esquerdo, temos os ns e atributos do View Context. Do lado direito temos os Contexts dos Controllers usados por esta View. Por padro, o Controller do Componente sempre estar disponvel para as Views.

Pgina | 10

ABAP Web Dynpro PrticaPara mapearmos os dados a serem passados entre o Controller e a View, simplesmente arrastamos os ns ou atributos, aqueles que desejamos estar disponveis na interface com o usurio, do Context do Controller para o Context da View. Para nosso caso, vamos arrastar os ns DESTINATION_FROM, DESTINATION_TO e FLHIGHTS_LIST para o lado esquerdo.

Repare que para cada n no Context, existe uma propriedade chamada Cardinality. Caso essa propriedade seja 1:1, como nos ns DESTINATION_FROM e DESTINATION_TO, significa que para estes ns ser representado na memria como uma estrutura. No caso do n FLHIGHTS_LIST, analogamente como acontece com um mdulo de funo, a propriedade Cardinality 0:n. Neste caso, este n ser representado em memria como uma tabela interna.

interessante notar tambm a propriedade Selection, que indica como ser a seleo dos dados por parte do usurio, mais especificamente quantas linhas podero ser marcadas numa representao grfica destes dados, em uma tabela ou em um elemento ALV. Ao arrastarmos um n ou atributo de um Context para outro, j estamos automaticamente definindo um Context Mapping. Ou seja, sempre que os dados de qualquer dos Context sofrerem Pgina | 11

ABAP Web Dynpro Prticaalteraes, seja por comunicao com o Model, seja por interveno do usurio, o outro lado ser atualizado. Data Binding Vamos agora para a aba Layout da View MAIN:

nesta aba que poderemos definir como ser a apresentao desta View para o usurio. Do lado esquerdo, temos uma barra de ferramentas com os possveis elementos de exibio e de interao com o usurio. Como rtulos de texto, caixas de entrada de texto, tabelas, etc. Podemos definir cada elemento e cada mapeamento isoladamente. Mas o View Designer nos fornece ferramentas para aumentar a produtividade, fortalecendo o paradigma de programao declarativa. Primeiro vamos definir as reas onde os conjuntos de campos sero posicionados. Podemos usar o objeto Group, da barra de ferramentas layout:

Pgina | 12


Para cada elemento Group criado, o View Disigner define um elemento Caption, que definir o texto ttulo do grupo de campo. Como se pode observar, o View Designer mantm um registro hierrquico dos elementos contidos na View. A cada novo elemento criado, uma numerao atribudo ao seu ID, para fins de universalidade. Por exemplo, acionemos o menu de contexto do elemento GROUP: clique na opo Create Container Form.

Ao clicarmos no boto da janela que se apresenta, poderemos escolher com quais dados do Context criaremos o Form em questo: Selecione o n DESTINATION_FROM.

Pgina | 13


Temos ento a seguinte tela:

Nesta tela, poderemos selecionar, a partir do n do Context escolhido, quais dados, e como, sero exibidos. Poderemos selecionar de uma lista, de que forma este atributo ser representado em nossa View. Vamos marcar a coluna Binding para os 3 primeiros atributos, deixando o Cell Editor como InputField.

Pgina | 14


Para elemento container dentro da View, possvel definir propriedades que iro ditar como os elementos internos a este container iro se conportar. Vamos definir por exemplo, a propriedade Layout do elemento GROUP com o valor GridLayout. Da mesma forma, vamos definir o Grupo To. Para manter a organizao, vamos modificar a propriedade Width de cada elemento Group como 400px.

Desta forma j temos boa parte da interface com o usurio bem definida. Mas onde est o Data Binding? Bem, com o auxlio do assistente para criarmos os Forms, vimos que os dados so ligados diretamente aos atributos do Context. Quando selecionamos quais atributos do n do Context sero exibitos, pudemos notar que h uma coluna que indica como ser feito o Data Binding para cada elemento:

Pgina | 15


Aqui se define a propriedade do elemento Cell Editor que ter seu valor ligado ao atributo do Context.

Para cada campo de entrada (elementos InputField) criados, a propriedade value ser ligada a seu respectivo atributo no Context:

Pgina | 16

ABAP Web Dynpro PrticaComo resultado de nossa pesquisa, ou seja, a chamada ao Servio que nos atende como Model, esperamos receber uma lista de Vos que correspondam aos critrios de pesquisa selecionados. Para exibir esta lista, usaremos um elemento Table abaixo dos filtros de pesquisa.

No menu de contexto do elemento Table em nossa View, temos a opo Create Binding.

Assim como quando crivamos Forms para conter os filtros de pesquisa, usaremos o Context para ligar os dados do elemento Table ao n do Context que desejamso exibir. Clique em e ento selecione o n FLIGHT_LIST.

Pgina | 17

ABAP Web Dynpro PrticaNeste ponto podemos definir quais sero os atributos deste n a serem exibidos no elemento Table.

Pgina | 18

ABAP Web Dynpro PrticaPasso 4 Disparando um evento Finalmente, devemos providenciar um meio para que o usurio possa, aps ter preenchido os filtros, disparar a pesquisa e exibir os resultados. Para isso, criaremos um boto entre os grupos de filtros e o resultado:

Aps posicionar o elemento Button dentro da View, devemos codificar o que acontecer quando o usurio pressionar este boto. Para isso, usaremos o evento onAction, disponvel neste elemento:

Pgina | 19

ABAP Web Dynpro PrticaAps configurarmos a Action para este boto, so criadas na View as seguintes declaraes: Um elemento Action

Um mtodo manipulador de evento

Cliquemos no boto ABAP Routine

para codificar o mtodo:

Para implementar o mtodo, possvel acionar um Assistente, clicando no boto . A seguinte janela nos permitir escolher em qual Controller est localizada a lgica de negcios a ser acionada:

Pgina | 20


Preencha com as informaes como mostra a figura e pressione ENTER. O mtodo ONACTIONPESQUISAR ento codificado da seguinte forma:method ONACTIONPESQUISAR . DATA lo_componentcontroller TYPE REF TO ig_componentcontroller . lo_componentcontroller = wd_this->get_componentcontroller_ctr( ). lo_componentcontroller->execute_bapi_flight_getlist( ). endmethod.

Pgina | 21


Passo 5 Configurando uma Web Dynpro ApplicationComo podemos observar, a Window criada automaticamente junto com o nosso Componente Web Dynpro j tem embutida nossa View MAIN e tambm um Inbound Plug do tipo Startup, chamado DEFAULT. Este Inbound Plug funciona como ponto de partida para nossa pesquisa de Vos.

Para que possamos ter um meio de acessar esta aplicao, devemos criar um ltimo artefato: uma Web Dynpro Application. No menu de contexto do Componente Web Dynpro, selecione a opo: Create -> Web Dynpro Application:

Pgina | 22

ABAP Web Dynpro PrticaSimplesmente especifique uma descrio para a aplicao e pressione ENTER:

As propriedades para a Web Dynpro Application so exibidas:

A partir deste ponto, podemos salvar e ativar os objetos criados. Podemos ento testar nossa aplicao:

Pgina | 23


Passo 6 Testando a aplicaoAo testar a aplicao, iremos percebe que todos os objetos de ajuda de pesquisa j estaro disponveis. Para isso, basta que estejam definidos no ABAP Dictionary, de onde vm as referncias para os dados da tela.

Pgina | 24

abap web dynpro - pratica

Documents