1

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: "&nbsp;",
				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: "&nbsp;",
				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.

3
  • Pasé el primer bloque al stack-snippet en es.meta.stackoverflow.com/a/1892/65 . Devuelve un error indicando que 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.
    – Rubén
    Commented el 1 may. 2017 a las 2:33
  • 1
    @Rubén gracias por intentar pasarlo a snippets. Los bloques 1 y 2 funcionan perfectamente en localhost, y el 3 da el error que indico. En mi intento de usar stack-snippets obtuve el mismo resultado que tú: webix no está definido. En los 3 bloques. Fíjate que uso cdn, por lo que deben funcionar en cualquier máquina. En cuanto al parloteo, intenté describir el problema lo mejor que pude, con los pasos exactos que he seguido, ya que , como indico, no he visto preguntas sobre webix y no estoy seguro de la causa del error. Edita y elimina, o dime que partes crees que sobran.
    – Trauma
    Commented el 1 may. 2017 a las 4:46
  • @Rubén Agradezco la edición. Lo tendré en cuenta para el futuro. Consulto la pregunta en meta que indicas, a ver si puedo generar unos snippets que funcionen, eliminando las imágenes. Muchas gracias.
    – Trauma
    Commented el 1 may. 2017 a las 5:04

1 respuesta 1

3

En realidad, es fácil, una vez que le cogemos el tranquillo al asunto.

Primero, mi error:

$init: function( cfg ) {
  ...
  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 },
        ]
      },
      {
      ...
  };
  ...
}

Ahí, en la función $init de inicialización del componente, creo una nueva variable config, en lugar de usar la que recibo como argumento.

Cuando webix lee mi objeto de descripción, en las llamadas a webix.ui( ... ), crea un objeto config con unos datos que ella misma necesita para su funcionamiento interno.

Ese objeto lo recibimos como argumento en nuestra función $init( ). Ahí, podemos modificarlo lo que queramos, siempre y cuando que respetemos unos atributos desconocidos para nosotros. Dicho objeto de configuración es reenviado a los distintos módulos de los que heredamos; aquellos que incluimos en nuestra llamada a webix.protoUI( ... ). En el caso expuesto, dichos módulos son webix.ui.layout y webix.IdSpace.

La solución consiste en modificar tan solo aquellos datos que sean usados por los módulos de los que heredamos. Para ello, no tenemos mas que consultar las distintas APIs, y fijarnos en la sección Properties.

Para mi componente pinkeyboard, establezco unos argumentos como si mi componente fuera, en realidad, un webix.ui.layout.

Al terminar la ejecución de mi función $init, el argumento config que recibimos es reutilizado por la llamada (oculta para nosotros, webix se encarga de ella internamente) a los módulos padres de nuestro componente.

El resultado final es el siguiente:

webix.protoUI( {
  name: 'pinkeyboard',
  defaults: { },
  //$formElement: true,
  $init: function( config ) {
var s,
    h,
    w,
    tmp;

s = config.space || 10;
h = config.height || 50;
w = config.width || 50;

webix.extend( 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.ui( {
  rows: [
{ },
{ cols: [
    { },
    { view: 'pinkeyboard' },
    { }
  ]
},
{ }
  ]
} );
<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>

Como se observa, una matriz de 3 * 3 botones, usando mi componente personalizado pinkeyboard.

Estos pasos son comunes para cualquier componente personalizado que necesitemos crear. Podemos cambiar algunos atributos por defecto, o crear un componente nuevo mediante la agregación de varios, o, por ejemplo, crear una barra de herramientas con un conjunto de componentes internos listos para usar.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.