Tutorial SAPUI5 para iniciantes: o que é Fiori com exemplos

O que é SAPUI5?

SAPUI5 é um conjunto de bibliotecas para construir aplicativos da web responsivos que rodam em vários dispositivos, como desktop, celular e tablet. SAPUI5 funciona em Conceito MVC para acelerar o ciclo de desenvolvimento criando dados, lógica de negócios e representação de dados separadamente na visualização. Assim, o desenvolvimento da visualização e do controlador pode ocorrer de forma independente para a criação de modelos (contêineres de dados).

SAPUI5 é o mais recente de uma série de tecnologias de desenvolvimento de UI SAP. A fim de fornecer integração web para o sistema SAP ERP subjacente, a SAP criou várias tecnologias de desenvolvimento de UI, como BSP (páginas de servidor de negócios), PDK (kit de desenvolvimento de portal), Web Dynpro Java, Web Dynpro ABAP. E o sucessor do Web Dynpro ABAP é o SAPUI5.

Arquitetura SAPUI5

Arquitetura SAPUI5
Arquitetura SAPUI5

Diagrama de arquitetura SAPUI

Na Arquitetura acima, primeiro box, ou seja, 'Dispositivos' indicam os dispositivos nos quais os aplicativos UI5 são executados. Os aplicativos UI5 podem ser acessados ​​por meio de um aplicativo móvel ou de qualquer navegador nesses dispositivos. Esta camada da arquitetura é chamada de 'Camada de Apresentação'.

Os aplicativos SAPUI5 e os serviços oData residem no SAP NetWeaver Gateway Server. Esta camada da arquitetura é chamada de 'Camada de Aplicação'.

A lógica de negócios real é implementada em sistemas principais SAP como ECC, CRM e BW, etc.… A lógica de negócios pode ser implementada usando programas e módulos de função SAP. Dados mestre e transacionais SAP residem em sistemas SAP. Esta camada da arquitetura é chamada de 'Camada de Banco de Dados' ou 'Camada de Persistência'.

Componente SAPUI5

Um componente é um trecho de código funcional que é reutilizado sempre que necessário. Existem 2 tipos de componentes fornecidos pelo SAPUI5

  1. Componentes de UI – Representam uma interface de usuário contendo elementos de UI. Eles são baseados na classe SPAUI5 chamada sap.ui.core.UIComponent
  2. Componentes sem rosto – Não possuem interface de usuário. Eles são baseados na classe SAPUI5 chamada sap.ui.core.Component

Essencialmente, um Componente é uma pasta. Ao criar um novo aplicativo SAPUI5, você poderá ver uma estrutura de pastas criada em seu explorador de projetos como abaixo.

Componente SAPUI5

Neste aplicativo UI5, PassNum é um componente. O arquivo Component.js é obrigatório para que o aplicativo UI5 se comporte como um componente. O arquivo Component.js é o controlador do componente.

Próximo neste SAPUI5 Eclipse tutorial, aprenderemos como configurar o SAPUI5.

Configuração SAPUI5

Antes de começarmos, você precisa garantir que –

  1. Eclipse (versão Luna) está instalado no seu laptop
  2. Ferramentas de desenvolvimento SAP para Eclipse Luna e instalado em seu eclipse (Ferramentas de Desenvolvimento SAP para Eclipse Lua - https://tools.hana.ondemand.com/luna/)
  3. O SAP Logon pad está instalado e você tem acesso ao sistema SAP NetWeaver Gateway para implantação e teste neste aplicativo que iremos construir neste blog.

Depois que o aplicativo estiver completamente construído, ele deverá ficar assim:

Configuração SAPUI5

Neste guia de tutoriais SAPUI5, criaremos 2 componentes, nomeadamente Componente Pai e Componente Filho. Primeiro, criaremos o componente filho e depois o consumiremos no componente pai.

Vamos começar a sujar as mãos.

Parte 1) Criar aplicativo filho

Nosso objetivo é criar um componente filho que aceite um número de 1 a 12 e exiba o nome do mês. Por exemplo, recebe 3; deve exibir 'março'.

Etapa 1) Crie o projeto de IU

Vá para Arquivo->Novo->Outro->Desenvolvimento de Aplicativo SAPUI5->Projeto de Aplicativo.

Crie o projeto de IU

Crie um projeto de aplicativo para SAPUI5 seguindowing o assistente que se abre. Veja a captura de tela abaixo.

Crie o projeto de IU

Insira o nome do projeto, deixe as demais seleções permanecerem iguais às sugeridas pelo assistente.

Crie o projeto de IU

Na captura de tela acima, existem 2 tipos de bibliotecas exibidas como botões de opção

  1. sap.m
  2. sap.ui.commons

Ao selecionar sap.m, você está instruindo o assistente a criar um projeto de aplicativo UI5 cuja seção de inicialização incluirá automaticamente a biblioteca sap.m, destinada à criação de um aplicativo da web responsivo.

A seguir neste tutorial SAP FIORI, você verá abaixo a seção do assistente onde você precisa criar a Visualização inicial. Uma visualização inicial é aquela que será renderizada primeiro quando o aplicativo for acessado.

Crie o projeto de IU

Aqui você precisa fornecer o nome da visualização e selecionar o tipo de visualização. SAPUI5 suporta 4 tipos de visualização, conforme evidente na tela acima. Portanto, a UI de um aplicativo SAPUI5 pode ser construída usando Javascript ou XML ou JSON ou HTML, qualquer idioma com o qual você se sinta confortável.

Ao final do assistente, um novo projeto será criado e exibido na janela Project Explorer do Eclipse como abaixo.

Crie o projeto de IU

Etapa 2) Código Component.js

A seguir, vamos criar um arquivo Component.js e escrever o código abaixo nele.

sap.ui.core.UIComponent.extend("DisplayMonth.Component", {  
	
	metadata: {
	    "name": "DisplayMonth",	    
	    "dependencies": {	      
	      "components": []}
	    },
	    
createContent: function() {
    var oViewData = {
      component: this
    };
    var oView = sap.ui.view({
      viewName: "DisplayMonth.displaymonth.DisplayMonthView",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });
     
     return(oView);
  },

  init: function() {
    // call super init (will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

    // always use absolute paths relative to our own component
    // (relative paths will fail if running in the Fiori Launchpad)
    var sRootPath = jQuery.sap.getModulePath("DisplayMonth");

  
  },
});

Etapa 3) Código Index.html

A seguir, vamos informar o arquivo index.html para carregar o Component.js no SAPUI5 quando o aplicativo for acessado a partir do navegador. Portanto, escreva o código abaixo no arquivo index.html.

<!DOCTYPE HTML>
<html>
	<head>
	// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
	// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-xx-bindingSyntax="complex"
				data-sap-ui-resourceroots='{"DisplayMonth": "./"}'>
		</script>

		<script>
							
				sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "DisplayMonth"
				      })
				    }).placeAt("content");
				  });
		</script>

	</head>
// start of body of SAPUI5 application. It contains a div element.
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Etapa 4) Código DisplayMonthView.view.xml

A seguir, vamos escrever o código em nossa visualização displaymonth que exibirá o mês cujo número do mês é recebido do componente pai.

<html:style>
	#__xmlview1--id{
	margin-left: 30rem;
    margin-top: 9rem;
    font-size: 6rem;
    font-style: italic;
    background-color: burlywood;
	}
</html:style>
	<App id="fioricontent">
		<Page title="Child Component">
			<content>
				<Text id="id" xmlns="sap.m" text="{myModel>/monthname}"></Text>
			</content>
		</Page>
	</App>

Depois de colar o código acima, sua visualização deverá ficar semelhante a abaixo-

Código DisplayMonthView.view.xml

Etapa 5) Código DisplayMonthView.controller.js

E finalmente, vamos escrever o código do arquivo Controller do DisplayMonthView.

O código é escrito apenas no método de gancho onInit() deste controlador, portanto, colando aqui apenas o código onInit(). O restante do arquivo é gerado pela estrutura.

onInit : function() {
		sap.ui.getCore().getEventBus().subscribe("exchange", "data",
				function(channel, event, oEventData) {
					jsonModel = new sap.ui.model.json.JSONModel({
						monthumber : oEventData,
						monthname : ''

					});

					// derive month name from month number
					switch (jsonModel.oData.monthumber) {
					case "1":
						jsonModel.oData.monthname = 'January';
						break;
					case "2":
						jsonModel.oData.monthname = 'February';
						break;
					case "3":
						jsonModel.oData.monthname = 'March';
						break;
					case "4":
						jsonModel.oData.monthname = 'April';
						break;
					case "5":
						jsonModel.oData.monthname = 'May';
						break;
					case "6":
						jsonModel.oData.monthname = 'June';
						break;
					case "7":
						jsonModel.oData.monthname = 'July';
						break;
					case "8":
						jsonModel.oData.monthname = 'August';
						break;
					case "9":
						jsonModel.oData.monthname = 'September';
						break;
					case "10":
						jsonModel.oData.monthname = 'October';
						break;
					case "11":
						jsonModel.oData.monthname = 'November';
						break;
					case "12":
						jsonModel.oData.monthname = 'December';
						break;

					}
					this.getView().setModel(jsonModel, "myModel");

				}, this);
	},

Etapa 6) Implantação do aplicativo no SAP Netweaver Gateway Server

Implante o projeto e forneça o nome técnico da aplicação BSP que será gerada no servidor frontend ABAP. Deixe o nome ser zdisplaymês. Neste ponto, seu projeto de aplicativo deve ter a aparência abaixo.

Servidor SAP Netweaver Gateway

PARTE 2) Criando um componente pai

Agora é a hora de criar um novo Componente (Componente Pai) que irá consumir o Componente que criamos até agora neste tutorial.

Etapa 1) Crie um novo aplicativo SAPUI5

Vá para Arquivo->Novo->Outro->Desenvolvimento de Aplicativo SAPUI5->Projeto de Aplicativo. Em seguida, siga as instruções do assistente para criar um novo projeto de aplicativo SAPUI5. Isso foi descrito em detalhes na Etapa 1 da Parte 1 deste tutorial acima.

O nome do projeto do componente pai é Senha. E o nome técnico do aplicativo BSP gerado após a implantação do componente SAPUI5 no servidor frontend ABAP é zpassnum. A estrutura do projeto será semelhante a abaixo

Crie um novo aplicativo SAPUI5

Vamos agora escrever código nos arquivos index.html, Component.js e PassNum.view.xml e PassNum.controller.js

Etapa 2) Código-fonte de Index.html do componente pai

<!DOCTYPE HTML>
<html>
	<head>
// adding meta tags to tell IE browser to render the page in IE-edge mode.
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
// adding meta tag to tell eclipse to use UTF 8 as character encoding
	<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
// Bootstrap script to tell ui5 designtime and runtime to use sap.m library, use //blue-crystal these and use complex binding syntax
		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal"
				data-sap-ui-resourceroots='{"PassNum": "./"}'>
		</script>
		<script>
				  sap.ui.getCore().attachInit(function() {
				    new sap.m.Shell({
				      app: new sap.ui.core.ComponentContainer({
				        height : "100%",
				        name : "PassNum"
				      })
				    }).placeAt("content");
				  });
				
		</script>

	</head>
// start of Body of SAPUI5 application, Contains a div tag,
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

Etapa 3) Código-fonte do arquivo Component.js do componente pai

sap.ui.core.UIComponent.extend("PassNum.Component", {  
	
	metadata: {
	    "name": "PassNum",	    
	    "dependencies": {	      
	      "components": []}
	    },
	    
createContent: function() {
    var oViewData = {
      component: this
    };
    
// Creating Reference of a PassNum XML view
    var  myView = sap.ui.view({
      viewName: "PassNum.passnum.PassNum",
      type: sap.ui.core.mvc.ViewType.XML,
      viewData: oViewData
    });
     
     return(myView);
  },

  init: function() {
    // call super init (this will call function "create content")
    sap.ui.core.UIComponent.prototype.init.apply(this, arguments);
    // ensure to use absolute paths relative to own component
    // (running in the Fiori Launchpad, relative paths will fail)
    var sRootPath = jQuery.sap.getModulePath("PassNum");
 
  },
});

Etapa 4) Código-fonte do arquivo PassNum.view.xml

<Page title="Parent Component">
		<content>

			<VBox xmlns="sap.m" id="vboxid">

			<items>
				<Button xmlns="sap.m" id="1" text="First" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="2" text="Second" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="3" text="Third" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="4" text="Fourth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>
				<Button xmlns="sap.m" id="5" text="Fifth" press="clickbutton"
					class="sapUiSmallMarginEnd"></Button>

				<core:ComponentContainer id="conpcontid"
					name="DisplayMonth" manifestFirst="true" component="zdisplaymonth"></core:ComponentContainer>

				</items>
			</VBox>

		</content>
	</Page>

Depois de usar o código acima em sua visualização, sua visualização deverá ser semelhante a abaixo

Código fonte do arquivo PassNum.view.xml

Etapa 5) Código-fonte de PassNum.controller.js

Apenas o método onInit() foi alterado. Todo o resto neste arquivo permanece o mesmo

onInit: function() {

	jQuery.sap.registerModulePath("DisplayMonth", "../zdisplaymonth");
	},

	clickbutton:function(oEvent)
	{			
		sap.ui.getCore().getEventBus().publish("exchange", 
				"data", oEvent.oSource.sId.split("--")[1]);
		
		
	}

Etapa 6) Implantação do componente pai no servidor SAP Netweaver Gateway

Implante o aplicativo no servidor frontend ABAP e execute-o. Você deve conseguir executá-lo clicando com o botão direito do mouse no projeto e clicando na opção 'Executar no servidor ABAP'.

Implantação do componente pai no servidor SAP Netweaver Gateway

O URL abaixo será aberto em eclipse navegador.
http://hostname:8000/sap/bc/ui5_ui5/sap/zpassnum/index.html

Copie o URL e execute-o no navegador real. No nome do host acima marcado em amarelo está o nome do host do seu servidor front-end ABAP.

saída

Saída do servidor SAP Netweaver Gateway

Clique no botão 'Primeiro', janeiro deve ser exibido no componente filho.

Saída do servidor SAP Netweaver Gateway

Divirta-se criando aplicativos web bonitos e responsivos usando SAPUI5.

Resumo

Neste tutorial SAPUI5, aprendemos:

  • SAPUI5 explorado: SAPUI5 é o mais recente na série de tecnologias de desenvolvimento SAP UI.
  • O que é SAP UI5: SAPUI5 é um conjunto de bibliotecas usado para construir aplicativos web responsivos
  • Os componentes da arquitetura SAPUI5 são Dispositivos, Cliente, NetWeaver Gateway, Camada de Persistência
  • Um componente SAPUI5 é um código funcional que é reutilizado sempre que necessário
  • Os tipos de componentes SAPUI5 são 1) Componentes de UI, 2) Componentes sem rosto
  • Aprendemos como consumir um componente sapui5 em outro componente sapui5 e passar dados entre os dois componentes