Soy un desarrollador front-end principiante. Ahora estoy estudiando y entrenando en una empresa de TI de Minsk. Aprender los conceptos básicos de web-ui se lleva a cabo con la biblioteca
Webix JS como
ejemplo y quiero compartir mi modesta experiencia y guardarla como un pequeño tutorial para esta interesante biblioteca de interfaz de usuario.
Segunda tarea
En la última
asignación, creé una página usando la biblioteca Webix. Y ahora necesito establecer la siguiente lógica para la interacción del usuario con el formulario:
El widget principal con el que trabajará el artículo es el
formulario . Además, se puede leer en la
documentación .
Puede descargar el
enlace de origen.
La aplicación de demostración resultante se puede encontrar
aquí .
Paso 1. Agregar nuevos datos a la tabla.
Para la conveniencia de leer el código y dividir el proyecto en bloques lógicos, crearé un archivo functions.js e indicaré la ruta en el archivo index.html. En él, estableceré las funciones responsables del comportamiento de la aplicación.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
En el nuevo archivo, creo la función
addItem , que agrega nuevos datos a la tabla:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
Para acceder a un elemento en la biblioteca de Webix, use
el método $$ , en el cual se pasa la identificación del elemento. En el código anterior, se accede al formulario utilizando la construcción
$$("film_form") .
La función addItem funciona así: obtengo los datos actuales del formulario a través de su método getValues y los escribo en la variable item_data . Usando estos datos, creo un nuevo registro en la hoja usando el método add .
Para llamar a esta función haciendo clic en el
"button" del widget con el valor
"Add new" configuro la propiedad de
clic .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
Como resultado, los datos del formulario deben agregarse a la tabla:
Paso 2. Validación del formulario. Mensaje emergente
Antes de agregar nuevos datos, la información de los campos de entrada debe ser verificada (validada). La validación se activa
mediante el método validate () , al que llamaré dentro de la función
addItem inmediatamente antes de trabajar con los datos. También pondré aquí el código para un mensaje emergente sobre una validación exitosa.
La función
webix.message () crea un mensaje simple en Webix, que toma el texto del mensaje como parámetro. Aparecerá un mensaje en la esquina superior derecha.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
La función funciona así. Dentro de la condición If , accedemos al formulario y llamamos al método validate () . Si la prueba es exitosa, el método devuelve verdadero y el código se ejecuta más. Después de agregar datos a la tabla, se llama a una función con el mensaje: "Validation is successful!" .
Mensaje emergente:
Ahora necesito crear un objeto de
reglas en
el widget de
formulario . Es necesario que la función
validate () verifique la información de todos los campos del formulario para cumplir con los criterios especificados.
Las condiciones para una validación exitosa serán las siguientes:
- El campo de título no debe estar vacío;
- El año de campo no debe ser inferior a 1970 y superior al año actual;
- el campo de Calificación no debe ser cero;
- El campo de votos debe ser mayor que 1 y menor que 1,000,000.
Entonces, el código fuente del widget de
formulario con reglas de validación será así:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
Las propiedades del objeto de reglas deben coincidir con los valores del
name: "…" propiedad
name: "…" de los elementos del formulario. Las
reglas predefinidas webix.rules.isNotEmpty y webix.rules.isNumber se establecen en las propiedades de título, calificación y votos, en el año hay una función que define
las reglas del usuario .
Las reglas deben devolver verdadero en caso de éxito y falso en caso de error. El formulario pasará la validación cuando todas las propiedades del objeto de reglas devuelvan verdadero. De lo contrario, los campos que fallen la validación se resaltarán en rojo.
Resultado de la prueba:
Paso 3. Mensaje de error
Las reglas están establecidas, ahora necesito un mecanismo para mostrar un mensaje de error para notificar al usuario que los datos ingresados no cumplen con los criterios especificados. Para hacer esto, puede resaltar el campo en rojo y agregar un mensaje de error.
Los campos pueden tener establecida la propiedad
invalidMessage ; su valor es el texto con el mensaje de error. Este mensaje aparecerá debajo del campo si falla la validación.
Código:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
Resultado:
Paso 4. Limpieza del formulario
Para borrar el formulario, debe crear una función que se llama con el botón
"Clear" . También es responsable de la salida de un mensaje de advertencia y, en el caso de una respuesta positiva, borrará los datos ingresados y restablecerá la indicación de error.
Mensaje de advertencia:
Llamaré a la función
clearForm y escribiré el siguiente código:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
El método de devolución de llamada
webback.confirm ({...}) se utiliza para la ventana de confirmación, que acepta un objeto con las siguientes propiedades:
texto y
título . Como el método devuelve la promesa, puedo usar el controlador
.then . Si la respuesta es sí, en el controlador .then invocaré dos métodos: clear () - para borrar los campos del formulario y clearValidation (), que elimina las etiquetas de error de validación.
La acción final es vincular la llamada de función al botón
"Clear" .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
El código y la demostración se pueden ver aquí:
snippet.webix.com/17w1dodb .
Generalización
Desde el origen quedó claro que el código del artículo anterior es bastante simple, pero con el desarrollo del proyecto se está volviendo cada vez más complicado y su número está aumentando. Para no perderse en la infinidad de líneas de código, es importante mantener la facilidad de lectura y la simplicidad en la estructura. Un ejemplo de interacción con un formulario describe solo métodos básicos, pero también queda claro a partir de ellos que para dar dinámica a la página, webix ofrece un código pequeño, legible e intuitivo. En comparación con JavaScript puro, su volumen, en el mejor de los casos, duplicaría su tamaño.