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.
Tercera tarea
Continúo desarrollando la funcionalidad de la aplicación creada usando la biblioteca Webix. En artículos anteriores, descubrí cómo
crear una interfaz de aplicación y cómo
interactuar con el formulario . En este artículo, considero las siguientes tareas:
El funcionamiento de los widgets Lista y
Diseño se ha descrito en artículos anteriores.
Puede descargar el
enlace de origen.
La aplicación terminada se puede encontrar
aquí .
Paso 1. Dividiendo el proyecto en módulos
Para evitar confusiones en el código, es más confiable dividir el proyecto en módulos. Para hacer esto, crearé los siguientes archivos y transferiré el código del widget a ellos:
- header.js: widget de la barra de herramientas ;
- aside.js: widget de lista ;
- table.js - tabla de datos del widget;
- form.js - widget de formulario;
- footer.js: un elemento con el texto: "El software es ...".
En los archivos nuevos, la descripción de las configuraciones de widgets se produce en una variable ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
Los archivos creados se incluyen en el archivo index.html en el siguiente orden:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Los módulos resultantes se combinan en un archivo script.js, que ahora contiene un código de inicialización de aplicación simple y conciso.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Paso 2. Pestañas y cambiar entre ellas
En casos donde no hay suficiente espacio libre en la página, o si necesita separar temáticamente el contenido de la aplicación, es lógico usar pestañas.
El cambio entre pestañas se realiza mediante el componente
Multiview . Este componente le permite crear la cantidad necesaria de pestañas en la aplicación y muestra solo una en un momento determinado.
Crearemos una vista múltiple en el archivo aside.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
La matriz de celdas contiene el código para las pestañas. Cada pestaña debe agregarse con una identificación para poder acceder a ella y mostrarla. Ahora Multiview contiene tres pestañas, la primera de las cuales se mueve, creada antes de eso, la tabla y el formulario.
En el archivo script.js, reemplazo los widgets Table y Form con el módulo Multi.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
El widget
Lista muestra el papel del cambio entre pestañas. Necesito abrir la pestaña correspondiente haciendo clic en sus elementos.
Para mayor comodidad, estableceré los elementos del widget
Lista en la misma identificación que las pestañas de vista múltiple.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
Cuando hace clic en un elemento del widget
Lista ,
se activa
onAfterSelect , dentro del controlador del cual obtenemos la identificación del elemento seleccionado y mostramos la pestaña del mismo nombre, accediendo por identificación; ellos, como recordarán, son los mismos.
Un ejemplo:
Importante!
Se realizarán más acciones de datos con el servidor local en ejecución.
Paso 3. Pestaña "Panel": configuración de la tabla
Hasta este punto, el proyecto utilizaba una tabla cuyos campos se generaban automáticamente. En el caso de que desee eliminar una columna o agregar una nueva, se utiliza la configuración de la tabla. Para hacer esto, en el widget
Datatable , la propiedad
autoConfig : true debe reemplazarse con la matriz de
columnas con la configuración de cada columna.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- El valor de la propiedad id indica el campo del elemento de datos que se mostrará en esta columna;
- la propiedad del encabezado en el elemento es el encabezado de la columna;
- todas las columnas están configuradas en un ancho fijo, pero la segunda utiliza la propiedad de espacio de relleno, que permite que la columna del título ocupe todo el espacio libre.
La configuración personalizada de CSS se utiliza en la tabla: el desplazamiento se establece para las líneas y el fondo se cambia en la primera columna. Todas las configuraciones están predefinidas en el archivo style.css y solo necesita insertar el nombre de la clase.
Además, necesito más datos para la tabla, por lo que los cargaré desde data / data.js señalándolos con la propiedad
url .
Resultado:
Paso 4. Pestaña "Usuarios": dibujar una lista y un diagrama
En la segunda pestaña, crearé una lista y un diagrama. Para hacer esto, en el segundo elemento Multiview indicaré el nombre del módulo: "usuarios".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Para los widgets, crearé un nuevo archivo
users_module.js .
Lista Una lista se entiende como un widget de
Lista ; anteriormente se usaba al crear el menú. Las líneas de la lista deben constar de nombres de usuario y nombres de países.
Listar código de widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
La matriz de filas se usa para dividir el espacio de trabajo en dos partes. La segunda parte se usará para el gráfico.
En la propiedad de plantilla, entre los signos #, se especifica un campo cuyo valor se toma del elemento de datos que se carga desde el archivo users.js.
Resultado:
Gráfico La biblioteca admite tipos de
gráficos comunes: línea, círculo, radar, donut, columna, etc. Todos ellos son creados por el widget de
gráfico . La forma en que se verá el gráfico define la propiedad de
tipo .
Reemplazaré la
template:”Chart” configuración de
template:”Chart” con el código del widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
type: "bar" configuración type: "bar" establece el tipo de barra del gráfico;- el nombre del campo se pasa al valor y se indica necesariamente en `# ... #`. Esta es una característica del widget Gráfico;
- la configuración de xAxis determina qué información se mostrará debajo del gráfico a lo largo del eje X;
- la plantilla indica que debajo de las líneas del gráfico habrá dígitos de edad;
- El título contiene el nombre del gráfico:
"Age" .
El resultado de dibujar la lista y el gráfico:
Paso 5. Pestaña "Productos" - tabla de árbol
Para inicializar este componente, crearé el archivo
products_module.js , y en el tercer elemento del widget Multiview indicaré el nombre del módulo "productos".
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Para construir una tabla de árbol, use el widget
Treetable . Una de las columnas del widget debe contener la plantilla requerida:
{common.treetable ()} ; de lo contrario, obtendremos una tabla estándar en lugar de una
vista de árbol. La plantilla le permite dibujar inmediatamente elementos característicos:
- icono activo para contraer / expandir registros anidados;
- iconos de archivo / carpeta;
- sangría dependiendo del nivel de entradas.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
El componente de tabla de árbol se rellena con datos jerárquicos, que obtendré del archivo products.js.
Resultado:
La aplicación resultante se puede encontrar
aquí .
Generalización
Paso a paso, la aplicación se complementa con nuevas características. Una etapa importante fue la separación del código en módulos. La separación ayudó a evitar la confusión en el código y ayudó a organizar una interfaz de varias páginas. Fue interesante aprender nuevos widgets de Webix en forma de diagramas y listas de tablas libremente editables. Todo también fue simple, todo también es armonioso.