✒️SAP Fiori La creación de controles personalizados

1. Custom Controls

Custom controls in SAPUI5 allow us to create reusable UI components. When developing a new SAPUI5 application, it’s important to consider how to structure the application and what controls will be needed. Controls can be extended from existing ones or created anew.

Namespace Usage:

To avoid conflicts, avoid using the sap namespace for anything other than SAP-provided content.

2. Base Class Architecture of SAPUI5

SAPUI5 controls inherit from the base class sap.ui.core.Control, which provides essential features such as event handling, data binding, and rendering.

Inheritance Example:

// Extending an existing control

sap.m.Image.extend("custom.Image", {

// custom properties and methods

});

// Creating a new control from the base class

sap.ui.core.Control.extend("custom.MyControl", {

// custom properties and methods

});

3. Structure of a Custom Control

A custom control is created in the project folder, typically within a control subfolder. It consists of three main components: metadata, the init method, and the render method.

Metadata:

Defines the control's properties, aggregations, and events.

metadata: {

properties: {

"value": { type: "int", defaultValue: 0 }

},

aggregations: {

"_button": { type: "sap.m.Button", multiple: false, visibility: "hidden" },

"_label": { type: "sap.m.Label", multiple: false, visibility: "hidden" }

},

events: {

"change": {}

}

}

4. Creating Metadata for a Custom Control

Metadata defines the structure of the control. Properties, events, and aggregations are specified in this section.

• Properties: Define the characteristics of the control.

properties: {

"rating": { type: "float", defaultValue: 0 }

}

• Events: Define events that the control can trigger.

events: {

"rateChange": {}

}

• Aggregations: Define child controls.

aggregations: {

"_ratingIndicator": { type: "sap.m.RatingIndicator", multiple: false, visibility: "hidden" },

"_submitButton": { type: "sap.m.Button", multiple: false, visibility: "hidden" },

"_label": { type: "sap.m.Label", multiple: false, visibility: "hidden" }

}

5. Initializing the Control

The init method is called by SAPUI5 when an instance of the control is created. It sets up the internal controls.

init: function() {

this.setAggregation("_ratingIndicator", new sap.m.RatingIndicator());

this.setAggregation("_submitButton", new sap.m.Button());

this.setAggregation("_label", new sap.m.Label());

}

6. Event Management

Custom controls can handle various events. The setValue method updates the control's properties and ensures proper rendering.

setValue: function(iValue) {

this.setProperty("value", iValue, true);

this.getAggregation("_ratingIndicator").setValue(iValue);

}

Event handlers for internal controls are defined to manage user interactions.

_onRate: function(oEvent) {

var iValue = oEvent.getParameter("value");

this.setValue(iValue);

this.fireEvent("rateChange", { value: iValue });

}

7. Rendering

The render method defines how the control is displayed as HTML.

renderer: function(oRM, oControl) {

oRM.write("<div");

oRM.writeControlData(oControl);

oRM.write(">");

oRM.renderControl(oControl.getAggregation("_ratingIndicator"));

oRM.renderControl(oControl.getAggregation("_submitButton"));

oRM.renderControl(oControl.getAggregation("_label"));

oRM.write("</div>");

}

8. Using the Control in the UI

To use the custom control in a view, it must be referenced and instantiated.

• XML View:

<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:custom="custom.controls">

<custom:MyControl rateChange="onRateChange"/>

</mvc:View>

• Controller:

onRateChange: function(oEvent) {

var iValue = oEvent.getParameter("value");

sap.m.MessageToast.show("Rated: " + iValue);

}