✒️Analizando la estructura del proyecto SAP Fiori

• Analizando la estructura de un proyecto

El texto habla sobre la estructura de un proyecto y el concepto de bootstrapping en SAPUI5. Resumidamente, se mencionan los siguientes puntos:

El espacio de nombres (namespace) indica la ubicación de la carpeta raíz del proyecto.

El archivo index.html inicia la aplicación y carga el componente Component.js.

El bootstrapping es el proceso de carga e inicialización de SAPUI5.

La propiedad "resourceroots" en el bootstrap define el espacio de nombres de los recursos de la aplicación.

Si se trata de una aplicación para el Launchpad de SAP Fiori FLP, se omite el archivo index.html y se carga directamente el componente.

El espacio de nombres es un identificador único para cada aplicación.

La carpeta "Node Modules" contiene las librerías instaladas.

La carpeta "AppFiori" es la raíz de la aplicación y contiene archivos de configuración, entre otros.

• El diseño de columna flexible FlexibleColumnLayout

El texto describe el diseño de columna flexible (FlexibleColumnLayout) en el contexto de una aplicación SAP Fiori de tipo SAPUI5. Este diseño permite mostrar vistas maestras y de detalle en una sola página, mejorando la navegación y la experiencia del usuario.

En la aplicación, el control principal es sap.f.flexibleColumnLayout, que muestra inicialmente la vista maestra con una lista de objetos. Cuando el usuario selecciona un objeto, se muestra la vista de detalle en el lado derecho con los detalles del elemento seleccionado.

La vista maestra muestra el número actual de elementos y un campo de búsqueda para filtrar la lista. Se incluye funcionalidad para ordenar, filtrar y agrupar la lista.

La vista de detalle contiene un encabezado de página con más detalles del objeto seleccionado, una barra de herramientas personalizable y una tabla de elementos de línea asociados al objeto en el modelo de datos.

Tanto la lista maestra como la tabla de elementos de línea se cargan inicialmente con un número limitado de elementos, y el usuario puede cargar más desplazándose hacia abajo.

El diseño de columna flexible es compatible con el patrón MVC (Modelo-Vista-Controlador) en SAPUI5. El MVC es un enfoque para organizar una aplicación en unidades independientes, separando la lógica de negocio de la interfaz de usuario. Los controladores actúan como puentes entre los modelos y las vistas, ofreciendo beneficios como reutilización, legibilidad del código y desarrollo más rápido.

Flexible Column Layout se adapta de forma responsiva a diferentes dispositivos, ofreciendo hasta tres columnas y permitiendo al usuario expandir la columna de enfoque y cambiar entre diseños. Es adecuado tanto para dispositivos de escritorio como para dispositivos móviles.

En resumen, el diseño de columna flexible (FlexibleColumnLayout) es una solución de diseño en SAPUI5 que permite mostrar vistas maestras y de detalle en una sola página, mejorando la navegación y la experiencia del usuario. Es compatible con el patrón MVC y se adapta a diferentes dispositivos.

• Los archivos dentro de la app

El texto describe la estructura y los archivos utilizados en una aplicación maestro-detalle en SAPUI5. Aquí está un resumen de los conceptos principales:

• Archivos de la aplicación: El texto menciona varios archivos utilizados en la aplicación, incluyendo controladores (App.controller.js, BaseController.js, Master.controller.js, Detail.controller.js), vistas (Master.view.xml, Detail.view.xml), un archivo de formato (formatter.js), y el archivo Component.js que contiene la configuración de la aplicación.

• Herencia de controladores: El archivo BaseController.js es un controlador genérico del cual otros controladores como App.controller.js heredan funciones básicas.

• Enrutamiento: La aplicación utiliza el enrutamiento para cargar las vistas maestra y de detalle según sea necesario.

• Archivo Manifest.json: Este archivo es un objeto de configuración en formato JSON que contiene información sobre la aplicación, como el nombre, la versión, los modelos utilizados y la información de enrutamiento. También se menciona que es recomendable mantener las configuraciones del modelo de datos en el archivo Manifest.json.

• Carpeta de localización i18n: Esta carpeta almacena archivos de localización para traducir la aplicación a diferentes idiomas. Cada idioma tiene su propio archivo de propiedades con pares clave-valor.

• Estructura de carpetas: Se mencionan las carpetas model, view y controller utilizadas en el patrón MVC (Modelo-Vista-Controlador) de SAPUI5. La carpeta model contiene archivos relacionados con los modelos de datos, la carpeta view contiene las vistas y fragmentos, y la carpeta controller alberga los archivos controladores.

En resumen, el texto describe la estructura y los archivos utilizados en una aplicación maestro-detalle en SAPUI5, incluyendo controladores, vistas, archivos de formato, archivos de configuración y carpetas para modelos, vistas, controladores y localización.

• El servicio OData que consumimos en la app

En resumen, el texto menciona lo siguiente:

• Se consume un servicio OData en una aplicación de tipo maestro-detalle.
• El servicio se encuentra en el servidor SAP ES5, que fue agregado como destino en SAP BTP.
• Se accede a la entidad SalesOrderSet del servicio, que proporciona órdenes de venta.
• El servicio está expuesto en la siguiente URL: sapes5.sapdevcenter.com/sap/opu/odata/iwbep/GWSAMPLE_BASIC/SalesOrderSet.
• Para ver los datos de un registro en formato JSON, se puede agregar "?$top=1&$format=json" al final de la URL.
• Para consumir este OData en un proyecto existente, se debe agregar una fuente de datos.
• La fuente de datos se puede agregar al crear el proyecto o posteriormente en el entorno de trabajo del BAS.
• Para agregar la fuente de datos a un proyecto existente, se debe ir a View -> Find command y escribir "Consume SAP Service" en la línea de comandos.
• Se deben completar la carpeta del proyecto, el sistema SAP (My SAP systems) y el nombre del destino creado (ES5).
• El servicio que se desea consumir es GWSAMPLE_BASIC.
• Una vez configurada esta información, se agregan los datos al archivo manifest.json, utilizando las etiquetas de dataSources y modelo.