Post do Amiguinho Zombie

Published on April 13th, 2017 | by Guilherme Seabra

3

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

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

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

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.

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.

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.

Share on FacebookTweet about this on TwitterShare on LinkedInShare on Google+Email this to someonePrint this page


About the Author

SAP Solution Advisor Expert, with focus in solution visioning and architecture of Predictive Analytics, Big Data and Advanced Analytics Solutions, currently working at the SAP HANA Center of Excellence, based in Sao Paulo, Brasil, but with a scope of LATAM countries,



3 Responses to Chamando um serviço XSJS por uma aplicação SAP UI5

  1. carlos says:

    Bom dia.
    As imagens não estão carregando.

  2. carlos says:

    Boa tarde.
    As imagens não aparecem, já tentei em redes diferentes.
    Com navegadores diferentes e nada.

  3. matheus says:

    Nesse caso o arquivo javascript no bd Hana está fazendo o papel do Model no MVC ?

    No caso eu tendo uma instância gateway e codificar no ECC um serviço em abap pela SEGW
    teria o mesmo resultado só que de outra forma, certo ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ↑