Web Dynpro Brasil | Tutoriais e Dicas

Primeiros passos: usando o Context

2011-03-27T21:07:00.000-07:00

O Context desempenha um papel muito importante na implementação do padrão MVC do Web Dynpro, é através do dele que podemos criar, manter, compartilhar e segregar os dados entre os diferentes componentes deste modelo. Entenda mais os conceitos por trás do Web Dynpro aqui.

Para entender esses conceitos na prática, façamos um primeiro experimento usando o Context.

1. Criando um novo Componente

Acesse a transação SE80, o nosso ponto de partida:

Com a opção Web Dynpro Comp. / Intf. selecionada, entre com um nome para o novo Componente, e então pressione Enter:

Confirme a criação e preencha as informações do novo componente:

No meu caso, estou usando o pacote para objetos locais $TMP. Se você clicar no botão Local Object, esse é pacote onde seu objeto será colocado.

Note que será criado um novo componente, com uma View chamada MAIN e uma nova Window, com o mesmo nome do componente.

Ao entrar (duplo clique) no Component Controller, que é um controller padrão existente em todo componente Web Dynpro, podemos ver seu Context. O Context é representado por uma estrutura em árvore, o que facilita sua manipulação e sua visualização, onde podemos definir estruturas complexas de dados de forma declarativa. A programação declarativa é um dos grandes avanços do Web Dynpro em relação as tecnologias de interface gráfica de usuário (GUI) usadas anteriormente pela SAP, pois facilita o entendimento enquanto aumenta a produtividade. Diferentemente do BSP, o Web Dynpro não permite que o programador gerencie o detalhe de implementação da interface gráfica, tornando o grande foco, e consequentemente a maior parte do esforço, de uma aplicação Web Dynpro o planejamento do fluxo de trabalho e a correta manipulação dos dados, para alcançar o objetivo esperado.

Vamos adicionar um nó na árvore do Context do nosso Component Controller. Clique com o botão direito na raiz do context e escolha Create > Node:

Entre com um nome para o nó, aceite as outras opções sem alterá-las por enquanto.

Vamos criar agora um atributo para esse nó. Pode-se imaginar os atributos como folhas de um nó, sendo que o nó é uma ramificação de um nó pai. O nó mais acima na hierarquia é chamado de ROOTNODE no Web Dynpro.

Clique com o botão direito agora no nó recém criado e selecione Create > Attribute:

Preencha o nome do atributo e selecione um tipo. Perceba que nesse ponto é possível usar qualquer tipo ABAP presente no dicionário de dados. Vamos usar o tipo STRING:

Agora o seu context deverá estar assim:

Vamos agora, criar uma nova View, que será chamada pela View MAIN, formando um fluxo simples:

Na árvore de objetos, clique em Views com o botão direito e escolha Create > View.

Dê o nome RESULT para essa View e entre com uma descrição:

Com a view RESULT criada, salve e vá até a aba Context desta View:

Você vai notar que o Context do Component Controller já estará automaticamente disponível para a nova View.

Para usá-lo efetivamente, é preciso que seja feito o Context Mapping, que pode ser feito arrastando o nó NODE_GLOBAL_DATA do Component Controller para a raiz do Context da View RESULT:

Salve a View RESULT. Repita essa mesma operação para a View MAIN.

Desta forma, o nó NODE_GLOBAL_DATA está mapeado entre o Componete Controller a as duas Views do nosso componente. Isso garante que os dados deste nó sempre estejam sincronizados entre esses três elementos. Qualquer alteração feita em uma ponta afeta as outras duas igualmente.

Agora, na View MAIN, vamos criar elementos de interação com o usuário com base nos dados do Context:

Do lado direito do View Designer, na aba Layout da View, temos o Outline. Clique com o botão direito no elemento ROOTUIELEMENTCONTAINER e escolha Create Container Form:

Clique no botão Context:

Selecione o nó NODE_GLOBAL_DATA:

Você verá que todos os atributos, no caso apenas um, do nó foram mapeados em elementos de interface gráfica, e estes já serão automaticamente ligados (Data binding) ao respectivo atributo do nó.

Juntamente com o InputField gerado para o atributo USER_NAME, foi criado um Label. Selecione-o no Outline e modifique a propriedade Text.

Salve e repita o processo para a View RESULT, porém agora selecione o tipo de Cell Editor TextView, ao invés de InputField:

Crie uma mensagem com o Label adicionado junto ao TextView:

Agora, voltando a View MAIN, vamos adicionar um elemento Button a View. Desta vez, vamos arrastá-lo direto do painel de elementos a esquerda do View Designer. O elemento Button fica no painel Action:

Após adicionado, vamos entrar com um texto para o botão na propriedade Text.

Ainda na View Main, vamos até a aba Outbound Plugs para criar um plug que irá disparar os dados para a View RESULT:

Salve e vá até a View RESULT. Nesta View, devemos criar um Inbound Plug, para receber a ligação do Outbound Plug criado acima na View MAIN:

Note que ao criar um Inbound Plug, também é criado um método manipulador de evento para receber e tratar os dados deste plug. Salve a View RESULT e retorne para a MAIN.

No elemento Button, junto as suas propriedades, você vai encontrar uma evento, que dará uma funcionalidade a esse botão. Vamos clicar no ícone ao lado do evento onAction:

Preencha os dados da nova Action a ser criada, slecionando o Outbound Plug que criamos anteriormente:

Vá até a aba Actions e veja que para essa nova Action foi também criado um método manipulador de eventos.

Um duplo clique no Event Handler nos leva até o código ABAP do método.

Tudo que esse evento faz é chamar o método fire_to_result_plg() do objeto wd_this. O objeto wd_this é uma variável presente em todos os objetos Web Dynpro ABAP e contém uma referência para este objeto. Nesse caso, wd_this é uma referência para o View Controller local da View MAIN. O método fire_[nome_do_plug]_plg() é criado para cada Outbound Plug existente na View e serve para disparar qualquer que seja a ligação deste plug.

O que faremos agora é criar a ligação entre o Outbound Plug TO_RESULT da View MAIN com o Inbound Plug FROM_MAIN da View RESULT. Para isso, dê um duplo clique na Window do seu Componente:

Atualmente, somente a View MAIN está adicionada a Window, para adicionar a View RESULT a Window, simplesmente arraste-a da árvore de objetos, a esquerda, para a árvore da Window, a direita:

Agora para criar um link entre os plugs, arraste o Outbound Plug da view MAIN para o Inbound Plug da View RESULT:

Aceite os detalhes do Link de navegação:

Tudo que precisamos para testar o componente agora é criar uma aplicação Web Dynpro:

Preencha os dados:

Salve e ative todos os objetos.

Na hora de testar, não se esqueça do FQDN:

Clique em Enviar!

Pronto! Agora você pode adicionar um plug para voltar a View MAIN e criar um novo botão na View RESULT para acionar esse Plug. Boa sorte! Até a próxima...

Tutorial: Instalando e configurando ambiente Web Dynpro ABAP

2011-03-14T20:14:00.000-07:00

Olá pessoal! Como estão?

Fiquei impressionado e muito contente com o retorno que tive com os primeiros posts sobre WebDynpro aqui no Blogger. Depois de muito tempo e de muito trabalho, volto para dar mais uma contribuição. Vamos lá.

Hoje vou demonstrar como poderemos instalar e configurar um ambiente de desenvolvimento para WebDynpro ABAP, versão 7.01.

Com este ambiente poderemos criar e testar os vários recursos desta tecnologia SAP, bem como o uso da linguagem ABAP de forma "irrestrita". Eu coloco aspas nesta palavra, pois assim como acontecia nas versões do antigo MiniSAP, esta versão para desenvolvedores não tem qualquer transação dos módulos funcionais do ECC. Ela é uma instalação baseada no SAP Netweaver Web Application Sever ABAP 7.01, e acompanha várias ferramentas de performance e ajuste fino de programas e classes ABAP (performance tunning), como irei mostrar em posts mais específicos. Eis o que iremos precisar:

Mídias de instalação do Netweaver ABAP 7.01 SP3 Developer edition (link)
Computador com sistema operacional Windows XP SP2 ou superior (Vista, 2003/2008 Server, Vista ou Seven)
Java Runtime Environment 1.4.2 instalado no sistema de destino (para instalação) (link)
Descompactador de arquivos RAR, como WinRAR.

Se você tem um computador com mais de 3Gb de memória e um bom processador (qualquer dual core ou superior), eu recomendo fortemente utilizar uma máquina virtual para instalação do ambiente. Você poderá usar a Oracle Virtual Box ou o MS Virtual PC. Se estiver usando um host Linux, como eu, uma boa opção é o VMWare Player, é leve, funciona muito bem e é muito flexível.

O download das mídias para instalação é dividido em dois arquivos, no formato RAR, de: 1,9Gb e 1,2Gb.

Após os arquivos estarem devidamente descompactados no sistema de arquivos da máquina destino (deve estar formatado com NTFS), podemos iniciar o processo de configuração antes da instalação. Abra no seu navegador favorito o arquivo start.htm:

Vamos até a sessão System Requirements:

Vamos revisar esses pontos antes de começar a instalação.

Seu sistema operacional deve ser Windows XP SP2 ou superior, eu estou usando uma VM com o Windows 7 Ultimate 32bit;
O nome do seu computador (Computador > Propriedades > Nome do Computador) não deve exceder 13 caracteres;
O sistema de arquivos com o qual você formatou o disco para instalação do Windows deve ser o NTFS (padrão);
Deverá ter um navegador IE5.5 ou Firefox (qualquer versão acima do 1.0). Eu particularmente uso o Google Chrome;
Pelo menos 1 Gb de memória RAM. 2 Gb é bastante razoável para esta instalação, mas se você não dispor de 2Gb, 1Gb é suficiente, sem muita espera;
Pagefile: é o tamanho da memória Virtual do seu sistema. Eu recomendo utilizar, para uma instalação em sistema com 1Gb de memória, usar 6Gb (6144Mb) de memória Virtual. Isso ajuda bastante o App Server. Para 2Gb de memória RAM, você pode tranquilamente usar 4Gb de memória virtual (4096 Mb). Essa configuração é feita em Computador > Propriedades > Aba Avançado > Na área Desempenho, clicar em Configurações > Aba Avançado > Na área Memória virtual, clique em Alterar. Siga as instruções na tela para alterar o tamanho da Memória.
Processador Pentium 3 (1.1 Ghz) ou superior. Isso é fácil hoje em dia!
30 Gb de HD livre durante a instalação, e 22Gb permanentes. Minha Máquina virtual tem um espaço de 60 Gb, pois só vou instalar esse ambiente, mais nada, nela. Na maioria dos casos, isso é suficiente, pois o banco de dados não crescerá tanto assim;
Monitor com resolução de no mínimo 1024x768 e 256 Cores;
Nenhuma outra instância de produto SAP instalada previamente nesta máquina. Ou seja, tire aquele BW que está rodando aí!!!
Várias portas usadas pelo App Server ABAP têm que estar disponíveis neste sistema. Mais uma vantagem de se usar uma máquina virtual: a instalação está limpa!
Se você não estiver conectado a uma rede, por algum motivo (?), você pode simular uma interface de rede com o driver MS Loopback Adapter. Clique no link para mais informações. Eu duvido que você vai precisar...

Tudo certo? Então podemos começar a instalação, que é bem simples. O arquivo do instalador está na pasta SAPNWABAP701SR1_TRIAL\SAP_NetWeaver701SR1_2008_Installation_Master\IM_WINDOWS_I386\, partindo da raiz do download que fizemos nos passos anteriores. O arquivo é o sapinst.exe:

Após alguns avisos sobre exceções no Firewall do Windows, que você deve permitir, abrirá a ferramenta de instalação SAP:

Selecione as opções como na imagem a seguir:

Clique em Next...

Após recolher algumas informações sobre seu sistema, o instalador exige que seja feito um Log-Off no Windows, afim de garantir que você possua mesmo credenciais de administrador no sistema, o que é essencial para essa instalação, diga-se de passagem:

Prossiga com o Log-Off. O sistema irá restaurar o estado do instalador automaticamente após o reinício da sessão.

Leia e Aceite o contrato de utilização de usuário final:

Clique em Next...

Como eu disse, você deve aceitar o contrato..

Clique em Next...

Indique onde está sua instalação do JRE 1.4.2, atenção para a versão, que deve ser a indicada.

Clique em Next...

Neste ponto o instalador lhe pergunta se deseja habilitar o FQDN no sistema. FQDN significa Full Qualified Domain Name, o que por sua vez podemos traduzir em Nome de Domínio Totalmente Qualificado, ou seja, o seu sistema está em um domínio e a configuração correspondente no seu sistema ABAP já será providenciada. Não faremos essa configuração agora, porém usaremos o FQDN mais tarde, tanto no processamento de WebyDynpros quanto de BSPs. Explicarei tudo oportunamente.

Clique em Next...

A próxima tela lhe pergunta pela Master Password, que é a senha mestra para todos os sistemas a serem instalados em sua máquina. Guarde essa senha com cuidado e não use caracteres especiais, como @, pois há um bug conhecido no MaxDB quando se usa caracteres especiais no usuário Control deste sistema. Essa senha deve ser composta por letras e números, com tamanho entre 8 e 9 caracteres.

Clique em Next...

Neste momento, o instalador verifica os pré requisitos para instalação e certamente vai reclaramar se sua versão do Windows não é XP, Vista ou 2003 Server. Se você está usando um sistema em PT-BR, ele também diz que só suporta sistemas em Inglês internacional. Por enquanto, apenas ignore esses avisos e clique em Cancel no Popup apresentado.

Para esta instalação de desenvolvimento não utilizaremos SSL, para fins de simplicidade. Na próxima tela, desmarque a opção de instalar a SAP Cryptographic Library.

Clique em Next...

Neste momento o instalador te apresenta um resumo dos parâmetros de instalação, e lhe permite revisá-lo e corrigí-los, quando necessário.

Quanto estiver pronto, clique em Next...

A parte mais demorada da instalação é a etapa Import ABAP, onde os programas que compõem o App Server e todas as ferramentas e transações existentes nesta versão são carregados, como o Dicionário de Dados ABAP, o ABAP Workbench, as ferramentas de performance e monitoramento ST05, SM50, SE30 e etc. Essa importação é feita em 28 Jobs separados, rodando de três em três simultaneamente:

Após 6 horas de processamento, em minha máquina virtual com 2Gb de memória e 1 processador apenas, o resultado é o seguinte:

Após mais meia hora de espera, a instalação é concluída. Se a sua instalação demorar mais que isso, não se preocupe. Na verdade é normal. Instalações do ECC completa chegam a durar alguns dias, dependendo da máquina/cluster a ser instalada e configurada.

Depois disso, você pode notar que aparece um ícone em sua área de trabalho:

Este console é usado como ponto de partida para iniciar, parar e monitorar a sua instância SAP local.

O Netweaver Application Server ABAP é composto por 2 processo de sistema operacional básicos: o Message Server e o Dispatcher. Sempre que iniciar sua instância, e você precisa fazer isso sempre que quiser usá-la, você deve ter certeza que estes dois processos estão executando normalmente. Antes de desligar sua máquina, sempre pare completamente a instância SAP, para evitar a corrupção dos dados no banco MaxDB.

Ps.: Você sabia que o MaxDB é um sistema de banco de dados livre fornecido pela SAP e que ele é baseado no MySQL?

Bom, agora que tudo está instalado e rodando, vamos criar a entrada no SAP Logon para sua instância SAP local:

Crie uma nova entrada em seu SAP GUI com a seguintes configurações:

Vai ficar assim:

Inicie o logon nesta ligação, o que você deve ver é o seguinte:

Vamos usar agora o usuário BCUSER para logar no mandante 001, de desenvolvimento. A senha é "minisap".

Você provavelmente receberá algumas mensagens de erro desse tipo:

Além de muito tempo de compilação. Não se preocupe, isso não deve nos atrapalhar, logo que o tempo de uso da instância tiver sido maior, a maioria dos programas já terão sido compilados e o cache estará atualizado. Isso é comum em instalações novas. Existe até uma transação, a SGEN, que é usada para gerar/compilar grandes porções de programas em background, para manter o cache atualizado. Como essa instância será usada por apenas poucos, ou apenas um, usuários, apenas o uso constante já deve resolver esse problema.

Após a compilação correta, você deve começar a ver a tela do menu SAP incial assim:

Vamos começar iniciando o Object Navigator, transação SE80. Essa transação será utilizada como ponto de partida para desenvolvimento Web Dynpro ABAP e BSP na maior parte do tempo:

Tudo pronto. Agora é mãos à obra!!!

Pra não ficar só na conversa, vamos criar um Componente Web Dynpro rápido, um Hello World, a fim de testar nossa instalação.

1 - Criando o componente:

Na transação SE80, selecione o tipo de objeto Web Dynpro Componente / Interface:

Dê um nome ao componente: ZWDC_HELLO_WORLD.

Tecle Enter.

Ao ser perguntado se deseja criar um novo componente, responda que sim, obviamente.

Após isso, dê um texto descritivo ao seu componente Web Dynpro e confira o nome da nova View e da nova Window que serão automaticamente adicionados ao seu componente:

Confirme...

Como não vamos transportar nenhum objeto, não há a necessidade de se indicar um pacote, apesar de você poder criar um pela SE80 e indicar aqui. Para o nosso caso, apenas clique no botão Local Object...

Após a criação, navegue até Views > MAIN e dê um duplo clique:

Clique no botão "Show/Hide Layout Preview" na barra de ferramentas na parte de cima da janela. Você verá que existe algum problema com o preview do Web Dynpro ABAP:

Felizmente, para resolver é simples. Vá até a transação SICF para configurarmos alguns serviços Web necessários ao nosso ambiente de desenvolvimento:

Execute o programa e navegue até o caminho abaixo. Ative todos os serviços abaixo deste caminho.

Ao ser perguntado, clique no botão ativar todos, que é o segundo na imagem abaixo.

Importante: Ative também todos os serviços do nó "/default_host/sap/bc/".
Os serviços mais importantes para o designer Web Dynpro (SE80) são os do nó "/default_host/sap/bc/wdvd/", portanto não esqueça de ativá-los.

Aproveite para ativar o serviço no nó "/default_host/sap/public/myssocntl", ele será útil mais tarde.

Após isso, reinicie a transação SE80 (você pode usar o comando /nSE80), e vá até seu componente WebDynpro. Clique novamente na View MAIN:

Nesse momento você deve fornecer as credenciais do usuário SAP:

Pronto, agora o View Designer já está funcionando!

Alterne para o modo de Edição, clicando no Lápis na barra de ferramentas.

Do lado direito, aparece a estrutura da View até aqui, chamada de Outline, clique no elemento RootUIElementContainer com o botão direito do mouse e escolha Insert Element:

Dê um Id e um tipo para o elemento, como abaixo, e confirme:

Insira um texto, como Hello World! na propriedade Text do novo elemento.

Salve e alterne novamente para o modo Exibição, clicando no lápis da barra de ferramentas. Ative todo o componente:

Desta forma, estaremos ativando todos os objetos de uma só vez:

Após ativado, só falta um passo pra testarmos nosso componente: uma Aplicação Web Dynpro.
Pense na aplicação Web Dynpro como uma transação SAP, um ponto de partida para um programa. É a aplicação Web Dynpro que nos fornecerá uma URL:

Dê um texto para a aplicação e confirme:

Após criada, salve e ative a aplicação. Como a Aplicação Web Dynpro é um objeto independente do componente Web Dynpro, você precisará indicar um pacote, ou objeto local no nosso caso.

Agora já temos a URL para testar a aplicação, vamos lá?!

Use as credenciais do usuário BCUSER para logar. Caso ocorra um erro de Time Out, insista na tentativa até conseguir. Isso ocorre principalmente nas primeiras vezes, devido ao cache.

Agora ocorre um erro que tem um detalhe interessante: lembra-se do FQDN do qual eu falei lá atrás, durante a instalação? Pois é, esse é o momento de configurá-lo, ou melhor, de simularmos um FQDN.

Abra o seu arquivo hosts (execute o notepad como Administrador no Vista ou Seven) e inclúa uma linha no final com um domínio fictício, apontando para o IP local da máquina, como segue:

Observe que na maioria dos sistemas, o arquivo hosts fica no caminho C:\Windows\System32\drivers\etc.

Reinicie o Browser e tente novamente, mas agora substitua o nome do host pelo domínio fictício:

Deve demorar um pouco até que você consiga visualizar o resultado. Continue atualizando a página enquanto os erros de Time Out não acabarem, assim os programas serão compilados e da próxima vez será bem mais fácil!

Finalmente! Meu último recado é: não se frustre se você acha que o resultado é muito pequeno diante de tanto trabalho, pois agora temos todas as ferramentas a mão e podemos usar o bom e velho ABAP em uma perspectiva toda nova.
Eu garanto que o próximo tutorial terá um resultado muito mais interessante. Persista!

ABAP Web Dynpro - Prática 1

2010-02-14T11:25:00.000-08:00

Clique aqui para baixar a apostila ABAP Web Dynpro - Prática 1.

Sobre dúvidas de como configurar o ambiente, visite a página do programa SDN (em inglês) ou me mande um email: frasseli@gmail.com.

ABAP Web Dynpro - Fundamentos

2010-02-14T11:11:00.000-08:00

Clique aqui para baixar a Apresentação em PDF

O que é Web Dynpro

De um ponto de vista tecnológico, Web Dynpro, Java e ABAP, são passos revolucionários para o desenvolvimento de interface de usuário para Web, dentro da estratégia da SAP. É completamente diferente do paradigma até então estabelecido pela SAP e representa um grande avanço no desenvolvimento de aplicações ERP baseadas em Web.

Aplicações Web Dynpro são construídas usando técnicas de programação declarativa baseadas no padrão de projeto MVC (Model View Controller), largamente difundido na indústria. Isto é, você define quais objetos deverão estar disponíveis para o cliente e de onde estes os valores para estes objetos deverão ser recuperados/armazenados. Você define também quais são os possíveis caminhos de navegação, declarativamente em sua aplicação. Todo o código necessário é, então, gerado automaticamente dentro do runtime framework. Este modelo isenta o desenvolvedor das tarefas repetitivas de codificação/marcação HTML e interatividade, como JavaScript.

ABAP Web Dynpo está disponível desde a versão NetWeaver 2004s (Application Server 7.0). Para o desenvolvimento componentes e aplicações Web Dynpro ABAP, a transação SE80 (ABAP Workbench) foi aprimorada.

Web Dynpro foi concebido para suportar desenvolvimento estruturado e as unidades de modularização são os chamados Componentes Web Dynpro, que podem ser combinados para formar aplicações complexas.

Declarações Meta Modelo vs. Código Customizado

Considerando o modelo de programação declarativa do Web Dynrpo, dentro do Workbench, existem certas ferramentas que permitem ao desenvolvedor construir uma representação abstrata na forma de Meta Modelo Web Dynrpo. O código necessário é então gerado, em conformidade com uma arquitetura padrão, conhecida como o Framework Web Dynpro.

Este framework permite, então, que o desenvolvedor injete, em locais predefinidos, código customizado para atender aos requisitos de negócio da aplicação. Isto diferencia uma aplicação Web Dynpro das outras, que por definição, são compostas das mesmas unidades básicas.

Este modelo permite que nem todas as decisões de implementação sejam feitas na fase de desenho da aplicação. Isto permite, por exemplo, que a aparência da interface com o usuário seja decidida em tempo de execução, de acordo com parâmetros do usuário ou requisitos de negócio. Isto permite que uma aplicação Web altamente flexível seja construída sem a necessidade de códigos complexos DHTML e Javascript.

Cenários de aplicações Web Dynpro

Aplicações ABAP Web Dynpro podem acessar uma variedade de fontes de dados (Models), tanto diretamente, como chamadas a módulos de função e métodos de objetos, ou indiretamente, através do consumo de Web Services ou de conexões com EJB (Enterprise JavaBeans) usando o conector Java (JCo).

É possível ainda, apesar de ser altamente não recomendado, causando uma confusa mistura entre a camada de negócios e o modelo de dados (Model e Controller), o acesso direto a um comando OpenSQL SELECT.

Um Objeto ABAP (instância de uma classe) até o presente momento não pode ser usado como modelo. A maneira recomendada para se ter objetos reutilizáveis que representem lógicas de negócio é construir Classes ABAP para conter este tipo de código. É possível ainda se criar um Componente faceless, ou seja, um componente WebDynpro sem nenhum elemento visual, apenas para fim de reusabilidade.

Benefícios do Web Dynpro

O objetivo principal do Web Dynpro é fornecer ao desenvolvedor de aplicações uma maneira de criar aplicações Web poderosas com o mínimo de esforço (repetitivo) usando ferramentas e processos declarativos em um processo de desenho estruturado.

Uma regra de oura da filosofia do Web Dynpro é: Quanto menos linhas de código escritas pelo desenvolvedor, melhor. Este objetivo é alcançado considerando-se dois princípios:

Usando uma técnica declarativa, com Meta Modelo independente de linguagem para definir a interface com usuário e, desta definição declarativa, o ambiente de desenvolvimento pode gerar o código fonte necessário. Código manual ainda tem seu lugar, mas está, ou deveria estar, restrito apenas a manipulação de dados de negócio e nunca de interface com usuário (View).

Artifícios técnicos prontos, como I18N, baixo número de reloads de páginas através de AJAX (flicker-free interaction), e uma clara separação da camada de negócio (Controller) e interface com usuário (View).

Model-View-Controller

O Web Dynpro é fundamentado no padrão de projeto MVC, concebido originalmente pelo projetista de software norueguês Trygve Reenskaug, enquanto trabalhava na Xerox, no PARC no final dos anos 70. Sua primeira implementação ocorreu no lançamento da linguagem Smalltalk-80.

Este padrão de projeto foi considerado uma revolução, pois foi o primeiro a descrever componentes de software em termos de:

• As responsabilidades funcionais correspondentes a cada componente.

• Os protocolos de mensagem a qual cada componente deveria responder, ou reagir.

A SAP modificou e estendeu a especificação original do MVC para criar o conjunto de ferramentas Web Dynrpo.

Componentes Web Dynpro

Os componentes permitem uma complexa estruturação de entidades de aplicação Web interativas e sua reutilização. Isto permite o aninhamento em grandes aplicações.

Podemos enxergar o componente como um container para outros objetos relacionados a interface com o usuário (View) e o código fonte Web Dynpro (Controller).

Os elementos principais de interface com o usuário, são as Windows e as Views. Uma View representa uma área retangular que será exibida em uma página no cliente, um Web Browser por exemplo. Esta contém elementos de interação, como caixas de texto, imagens e botões. Uma página completa enviada para o cliente pode ser composta de apenas uma View, mas também pode ser uma combinação de virtualmente qualquer número de Views. Esta combinação de Views e o fluxo entre estas é definido em uma Window. O relacionamento entre Views e Windows, fazendo uma analogia ao DER, seria N:N.

O código fonte de uma aplicação Web Dynpro está localizado nos Controllers. O armazenamento lógico dos dados globais de um Controller é hierarquicamente definido em um Context.

Context Mapping e Data Binding

As variáveis definidas em um Context de Controller Web Dynpro podem ser referenciadas dentro de Contexts de outros Controller. Chamamos isto de Context Mapping. Isto permite o compartilhamento de dados comuns entre diferentes Controllers, retirando a necessidade de se efetuar cópias destes dados entre contextos.

Os valores de elementos de interação com o usuário devem ser ligados a atributos de um Context do Controller corrspondente: ao Context do View Controller, por exemplo. A isto chamamos de Data Binding. Através desta técnica, ocorre o transporte automático dos dados de campos de entrada para os atributos (variáveis) do Context.

Combinando estas duas técnicas, vemos que o transporte de dados entre elementos de diferentes Views é definido de uma forma puramente declarativa.

Context Mapping

Permite que um nó em um Controller seja automaticamente preenchido com os dados de um nó correspondente em um Context, geralmente de uma View. Este é o mecanismo principal para compartilhar dados comuns entre Controllers.

Quando dois Controllers dentro do mesmo Componente compartilham dados através deste relacionamento, isto é chamado de Mapping interno. O Context que atua como fonte dos dados é chamado Nó de Origem, enquanto o nó que recebe os valores é chamado de Nó Mapeado.

O Mapping de Nós entre Context de Controllers localizados em diferentes Componentes é chamado de Mapping Externo.

Para o Mapping de nós ser declarado, é preciso que alguns pré-requisitos sejam cumpridos:

• É preciso que exista um Nó de origem no Context de Controller agindo como a fonte dos dados.

• O Controller que contem o Contex com o Nó Origem não pode ser um View Controller.

• O Controller com o Nó Mapeado deve declaras o Controller com o Nó de Origem como um Controller usado.

Data Binding

É a técnica pela qual os dados são transportados de um Context de uma View para os elementos de interação nolayout desta View, e vice versa. Você não pode ligar um elemento de interface com o usuário com um nó ou atributo localizado em um Context de outro Controller, apenas o contido na própria View.

Sendo assim, os elementos de interface com o usuário sempre serão privados àquela View onde foram declarados.

Esta técnica separa os elementos de interface com o usuário do código fonte da aplicação, localizado dentro dos Controllers. Desta forma, para se manipular valores de propriedades em um elemento de interface com o usuário, o código fonte do Controller da View em questão precisará apenas modificar os nós e atributos do Context desta View, considerando que estes elementos estejam ligados por Data Binding. O framework Web Dynpro executa então as duas tarefas a seguir:

• O transporte dos dados do nó ou atributo para o elemento de interface com usuário ao qual este esteja ligado, durante o processo de renderização da página.

• A atualização de todos os nós e atributos correspondentes que sofreram modificações nos elementos de entrada de dados por parte do usuário. Neste processo, os dados são automaticamente convertidos e checados para que correspondam a seus respectivos tipos declarados, caso ocorra alguma falha, uma mensagem é imediatamente exibida para que o usuário possa corrigir este valor.

Data Binding não se restringe, porém, a ligação com valores de elementos de interação com atributos do Context, mas pode-se, por exemplo controlar propriedades destes elementos como visibilidade, aparência, etc. Desta forma podemos controlar as propriedades de qualquer elemento de uma View de dentro do Controller desta View, modificando valores de nós e atributos do seu Context.

Navegação entre diferentes Views

A navegação entre as Views é acionada configurando e, eventualmente, disparando-se Outbound Plugs. Isto causa um evento de navegação. Estes eventos são organizados, de modo assíncrono, em uma fila. Múltiplos Outbound Plugs podem ser disparados de uma única View. Cada chamada pode redefinir a interface com o usuário, apresentando-lhe um novo conjunto de Views, Esta fila contendo os eventos de navegação é processada em um determinado ponto da fase de processamento, gerenciada pelo framework Web Dynpro. Até este ponto, esta pilha de chamada pode ser modificada, incluindo-se ou retirando-se eventos de navegação. Convêm-se que Outbound Plugs sejam nomeados de acordo com a ação que causou a navegação desta View para uma outra.

Do outro lado, existes métodos manipuladores de eventos especiais, que são associados aos eventos de navegação gerados pelos Outboud Plugs. Estes são chamados de Inbound Plugs. Quando da fase de processamento do framework Web Dynrpo, estes métodos são chamados para cada evento na fila de navegação. É interessante notar que, para estes eventos serem acionados, todas as Views do conjunto atual tenham disparado seus Outbound Plugs e que nenhum erro de validação de dados tenha ocorrido, cancelando a navegação. Inbound Plugs, em nome da clareza, deveriam ser nomeados em razão do motivo pelo qual a View a que corresponde está sendo exibida.

Outbound Plugs e Inbound Plugs são ligados através de Navigation Links. Tecnicamente, ao se definir um Navigation Link entre um Outbound Plug e um Inbound Plug significa registrar o método manipulador de evento de um Inbound Plug ao evento de navegação de um Outbound Plug. Desta forma, assim que um Outbound Plug é disparado, automaticamente o método do Inbound Plug correspondente é executado.

É possível definir parâmetros entre o disparo de um evento de navegação de um Outbound Plug e o método manipulador de evento do Inbound Plug, permitindo que dados sejam transferidos de uma View para outra.

Windows e Views aninhadas

Uma Window é, por definição um conjunto de todas as Views necessárias para a construção de uma página visível. Uma Window pode ter zero ou mais Views ebutinas. Uma Window pode conter elementos denominados View Containers, permitindo assim o aninhamento de Views dentro de uma Window.

Uma Window define quais combinações de Views estarão visíveis e em que momento, através do uso de Outbound Plugs. Desta forma, ao criar uma Window, você terá que definir três aspectos:

• Todas as possíveis Views que poderão ser exibidas devem ser embutidas na Window.

• Se for necessário que várias Views sejam exibidas em paralelo, deve-se definir o layout e a organização destas Views através de um elemento View Container. Para cada elemento View Container, uma View padrão deve ser definida para ser exibida inicialmente

• Os Navigation Links entre as Views devem ser definidos, ligando-se Outbound e Inbound Plugs.

Apenas uma View pode ser exibida para o usuário, em tempo de execução. É possível definir uma View vazia, a fim de se conseguir limpar a tela visível para o usuário.

O conjunto de Views utilizado para de compor uma Window é conhecido como View Assembly.

Interface View e Interface Controller

As partes de um Componente Web Dynpro visíveis, para outro Componente Web Dynrpo, são os chamados Interface View(s) e Interface Controller.

Apenas um Interface View por Componente é automaticamente criado, e dentro dele podem ser expostos dados (Context), métodos e manipuladores de evento, para outros Componentes.

As Interface Views representam as interfaces visuais com o usuário de um Componente Web Dynpro. Há uma relação de 1:1 entre as Windows e as Interface Views, ou seja, cada vez que se define uma Window, uma nova Interface View é automaticamente criada, expondo esta Window para outros Componentes Web Dynpro. Esta Interface View obedece a propriedade interface de cada Outbound e Inbound Plug para decidir se estes serão expostos. Os métodos e dados da Window não serão acessíveis através deste mecanismo.

Para um Componente que não possui Views, não há a necessidade de se gerar Windows e, portanto, não existirão Interface Views. Um Componente que não tenha interface visual é conhecido como faceless.

StartUp Plug e Web Dynpro Application

Finalmente, é preciso definir um ponto de partida para o uso das Views e seus a lógica contidas nos Controllers, que se comunicam com os Models do Web Dynpro.

Este ponto de partida é definido através de um Inbound Plug especial, do tipo StartUp. É preciso ainda que seja criado uma Web Dynpro Application, que representa uma URL e é associado ao StartUp Plug da Interface View.

Na maioria dos casos, uma Interface View será chamada por apenas uma Web Dynpro Application. Porém, assim como um ABAP Módulo Pool pode ser invocado por transações diferentes, seguindo fluxos de tela diferentes, também podem existir várias Web Dynpro Applications tendo pontos de partida no mesmo Componente Web Dynrpo, sendo que posem ser criados vários StartUp Plugs em diferentes Interface Views.

Para se definir uma Web Dynpro Application é necessário:

• Definir qual Componente será invocado. Este será conhecido como o Componente Root para a Application.

• Qual Interface View deste Componente será usado, definindo assim qual o View Assembly será exibido por padrão pela Application.

• Qual Inbound Plug desta Interface View, que deve ser mandatoriamente do tipo StartUp, agirá como ponto de partida para Application.

Web Dynpro Brasil

2010-01-30T20:36:00.000-08:00

SAP Web Dynpro é uma nova tecnologia de desenvolvimento para Web para a plataforma NetWeaver, da empresa alemã SAP, líder mundial em sistemas corporativos.

Através dos artigos deste blog, você pode se atualizar sobre esta tecnologia e seguir tutoriais, dicas e notícias sobre esta revolucionária tecnologia.

Começaremos apresentando um material, de minha autoria, baseado no material utilizado no curso oficial NET310, da SAP, para a introdução aos Fundamentos do Web Dynpro ABAP.