Skip to Content

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.

/wp-content/uploads/2015/05/1_701488.jpg

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

/wp-content/uploads/2015/05/2_701504.jpg

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”.

/wp-content/uploads/2015/05/3_701505.jpg

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”.

/wp-content/uploads/2015/05/4_701509.jpg

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”

/wp-content/uploads/2015/05/5_701510.jpg

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.

/wp-content/uploads/2015/05/6_701511.jpg

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

/wp-content/uploads/2015/05/7_701512.jpg

 

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.

/wp-content/uploads/2015/05/8_701513.jpg

  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.

/wp-content/uploads/2015/05/9_701514.jpg

  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.

/wp-content/uploads/2015/05/10_701515.jpg 

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.

/wp-content/uploads/2015/05/11_701516.jpg

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

/wp-content/uploads/2015/05/12_701517.jpg

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

/wp-content/uploads/2015/05/13_701518.jpg

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

/wp-content/uploads/2015/05/14_701519.jpg

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

/wp-content/uploads/2015/05/15_701520.jpg

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

/wp-content/uploads/2015/05/16_701521.jpg

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.

/wp-content/uploads/2015/05/17_701523.jpg

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

/wp-content/uploads/2015/05/18_701524.jpg

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

/wp-content/uploads/2015/05/20_701525.jpg

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.

/wp-content/uploads/2015/05/21_701526.jpg

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-uilibs‘ 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.

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

  1. Custodio de Oliveira

    Muito bom e detalhado o artigo, parabens Guilherme.

    Agora, quebra um galho pra gente e remova seus dados de contato, que nao sao permitidos na SCN (estou com do de apertar o “Alert Moderator” pra um artigo tao bem escrito 😉 )

    Abracos,

    Custodio

    (0) 
      1. Custodio de Oliveira

        Tranquilo Guilherme. Outra dica: se voce deseja que entrem em contato contigo, coloque seus dados de contato visiveis no seu perfil. (por alguma razao, twitter eh liberado no conteudo).

        Keep writing!

        (0) 
  2. Mauro Costa

    Boa tarde.

    Eu segui todos os passos mas quando executo a aplicação, em vez de aparecer o formulário, aparece o erro seguinte:

    Controller <name_controller> couldn’t be instantiated

     

    Alguma sugestão para onde possa estar o erro?

    (0) 

Leave a Reply