Adicionando botão de Voltar para tela anterior (Histórico)

No aplicativo criado a partir do template do SAP Web IDE, podemos navegar para nossa página de detalhes, mas não conseguimos voltar para a página de visão geral. O Lauchpad Fiori fornece por padrão um botão de Voltar. Aprenda a ativar a exibição deste botão no SAP Web IDE, e também a incluir manualmente um botão Voltar.

Este artigo irá ampliar o aplicativo criado no seguinte artigo:

Desenvolva na nuvem utilizando SAP Web IDE e SAP Cloud Platform - parte 3

Ativar botão Voltar no SAP Web IDE

No artigo anterior, para executar o aplicativo, clicamos em run e selecionamos index.html.
Desta vez o procedimento vai ser diferente: selecione a pasta do projeto na sua área de trabalho, selecione o menu Run > Run as Sap Fiori Launchpad Sandbox.

O aplicativo será aberto, agora com uma barra de tarefas na parte superior, simulando um Fiori Launchpad.

O botão de Voltar da  barra de tarefas já se encarrega de fazer o serviço:

Incluir manualmente botão Voltar

Existem outras situações onde o botão Voltar deve ser adicionado manualmente, como: aplicativo não seja executado pelo Fiori Lauchpad, ou IDE usada para desenvolvimento não é SAP Web IDE. Veja como adicionar o botão na view.

OBS: tem como simular o Fiori Lauchpad usando uma IDE diferente de SAP Web IDE, mas isso ficará para outro artigo... :)

Começando a partir do ponto em que o artigo citado foi concluído, retornamos a tela do SAP Web IDE. Expanda a pasta do seu projeto e abra o seguinte arquivo:

webapp/view/Object.view.xml

Repare abaixo no código gerado automaticamente. O nó raiz da estrutura XML é a view. Aqui, referenciamos o namespace padrão sap.m, onde a maioria dos nossos recursos de UI está localizado.

‹mvc:View
 controllerName="cris.com.MyFirstWorklist.controller.Object"
 xmlns="sap.m"
 xmlns:mvc="sap.ui.core.mvc"
 xmlns:semantic="sap.f.semantic"›

Foi definido o namespace sap.ui.core.mvc, com alias "mvc", onde as exibições do UI5 e todos os outros componentes do Model-View-Controller (MVC) estão localizados.

Foi definido também o namespace sap.f.semantic, com alias "semantic". Este namespace contém componentes para criação de paginas Fiori 2.0, oferecendo layout e ações pré-definidas, reduzindo o tempo de desenvolvimento.
Confira mais detalhes no Fiori Guidelines: Dynamic Page Layout – Semantic Page e na documentação do UI5 SDK: Semantic Page (sap.f)

O parâmetro controllerName faz referencia ao arquivo webapp/controller/Object.controller.js, que é o arquivo que armazenará a lógica JavaScript correspondente a esta view.

Adicione o seguinte trecho de código em destaque :

‹mvc:View
 controllerName="cris.com.MyFirstWorklist.controller.Object"
 xmlns="sap.m"
 xmlns:mvc="sap.ui.core.mvc"
 xmlns:semantic="sap.f.semantic"›

 ‹semantic:SemanticPage
  id="page"
  headerPinnable="false"
  toggleHeaderOnTitleClick="false"
  busy="{objectView›/busy}"
  busyIndicatorDelay="{objectView›/delay}"›
  
  ‹semantic:titleBreadcrumbs›
   ‹Breadcrumbs›
    ‹Link text="Home"
       press="onNavBack"
    /›
   ‹/Breadcrumbs›
  ‹/semantic:titleBreadcrumbs›

  ‹semantic:titleHeading›
        ...

Estamos incluindo o componente Link. Todos os componentes possuem eventos, que são formas de interagir com o componente. Neste caso o componente Link tem evento 'press'. O evento press é chamado ao clicar com o botão do mouse no texto do link. Os eventos chamam funções JavaScript. O O código da função fica no arquivo .js definido no inicio da view no parâmetro controllerName.

Salve o arquivo e execute o aplicativo. Acima do título será exibido um link de navegação para a página inicial. Se seu aplicativo foi criado a partir do template do Web IDE, o este link já vai estar funcionando.

Vamos verificar a lógica de navegação para página inicial. Na pasta do seu projeto, abra o seguinte arquivo:

webapp/controller/Object.controller.js

O arquivo começa com declarações das bibliotecas que serão utilizadas, uma delas é a biblioteca History, responsável por administrar o histórico das paginas visitadas. Em caso de um aplicativo não criado a partir do template, ou o Launchpad não é Fiori os trechos em destaque devem ser adicionados:

sap.ui.define([
 "./BaseController",
 "sap/ui/model/json/JSONModel",
 "sap/ui/core/routing/History",
 "../model/formatter"
], function (BaseController, JSONModel, History, formatter) {
 "use strict";

 return BaseController.extend("cris.com.MyFirstWorklist.controller.Object", {

...
 

Com a biblioteca declarada, a função deve ser criada. O template já cria a função , e esta função foi a que adicionamos na view no passo anterior. Caso essa função não exista no seu aplicativo, deve ser adicionada:

                 /**
   * Event handler  for navigating back.
   * It there is a history entry we go one step back in the browser history
   * If not, it will replace the current entry of the browser history with the worklist route.
   * @public
   */

  onNavBack : function() {
   var sPreviousHash = History.getInstance().getPreviousHash();

   if (sPreviousHash !== undefined) {
    history.go(-1);
   } else {
    this.getRouter().navTo("worklist", {}, true);
   }
  },

...
  

Convenhamos que o link 'Home' não ficou bonito comparado à tradicional "setinha para esquerda". Existe uma forma mais bonita de adicionar esse botão. Mas nesse caso deve ser usado na view outro componente diferente de sap.f.semantic.SemanticPage, porque este é feito para Fiori 2.0, que fornece o botão Voltar por padrão na barra de ações.

O objetivo destes links acima do título no componente é fornecer uma navegação em níveis, veja o exemplo no UI5 SDK:
Sample: Semantic Page - Freestyle Sample

Veja também no UI5 SDK como ativar o botão voltar utilizando um componente que oferece por padrão a setinha para esquerda:
Routing Back and History

Espero que tenha entendido e gostado deste artigo. Deixe um comentário abaixo para eu saber o que você está achando, e cadastre seu email para ser notificado de novos artigos. Namastê!


Texto original de Cristiano Marques