Avalados por :
Hola,
Quería entender cómo podría crear un renderizador para mi control personalizado o para un control integrado.
Una de las formas que encontré es que al crear un control personalizado, proporcionas una función de renderizado y lo renderizas usando las instancias oRendererManager y oControl que obtienes.
Sin embargo, quería usar una clase de renderizador separada para una o más clases de control.
Leí al respecto en SAPUI5 SDK - Demo Kit
Entendí la parte teórica, pero no mucho desde una perspectiva práctica.
¿Alguien podría indicarme un enlace donde se muestren ejemplos prácticos más completos? o si alguien puede compartir un ejemplo simple, sería genial.
Gracias de antemano.
Amjad...
Nadie tiene una respuesta ?
Hola Amjad,
Prueba esto:
JS Bin - Depuración colaborativa de JavaScript
He cambiado la forma de declarar el renderizador personalizado.
Espero que esto ayude,
Saludos cordiales
Hola Amjad,
No creo que necesites extender la clase sap.ui.renderer.core, creo que solo necesita ser un objeto estático que implemente la función de renderer, es decir,
customrenderers.MyRenderer = {
"redenderer" : function(rm, oControl) {
}
}
Saludos,
Jason
Gracias por tus respuestas Angel y Jason.
Había intentado eso en primer lugar, pero no logro que funcione.
Recibo un error en tiempo de ejecución "error de tipo: r indefinido"
Aquí está lo que he hecho...
Tengo un control personalizado definido de la siguiente manera:
sap.ui.core.Control.extend("customcontrols.HelloWorld", {
metadata : {
properties : {
"value" : "string"
},
aggregations: {
"_tf" : {type : "sap.ui.commons.TextField", multiple : false, visibility: "hidden"},
"_btn" : {type : "sap.ui.commons.Button", multiple : false, visibility: "hidden"}
},
events: {
"search" : {}
}
},
init: function() {
var that = this;
this.setAggregation("_tf", new sap.ui.commons.TextField({
change: function(oEvent){
that.setProperty("value", oEvent.getParameter("newValue"), true);
}
}));
this.setAggregation("_btn", new sap.ui.commons.Button({
text: "Buscar",
press: function(){
that.fireSearch();
}
}));
},
setValue: function(sValue){
this.setProperty("value", sValue, true);
this.getAggregation("_tf").setValue(sValue);
return this;
},
renderer :"customrenderers.MyRenderer"
});
Mi renderizador está definido de la siguiente manera:
sap.ui.core.Renderer.extend("customrenderers.MyRenderer",
{
render : function(oRm, oControl)
{
oRm.write("<div");
oRm.writeControlData(oControl); // establece el ID de UI5 al control y hace que los controles sean eventables
oRm.addClass("miCampoDeBusqueda");
oRm.writeClasses();
oRm.write(">");
oRm.renderControl(oControl.getAggregation("_tf"));
oRm.renderControl(oControl.getAggregation("_btn"));
oRm.write("</div>");
}
});
y finalmente aquí está mi archivo index:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_gold
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
