Como navegar entre páginas usando SAPUI5 e Javascript

Para aqueles que vem do mundo de ABAP (cheio de module pools e com alguns componentes Web Dynpro), aprender a navegar entre páginas é crucial para se dar os primeiros passos no aprendizado.

Neste post veremos como ir de uma página HTML para outra usando alguns botões feitos em SAPUI5 e um pouquinho de código JavaScript.

Navegação entre páginas

Neste tutorial veremos possivelmente a técnica mais básica de se fazer navegações entre páginas em aplicações em SAPUI5. Na verdade, neste caso o SAPUI5 é mero coadjuvante. Usaremos uma interface da Web API implementadas pelos navegadores.

Outras formas de navegação em aplicações SAPUI5 trabalham com  a classe sap.ui.core.mvc.View – como o nome já diz, usada em aplicações que seguem MVC e também usando o controle Shell (classe sap.ui.ux3.Shell).

exemplo - sap ui ux3 shell

sap.ui.ux3.Shell – Exemplo

 

Como pode ser visto na imagem acima, o Shell na verdade embute várias outras views e possuis algumas barras de ferramentas e botões que facilitam a navegação. Ele é muito bonito é verdade e não há nada contra ele ou contra usar MVC para fazer estas outras formas de navegação. Vamos simplesmente começar do básico.

É importante falar que independente destas formas de navegação, estamos supondo uma aplicação stateless. Ou seja, não há controle de sessão algum como é feito no Web Dynpro por exemplo. Para tentar deixar mais claro ainda, podemos chegar em qualquer uma das páginas diretamente através da sua respectiva URL. Não trataremos também aqui transferência de dados entre as páginas.

 

Pré-Requisitos

Supõe-se que você:

  • Tenha acesso a um ambiente que suporta SAPUI5, no meu caso estou usando uma instância Hana da CloudShare
  • Possua um ambiente de desenvolvimento já pronto (Hana Studio instalado e configurado, conectado a uma instância, etc)
  • Saiba fazer as operações de commit e ativação no Hana Studio
  • Use um navegador não-tosco – Para aqueles que forem testar no IE e quiserem falar o resultado eu agradeço

 

Criando o projeto

No seu Hana Studio, crie um projeto novo conforme abaixo. No meu caso dei o nome de “Navegacao”.

wizard - criar projeto sapui5

Como não queremos MVC, desmarque a opção de “Initial View”. Coloque seu projeto no pacote de sua preferência.

navegacao - criando projeto

Seu projeto recém criado ficará assim:

navegacao - projeto recem criado

XS Application Descriptor File

Para que sua aplicação possa ser vista pelo navegador, adicione o XS Application Descriptor File clicando com o botão direito no projeto e clicando em New >> Other e seguindo a imagem abaixo. Este arquivo não precisa ter nenhum conteúdo.

wizard - criando descritores

XS Application Access File

Adicione também o arquivo XS Application Access File que determina como sua aplicação pode ser acessada. Neste caso não coloquei nenhuma autenticação para deixar o teste mais simples.

 

Página de Origem

O projeto quando criado vem com um arquivo index.html (dentro da pasta WebContent). Esta será nossa página de origem. No seu conteúdo, coloque o código abaixo.

 

Página de destino

Crie um novo arquivo .html na mesma pasta WebContent com o nome “result.html”. Esta será nossa página de destino e que conterá um botão para voltar a página de origem. Coloque o código abaixo.

 

Deploy

Faça o commit do seu projeto e ative todos os arquivos.

 

Testanto

Desktop

Para fazer este teste, recomendo que use uma aba totalmente nova do seu navegador pois os botões de “Go” e “Back” funcionam de maneira um pouco diferente. Você irea notar que o seu navegador somente guarda a página anterior quando se vai da página result.html para a página index.html.

navegacao - teste - pagina de origemnavegacao - teste - pagina de destino

 

Mobile

navegacao - teste - mobile - pagina de origem

navegacao - teste - mobile - pagina de destino

 

WEB API –  Location

Estudando o código das páginas de origem e destino, você irá perceber que a única diferença em termos de funcionalidade é dentro da função associada ao clique do botão da página.

Na página de origem, temos a chamada da função location.replace – que substitui o conteúdo da janela atual sem deixar marcas no histórico de navegação do navegador.

Na página de destino, temos a chamada da função location.assign – que substitui o conteúdo da janela atual depois de adicionar a página a ser encerrada no histórico do navegador.

A interface Location não faz parte do SAPUI5. Ela é nativa dos navegadores e sua documentação pode ser acessada no Mozilla Developer Network (que diga-se de passagem, abre pano para muitos outros posts aqui no Hana Brasil).

É importante comentar que o URL no parâmetro tanto do replace quando do assign poderia ser um site totalmente a parte, por exemplo “http://hanabrasil.com.br”.

 

Navegar é preciso!

… por isso queremos saber se você sabe outra forma de fazer a navegação entre páginas. Tem outro comentário a fazer? Conte-nos logo abaixo!

 

Leave a Reply

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