Abap Lab: [TUTORIAL] Web Dynpro ABAP - ALV Simples com Parameter

Vou começar a colocar tutoriais de Web Dynpro e para começar bem o aqui está o mais básico de todos.

Assim quem quiser acompanhar irá ter um bom passo a passo de evolução nos componentes.

Antes que me esqueça, os nomes dos componentes seguirão a nomenclatura em inglês para melhor entendimento.

Agora chega de enrolação e mãos a obra.

1º Passo

Acessar a transação SE80 e criar um novo componente Web Dynpro (ZALV_SIMPLES). Utilizar W_MAIN como o nome da Window e deixar em branco a View.

Ativar o objeto

2º Passo

Criar um Nó para seleção de dados:

Duplo clique no COMPONENTCONTROLLER, em modo de edição, e clicar com o botão direito em CONTEXT. Selecionar Create>Node. Clicar em "Add Attributes from Structure" e escolher os campos CARRID e CONID

3º Passo

Criar um Nó para exibição dos resultados:

4º Passo

Criar um método para preencher a tabela de saída:

METHOD fill_alv .
  DATA: node_voo      TYPE REF TO if_wd_context_node,
        node_result   TYPE REF TO if_wd_context_node,
        elem_node_voo TYPE REF TO if_wd_context_element,
        stru_node_voo TYPE        if_componentcontroller=>element_node_voo,
        ls_where      TYPE c      LENGTH 72,
        lt_where      LIKE TABLE OF ls_where,
        lt_flights    TYPE TABLE OF sflight.

* Navegar de <CONTEXT> para <NODE_VOO>
  node_voo = wd_context->get_child_node( name = 'NODE_VOO' ).

* Selecionar o elemento
  elem_node_voo = node_voo->get_element( ).

* Selection todos os atributos declarados
  elem_node_voo->get_static_attributes( IMPORTING static_attributes = stru_node_voo ).

* Criar a condição WHERE
  IF NOT stru_node_voo-carrid EQ ''.
    CONCATENATE 'CARRID = ''' stru_node_voo-carrid '''' INTO ls_where.
    APPEND ls_where TO lt_where.
  ENDIF.

  IF NOT stru_node_voo-connid EQ '0000'.
    CONCATENATE 'CONNID = ''' stru_node_voo-connid '''' INTO ls_where.

    IF stru_node_voo-carrid NE ''.
      CONCATENATE 'AND' ls_where INTO ls_where SEPARATED BY space.
    ENDIF.

    APPEND ls_where TO lt_where.
  ENDIF.

* Selecionar dados
  SELECT *
    FROM sflight
    INTO TABLE lt_flights
    WHERE (lt_where).

* Navegar de <CONTEXT> para <NODE_RESULT>
  node_result = wd_context->get_child_node( name = 'NODE_RESULT' ).

* Preencher o nó
  node_result->bind_table( lt_flights ).
ENDMETHOD.

Ativar o objeto

5º Passo
Criar uma View de pesquisa:

Botão direito em cima do objeto (ZALV_SIMPLES) e selecionar Create>View

Ativar o Objeto

6º Passo
Mapear o Nó NODE_VOO:

Na Aba Context, arrastar o NODE_VOO da coluna da direita para o CONTEXT da coluna da esquerda.
Clicar com o botão direito no NODE_VOO da coluna da esquerda e em "Update Mapping"

7º Passo
Criar o layout da View:

Na Aba Layout, botão direito sobre ROOTUIELEMENTCONTAINER e selecionar "Insert Element".
Criar o grupo G_SELECAO.

Na propriedade TEXT do elemento CAPTION, digitar o título do "Box": Seleção de Voos

Clicar com o botão direito sobre o G_SELECAO para inserir os dois atributos CARRID e CONID. Dica: Usar a função "Create Container Form"

Clicar em Context

Duplo-clique em NODE_VOO

Clicar em OK

Criar o Botão B_PESQUISAR no G_SELECAO e colocar "Pesquisar" na propriedade TEXT.

Nas propriedades do B_PESQUISAR em Events/onAction Criar uma nova ação, que irá chamar o método FILL_ALV

Duplo-clique em PESQUISA_VOO e codificar a ação

METHOD onactionpesquisa_voo .
wd_comp_controller->fill_alv( ).
ENDMETHOD.

Nas propriedades do G_SELECAO modificar o Layout para GridLayout, gravar.
Novamente nas propriedades do G_SELECAO haverá a propriedade colCount, modificar para 2.

Ativar o objeto

8º Passo
Para criarmos o resultado na mesma tela devemos criar uma nova view para a tela em si.

Criar a View V_TELA e nas propriedades do ROOTUIELEMENTSCONTAINER modificar o Layou para MatrixLayout

Inserir dois novos elementos do tipo ViewContainerUIElement

Modificar o Layout das View para MatrixHeadData (no meu caso foi apenas no VC_RESULT)

Ativar o objeto

9º Passo
Apontar as Views para a Window:

Abrir a Janela W_MAIN, na Aba Windows, botão direito sobre o W_MAIN e selecionar "Embed View"
Clicar no Match-Code (F4) da linha View to be Embedded, Selecionar a V_TELA e dar Ok

A W_MAIN estará assim:

Botão direito em VC_SELECAO, selecionar "Embed View"
Clicar no Match-Code (F4) da linha View to be Embedded, Selecionar a V_PESQUISA e dar Ok

A W_MAIN estará assim:

Ativar o objeto

10º Passo
Usar o componte ALV Table:

O ALV não é nativo no WebDynpro por isso devemos definir que utilizaremos ele.
Duplo-Clique no objeto (ZALV_SIMPLES) e definição do uso do componente.

Ativar o objeto.

11º Passo
Apontar os valores selecionados para o ALV

Os voos selecionados estão no NODE_VOO mas para mostrarmos o resultado em ALV devemos mapear o NODE_RESULT no Nó de dados do ALV.
Selecionar Component Usages>>ALV>>INTERFACECONTROLLER_USAGE

Clicar em "Controller Usage" e selecionar a única linha.

A tela ficará assim:

Arrastar o NODE_RESULT para o DATA. O nó DATA mudará o ícone para seta em duas direções:

Ativar o objeto

12º Passo
Assimilando os valores para a tela.

Voltando na W_MAIN.
Botão direito em VC_RESULT, selecionar "Embed View"
Clicar no Match-Code (F4) da linha View to be Embedded, Selecionar o ALV/TABLE e dar Ok