BSP + jQuery Mobile, ou a aventura de SAP-webdev parte I: Preparao e loginFALAE SEUS BANDO DE CONSULTOR DEGENERADO! Tudo certo com vocs? Sim, eu estou de volta s agora em 2015 porque finalmente eu tenho algum contedo bacana pra colocaraqui. Porm antes de comear a historinha do post, um breve:Aviso! | Advertencia! | Warning! | Warnung!Esta srie de posts, apesar de possuir contedo ABAP, est focada eminterface web,portanto o leitor deve esperarnestecontedo referncias a assuntos como: HTML5; CSS; JavaScript/jQuery; e desenvolvimento web em geral.IntroduoRecentemente, eu fui envolvido num projeto onde o cliente quer modernizar a interface dealgumas transaes, que so executadasatualmente viaSAP Console. Essas transaes servem de suporte pra uma operao de coleta de materiais, e devido essa natureza os operadores utilizam PDAs com Windows NT (sim, essas coisas ainda existem e esto sendo usadas) que acessam o SAP. A ideia do projeto migrar as transaes pra aplicaes BSPe depois, aos poucos, substituir os dispositivosque os operadores usam por outros maisnovos,com sistemas mais modernos(Android ou iOS).Mas por que usar BSP?, talvez seja a dvida que surja neste momento. Talvez, porque ao parar pra pensar, BSP a nica alternativa vivel. A nica verso de WebDynpro que suporta integrao mvel a verso Java, e de conhecimento comum que a performance de aplicaes WebDynpro muito inferior quando comparada performance de outras tecnologias de interface web (esse post aqui, apesar da propaganda bvia, ilustra o problema), o que um ponto crucial quando decidimos o que usar numa aplicao mvel. Por esse mesmo motivo, riscamos as transaes Easy Web da lista de candidatos. No ha disponibilidade de usar Gateway, porque o ambiente no tem os componentes disponveis e s a instalao e configurao dos mesmos daria um projeto parte. Portanto, devido flexibilidade necessria, nos resta apenas o BSP pra fazer obackend. Oframework do BSP praticamenteo mesmo desde o R/3 4.7, o que facilita tanto o entendimento para a construo como as manutenes posteriores.Com o backend decidido, o que usar defrontend?Como a aplicao vairodarem navegadores / dispositivos mais novos, no faz sentido usar o ultrapassado HTMLB. Qual das trocentas alternativas de bibliotecas pra frontend a melhor?Essa deciso, no meu caso, tambm j estava quase tomada o cliente j tinhaalgumas aplicaes BSP com interfaces implementadas emjQuery /jQuery Mobileem uso, portanto achei sensato usar essas mesmas bibliotecas para a aplicao nova. Seria interessante considerar o uso deUI5 aqui, porm eu achei que a curva de complexidade se tornaria muito ngreme para implementar uma lgica de interface que, nas aplicaes que j existiam, era bem simples. Ealm disso eu no estou completamente vontade ainda para desenvolver em UI5, ento eu acabei pesando pro lado que eu conhecia melhor.Resolvi,ento,usaresse projeto como base para essasrie deposts, onde eu pretendoexplicar as tcnicas que eu usei paradesenvolver uma aplicao BSP com interface em jQuery Mobile. Observem bem que nessa ltima frase eu usei a palavratcnicas, porque eu no pretendo mostrar aqui a construo completa de uma aplicao se voc precisa de algo assim, existem alguns posts no SCN comoesse aquieesse aqui tambmou quem sabe esse no Sourceforgeonde ao final voc ter uma aplicao construda.Enfim, com as ferramentas escolhidas, j possvel comear a desenvolver.Preparandoos recursosComo estamos trabalhando com BSP, esteo momento onde deve-se importar os recursos necessrios aplicao para o repositrio MIME. A documentaodiz que os objetos MIME disponveis para todas as aplicaes BSP ficam na pasta /SAP/BC/BSP/[namespace]/PUBLIC(onde [namespace]pode ser tanto SAPcomo algum namespace do cliente), portanto esse o local onde devemos importar as bibliotecas de jQuery. No caso do projeto, as bibliotecas de jQuery e de jQuery Mobilej estavam presentes no repositrio, assim como o tema jQuery Mobile personalizado do cliente. Eu acabei precisando importar apenas mais algunspluginsespecficos para algumas tarefas, como o DateBoxpara criar campos de seleo de data mais consistentes do que os dojQuery Mobile, e o Numberpara formatao de campos com dados numricos (vou falar mais desses plugins nos prximos posts).Customizando o loginAt comear neste projeto, eu nunca havia desenvolvido muito em BSP fora de umZHELLO_WORLD. Minha experincia com desenvolvimentoweb dentro do SAP abrangia somente WebDynpro ABAP, e em todos os projetos ondeeu trabalhei com essa tecnologia at hoje odeploy das aplicaes sempre foi feito dentro de um Portal (EP). Esse tipo de implantao facilita alguns aspectos do desenvolvimento. Um deles a autenticao de usurios: na maioria das vezes, umaaplicao WDA implantada num EP no precisa se preocupar comlogin,logoff ou sesses de usurios, porque esses elementosso tratados pelo prprio portal.Mesmo assim, em alguns momentos eu j precisei customizar o servio ICF dealgumas aplicaes WDA. S que com esse projeto eu acabei descobrindo que os servios tem muito mais opes do que apenas Ativar / Desativar.

Configurando pginas de erro na SICFAs telas acima mostram um exemplo de configurao de um servio do ICF mais especificamente da configurao de pginas de errodo servio. Estas pginas se chamam assim porque so as respostas definidas no servio a erros especficos que podem ocorrer durante o uso da aplicao: erros delogin ( HTTP 401 ), erros em geral da aplicao ( HTTP 500 ), erros ao no encontrar algum recurso no servidor ( HTTP 404 ) e pginas de resposta para logoff.Todas essas pginas podem ser customizadas para um servio de uma aplicao BSP, e interessante que se faa isso. Porm, a tela delogin talvez seja a mais importante de todas no caso de aplicaes mveis porque, a no ser que se trate de algum caso mais raro onde dispositivos mveis fazem uso deSingle Sign-On, a tela de login sempre ser a primeira a ser exibida quando o usurio acessa o link da aplicao. Dessa maneira, importante que a pgina deloginseja to responsiva quanto as pginas da aplicao.O que temos a fazer aqui criar uma classe filha da CL_ICF_SYSTEM_LOGINe indicar essa classe dentro da configurao SystemLogon do servio na SICF, atravs deError Pages > Logon Errors >selecionarSystem Logon e clicar no botoConfiguration > na tela nova, selecionarDefine Service-Specific Settings >no grupoLogon Layout and Procedure, selecionarCustom Implementation e indicar emABAP Class o nome da classe gerada.A CL_ICF_SYSTEM_LOGINtem alguns mtodos com o nome HTM_*, que so responsveis por criar o markup das pginas de login os mtodos que merecem destaque entre esses so o HTM_LOGIN, que oresponsvel propriamente por criar a pgina delogin, eo HTM_CHANGE_PASSWD, que constri a tela para mudana de senha. A lgica implementada nessas pginas bem simples: o usurio deve preencher seu ID e senha e clicar em um boto que disparar um evento especfico atravs de uma funo JavaScript pr-definida. Para isso, todos os mtodos HTM_*possuem um parmetro importingcom o nome IV_JAVASCRIPT, que contm as funes predefinidas para os botes, alm claro de um parmetroreturning chamado RV_HTML, que astring com o HTML gerado. No caso de uma tela construda com jQuery Mobile, podemos concatenaro contedo do parmetro IV_JAVASCRIPTno markuplogo aps importar as bibliotecas jQuery. Os mtodos tambm possuem um outro parmetroimporting chamado IV_HIDDEN_FIELDS, que traz ummarkup j construdo,contendoos campos que NO esto selecionados no grupo Select Display na configurao (veja na imagem acima), ou seja, campos que devem ficar escondidos. O valor desse parmetro pode ser inserido no incio doform que ser montado pelo mtodo.Alm dos mtodos, a classe tambmpossui diversas constantes que definem os atributos ide namedas tags de campos e botes. Esta pgina do help da SAP fornece uma referncia para o uso dessas constantes. Epodemos encontrar, ainda nessa mesma classe, uma srie de outros atributos contendo textos que so construdos automaticamente para textos delabels e botes, de modo afacilitar a construo delayout como, por exemplo, o atributo M_TXT_LABEL_USER, que serve de label para o campo de ID do usurio, ou o atributo M_TXT_BUTTON_LOGIN, que contm textopara o boto que realiza ologin.Felizmente, existe uma refernciastandard de como construir uma tela delogin e tambm uma tela de mudana de senha. Essa referncia a classe CL_ICF_EXAMPLE01_LOGIN, que constri as pginas em HTMLB. Partindo da implementao dessa classe, basta ter em contaos pontos onde as funes JavaScript so chamadas e reconstruir o markup usando os elementos do jQuery Mobile.

Enxugando a tela de logon com jQuery MobileAlgumas dicassobre a construo das telas de login: Deixe a construo do HTML de retorno para um nico comando nofinal do mtodo. Os mtodos da CL_ICF_EXAMPLE01_LOGINmisturam diversos CONCATENATEs ao longo do cdigo incluindo astags HTML e construindo os textos das variveis ao mesmo tempo, o que torna difcil de ver o resultado completo que ser retornado. Em vez disso, melhor construir todas as variveis no comeo do mtodo e depois, como ltimo comando, construir todo o HTML no parmetro de retorno. Isso facilita a visualizao domarkup,de modo que voc no precise ter que executar o mtodo apenas para poder ver o retorno. BONUS POINTS pra quem fizer isso usandostring templates em vez de CONCATENATE(se for possvel, claro). No esquea das mensagens! O atributo M_LOGMESSAGES uma tabela que contm as mensagens relativas aologin; se algum erro for encontrado, a tela delogin ser chamada novamente e esse atributo voltar preenchido. possvelidentificar o tipode cada mensagem (erro, aviso, informao) comparando o valor do campo M_LOGMESSAGES-SEVERITYcomas constantes definidas na classe CL_BSP_MESSAGES. A partir disso, cabea vocdefinir como exibir cada mensagem eu particularmente gostei da implementaosimples usando umcollapsible que foi feita nessepost. Desligue o Ajax nosforms. O jQuery Mobile trata automaticamente os submits emforms usando Ajax, tentando carregar o resultado de um POSTdentro de um novo na mesma pgina. No podemos deixar isso acontecer nas pginas de login; para isso, basta um data-ajax="false"na declarao de cadaform e est tudo resolvido. Limite os mandantes e idiomas.Normalmente, voc no quer que o usurio faalogin em alemo no mandante 000 para usar a sua aplicao portanto, limite os inputs de mandante (tabela T000) e de idioma (tabelas T002 e T002T) usando drop-downs, dependendo do ambiente. Algumas funes relevantes para tratar os idiomas: SYSTEM_INSTALLED_LANGUAGES, que retorna os idiomas que esto instalados no sistema, e RSRA_GET_DEFAULT_LANGUAGE, que retorna o idioma padro delogin do sistema.Assim fecho o primeiropost dessa srie. No prximo, vou comear a falar da interface. Dvidas, indagaes ou sugestes? Deixem nos comentriosa abaixo ou mandem um e-mail.

About the AuthorLeo Schmidt ABAP profissional desde dez/2008. Meu negcio desenvolver ABAP, mas sem pensar s em ABAP: gosto de fazer o SAP conversar com outras linguagens e sistemas, sempre de olho no Basis.1. Thiago says: March 31, 2015 at 1:26 pm timo post. Recentemente ca no mesmo dilema de ter que desenvolver uma aplicao web e. responsiva. No manjava nada de MVC, JavaScript, etc Acho que s assim para termos noo de que o mundo web no s restrito ao mundo dotnet/java, e que ns de ABAP podemos sim fazer to bem feito quanto eles.Reply 2. Rodrigo F. Morais says: March 31, 2015 at 2:20 pm Grande Lo, timo postestou navegando por esses mares de mobilecomo no h mais suporte ao SAPConsole a mudana necessria, deixo a dica do SAP ITS Mobile, tem bastante material na SCN, normalmente usado para converso das transaes de WM, porm j tive vrias experiencias com outras solues para aplicaes de browser ainda mais com sua dica de jQuerysegue um documento interessante com alguns exemplosITS Asug Abraos!Reply 3. Wagner Duarte says: May 25, 2015 at 6:29 pm Leo timo Post! Como voc citou, eu tambm costumo desenvolver em Webdynpro aplicaes p/ web, e no conheo bem o BSP, nessa sua nova aventura, voc deve ter aprendido bastante de BSP, tem alguns links interessantes sobre BSP ?Tambm achei interessante a analise sobre UI5, essa dvida natural, pouca gente usa UI5 no Brasil para Web sem o contexto do Hana.Reply Leo Schmidt says: May 26, 2015 at 11:22 am Valeu Wagner!Sinceramente, eu tenho pouca documentao sobre BSP, e eu espero explicar bem como eu fiz uso dele no terceiro post dessa srie (alis o segundo sai hoje). Eu acho que a referncia do help da SAP, pra mim, foi suficiente, porque o uso do framework de BSP que eu fiz foi mais trivial, j que no por via dele que eu resolvi coisas como navegao, renderizao, atualizao de tela, etc., e sim diretamente pelo jQuery / jQuery Mobile.Eu gosto bastante da ideia do UI5 e eu ainda vou fazer alguns posts sobre isso, mas como eu disse ali um framework que eu no conheo muito bem ainda. Apesar disso eu sei que d pra fazer muita coisa com ele, e no necessariamente no HANA como vc disse, afinal frontend.Reply Mauricio Cruz says: May 27, 2015 at 8:51 am Acho bem legal usar o UI5 e etcs, mas a diverso toda dessa separao backend e frontend que voc pode usar o que voc quiser. Naturalmente a SAP vai puxar o uso do UI5 por ser a biblioteca padro do Fiori, mas at a whatever, a gente usa o que a gente quiser \o/Reply

BSP + jQuery Mobile, ou a aventura de SAP-webdev Parte II: FrontendE a seus consultor WD (Walking Dead), tudo bem? Aqui t tudo certo tambm.Nessa segunda parte da srie eu vou falar de coisas que podem ser novidade pros desenvolvedores mais ABAPeiros: tcnicas para desenvolver uma view comjQuery Mobile (que abreviarei como jQM neste post)para uma aplicao combackend BSP. Se voc no est acostumado com desenvolvimentoweb, seria prudente checar os links que eu coloquei na primeira parte dessa srie.FerramentasEu nunca subestimo o masoquismo das pessoas, mas eu acho queescrever e testar HTML, JavaScript e CSS na SE80 no mnimo ruim. Felizmente, no necessrio fazer isso: voc pode escrever e testar a lgica e definio das suasviewsem outros lugares / editores e depois importar para o SAP. Vou deixar aqui algumas dicas de ferramentas que eu uso:Editor:uma indicao boa que peguei do prprio Maurcio aqui do ABAP Zombie o Sublime Text. um editor bacana que tem vrias opes de plugins deautomao, syntax highlightingpara vrias linguagens, enfim, muito bom.Desenho de telas: s vezes necessrio montar alguns mockups de telas para entender a lgica, ou mesmo para mostrar como a aplicao vai se comportar. Eu gostei da verso gratuita do Moqups, porque os elementos j so bem parecidos com os do jQM.Testes:em certas situaes voc acaba tendo que bolar algo do capeta mirabolante com CSS pra alguma tela, ou voc precisa mesmo entender como e quando aquele evento malditoincomum do jQM disparado, ou voc apenas quer ver se a sua lgica no deu merda funciona. Existem vrios sites bacanas para esse tipo de teste, e o que eu uso o JSFiddle. Ele tem um controle de verses bemsimples, e voc pode compartilhar e criarforksde cdigos de outras pessoas com facilidade. Eu tenho um dashboard com algumas coisinhas l, e voc pode criar a sua conta e criar umdashboard seu tambm.Multi-HTML vs. multipageUma das primeiras decises a se tomar qual vai ser a arquiteturade pginas da aplicao. Seria melhor usaro padromulti-HTML, onde cada pgina jQM fica num documento HTML separado, ou o padromultipage, onde as pginas jQM esto todas no mesmo documento HTML? Existem argumentos a favor e contra o uso de cada um, como se v nesse post aqui.De maneira geral, se a sua aplicao tem uma pequena quantidade de telas, a escolha de arquitetura vai influir pouco na performance. No caso do projeto que eu estou usando como exemplo nessa srie, porm,foram necessrias10 telas com lgica (pesada) de negcio e outras4 s com linkspara navegao. No prudente que uma aplicao para dispositivos mveis fique recarregando a cada mudana de pgina, dependendo assim bastante da rede, o que seria o caso se a arquiteturamulti-HTML fosse a escolhida. Portanto, eu escolhi o padromultipage, de modo que assim que o usurio fizerlogin corretamente, todas as pginas jQM da aplicao sero carregadas no DOM, e somente a primeira pgina, a pgina inicial, exibida (esse comportamento descrito na documentao do jQM). Assim, a navegao resolvida via Ajax efica quaseindependente dobackend, e a view precisar ser carregada apenas uma vez para cada execuo da aplicao.E por falar em AjaxA importncia do Ajaxpraticamente TODA ao que resulta em navegao, leituraou alterao dos dados na viewpode ser (ou ser) resolvida com Ajax. Isso se torna uma parte essencial da aplicaoquando se escolhe a arquiteturamultipage, porque nesse caso no temosroundtrips constantesao servidor para esse fim.Como estamos usando jQuery, portanto imperativoque se entenda e se utilize corretamente os mtodos que expem as funcionalidades Ajax, entre eles o mtodo $.ajax(), o maislow-level, porm principalmente os mtodos simplificados $.get() e $.post().Um detalhe importante sobre as chamadas Ajax que estas so assncronas, o que quer dizer que embora saibamos exatamente o ponto de origem da chamada, no sabemos em que momento a resposta chegar do servidor. Osmtodos de Ajax do jQuery possuemvrios parmetros onde podem ser indicadas funes decallback, que sero chamadas dependendo do tipo da resposta e em pontos especficos antes ou depois do resultado.Alm disso, os prprios mtodos Ajax retornam um objeto do tipo jqXHR, que basicamente um encapsulamento jQuery do objeto XMLHttpRequestdo browser,e de onde podem ser chamados outros mtodos para cada tipo de resposta do servidor, em vez das ou adicionalmente s funes decallback. Ento uma chamada Ajax tpica ficaria, por exemplo, assim:JavaScript

1234567891011121314151617$.get('main.do?action=getServerParameters', function(data, textStatus, jqXHR) {/* Aqui tratamos a resposta caso a request tenha sido bem sucedida. Oparmetro "data" o corpo da resposta */$('#server_parameters').text(data);/* Se a chamada retornar um objeto JSON em vez de HTML ou texto puro, possvel acess-lo j interpretado atravs do parmetro jqXHR */dateFormat = jqXHR.responseJSON.dateFormat;}).fail(function(jqXHR, errorStatus, errorThrown) {/* Este callback parte da interface Promise do objeto jqXHR, que chamado caso a request falhe, e que est sendo chamado aqui de formaencadeada a partir do retorno do $.get(). Se a resposta contiver dados,como uma mensagem de erro ou mesmo um popup, podemos acess-los peloparmetro "jqXHR". Por exemplo: */$('#message_area').html(jqXHR.responseText).show('fast');});

Outro detalheimportante que osformsnuma arquiteturamultipage devem ser declarados sem o atributo action, porque umsubmit em um formque contenha esse atributo resulta sempre em umPOST no recursoindicado e num subsequenterefreshno documento, que como eu mostrei l no comeo um empecilho para uma arquitetura com apenas um documento HTML. Isso muda um pouco a maneira de submeter os dados de umform; na maioria das vezes ser necessriopassar diretamente os valores dos campos, ouusar algum mtodo de jQuery que retorne umastring de parmetros, como o .serialize() ou o $.param(), para ento passar os valores como parmetros de URL em um GET ou como corpo da request numPOST. Um exemplo simples:HTMLDefault

1234567891011121314151617ExemploUnidadeNenhumaBuscar unidadeCriar pedido

Exemplo renderizado no JSFiddleJavaScriptJavaScript

123456789101112131415161718192021222324252627282930/* Ao clicar no boto "Buscar unidade", queremos que o span "unidade" sejapreenchido com a unidade do material que est no campo "material", e nopretendemos alterar nenhuma informao no servidor (portanto, usaremos omtodo GET). O backend possui um mtodo que interpretar o parmetro "action"como essa busca ("buscarUnidade"). Portanto: */$('#buscar').on('click', function() {var url = 'main.do?action=buscarUnidade&material=' + $('#material').val();$.get(url, function(data) {$('#unidade').text(data);}).fail(function(jqXHR) {alert(jqXHR.responseText);});});/* Alm da busca de unidades, temos outro boto que servir para criar umpedido com base no material e na quantidade, ou seja, usando todos os camposdo form. Nesse caso, a request alterar os dados no servidor, por issousaremos o mtodo POST. O backend possui outro mtodo justamente para criar opedido, que responde ao valor "criarPedido". Logo: */$('#criar').on('click', function() {var url = 'main.do?action=criarPedido',postData = $('#tela_selecao').serialize();$.post(url, postData, function(data) {alert(data);}).fail(function(jqXHR) {alert(jqXHR.responseText);});});

Nos exemplos acima eu acabei j descrevendo outra caracterstica importante, embora j bem conhecida, para a definio dos mtodos dasrequests de uma aplicaoweb: se arequest vai apenas buscar dados do servidor, deve-se usar o mtodo GET; se a requestservir para alterar os dados no servidor, mesmo que apenas dentro da aplicao, deve-se usar o mtodo POST. Aqui tem algunsargumentossobre o porqu disso.Mais umdetalhe: umformmesmo semactionainda pode sofrer umsubmitquando se pressiona ENTER. Esse comportamentopode ser desabilitado com um pouco de JavaScript:JavaScript

123456789$(document).on('pagecontainercreate', function() {// Fazendo o binding na criao do pagecontainer$(window).on('keydown', function(event) {if (event.keyCode === 13) {event.preventDefault();return false;}});});

interessante ter um elemento visual que indiquequando a aplicao est parada esperando a respostade umarequest Ajax. Para isso, podemos usar oloader do jQM. A maneira mais simples exibiroloader sempre que umarequestfor disparada, e escond-lo quando a resposta chegar:JavaScript

123456$(document).ajaxStart(function() {$.mobile.loading('show');});$(document).ajaxStop(function() {$.mobile.loading('hide');});

Eventos importante lembrar que ao usar jQM a view est sujeita aos eventos do jQM (obrigado, Capito bvio). Portanto, ao fazerbinding dos eventos da tela como cliques, abertura e fechamento de collapsibles, abertura e fechamento depopups, dentre outros melhor faz-lo dentro doscallbacksde outrosevent bindings de eventos do jQM, como eu fiz no exemplo acima onde eu desabilitei a funo do ENTER dentro do callbackde criao do pagecontainer. O mesmovale para as chamadas Ajax.Isso parece ser um detalhe de menor importncia, mas acredite quando eu digo que no . O jQM tem a tendncia de fazer algumas coisas malucas quando se tenta mesclar os seusevent bindings com os do jQuery. Eu quase fiquei doido tentando descobrir porque os eventos dos botes que eu estava colocando naview estavam sendo disparados TRS VEZES para cada clique, at eu mudar a declarao dobinding para dentro de um evento pagecreate. Ento, em vez de fazer algo comoJavaScript

12345$(document).ready(function() {$('#botao').click(function() {// Cdigo do event handler});});

melhor fazer:JavaScript

12345$(document).on('pagecreate', '#pagina1', function() {$('#botao').click(function() {// Cdigo do event handler});});

Adaptando paradigmas e elementos de telasHcertas coisas que o desenvolvedor ABAP est acostumado a fazer ao criar interfaces paraSAP GUIque nem sempreso fceis de se reproduzir fora desse meio. Em alguns casos, basta adaptar o elemento; em outros, preciso revisar a funcionalidade da tela. Vejamos como fazer algumas adaptaes de elementos e paradigmas de interface para jQM:Passagem de parmetros entre telas: isso bem comum em telas ABAP, e resolvemos em JavaScript do mesmo jeito que em ABAP: usando variveis globais. Declare as variveis que serviro para passar parmetros entre pginas diretamente na rea de scripts do , tomando o cuidado de no declarar variveis como mesmo nome dentro de funes. Se for necessriomanipular as variveis no meio do caminho (limpar, validar, etc.), possvel faz-lo nos eventos do pagecontainer, como o pagecontainerhide, que disparado aps a pgina origem da navegao ser totalmente escondida, ou o pagecontainerbeforeshow, que disparado antes da animao de exibio da pgina destino ser executada.Matchcodes(ajudas de pesquisa, F4):um matchcode simples com valores fixos sempre pode ser reproduzido fielmentecom um .J ummatchcode mais complexo, com parmetros, abas ou ambos,vai exigir uma pgina ou umpopupextra, e isso significa construir uma lgica de passagem de parmetros entre telas e tambm pelo menos mais umarequestAjax para fazer a busca; portanto, s construa se for realmente necessrio. Uma exceo neste caso o matchcode para seleo de datas; ele pode ser perfeitamente refeito com s para ano, ms e dia, mas neste caso eu prefiro usar um plugin chamado DateBox, que possui um timo seletor de datas, mais flexvel do que o do SAP GUI inclusive.Formatao deinput: Na maioria dos casos, osinputspodem ser feitos com type="text", e oatributo maxlength a melhor maneirapara limitar o comprimento do valor. Para campos baseados em variveis ABAP do tipo c, possvel usar a propriedade CSS text-transform: uppercasepara deixar o texto em maisculas, porm isso s vai modificar o texto que est na tela portanto, necessrio transformar o texto do campo em maisculas novamente quando os valores estiverem sendo tratados pelo backend. Campos de data: uma boa maneira de format-los utilizandoo j mencionado DateBox voc pode estilizar os campos depois que a pgina foi criada, chamado o mtodo .datebox()e passando as propriedades conforme a documentao do plugin. Uma boa prtica definir o formato da data a partir dos parmetros do usurio: para isso, chame a BAPI_USER_GET_DETAILe escolhao formatocorrespondente ao valor do campo DEFAULTS-DATFMentre os formatos definidos no domnio desse campo; traduza o formato SAP para o formato usado noDateBox:por exemplo, o tipo de formato de data mais comum, que o 1 ( DD.MM.AAAA),viraria %d.%m.%Y; ao estilizar o campo, passe o formato definido para a opo overrideDateFormat. Formatao de quantidades / valores em moeda outro problema para o qual precisamos de umpluginjQuery nesse caso, eu uso o Number. A ideia parecida coma que eu expliquei para o DateBox: pegue a definioa partir do campo DEFAULTS-DCPFM, compare com os valores fixos do domnio e passe os caracteresde separador de milhares e de decimais para o mtodo que estiliza os campos, conforme a documentao do plugin.Mensagens:essa uma rea maisaberta. possvel adotar uma linha dedesignum pouco maismoderna usando elementostoast (que se chamam assim porque parecem com torradas pulandoda torradeira) usando plugins como o jquery.mobile.toast, mas eu consideroque os popups do jQMj servem bem pra esse propsito. Eu fiz essefiddleaqui bem simples pra mostrar como exibir algumas mensagens em popups jQM.Tabelas: no muito prtico ou funcional mostrar uma tabela com uma tonelada de informaes numa tela de dispositivo mvel, como faramos normalmente num ALV. As tabelas de jQM so pensadas para terem poucas colunas (de 5 a 7, no mximo, um intervalo razovel) e serem responsivas, mudando de formato em resolues menores veja os exemplos dereflow nos demos de jQM. Uma soluo para exibir itens com muitos dados usar um collapsibleset, onde somente se exibe uma lista de descries dos itens e os detalhes aparecem quando se clica em umalinha (escondendo detalhes de outro item que porventura j estejam sendo exibidos).Outra soluo, sem usar elementos nativos de jQM, implementar umcarrossel, onde tambm se exibe um item por vez e a navegao entre itens feita horizontalmente. Essa tcnica precisade um pouco de CSS e jQuery pra funcionar, porm claro que j existem vrios plugins que fazem isso, como o OWL Carouselou o slick. Eu fiz, como exemplos,umfiddle com um carrossel bem rudimentare um outro mais complexo, com mais alguns controles, ambos sem usar plugins e sem muita estilizao, mas mostrando como o conceito funciona.Tirando tudo isso, o uso de jQuery e jQM oferece possibilidades praticamente ilimitadas para desenvolver interfaces. Por exemplo, o projeto que eu estou usando de exemplo nessa srie, que uma aplicao para coleta de materiais, se beneficiaria muito com um leitor de cdigo de barras. Como integrar isso na aplicao? Com umplugin de jQuery, claro. O WebCodeCam uma implementao simples que usa a API getUserMedia para capturar a imagem da cmera e identificar cdigos de barra de vrios tipos. O nico problema que no funciona no Safari nem no IE.

Bom, isso por enquanto. Esseposttem mais linksdo que artigo da Wikipedia, mas a maioria aponta pras documentaes de jQuery e jQM, ento basta ir l pra ter uma referncia mais completa e concisa.Espero que eu tenha conseguido ajudarquem est desenvolvendo ou precisando desenvolverviewsBSP com jQM ano ficar completamente sem rumo.At a prxima (e ltima) parte, onde eu vou falar do desenvolvimento debackend (e onde finalmente vai ter um pouco mais de ABAP).Referncias (tambm conhecido comoTL;DR ou t de sacanagem que eu vou ter que ficar caandolink) jQuery API/jQuery Mobile APIejQuery Mobile Demos Sublime Text Moqups JSFiddle/Meu dashboard l Multipage template vs Multi HTML template in jQuery Mobile HTTP Methods: GET vs. POST Carousel design pattern Navigator.getUserMedia() Plugins: DateBox jQuery Number jquery.mobile.toast OWL Carousel slick WebCodeCam

EditEu imaginei quefossem faltar algumasvrias coisas mesmo nesse turbilho de informaes a. Vamos l: No ficou claro no post, mas ao contrrio do que se faz normalmente com BSP puro, a ideia aqui construir aviewSEM NENHUM CDIGO ABAP. Omarkup praticamentes HTML5, totalmente independentedo BSP, com exceo de tags de OTR para os textos ( ) e da tag de pgina (normalmente eu uso ). A ideia aqui escrever aviewcom HTML, JavaScript e CSS de maneira que se ela fosse removida totalmente do BSP e implementada junto com outrobackend, mantendo somente a estrutura dos recursos e substituindo as tags de BSP, a lgica daview funcionaria exatamente da mesma maneira. De maneira nenhuma, absolutamente, NUNCA, eu repito, NUNCA, coloque lgica de negcio no JavaScript. JavaScript cdigo que 1) roda nobrowser, 2)pode ser depurado e analisado em tempo de execuo, e 3)fica emcache, portanto isso um problema de segurana. O JavaScript da viewdeve somente fazer coisas muito triviais com relao aos dados, que tambm no tenham relao alguma com dados de negcio, como por exemplo montar um seletor de ano:

JavaScript

123456$('#tela_de_selecao').find('select.ano').each(function() {var year = new Date().getFullYear();for(var i = year - 10; i < year + 11; i++)$(this).append('' : '">') + i + '');$(this).selectmenu('refresh', true);});

Lgica de negcio fica no cdigo ABAP, e isso fica no BSP. Falarei disso no prximopost.

About the Author

Leo Schmidt ABAP profissional desde dez/2008. Meu negcio desenvolver ABAP, mas sem pensar s em ABAP: gosto de fazer o SAP conversar com outras linguagens e sistemas, sempre de olho no Basis.

1. Mauricio Cruz says: May 27, 2015 at 8:58 am Muito legal, principalmente os links.JSFiddle uma das melhores coisas que inventaram. Usei muito para conseguir compartilhar um erro em fruns como o Stackoverflow e deixar que outras pessoas avaliem e possam me ajudar com um erro. Exemplo: eu perguntando sobre JQM.Valeu, abs!Reply 2. Mauro Laranjeira says: May 27, 2015 at 9:07 am Grande post Leo parabns..Cara, estou com 1 milho de duvidas, haha Mas acredito que seja porque nunca trabalhei diretamente com o BSP puro, trabalhei bastante com o BSP do CRM, que bem diferente.Voc usa um editor externo e depois importa para o MINE do SAP? Como ficam as regras do negocio, tudo misturado no JS com ABAP? E a consulta no banco, ficam na pagina do BSP ou como montaria um MVC loko?Fiquei doido com esse post ae rs Cara, curti muito esse post, mais uma vez parabns nois Reply Leo Schmidt says: May 27, 2015 at 9:39 am Valeu Mauro!Eu infelizmente tive que deixar pra falar de BSP depois de falar de frontend, porque tem certas coisas que no d pra explicar como fazer no BSP sem apresentar antes o que eu fiz com JS, como por exemplo as chamadas em Ajax. Mas, com o risco de adiantar aqui algumas coisas do prximo post, vamos l: Sim, como eu disse ali eu escrevo tudo de HTML, JS e CSS no Sublime e depois eu importo pro BSP. Vou falar melhor sobre isso e sobre como isso organizado na aplicao BSP no prximo post. No, no tem e no deve ter nenhuma lgica de negcio dentro de JS. Cdigo da view s pode servir pra manipular a view. Em alguns raros momentos voc pode MONTAR JavaScript dentro do ABAP (que o que o standard faz no caso da tela de login, como eu falei no outro post, por exemplo), e em vrios casos eu monto HTML dentro do ABAP, mas lgica de negcio NUNCA (srio, NUNCA). O HTML que eu construo no tem NADA de ABAP. Nada mesmo. Eu pretendo explicar o MVC que eu estou usando aqui no prximo post tambm, mas sim, coisas que envolvam o banco de dados (portanto, lgica de negcio) acontecem no cdigo do BSP e NUNCA (srio, NUNCA) aqui no JS.Vou dar um edit aqui no post pra compartilhar essas coisas com a galera nis!Reply Mauro Laranjeira says: June 8, 2015 at 9:27 pm Leo, Muito show.. estou com bilhes de perguntas, mas vou esperar os prximos posts, tomar vergonha na cara e tentar fazer alguma coisa usando o Ajax.vlw mesmo

BSP + jQuery Mobile, ou a aventura de SAP-webdev Parte III: BackendAcho que no demorou tanto quanto a saga do Freeza, mas sim caros zumbis, chegamos ao final desse guia! Vou falar agorada parte principal do desenvolvimento: a aplicaoBSP. Aqui vou mostrar como estruturar os recursos nobackende tambm como ele vai responder a tudo o que acontece nofrontend.mas antes, um pouco mais defrontendLembra,lprimeira parte, quandoeu disse que necessrio subir as bibliotecas de jQuery e jQuery Mobile e os pluginsno repositrio MIME do SAP? Ento, se voc fez ofrontendfora da SE80, bem provvel que ocdigoque voc fez ainda no esteja referenciando as bibliotecas que estono repositrio. Os seusheaders podemestar mais ou menos assim:Default

12345678910111213

O endereo da aplicao BSP, na maioria das vezes, vai ser algo como http://[servidor]:[porta]/sap/bc/bsp/[namespace]/[aplicao]. Aproveitando essa estrutura, podemos referenciar de maneira indireta as bibliotecas que esto disponveis globalmente. Por exemplo, se voc tiver organizado as bibliotecas no repositrio MIME mais ou menos com a mesma estrutura do CDN do jQuery, desse jeito:

Voc consegue mudar as declaraes acima por algo assim (os endereos sempre so case insensitive):Default

12345678910111213

E agora eu posso finalmente explicar o porqu de usar o repositrio MIME e fazer essas mudanas noheader: pra atender a poltica de segurana dos navegadores que se chama same-origin policy (poltica de mesma origem). Isso serve tanto paraviews que voc vai usar no BSP como para as que voc definiu nos mtodos da classe delogin.Outro detalhe que d pra perceber pela imagem e pelo cdigo: uma prtica comum em desenvolvimentoweb fazer versesminified (minimizadas ou comprimidas) de todos os arquivos que compem as pginas, com o mesmo nome mais a extenso .min.[extenso original], de modo que a aplicao trafegue uma quantidade menor de dados entre servidor e navegador. Em tempo de desenvolvimento ou de debug, referencia-se o arquivo original, e depois que tudo estiver pronto, comprimimos e mudamos as referncias para apontar para os arquivos comprimidos.O Sublime Text, que eu indiquei nopost anterior, tem algunspackagesque fazem isso, como por exemplo oMinify(para a glria da obviedade!), que comprimeJavaScript e CSS. Eu no achei ainda nenhumpackage bacana pra minimizar HTML no Sublime, ento eu uso ferramentason-line mesmo como o HTML Minifier.Estruturando a aplicaoEu pensei em colar aqui uma imagem com o famoso diagrama do MVC, mas eu no sabia qual escolher:

Tem at um com o Homer aliVamos tentar o segundo ali mesmo:

O fluxo representado por esse diagrama basicamente o que a aplicao BSP deve fazer:1. Usurio envia umarequestHTTP aocontroller;2. Controllerrequisita dados domodel;3. A resposta depende do contedo: se a request foi comum, pedindo por uma view, a aplicao a instancia e esta exibidaao usurio; se a requestfoi feita via Ajax, osdados interpretados sodevolvidos diretamente do controller para a viewpelaresponse, que ento os interpreta e exibe o resultado ao usurio.Dessa maneira, umaaplicao BSP mais bsica que use jQuery / jQuery Mobile ser composta de uma classe para ocontrollereuma classe para omodel. Aview no precisa necessariamente de uma classe prpria, porque a ideia que a manipulao daviewseja feita atravs dosscripts inseridos na pgina, sem interveno ABAP mas se voc tiver que montar HTML muito complexo ou de maneira muito frequente dentro dos mtodos do controller (vou falar sobre isso mais pra baixo), talvez seja melhor ter uma classe que faa somente isso.Essa estrutura pode ser repetida quantas vezes forem necessrias;se a lgica de tratamento dasrequests/responsesou da seleo dos dados suficientemente complicada para que haja separao em maiscontrollers ou models, esse o caminho.Mas Leo, eu posso escrever tudo direto numcontroller s! Pra qu eu vou criar trocentasclasses s pra UMAaplicao? Porque eu espero que voc vai ser uma pessoa boa e seguir a arquitetura MVC. Afinal, voc no quer deixar um ninho de rato em forma de classe pra quem for dar manuteno na aplicao depois, certo? CERTO? Bom ento.A estrutura do BSP, usando a arquiteturamultipage nofrontend, ficaria mais ou menos assim:

Por partes, vamos.Caractersticas da aplicao

Nada muito complexopor aqui: Em Initial BSP (BSP pgina inicial) se indica o nome docontroller principal da aplicao; Normalmente no necessrio indicar umaApplication Class (Classe de aplicao), mas se for necessrio segregar a lgica da aplicao da aplicao em si, podemos indicar uma classe aqui, que pode ser acessada atravs do atributo APPLICATIONdocontroller; No necessrio indicar nada emTheme (Tema), porque carrega-se os temas diretamente pelomarkup com astags ; A questo do estado da aplicao aberta. possvel desenhar a aplicao de maneira que no se dependa de dados guardados no model, caso onde a opoStateful (Com status) pode ficar desmarcada. Porm, se a aplicao tratauma quantidade muito grande de dados ou tem um fluxo lgico muito complexo, melhormanter estados e essa opo precisariaficar marcada; Supports Portal Integration (Suporta integrao Portal) depende da sua aplicao. A integrao com o Portal geralmente tem a ver com navegao e gerenciamento de sesses, parecido com o que acontece com aplicaes Webdynpro ABAP. Ative conforme necessrio; XSRFProtection (Proteo XSRF) a proteo do framework BSP para prevenircross-site request forgery. Esta SAPnote explica o que e como usar essa opo.Objetos MIMEAqui onde se deve importar o cdigo especfico da suaview: o HTML descomprimido, osscripts comprimidos e descomprimidos, osstylesheets comprimidos e descomprimidos, e quaisquer outros objetos estticosespecficos para a sua aplicao: logotipos, vdeos, udios, PDFs, etc. No HTML possvelreferenciar diretamente os objetos que voc importar usando somente onome dos mesmos. O exemplo do cabealho que eu usei acima, ento, ficaria:Default

123456789101112131415

View

Aqui, tambm, nada extraordinrio: Observe, em primeiro lugar, que aview contm o cdigo HTML comprimido, que ficar na abaLayout portanto o nome index.min.htm. A pgina com o cdigo original descomprimido fica como objeto MIME do BSP, para futura referncia/manuteno; importante deixar o atributoCompression(Comp.pginas) em branco (com o valor None ou nenhuma), porque os outros tipos de compresso podem afetar a sintaxe do HTML que j esteja minimizado; O atributo W/O Script Code (sem cd.script) deve ficar desmarcado, pois a pgina contmscripts; O Page Type(Tipo de pgina) View (Viso), e voc pode indicar qualquercontroller ali(contanto que a classe seja descendenteda CL_BSP_CONTROLLER voc pode inclusive indicar ela prpria); Esta pgina no ser uma pgina de erro (falei sobre elas na primeira parte da srie), portanto o atributoIs Error Page ficadesmarcado. Normalmente no se atribui aqui uma pgina de erro especfica, pois as mensagens podem ser exibidas com outras tcnicas (que eu expliquei na segunda parte da srie), porm emAssigned Error Page (Pg.erro atribuda) voc pode indicar uma outra pgina dentro da aplicao que servir como pgina de erro; Por fim,mantm-sedesmarcado o atributoDelta Handling (Tratmto.delta), porque no queremos que o framework do BSP se intrometa na maneira como carregamos as pginas da aplicao.Controller

Assim como nas outras pginas de configurao, nada muito estranho: O nome docontrollerpode ser como voc quiser, e no precisa necessariamente terminar com .do. Para ocontroller principal comum usar main; EmController Class (Classe controlador) indica-se a classe criada para servir decontroller da aplicao. Esta classe deve ser descendenteda CL_BSP_CONTROLLER; A opo Start BSP (BSP incio) funciona em conjunto com a opoXSRFProtection da aplicao, portanto veja a nota que eu mencionei mais acima para entender como us-la; As opes de pgina de erro funcionam aqui da mesma maneira que funcionam naview; Com relao ao estado, aescolha aqui a mesma que foi feita para a caracterstica da aplicao em si, com a diferena que o estado docontroller pode ser mantido (stateful) independentemente do estado da aplicao; O armazenamento emcache pode ter um tempo maior do que zero, mas isso funciona melhor em aplicaesstateless. Em aplicaesstateful as opes deCachingpodem ficar em zero mesmo; Compression (Compresso) e HTTPSso opcionais. A primeiracomprime a pgina antes de envi-la ao navegador, e a segunda trafega-a usando SSL; Assim como naview, deixe desmarcada a opoDelta Handling (Tratmto.delta).Classe docontrollerEssa classe responsvel por receber, tratar e responder asrequests. Como j falei algumas vezes aqui, essa classe precisa ser descendente da CL_BSP_CONTROLLER.A ideia aproveitar o mnimo dessa herana apenas para fazer com que ocontroller responda asrequests, tanto as geradas pelo usurio quanto as feitas via Ajax. Para isso, necessrio:1. Redefinir e implementar o mtodo DO_INIT.A implementao dessemtodo tem uma funo muito simples, que inicializar o(s)model(s) e guardar a referncia da instncia.Para isso, basta chamar o mtodo CREATE_MODEL:

ABAP

123456METHOD do_init.me->model ?= me->create_model(class_name = 'Z_MINHA_CLASSE_DO_MODEL'model_id = 'MINHA_CLASSE_DO_MODEL').ENDMETHOD.

(FINALMENTE chegamos noABAP, hein?) O parmetro model_idserve para encontrar a instncia demodelcorreta no atributo M_MODELSatravs do mtodo GET_MODELS. Se voc vai trabalhar com apenas ummodel(como o caso desse exemplo), mais prtico guardar a instncia do modeldiretamente num atributo novo da classe, como esse me->modelque eu usei no exemplo acima, que no casoreferencia a classe Z_MINHA_CLASSE_DO_MODEL.2. Redefinir e implementar o mtodo DO_REQUEST.Essa a implementao principal. O fluxo basicamente como nesse exemplo aqui:

ABAP

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151METHOD do_request.DATA: cdataTYPE string,code TYPE i,content_type TYPE string,form_fieldsTYPE tihttpnvp,message_type TYPE sy-msgty,reason TYPE string.* Assim como para o model, temos um atributo separado na classe para* guardar a instncia da view. Usamos aqui esse atributo para saber se a* view j foi chamada:IF me->view IS INITIAL.* A instncia da view ainda est vazia, portanto faremos s a* inicializao e chamada da view:me->view = me->create_view( view_name = 'index.min.htm' ).me->call_view( me->view ).ELSE.* A instncia da view, aqui, j existe, portanto sabemos que a request* s pode ter sido feita via Ajax. Lembram dos exemplos de request* Ajax do post sobre frontend? Eles tinham endereos mais ou menos* assim:* main?action=algumaCoisa&...* Pois bem, esse atributo de URL chamado ACTION a chave para* entender a request. Ento vamos busc-lo:CASE me->request->get_form_field_cs( 'action' ).* Uma request GET espera uma resposta com dados em algum formato* (HTML, JSON, XML, etc.) a partir de algum parmetro. Ento podemos* ter um mtodo que retorne somente os dados, como por exemplo:WHEN 'getMaterialDescription'. "GETcdata = me->get_material_description( me->request->get_form_field_cs( 'material_number' ) ).WHEN 'getUnitDescription'. "GETcdata = me->get_unit_description( me->request->get_form_field_cs( 'material_unit' ) ).* Se tivermos vrios parmetros, a interface do mtodo muda um pouco:WHEN 'getMaterials'. "GETme->request->get_form_fields_cs(CHANGINGfields = form_fields).me->get_materials(EXPORTINGim_form_fields= form_fieldsIMPORTINGex_cdata= cdataex_content_type = content_typeex_message_type = message_type).* WHEN 'get...'. "GET* cdata = me->get_...* J uma request POST pretende alterar dados a partir de parmetros* informados pelo usurio. Os parmetros de uma request POST* normalmente so enviados no corpo da request, codificados em* string da mesma maneira que seriam numa request GET - portanto* para l-los precisamos da ajuda da classe CL_HTTP_UTILITY. Como* retorno, normalmente temos uma mensagem.WHEN 'createGoodsMovement'. "POSTme->create_goods_movement(EXPORTINGim_form_fields= cl_http_utility=>string_to_fields( me->request->get_cdata( ) )IMPORTINGex_cdata= cdataex_content_type = content_typeex_message_type = message_type).WHEN 'saveInventoryCount'. "POSTme->save_inventory_count(EXPORTINGim_form_fields= cl_http_utility=>string_to_fields( me->request->get_cdata( ) )IMPORTINGex_cdata= cdataex_content_type = content_typeex_message_type = message_type).* WHEN 'set...'. "POST* me->set_...(WHEN OTHERS.* Neste caso temos uma request Ajax sem o atributo action, ou seja,* no uma request Ajax legtima para a aplicao. Isso pode* acontecer, por exemplo, quando o usurio executa um refresh (F5)* na pgina. Portanto, sabemos que a view j est criada, e basta* cham-la novamente:me->call_view( me->view ).RETURN.ENDCASE.* Se o processamento da request Ajax resultou em erro, precisamos* informar um cdigo de erro na resposta para que o frontend a* interprete corretamente:IF message_type = 'E'.code = 422. "Unprocessable Entity - RFC 4918reason = 'Erro ao processar a request'(e01).ELSE.code = 200. "OKreason = 'OK'.ENDIF.me->response->set_status(code = codereason = reason).* Os mtodos de Ajax do jQuery so capazes de reconhecer* automaticamente o tipo do contedo da resposta, mas podemos tornar* as coisas mais claras indicando explicitamente valores como* 'application/json' ou 'application/xml', conforme o retorno do* handler:IF NOT content_type IS INITIAL.me->response->set_content_type( content_type ).ENDIF.* Por fim, anexamos o contedo da resposta:IF NOT cdata IS INITIAL.me->response->set_cdata( cdata ).ENDIF.ENDIF.ENDMETHOD.

U Leo, mas de onde veio esse cdigo 422 pra erro? No pra usar o 500? No, porque 500 um cdigo genrico pra dizer que aconteceu algum erro no servidor, e o framework do BSP j usa esse cdigo pra informardumps, o que adequado. Os erros que acontecem j dentro dosevent handlersna maioria das vezes so provocados por entradas mal-formadas, por culpa do usurio ou do processamento ABAP, e no necessariamente por causa do servidor. Por isso o erro devolvido aqui fica melhorna categoria 4xx (client error).Ah mas ento porque no usar logo o 400 Bad requestmesmo? Porque o problema no com arequest em si, mas simcom osdados contidos (pra falar mais empolado, no sinttico, semntico). Por exemplo: se o cdigo do material no existe, isso no necessariamente um problema com a request, mas sim com o prprio cdigo que pode estar errado.Eis um post explicando um pouco sobre isso.3. Criarevent handlers especficos para cadaaction Ajax.No precisam serevent handlersreais no contexto de ABAP Objects, mas sim apenas mtodos que respondem a cadaactionAjax definida nofrontend, como eu mostrei nesse ltimo exemplo. O fluxo de cada mtodo vai ser simples: interpreta-se os parmetros da request, transformando os dados conforme necessrio, chama-se o mtodo domodel que tratar os dados e formata-se a resposta a ser devolvida ao DO_REQUEST. No exemplo abaixo, temos umevent handlerque vai aomodel buscar uma lista de materiais a partir do centro e do depsito:

ABAP

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990METHOD get_materials.DATA: materialTYPE string,material_descriptions TYPE makt_tab,message_textTYPE string,numberTYPE string,plant TYPE werks_d,storage_locationTYPE lgort_d.FIELD-SYMBOLS: TYPE ihttpnvp, TYPE makt.* Antes de mais nada preciso traduzir a string de parmetros que vem* da request para variveis que podemos usar em ABAP. O material* continua em string aqui porque a ideia que seja possvel buscar* tanto pelo MATNR como pelo MAKTXLOOP AT im_form_fields ASSIGNING .CASE -name.WHEN 'number'.material = -value.WHEN 'plant'.plant = to_upper( val = -value ).WHEN 'storageLocation'.storage_location = to_upper( val = -value ).WHEN OTHERS.ENDCASE.ENDLOOP.* Chamamos o model:me->model->get_materials(EXPORTINGim_material= materialim_plant = plantim_storage_location= storage_locationIMPORTINGex_material_descriptions = material_descriptionsex_message_text= message_textex_message_type= ex_message_type).IF ex_message_type IS INITIAL.* Se o model no devolver nenhuma mensagem, montamos um JSON com os* dados:ex_cdata = |\{"materials":[|.LOOP AT material_descriptions ASSIGNING .CALL FUNCTION 'CONVERSION_EXIT_MATN1_OUTPUT'EXPORTINGinput= -matnrIMPORTINGoutput = number.ex_cdata = |{ ex_cdata }\{| & |"number":"{ number }",| & |"description":"{ -maktx }"|.IF sy-tabix < lines( material_descriptions ).ex_cdata = |{ ex_cdata }\},|.ELSE.ex_cdata = |{ ex_cdata }\}|.ENDIF.ENDLOOP.ex_cdata = |{ ex_cdata }]\}|.ex_content_type = 'application/json'.ELSE.* Caso contrrio, chamamos outro mtodo para construir um HTML com um* popup para a mensagem:me->build_message_data(EXPORTINGim_type = ex_message_typeim_text = message_textimportingex_cdata= ex_cdataex_content_type = ex_content_type).ENDIF.ENDMETHOD.

O resultado desse mtodo um objeto JSON contendo um array de objetos representando os registros da MAKT que correspondem busca feita pelo usurio, ou um outro objeto JSON com o tipo e texto da mensagem que ser exibida em popup.Existe um certo dilema sobre o tipo de contedo que deve ser usado na resposta de uma request Ajax. melhor retornar JSON e montar a exibio peloscript, ou devolver HTML montado e somente integr-lo na pgina, tambm pelo script? Essa deciso cabe aodesenvolvedor, e pode sem problemasresultar em implementaes diferentes para cada mtodo. No projeto que eu estou usando de exemplo, hum pouco de ambas as tcnicas: alguns mtodos devolvem HTML montado, outros devolvem JSON. A regra que eu uso a seguinte: se for simples montar o HTML peloscript, o mtodo retorna JSON; caso contrrio, o mtodo retorna o HTML j montado.Classe domodelAqui onde acontece a mgica, se por mgica entendermos o ncleo do trabalho ABAP validao complexa das entradas, operaes com o banco de dados,chamadas de funes, etc. Esta classe precisa ser descendente da CL_BSP_MODEL, porm, para este tipo de uso, no necessita da redefinio de nenhum dos mtodos herdados.Se estivermos trabalhando com uma aplicaostateful, os resultados das operaes da aplicao ficaro armazenadosem atributos dessa classe, e ser necessrio controlar em alguns pontos especficos os valores desses atributos.Por exemplo, uma tabelaque represente oresultadoda busca de um relatrio pode precisar ser limpa toda vez que se chama a pginado relatrio, da mesma maneira que se faz com variveis globais em um grupo de funes. Para isso necessriocriar uma chamada Ajax na entrada de cada pgina, e tambm mtodos correspondentes nocontroller e nomodel para fazer a limpeza dos atributos. bom lembrar tambm que, numa aplicaostateful, asrequests Ajax que resultam em um estado intermedirio (ou seja, actions do tipo set*que apenas gravam dados nos atributos domodel)tambm esto alterando dados no servidor e portanto devem ser iniciadas com o mtodoPOST.Esta classedeve esperar parmetros de entrada em seus mtodos com dados j convertidos para os tipos ABAP, o que deve ser feito anteriormente pelocontroller. Da mesma forma, os dados gerados pelo processamento domodel so apenas retornados para ocontroller, que ser responsvel por format-los adequadamente e inclu-los na resposta, conforme o exemplo deevent handlerque est acima portanto essa classe no deve ser responsvel por montar HTML ou JSON. As mensagens, por exemplo, podem ser chamadas com o uso de MESSAGE ... INTOe retornadas em umastring, retornando tambm o valor de SY-MSGTY.

Assim chegamos ao fim desse guia maluco. Espero ter ajudado vocs a terem uma ideia de como usar tecnologias defrontend, e de como integrar isso com o BSP, e qual o papel de cada um numa aplicao. No a coisa mais nova em folha em termos de desenvolvimentowebpra SAP, mas pra quem gosta de interface isso d um sabor diferente de WebDynpro ABAP e de SAP GUI. Espero que eu consiga mais pra frente fazer um guia espelho desse, usando Gateway e UI5, mas por enquanto isso.Dvidas, reclamaes ou sugestes, favor entrar em contato com o departamento de comentrios abaixo ou via e-mail. At mais! About the AuthorLeo Schmidt ABAP profissional desde dez/2008. Meu negcio desenvolver ABAP, mas sem pensar s em ABAP: gosto de fazer o SAP conversar com outras linguagens e sistemas, sempre de olho no Basis.2 Responses to BSP + jQuery Mobile, ou a aventura de SAP-webdev Parte III: Backend1. Flavio Furlan says: June 25, 2015 at 5:29 pm Muito interessante! Quando voc fizer esse guia na SAPUI5 + Gateway estarei na primeira fila para pegar meu exemplar Confesso que meu critrio para escolha de qual diagrama MVC escolher foi o mesmo que o seu:http://abap101.com/2012/04/01/falsa-programacao-orientada-objetos/Abraos!Reply 2. Mauricio Cruz says: July 6, 2015 at 9:39 am Ficou animal! (s acabei de ler hoje haha).Tendo trabalho com voc com bsps tempos atrs, muito legal ver quantas melhorias voc fez da nossa singela arquitetura de primeira viagem, principalmente de performance (com a minificazizacao) e uso de JSONs Parabns e abs mano!Reply Mstico mundo de BSP (Business Server Pages)J ouvi dizer que as Tags do BSP so inventadas na hora, assim como estatsticas em conversas informais Bem semelhante ao F1, existe na SE80 explicaes e utilizaes das Tags BSP e Tags HTML.Acesse SE80 -> Tag Browser

Tag BrowserVoc pode navegar nas categorias das Tags, tanto para BSP (Extenses BSP) como para HTML.Outra forma de abrir o menu do Tag Browser seria na SE38, clique no menu Ambientes -> Ferramentas Web -> Tag Browser.A SAP foi to boazinha que detalhou a explicao dosparmetrosdas Tags e colocou ate programas de exemplos o/Exemplo:Como criar um boto com uma Tag BSP?Acesse SE80 -> Tag Browser -> Extenses BSP -> Transportveis -> htmlb -> Sero exibidos todos os parmetros possveis para esta tag.

Tag para boto em BSPMas como usar esse treco comando?Para visualizar a explicao da Tag, de um duplo clique sobre a mesma8)Aparece um popup com a explicao da Tag, explicao dos parmetros e at um programa de exemplo.Ajuda Tag

Para executar o programa de teste, acesse SE80 -> Repository Browser -> Aplicaes BSP -> , aperte enter, d um clique com o boto direito do mouse no nome do programa -> testar.

Vai abrir o navegar pedindo o usurio e senha do SAP. Logo aps abre a pgina do programa de exemplo.

Programa de exemplo SBSPEXT_HTMLBCerto Zombizada eu sei que este exemplo no resolve todos os problemas de BSP, mas ajuda na procurar das tags e suas utilizaes.Abraos a todo aquele que inventamestatsticas para explicar algo.

About the AuthorMauro Laranjeira Motoqueiro fantasma... curandeiro do SAP desde 2006... trago o go-live perdido em um fim de semana... junto 9 mulheres para fazer um filho em um ms... acreditador em histrias de Basis... garimpeiro de dados de teste...