✒️Analizando la estructura del proyecto SAP Fiori
Analizando la estructura del proyecto SAP Fiori
Estructura de un proyecto
A nivel general encontramos la siguiente estructura desde el explorer de BAS
V APPFIORI
> .vscode
V app
> node_modules | // librerias que instalamos
> webapp | //
gitignore |
package-lock.json | App HTML5
index.html |
package.json |
README.md |
ui5-local.yaml |
ui5.yaml |
xs-app.json
V appfiori-approuter |
> node_modules | Enrutador de
gitignore | rutas
package-lock.json |
package.json |
xs-app.json |
> node_modules
gitignore | Construccion para el despliegue
package-lock.json | del proyecto autenticacion y
package.json | rutas
xs-app.json |
El "namespace" que se solicita al crear un nuevo proyecto y es la ubicacion de la carpeta raiz del proyecto
Al crear desde template se genera un archivo index.html. El mismo, desde su script sap-uit-bootstrap inicializa sapui5 indicando mediante atributos la carpeta raiz de los recursos del proyecto (data-sap-ui-resource= "..."). Se crea una instancia de Components.js Cuando el proyecto es lanzado desde SAP Launchpad estas funciones las realiza este y el archivo index.html se omite.
3. Archivos dentro de la app
Cada proyecto dispondra de carpetas para agupar los componentes categorizados de acuerdo al concepto MVC
Carpeta model: todos los modelos, es decir datos muchas veces representados en archivos json
Carpeta view: la parte visual, allí estarán las vistas y fragmentos representados como xml
Carpeta controller: donde está la lógica de los componentes representados como .js (javascript)
A su vez contará con una carpeta de localización
Carpeta i18n: allí residirán archivos de localizacion con textos propios de cada idioma (p.ej: i18n.properties el archivo por defecto y i18n-en.properties los mismos textos pero en ingles).
hay una serie de "artifacts" relacionados para componer la estructura de clases/objetos javascript de la aplicacion bajo el diseño de SAPUI5, podemos enumerar
+ App.controller.js: vista asociada a un controlador que describe su comportamiento junto a model.js y ListSelector.js alojan el codigo JavaScript que depuramos. Hereda de BaseController.js
+ BaseController.js: clases base con funciones basicas de cada controlador
+ Master.view.xml: En una app de maestro - detalle nos vamos a encontrar con una vista maestra (particularmente si usamos el control sap.f.flexibleColumnLayout que divide la pantalla en datos de cabecera y detalle). El descriptor de la app (manifest.json) posee una seccion que define los en enrutamientos entre maestro y detalle
+ Detail.view.xml: muestra el detalle antes mecionado
+ formatter.js: func. de formato utilizadas en elance de datos, se referencian desde demas controladores para su carga
+ Master.controller.js y Detail.controller.js : controladores de las vistas xml. Referencian al formatter.js para que se cargue
+ Component.js: archivo que contiene config. de nuestra app. Secciones: metadata, que referencia al manifest.json; y funcion init que se llama automaticamente cuando index.html instancia el componente
+ Manifest.json (descriptor): objeto de configuración con parametros globales. Aloja info como el nombre de librerias UI5 utilizadas, modelos, ubicación de los datos, info de enrutamiento, etc. Cuenta con las secciones: a) SAP.APP (con el id del namespace, tipo de app, referencia a i18n, titulo, version, etc) b) SAP.UI (tecnology, icons, deviceTypes como tablet, mobile)
4. Consumo de una fuente de datos ODATA
mediante el comando "Consume SAP Service" de la paleta de comandos (ctrl-shift-P) el sistema se conecta a los destination definidos en BTP para occeder a los servicios que exponen OData para su consumo (en el ejemplo GWSAMPLE_BASIC). Al ejecutar el comando se inserta automaticamente en manifest.json los tag de dataSources y modelo del archivo.
Sobre el autor
Publicación académica de Cristian Cash, en su ámbito de estudios para la Carrera Consultor en SAP Fiori.
SAP SemiSenior
Cristian Cash
Profesión: Consultor Tecnológico - Argentina - Legajo: GX99J
✒️Autor de: 23 Publicaciones Académicas
🎓Egresado del módulo:
Presentación:
Amplia experiencia en el ambito tecnologico y corporativo en labores de consultoria técnica y funcional en forma individual y coordinando equipos.
Certificación Académica de Cristian Cash
Disponibilidad Laboral: FullTime 
