✒️SAP BTPFIORI / El framework de programación SAPUI5 Por Jaime Gomez Arango
El framework de programación SAPUI5
1. The SAPUI5 Framework
What is a Framework?
A framework acts like the skeleton of a structure. Think of it as the frame of a house where the main structure is predefined, and the developer’s job is to fill in the gaps with their code.
Instant Availability of SAPUI5 Applications
SAPUI5 applications are instantly available as part of SAP Fiori UX, following SAP’s RENEW user experience strategy. These applications are pre-developed by SAP and can be quickly installed and used.
Overview of SAPUI5
- Popularity: SAPUI5 is widely used for developing new applications and is considered the latest standard for SAP solutions compatible with multiple platforms. Initially known as "Phoenix," it emphasizes lightweight user interfaces and targets web developers.
- Architecture: SAPUI5 separates the user interface from business logic, following the Model-View-Controller (MVC) concept, making it easier to adapt to UI technology changes.
Technologies Used in SAPUI5
- HTML5: Used for structuring web pages.
- CSS: Combined with HTML5 for page design, viewed via a browser.
- JavaScript: For dynamic interactions, with code organized in reusable libraries like jQuery. SAPUI5 builds on jQuery, adding HTML5 rendering libraries to meet display standards.
- AJAX: Combines various technologies (HTML, CSS, JavaScript, XML) to create responsive web applications that update without reloading the page.
Benefits of SAPUI5
- Toolset: Provides a wide array of controls to quickly build UIs and connect them to backend services.
- Compatibility: Works on any device (Desktop, Tablet, Mobile) and operating system (Windows, Linux, Android, iOS).
- Learning: Easy to learn for those familiar with HTML, CSS3, and JavaScript.
2. Libraries in SAPUI5
What are Libraries?
Libraries are code blocks that address specific problems during application development, such as file uploads, form validation, or user access restrictions.
Key Features of SAPUI5
- Controls: Over 500 controls ranging from buttons to complex 3D visualizations.
- User Experience: Consistent UX with a common design language.
- Robust Applications: Supports internationalization, extensibility, security, and accessibility.
- Responsiveness: Adapts to screen size and user interactions, avoiding the need to reinvent the wheel.
Examples of SAPUI5 Applications
- Shopping Cart: Example applications like shopping carts, sales order search, and product management.
- Demo Applications: Available at SAPUI5 Demo Apps.
3. The MVC Model
MVC Components:
- Model: Contains application logic, data connection, and business logic. Models do not directly communicate with views. Data is organized in JSON or XML and connected via OData.
- View: The graphical interface that users interact with, displaying data and capturing user input. Views do not communicate directly with models.
- Controller: The intermediary between the view and model, processing data from the model and updating the view accordingly. It handles user interactions and updates data.
Benefits of MVC
- Modularity: Enhances code readability, reusability, and maintainability by separating components based on functionality.
- Parallel Development: Allows simultaneous development of different components, speeding up the overall development process.
4. Types of Models
- JSON Model: Represents data in JSON format, typically used on the client side for small datasets. Example:
var oJSONModel = new sap.ui.model.json.JSONModel();
oJSONModel.setData({"material": "1234","materialName": "Material 1234","Price": "0.125","currency": "ARS"});
- XML Model: Similar to the JSON model but uses XML format. Example:
var oXMLModel = new sap.ui.model.xml.XMLModel();
oXMLModel.setXML("<data><material>1234</material><materialName>Material 1234</materialName><price>0.125</price><currency>ARS</currency></data>");
- OData Model: Represents server-side data and supports OData V2. Supports operations like query, read, create, update, and delete. Example:
var oModel = new sap.ui.model.odata.v2.ODataModel("uri");
oModel.read("/PurchaseRequisitions", {success: successHandler,error: errorHandler});
- Resource and Internationalization Models :Stores text literals in separate files for each supported language, typically in .properties files in the i18n folder.
5. Types of Views
- JavaScript Views: Use the .view.js suffix. Example methods:
- createContent(): Creates and returns the UI.
- getControllerName(): Returns the controller name.
- XML Views: Preferred for SAP Fiori applications, defined in .view.xml files with XML tags for each control.
- HTML Views: Defined in .view.html files.
- JSON Views: Defined in .view.json files, using a JSON structure for the view.
Lifecycle Methods of a View
SAPUI5 provides lifecycle methods that act as event handlers throughout the view's lifecycle.
- onInit Method
- Description: Called when the view is instantiated and its controls (but not the UI) have been created.
- Usage: Used for setting up the initial state of the view, binding models, and performing initializations that require access to the controls.
onInit: function() {// Initialization codevar oModel = new sap.ui.model.json.JSONModel();this.getView().setModel(oModel);}
- onBeforeRendering Method
- Description: Called before the controller's view is re-rendered (not before the first rendering).
- Usage: Used for pre-rendering tasks, such as updating model data or view settings.
onBeforeRendering: function() {// Code to execute before renderingthis.getView().byId("myControl").setText("Updated before rendering");}
- onAfterRendering Method
- Description: Called after the view has been rendered and the HTML is part of the document.
- Usage: Used for post-rendering manipulations of the HTML or for adding custom event handlers.
onAfterRendering: function() {// Code to execute after renderingthis.getView().byId("myControl").focus();}
- onExit Method
- Description: Called when the controller's view is destroyed.
- Usage: Used for cleanup tasks, such as deregistering event handlers or freeing up resources.
onExit: function() {
// Cleanup codevar oModel = this.getView().getModel();oModel.destroy();}
These methods help manage the lifecycle of a view, allowing developers to initialize, modify, and clean up their views effectively at different stages of their existence.
Escanear / Compartir
Sobre el autor
Publicación académica de Jaime Eduardo Gomez Arango, en su ámbito de estudios para la Carrera Consultor SAP BTP Fiori.
SAP Expert
Jaime Eduardo Gomez Arango
Profesión: Ingeniero de Sistemas y Computación - España - Legajo: SW34C
✒️Autor de: 149 Publicaciones Académicas
🎓Egresado de los módulos:
- Carrera Consultor SAP BTP Fiori
- Carrera Consultor ABAP Nivel Avanzado
- Carrera Consultor ABAP Nivel Inicial
Disponibilidad Laboral: FullTime
Presentación:
Ingeniero de sistemas y computación con 8 años de experiencia el desarrollo frontend & backend (react/node) y en cloud (aws), actualmente desarrollando habilidades en sap btp, ui5, abap y fiori.
Certificación Académica de Jaime Gomez
