SAPTutorial UI5 para iniciantes

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 ArchiNa arquitetura, a primeira caixa, '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 de qualquer navegador. Essa camada é chamada de 'Camada de Apresentação'.

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

A lógica de negócios real é implementada em SAP Sistemas centrais como ECC, CRM e BW. 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. Essa camada é chamada de 'Camada de Banco de Dados' ou 'Camada de Persistência'.

SAPComponente UI5

Um componente é um trecho de código reutilizável. Existem dois tipos de componentes fornecidos por SAPIU5:

1. Componentes de IU – Representam uma interface de usuário contendo elementos de IU. São baseados em SAPClasse UI5 ​​chamada sap.ui.core.UIComponent
2. Componentes sem interface gráfica – Estes não possuem interface de usuário. 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.

Nesta aplicação UI5, PassNum é um componente. O arquivo Component.js é obrigatório para que uma aplicação UI5 se comporte como um componente.

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

SAPConfiguração UI5

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

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

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

Neste curso SAPNeste guia de tutoriais de UI5, criaremos dois componentes chamados Componente Pai e Componente Filho. Primeiro, criaremos o Componente Filho e, em seguida, o utilizaremos 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, ao receber o número 3, ele deverá exibir "Março".

Etapa 1) Crie o projeto de IU

Vá em Arquivo->Novo->Outro->SAPDesenvolvimento de aplicações UI5 -> Projeto de aplicação.

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

Digite o nome do projeto e deixe as outras opções como sugeridas pelo assistente.

Na captura de tela acima, há 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 aplicativos da web responsivos.

A seguir neste SAP No tutorial do Fiori, você verá a seção do assistente abaixo onde precisa criar a visualização inicial. Uma visualização inicial é a primeira visualização que será exibida quando o aplicativo for acessado.

Aqui você precisa informar 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 linguagem com a qual você se sinta confortável.

Ao final do assistente, um novo projeto será criado e exibido na janela Explorador de Projetos. Eclipse como abaixo.

Etapa 2) Código Component.js

Em seguida, 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

Em seguida, vamos instruir nosso arquivo index.html a carregar o Component.js quando o aplicativo for acessado. 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

Em seguida, vamos escrever o código na nossa view displaymonth para exibir o mês cujo número foi 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 como abaixo.

Etapa 5) Código DisplayMonthView.controller.js

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

O código está escrito apenas no método de gancho onInit(), portanto, somente ele está colado aqui. O restante do arquivo é gerado pelo framework.

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 NetWeaver Gateway

Implante o projeto e atribua o nome técnico ao aplicativo BSP gerado no servidor front-end ABAP. Por exemplo, o nome será zdisplaymêsSeu projeto deverá ter a aparência abaixo.

PARTE 2) Criando um componente pai

Agora é hora de criar um novo componente (componente pai) que consumirá o componente que criamos até agora neste tutorial.

Passo 1) Crie um novo SAPAplicativo UI5

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

O nome do projeto Componente pai é Número da senhaO nome técnico da aplicação BSP gerada após a implantação é zpassnumA estrutura do projeto será semelhante à seguinte.

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

Etapa 2) Fonte Code do arquivo 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>

Após usar o código acima em sua view, ela deverá ficar como abaixo.

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

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

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 NetWeaver Gateway

Implante a aplicação no servidor front-end ABAP e execute-a. Você poderá executá-la clicando com o botão direito do mouse no projeto e selecionando a opção "Executar no servidor ABAP".

O abaixo URL abrirá 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 frontend ABAP.

saída

Clique no botão 'Primeiro' e janeiro deverá aparecer no componente filho.

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

Perguntas Frequentes