SAPTutorial UI5 para iniciantes

O que é a 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 da série de SAP Tecnologias de desenvolvimento de UI. A fim de fornecer integração web para o SAP Sistema ERP, 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 é SAPUI5.

SAPUI5 Archiarquitetura

SAPUI Archidiagrama de arquitetura

No acima Architecture, primeira caixa, ou seja, 'Dispositivos' indica os dispositivos nos quais os aplicativos UI5 são executados. Os aplicativos UI5 podem ser acessados por meio de um aplicativo móvel ou qualquer navegador nesses dispositivos. Essa camada da arquitetura é chamada de 'Camada de Apresentação'.

SAPAplicativos UI5 e serviços oData residem em SAP NetWeaver Gateway Server. Esta camada da arquitetura é chamada de 'Camada de Aplicação'.

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

SAPComponente UI5

Um Componente é um pedaço de código funcional que é reutilizado sempre que necessário. Existem 2 tipos de componentes fornecidos por SAPUI5

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
Componentes sem rosto – Estes não têm uma interface de usuário. Eles são baseados em SAPClasse UI5 chamada sap.ui.core.Component

Essencialmente, um Componente é uma pasta. Quando você cria um novo SAPAplicativo UI5, você poderá ver uma estrutura de pastas criada em seu explorador de projetos como abaixo.

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.

A seguir neste SAPUI5 Eclipse tutorial, aprenderemos como configurar SAPUI5.

SAPConfiguração UI5

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

Eclipse (versão Luna) está instalado no seu laptop
SAP Ferramentas de Desenvolvimento para Eclipse Luna e instalado em seu eclipse (SAP Ferramentas de Desenvolvimento para Eclipse Lua - https://tools.hana.ondemand.com/luna/)
SAP O painel de logon está instalado e você tem acesso a SAP Sistema NetWeaver Gateway para implantação e teste nesta aplicação que iremos construir neste blog.

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

Neste curso SAPGuia de tutoriais UI5, 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á em Arquivo->Novo->Outro->SAPDesenvolvimento de aplicativos UI5-> Projeto de aplicativo.

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

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

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

sap.m
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 SAP Tutorial 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.

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 SAPO aplicativo UI5 pode ser construído 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.

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 em SAPUI5 quando o aplicativo é acessado pelo navegador. Então 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-

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 em SAP Servidor Gateway Netweaver

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.

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.

Passo 1) Crie um novo SAPAplicativo UI5

Vá em Arquivo->Novo->Outro->SAPDesenvolvimento de aplicativos UI5-> Projeto de aplicativo. Em seguida, siga as instruções do assistente para criar novos SAPProjeto de aplicativo UI5. 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 da aplicação BSP gerada após a implantação do SAPO componente UI5 para o servidor front-end ABAP é zpassnum. A estrutura do projeto será semelhante a abaixo

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

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 para SAP Servidor Gateway Netweaver

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

O URL abaixo será aberto no navegador Eclipse.
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

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

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

Resumo

Neste curso SAPTutorial UI5, aprendemos:

SAPUI5 explorada: SAPUI5 é o mais recente da série de SAP Tecnologias de desenvolvimento de UI.
O que é a SAP IU5: SAPUI5 é um conjunto de bibliotecas usadas para construir aplicativos da web responsivos
Componentes de SAPA arquitetura UI5 são dispositivos, cliente, NetWeaver Gateway, camada de persistência
A SAPO componente UI5 é um pedaço de código funcional que é reutilizado sempre que necessário
Tipos de SAPOs componentes UI5 são 1) Componentes UI, 2) Componentes Faceless
Aprendemos como consumir um componente sapui5 em outro componente sapui5 e passar dados entre os dois componentes