Avalados por :
Olá,
Gostaria de entender como posso criar um renderizador para o meu controle personalizado ou para um controle integrado.
Uma das formas que encontrei é ao criar um controle personalizado, fornecer uma função de renderização e renderizá-lo usando as instâncias oRendererManager e oControl que você obtém.
No entanto, gostaria de usar uma classe de renderizador separada para uma ou mais classes de controle.
Li sobre isso em SAPUI5 SDK - Demo Kit
Entendi a parte teórica, mas não muito na perspectiva prática.
Alguém poderia me indicar um link onde exemplos práticos mais completos são mostrados? Ou se alguém puder compartilhar um exemplo simples, seria ótimo.
Obrigado antecipadamente.
Amjad...
Ninguém tem uma resposta ?
Olá Amjad,
Experimente isto:
JS Bin - Depuração colaborativa de JavaScript
Alterei a forma de declarar o renderizador personalizado.
Espero que isso ajude,
Cumprimentos
Olá Amjad,
Não acredito que seja necessário estender a classe sap.ui.renderer.core, acredito que só precisa ser um objeto estático que implemente a função de renderização, ou seja,
customrenderers.MyRenderer = {
"renderizador" : function(rm, oControl) {
}
}
Saudações,
Jason
Obrigado pelas suas respostas Angel e Jason.
Eu tinha tentado isso inicialmente, mas não consigo fazer funcionar.
Estou recebendo um erro de tempo de execução "erro de tipo: r indefinido"
Aqui está o que eu fiz...
Tenho um controle personalizado definido da seguinte forma:
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"
});
Meu renderizador está definido da seguinte forma:
sap.ui.core.Renderer.extend("customrenderers.MyRenderer",
{
render : function(oRm, oControl)
{
oRm.write("<div");
oRm.writeControlData(oControl); //† estabelece o ID do UI5 no controle e torna os controles eventáveis
oRm.addClass("meuCampoDeBusca");
oRm.writeClasses();
oRm.write(">");
oRm.renderControl(oControl.getAggregation("_tf"));
oRm.renderControl(oControl.getAggregation("_btn"));
oRm.write("</div>");
}
});
e finalmente aqui está meu arquivo 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"
></script>
</head>
<body>
<script>
var oHello = new customcontrols.HelloWorld();
oHello.placeAt("content");
</script>
</body>
</html>
contacto@primeinstitute.com
(+51) 1641 9379
(+57) 1489 6964
© 2024 Copyright. Todos los derechos reservados.
Desarrollado por Prime Institute
