✒️SAP BTPFIORI / La reutilización de código Por Jaime Gomez Arango
SAP BTPFIORI La reutilización de código
Navigation and Code Reusability
SAPUI5 supports the modularization of JavaScript applications. This means instead of defining and loading a large JavaScript package, an application can be divided into smaller parts that can be loaded at runtime as needed. These smaller individual files are called modules.
Modularization involves dividing the application code into smaller, independent parts (modules) that facilitate code reuse, improve readability, and enhance maintainability. Modules can contain any code, but typically, their content focuses on a common theme, like forming a JavaScript class, a namespace, or addressing specific functions such as client-server communication or mathematical operations.
1 | What is a Module?
A module is a JavaScript file that can be loaded and executed in a browser. There are no strict rules about what code belongs to a module; the content is up to the developer. Typically, the content has a common theme, like forming a JavaScript class or namespace, or addressing specific functions, for example, client-server communication or mathematical functions.
Key Concepts:
- Name: Identifies the module in relation to the sap.ui.define and sap.ui.require syntax. A module can be required by its given name.
- Definition: Modules have a predefined structure based on the sap.ui.define function, ensuring asynchronous resource loading.
- Dependencies: Each module defines a list of dependencies that must be resolved before executing the module's callback function.
Modules are essential for splitting the code into smaller, manageable parts, allowing for asynchronous loading and better performance.
2 | Loading a Module in the Controller
The entry point of an SAPUI5 application is often a module used to create an instance of an SAPUI5 component. This central module is like a node in a graph, with all dependent modules and their dependencies as connected nodes.
Asynchronous Loading with sap.ui.define and sap.ui.require
- sap.ui.define: Used to define a JavaScript module. It allows defining a global namespace, making the object usable in the controller.
sap.ui.define(["sap/ui/core/mvc/Controller","sap/m/MessageToast"], function(Controller, MessageToast) {"use strict";return Controller.extend("namespace.MyController", {onShowHello: function() {MessageToast.show("Hello World");}});});
- sap.ui.require: Used to load dependencies asynchronously without declaring a namespace.
sap.ui.require(["sap/m/MessageBox"], function(MessageBox) {MessageBox.show("Hello World");});
These methods allow for clear separation between module loading and code execution, improving application performance. Be cautious with resource paths, and use the data-sap-ui-resourceroots parameter in the bootstrap configuration to manage resource locations.
3 | Fragments
Fragments are lightweight, reusable parts of the UI used to modularize the view part of the application. Unlike views, fragments do not have associated controllers. They are often used for designing dialogs and dynamic screens, where different fragments can be included based on business scenarios.
Types of Fragments
- XML Fragments
- HTML Fragments
- JS Fragments
Fragments are helpful when you need reusable UI parts across multiple views or want to swap UI parts under certain conditions. An embedded fragment behaves as part of the view, integrating seamlessly into the DOM.
4 | Implementing Dialog as a Fragment
Fragments can be used to implement dialogs, which are commonly reused across screens.
Example: Creating a Dialog Fragment
To create and show a dialog fragment when a user clicks the "Say Hello With Dialog" button:
- Define the fragment in an XML file:
<core:FragmentDefinitionxmlns="sap.m"xmlns:core="sap.ui.core"><Dialogtitle="Hello World"><content><Text text="Hello World"/></content><buttons><Buttontext="Close"press="onCloseDialog"/></buttons></Dialog></core:FragmentDefinition>
- Load and display the fragment in the controller:
sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/core/Fragment"], function (Controller, Fragment) {"use strict";
return Controller.extend("namespace.MyController", {onOpenDialog: function () {var oView = this.getView();if (!this.byId("helloDialog")) {Fragment.load({id: oView.getId(),name: "namespace.view.HelloDialog",controller: this}).then(function (oDialog) {oView.addDependent(oDialog);oDialog.open();});} else {this.byId("helloDialog").open();}},onCloseDialog: function () {this.byId("helloDialog").close();}});});
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
