Chamando um serviço XSJS por uma aplicação SAP UI5.

[Former Member]

Antes de mais nada, vamos começar explicando um pouco sobre o que consiste um arquivo “xsjs” e o que é uma aplicação “SAP UI5”. Um arquivo “xsjs” nada mais é que um Javascript que roda no servidor do Hana, já o “SAP UI5, bom eu poderia detalhar e contar toda a história do SAP “UI5” mas nosso foco no momento não é esse, porém é de suma importância conhecermos as ferramentas, linguagens e bibliotecas que vamos utilizar no desenvolvimento de qualquer aplicação, para quem deseja se aprofundar no assunto recomendo o livro de meu amigo Fabio Pagoti ,"UI5 para desenvolvedores SAP/ABAP", mas em curtas palavras podemos definir o “SAP UI5” como sendo uma biblioteca Javascript da SAP para criação de aplicações baseadas em HTML5.

Agora que conhecemos um pouco no que consiste um arquivo "xsjs" e  uma aplicação “UI5” vamos criar nossa primeira aplicação SAP UI5 chamando um serviço “xsjs”.

Vamos abrir nosso Eclipse (HanaStudio) e clicar em new -> Other.

Logo em seguida abra o diretório ”SAPUI5” e escolha a opção “Application Project”.

Vamos agora dar um nome em nossa aplicação, reparem que existe um campo que se chama "Library" e dois checkedboxes, que são o "sap.ui.commons" que nada mais é que um conjunto de controles de interface gráfica próprios para desktops e o “sap.ui.m” que são um conjunto de controles de interface gráfica próprios para dispositivos móveis, em nossa aplicação vamos escolher o recurso para desenvolvimento desktop e prosseguir clicando em "next".

Bom, agora vamos escolher o projeto e em seguida definir um nome, logo abaixo escolheremos a opção JavaScript, porém é possível de se utilizar também “xml”, “JSON” e “HTML”, bom fazendo isso vamos finalizar a criação de nosso projeto clicando em “Finish”.

Ao se criar o projeto reparem que foram criados três objetos em nosso contexto que são eles: index.html, UI5.controller.js, UI5.view.js. Vamos abrir a opção “index.hmtl”

Vamos agora criar alguns controles em nossa aplicação UI5, vamos utilizar o Jquery, que é um conjunto de interações com curadoria de interface de usuário, efeitos, widgets e temas construídos em cima da biblioteca para isso copie e cole o seguinte trecho de código em seu arquivo “UI5.view.js” conforme mostra a Listagem 1.

Listagem 1:  Trecho de código para a criação de alguns controles no arquivo “UI5.view.js”.

sap.ui.jsview("ui5.UI5",

{

         getControllerName : function() {

         return "ui5.UI5";

},

         createContent : function(oController) {

         var oMatrix = new sap.ui.commons.layout.MatrixLayout({

         layoutFixed: true,

         width: "300px",

         columns:3

  });

          var oLayout = new sap.ui.commons.form.SimpleForm("formId",{

          title:"Primeira Aplicacao em UI5",

          content:[           

                               new sap.ui.commons.Label({text:"ID"}),

                               new sap.ui.commons.TextField("id",{width:"200px"}),

                               new sap.ui.commons.Label({text:"Primeiro nome"}),

                               new sap.ui.commons.TextField("p_nome",{width:"200px"}),

                               new sap.ui.commons.Label({text:"Segundo nome"}),

                               new sap.ui.commons.TextField("s_sobrenome",{width:"200px"}),

                               new sap.ui.commons.Label({text:"Idade"}),

                               new sap.ui.commons.TextField("idade",{width:"200px"}),

                               new sap.ui.commons.Label({text:""}),

                               new sap.ui.commons.Button({

           text:"Salvar",

           width:"100px",

           press:function(){                                

           oController.save(

                               sap.ui.getCore().byId("id").getValue(),

                               sap.ui.getCore().byId("p_nome").getValue(),

                               sap.ui.getCore().byId("s_nome").getValue(),

                               sap.ui.getCore().byId("idade").getValue(),                  

                                         })

                    ]

});   

             var elemento = [oMatrix,oLayout];

             return elemento;

       }

});

Para testar a interface de nossa aplicação vamos com o botão direito em index -> Run As -> Web App Preview.

  Ao executar o “index.html” de nossa aplicação teremos o seguinte resultado.

Bom, nossa aplicação “SAP UI5” está criada e funcionando perfeitamente, o próximo passo é criar um banco de dados no “Hana”. Vou acessar meu diretório, em seguida escolher a opção Table -> New table.

  Agora vamos dar um nome a essa tabela, vou chama-la de “TBLCLIENTE” e criar quatro atributos que irá receber o conteúdo dos controles no arquivo “UI5.view.js” de nossa aplicação.

  Pronto, nossa tabela está criada, vamos testar se ela está de acordo com o que precisamos, para isso vamos dar uma carga a ela, nesse caso vou inserir apenas um registro.

 

Nossa tabela está recebendo registro corretamente, agora precisamos criar um novo arquivo que vai conter um arquivo ”xsjs” com a função de inserir nessa tabela, para que podemos inserir usando parâmetros, para isso vamos clicar em File -> New -> Other -> SAP Hana -> Application Development -> XS Project.

Logo em seguida vamos dar um nome a esse projeto e subi-lo para algum servidor Hana.

Agora vamos escolher o diretório onde iremos subir nossa aplicação.

Vamos agora somente finalizar a criação de nosso projeto “XS Project”.

Dentro desse projeto vamos criar um novo arquivo do tipo “xsjs” selecionando nosso diretório “model” clicando em New -> Other -> XS JavaScript File .

Vamos agora dar um nome a esse arquivo, eu vou chama-lo de “library”.

Bom, vai ser na “library.xsjs” que vai ter todas as funções que vamos chama-las em nossa aplicação UI5. Vamos dar dois cliques sobre ele e inserir a função para inserir um registro no Hana, para isso vamos usar o seguinte trecho de código como mostra a Listagem 2.

Listagem 2: Criação da função se inserção no arquivo “library.xsjs”.

function inserir() {

var txid = $.request.parameters.get("id");

var txp_nome   = $.request.parameters.get("p_nome");

var txs_nome=$.request.parameters.get("s_nome");

var txidade =$.request.parameters.get("idade");

var body = "";

var conn = $.db.getConnection();

var pstmt = null;

var resposta;

try {

               var sql = "insert into GUILHERME.TBLCLIENTES values (?,?,?,?) ";

               pstmt = conn.prepareStatement(sql);

               pstmt.setString(1,id);

               pstmt.setString(2,p_nome);

               pstmt.setString(3,s_nome);

               pstmt.setString(4,idade);

               pstmt.executeUpdate();

               conn.commit();

               conn.close();

resposta = "inserido com sucesso";

} catch (e) {

$.trace.error(e);

resposta = e;

}

      body = resposta.toString();

      $.response.setBody(body);

      $.response.contentType = "text/plain";

      $.response.status = $.net.http.OK;

}

var acmd = $.request.parameters.get("cmd");

switch (acmd) {

case "inserir":inserir();break;

default:

        $.response.status = $.net.http.OK;

        $.response.setBody("comando invalido: "+acmd);

}

Agora que criamos nossa função de inserção vamos subir para o Hana esse projeto como fizemos com o model. Para isso vamos clicar em cima do projeto, selecionando a opção Team -> Share Project.

Vamos agora escolher a opção SAP Hana Repository e clicar em next.

Vamos agora escolher nosso repositório para subir nossa aplicação, e logo após podemos clicar em “Finish”.

Bom, agora que subimos nossas duas aplicações vamos acessar o arquivo “UI5.controler.js” para apontar nossa aplicação UI5 para o arquivo “xsjs”. Vamos dar dois cliques no arquivo “UI5.controler.js” e colocar o seguinte trecho de código conforme ilustra a Listagem 3.

Listagem 3: Passando o caminho e o parâmetro no arquivo “UI5.controler.js” da aplicação.

       sap.ui.controller("ui5.UI5", {

         save:function(id,p_nome,s_nome,idade) {

             try {

                    $.get("http:/caminho_servidor/nome_arquivo.xsjs",

                                       {cmd:"inserir",id:id,p_nome:p_nome,s_nome:s_nome,idade:idade});

             } catch (e) {

          }          

       }

});

Bom, agora vamos subir essa última modificação que fizemos no arquivo “UI5.controler.js, clicando com o botão direito no projeto vamos selecionar a opção Team -> Activate.

Pronto, nossa aplicação já se encontra em nosso servidor, agora já e possível testar nossa aplicação, antes de rodar nossa aplicação e preciso abrir o index.html e acrescentar a “src” do projeto como mostra a Listagem 4.

Listagem 4: Arquivo “Index.hmtl” modificado para ser acessado na web.

<!DOCTYPE HTML>

<html>

       <head>

             <meta http-equiv="X-UA-Compatible" content="IE=edge">

             <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

             <script src="/sap/ui5/1/resources/sap-ui-core.js"

                           id="sap-ui-bootstrap"

                           data-sap-ui-libs="sap.ui.commons"

                           data-sap-ui-theme="sap_bluecrystal">

             </script>

   <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

             <script>

                           sap.ui.localResources("ui5");

                           var view = sap.ui.view({id:"idUI51", viewName:"ui5.UI5", type:sap.ui.core.mvc.ViewType.JS});

                           view.placeAt("content");

             </script>

       </head>

       <body class="sapUiBody" role="application">

             <div id="content"></div>

       </body>

</html>

Bom pessoal, espero que tenham gostado desse artigo, tentei ser o mais claro possível e levantar as principais dúvidas que eu também encontrei na criação de minhas primeiras aplicações, bom desenvolvimento a todos e até a próxima.