✒️SAP BTPFIORI / Analizando la estructura del proyecto SAP Fiori Por Roberto Santucho
Analizando la estructura del proyecto SAP Fiori
1. ANALIZANDO LA ESTRUCTURA DEL UN PROYECTO
- el namespace es la UBICACION DE LA CARPETA RAIZ DEL PROYECTO.
- index.html
- para iniciar la aplicacion
- para crear una instancia del componente (Component.js)
- es un index html5 SOLO QUE CON LA DIFERENCIA DE LA CARGA DEL bootstrap (sript de arranque, informa al navegador sobre los recursos importantes a cargar para que se ejecute la app. UI5, TAMBIEN INICIALIZA EL RUNTIME). Boostrap configuration attributes
- src se le indica donde cargaremos los recursos de las librerias UI5).
- data-sap-ui-theme default theme for this app
- data-sap-ui-libs requested control libraries
- SI LAS APPS ESTAN CREADAS PARA EL FLP, EL ARCHIVO INDEX.HTML SE OMITE, y el propio LP cargara directamente el componente.
- las apps SAPUI5 que se inician desde el index.html son llamadas standalone o independientes.
PARTES DE UN PROYECTO SAP FIORI
|
APP HTML5/ SAPUI5 |
| ENRUTADOR DE APP AUTENTICACION, TOKENS Y RUTAS |
| CONSTRUCCION PARA EL DESPLIEGE DEL PROYECTO, AUTENTICACION Y RUTAS |
2. EL DISENO DE COLUMNA FLEXIBLE FlexibleColumnLayout
Analizamos un proyecto mta SAP Fiori master-detail application del tipo SAPUI5 frestyle con managed approuter para ver las ordenes de vta.
- control principal sap.f.flexibleColumnLayout
- vista maestra a la izquierda tipo lista, al seleccionar 1 se ve el detalle en la vista de la derecha.
- la pagina de detalle tiene una BARRA DE HERRAMIENTAS sap.m.Overflow que se puede enriquecer con contenido personalizado.
- respecto a la cantidad de elementos mostrados, la funcion scrollToLoad permite mostar mas elementos hacia abajo o presionando el boton.
- dentro del archivo app.view.xml podemos ver que se usa el diseno de columna flexible FlexibleColumnLayout.
3. LOS ARCHIVOS DENTRO DE LA APP (para la app maestro-detalle)
- App.controller.js (ubicado en carpeta controller): una vista puede estar asociada con un controlador, que describe su comportamiento. (auxiliares model.js y ListSelector.js), LOS CONTROLADORES SON DONDE VIVE JAVASCRIPT. Este es el controlador asociado a la vista de la aplicacion.
- BaseController.js (ubicado en carpeta controller): CONTROLADOR GENERICO que contiene funciones basicas que deben existir en un controlador, ES DEL QUE HEREDAN App.controller.js y otros.
- herencia de un controlador: SE DEBE HACER REFERENCIA DENTRO DE sap.ui.define y luego pasarlo como parametro de la funcion, en este caso BaseController, luego en el codigo se usa este nombre para hacer referencia.
- saplui.define([ "./BaseController", "sap/ui/model/json/JSONModel" ], function(BaseController, JSONModel) { .......
- herencia de un controlador: SE DEBE HACER REFERENCIA DENTRO DE sap.ui.define y luego pasarlo como parametro de la funcion, en este caso BaseController, luego en el codigo se usa este nombre para hacer referencia.
- Master.view.xml (localizado en carpeta view): en el DESCRIPTOR DE LA APP (manifest.json), hay una seccion que describe como deberia funcionar el enrutamiento dentro de la aplicacion.
- Detail.view.xml (localizado en carpeta view): similar a la vista Maestra, la vista Detalle tambien se carga, para mostrar el detalle del elemento maestro seleccinoado.
- Master.controller.js (localizado en carpeta controller): controlador de la vista maestra, que se carga inmediatamente despues despues de la vista maestra.
- formatter.js (localizado en carpeta model): se carga porque el controlador Master.controller.js hace referencia a un modulo auxiliar que contiene funciones de formato, UTILIZADA EN ENLACES DE DATOS.
- Detail.controller.js (localizado en carpeta controller): ESTE RECURSO DE CONTROLADOR DE DETALLES TAMBIEN HACE REFERENCIA AL MODULO formatter.js. SIN EMBARGO, PORQUE YA SE CARGO formatter.js, no vuelve a cargarse (SE APLICA EL MISMO COMPORTAMIENTO PARA CUALQUIER OTRO RECURSO SAPUI5).
- El archivo Component.js (localizado en carpeta raiz???? ): CONTENDRA LA CONFIGURACION DE NUESTRA APLICACION. Consta de 2 partes:
- la seccion metadata: que define una REFERENCIA AL ARCHIVO manifest.json
- la funcion init: QUE SE LLAMA AUTOMATICAMENTE CUANDO EL index.html INSTANCIA EL COMPONENTE.
- El archivo Manifest.json o descriptor: contiene TODAS LAS CONFIGURACIONES y parametros globales de la app. SAPUI5 lo lee para crera una instancia del componente. Secciones que contiene:
- SECCION SAP.APP:
id (mandatory): nombre del espacio de trabajo, ejemplo ns.app
type: ejemplo (application)
i18n: ruta
title:
description
applicationversion:
- SECCION SAP.UI:
technology: en nuestro caso SAPUI5
icons:
deviceTypes: cuales son compatibles (todos por default):
- SECCION SAP.UI5:
rootview: en caso de definirse, el componente INSTANCIARA AUTOMATICAMENTE LA VISTA Y LA USARA COMO RAIZ
dependencies: BIBLIOTECAS ESPECIFICAS USADAS (ej. sap.m, sap.ui.layout, etc)
models: que seran instanciados automaticamente por SAPUI5 al iniciar la app, como el i18n
- LAS CARPETAS MODEL, VIEW Y CONTROLER
- LA CARPETA DE LOCALIZACION i18n: cada idioma tiene su archivo .properties que consta de pares clave-valor.
- el arhivo XS-APP.JSON contiene la informacion de configuracion utilizada POR EL ENRUTADOR DE LA APLICACCION.
4. EL SERVICIO ODATA QUE CONSUMIMOS EN LA APP
Para agregar una fuente de datos a un proyecto ya existente: Find comand > "Consume SAP Service". CUANDO TERMINAMOS DE AGREGARLOS, AMBAS secciones dataSources ESTARAN PRESENTES EN EL manifest.json.
AL HACER EL DEPLOY VIA BOTON DERECHO SOBRE mta.yaml, se crea la carpeta y contenido de carpeta mta_archives, y con el archivo .mtar puedo HACER "Deploy MTA Archive"
- xs-security
- package.json
Escanear / Compartir
Sobre el autor
Publicación académica de Roberto Hernan Santucho, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
Roberto Hernan Santucho
Profesión: Ingeniero en Sistemas - Mexico - Legajo: VA51C
✒️Autor de: 43 Publicaciones Académicas
🎓Egresado del módulo:
Certificación Académica de Roberto Santucho
Disponibilidad Laboral: FullTime 
