Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
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
Pgina | 2
Pgina | 3
Pgina | 4
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
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.
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
Pgina | 10
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
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
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
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
Pgina | 18
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
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
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
A partir deste ponto, podemos salvar e ativar os objetos criados. Podemos ento testar nossa aplicao:
Pgina | 23
Pgina | 24