✒️SAP Fiori 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:FragmentDefinition

xmlns="sap.m"

xmlns:core="sap.ui.core">

<Dialog

title="Hello World">

<content>

<Text text="Hello World"/>

</content>

<buttons>

<Button

text="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();

}

});

});