Quiero crear un control para mostrar mi propio teclado virtual en la ventana del navegador. Sin embargo, al tratar de generar un componente exclusivo para mostrarlo, pues como que no va.
En un principio, durante las pruebas, solo quiero mostrar una matriz de 3 * 3
botones. El código aislado (sin ser un componente), para generar el resultado que espero conseguir, es el siguiente:
webix.ready( function( ) {
var w = 50,
h = 50,
s = 10;
webix.ui( {
rows: [
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
},
{ height: s },
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
},
{ height: s },
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
}
]
} )
} );
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css" type="text/css">
<script type="text/javascript" charset="UTF-8" src="https://cdn.webix.com/edge/webix_debug.js"></script>
Aparte de la documentación oficial de webix
(en inglés) Creating a Custom Component, he encontrado un snippet al respecto, que hace lo que yo quiero: crea un componente, que es un agregado de varios componentes menores. Al incluir aquí el código, muestra un aviso, pero no es relevante: se debe al cambio de página de soporte, de la oficial de webix
a los stack-snippets
.
He limpiado todo lo que he podido del código original; ha perdido toda su funcionalidad, pero el aspecto gráfico sigue idéntico:
webix.protoUI({
name: "dndlist",
defaults: {
label: "",
labelWidth: 80,
height: 200,
choicesHeader: "Choices",
valueHeader: "Selected",
choices: [],
value: [],
swap: false
},
$formElement: true,
$init: function (cfg) {
var dnd = this;
config = webix.extend(this.defaults, cfg, true);
var dtCommon = {view: "datatable", scrollX: false, drag: true};
var value = [];
for (var i = 0; i < config.value.length; i++) {
value.push({value: config.value[i]});
}
var choicesDt = webix.extend(webix.copy(dtCommon), {
id: 'choices',
columns: [
{
id: "value",
header: {
text: config.choicesHeader,
colspan: 2
},
fillspace: true
},
{
id: "_actions",
header: " ",
width: 35,
template: function (row) {
return "<span style=' cursor:pointer;' class='webix_icon fa-plus-square'></span>";
}
}
],
onClick: {
'fa-plus-square': function (e, i) {
var row = this.getItem(i.row);
dnd.addValue(row.value);
}
},
on: {
onItemDblClick: function (id) {
dnd.addValue(this.getItem(id).value);
}
}
}, true);
var valueDt = webix.extend(webix.copy(dtCommon), {
id: 'value',
columns: [
{
id: "value",
header: {
text: config.valueHeader,
colspan: 2
},
fillspace: true
},
{
id: "_actions",
header: " ",
width: 35,
template: function (row) {
return "<span style=' cursor:pointer;' class='webix_icon fa-minus-square'></span>";
}
}
],
onClick: {
'fa-minus-square': function (e, i) {
var row = this.getItem(i.row);
dnd.removeValue(row.value);
}
},
on: {
onItemDblClick: function (id) {
dnd.removeValue(this.getItem(id).value);
}
}
}, true);
var spacer = {view: 'spacer', width: 10};
var cols = {cols: (config.swap ? [valueDt, spacer, choicesDt] : [choicesDt, spacer, valueDt])};
var label = {view: 'label', label: config.label, width: config.labelWidth, align: config.labelAlign};
if (config.labelPosition === 'top') {
config.rows = [
label,
cols
];
} else {
label.css = {padding: "1px 7.5px 0px 5px"};
config.cols = [
{
rows: [label]
},
cols
];
}
this.$ready.push(function () {
// this.setValue(config.value);
// this.setChoices(config.choices);
});
}
}, webix.IdSpace, webix.ui.layout);
webix.ui( {
view: "form",
width: "100%",
elements: [
{
view: "text",
name: "name",
label: "Name",
value: "Unknown"
},
{
view: "dndlist",
name: "attributes",
label: "Attributes",
choices: [ "Tall", "Handsome", "Rich", "Kind", "Hardworking", "Romantic" ],
value: [ "Handsome" ]
}
]
} );
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css" type="text/css">
<script type="text/javascript" charset="UTF-8" src="https://cdn.webix.com/edge/webix_debug.js"></script>
<div id="area"></div>
Eso es mas o menos lo que estoy buscando hacer: crear un componente que sea un agregado de otros mas simples.
El funcionamiento del código, hasta donde puedo seguirlo, es crear un componente, heredando de webix.IdSpace
y webix.ui.layout
. Proporciona un método $init
que es llamado para inicializar el control una vez que este se crea.
En dicha inicialización, se limita a rellenar un objeto config
; presumo que ese objeto es el que utiliza el módulo webix.ui.layout
, del cual heredamos, para mostrar los controles que le indicamos.
Bueno, pues ya llegamos. Lo que estoy intentado es
webix.protoUI( {
name: 'test',
$formElement: true,
$init: function( cfg ) {
var x3 = this,
s,
h,
w;
cfg = cfg || { };
s = cfg.space || 10;
h = cfg.height || 50;
w = cfg.width || 50;
config = {
rows: [
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
},
{ height: s },
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
},
{ height: s },
{ cols: [
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
{ width: s },
{ view: 'button', width: w, height: h },
]
}
]
}
}
}, webix.IdSpace, webix.ui.layout );
webix.ready( function( ) {
webix.ui( {
rows: [
{ },
{ cols: [
{ },
{ view: 'test' },
{ }
]
},
{ }
]
} );
} );
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css" type="text/css">
<script type="text/javascript" charset="UTF-8" src="https://cdn.webix.com/edge/webix_debug.js"></script>
Al probarlo en el navegador, me genera un bonito
Uncaught TypeError: Cannot read property 'length' of undefined webix_debug.js:5894
Como muestro al principio de la pregunta, en el primer trozo de código, probado de forma aislada, funciona correctamente y muestra la matriz de 3 * 3
.
webix
no está definido. Antes de agregar el código a stack-snippet en esta pregunta, lo primero sería identificar si existe una librería de webix para para cargar en IDE, si esta fuera javascript puro y no un plug-in, se podría incluir pero en caso contrario, no tendría sentido usar stack-snippet pues el código no se podría ejecutar.localhost
, y el 3 da el error que indico. En mi intento de usarstack-snippets
obtuve el mismo resultado que tú:webix
no está definido. En los 3 bloques. Fíjate que usocdn
, por lo que deben funcionar en cualquier máquina. En cuanto alparloteo
, intenté describir el problema lo mejor que pude, con los pasos exactos que he seguido, ya que , como indico, no he visto preguntas sobrewebix
y no estoy seguro de la causa del error. Edita y elimina, o dime que partes crees que sobran.