Ignite UI Dock Manager: Para diseños web y una mejor usabilidad
Vea lo fácil que es crear aplicaciones multiventana y multipantalla en cualquier marco con Infragistics nuevo Dock Manager en Angular, Blazor, React y Web Components. ¡Pruébalo ahora!
Radoslav Mirchev
9min de lectura
En Infragistics, sabemos que los procesos y necesidades de desarrollo están en constante evolución. Para mantenerse al día con las expectativas del mercado y de los clientes, debe mejorar la usabilidad, al tiempo que agrega nuevas características y funcionalidades.
Es por eso que nunca dejamos de mejorar nuestro kit de herramientas Ignite UI, aportando nuevos componentes y más funcionalidades. Y justo ahora nos complace anunciar la nueva versión de Ignite UI componente Dock Manager. Esta nueva y potente herramienta facilita la creación de aplicaciones web multiventana y multipantalla en cualquier marco.
Pero más sobre esto en un momento.
¿Qué es un Dock Manager?
El Dock Manager es un componente web estándar y fácil de usar para crear diseños complejos, dividiendo la vista en otros más pequeños. Esto se puede hacer de forma recursiva para crear diseños arbitrarios que se pueden manipular y ajustar en tiempo de ejecución. Puede administrar el diseño y la posición de varias ventanas, paneles y otros elementos de la interfaz de usuario de forma flexible, acoplándolos a diferentes ubicaciones dentro de una aplicación.
Para los usuarios finales, el Dock Manager significa tener la capacidad de personalizar aún más el diseño creado a través de funciones como anclar, cambiar el tamaño, mover, flotar y ocultar paneles.
¿Cuáles son las ventajas de utilizar un gestor de muelles?
En general, el uso de Dock Manager le ahorra tiempo y esfuerzo a la hora de crear una interfaz de usuario dinámica y compleja, lo que garantiza una mejor experiencia de usuario para los usuarios finales de su aplicación web. Estos son algunos de los beneficios:
Multiplataforma: Una de las mejores cosas es el soporte de múltiples plataformas para escritorio y dispositivos móviles. Luego, está su compatibilidad con los navegadores web modernos, lo que significa que puede usar el componente Dock Manager para desarrollar soluciones de software de diseño receptivo para cualquier plataforma que desee.
Arrastrar y soltar incorporado: Si desea reordenar las pestañas de un panel de un destino a otro, puede hacerlo rápidamente con la funcionalidad de arrastrar y soltar que proporciona el componente.
Integración sin fisuras: Independientemente de si desarrollas aplicaciones en Angular, Blazor, Web Components u otros marcos, Dock Manager siempre se basa en la arquitectura de marco dada para integrar elementos de interfaz de usuario acoplables dentro de la lógica y los datos de la aplicación.
Flexibilidad y ajustes personalizados: Administrar diseños, personalizar todos los botones usando ranuras y partes, acoplar cosas como paneles y ventanas en diferentes posiciones, cambiar el comportamiento de los elementos de la interfaz de usuario para que coincida con los requisitos de la aplicación, todo esto es bastante sencillo.
Mejor experiencia de usuario: Al proporcionar la capacidad a los usuarios finales de manipular, reorganizar y cambiar el tamaño de los elementos de la interfaz de usuario disponibles, el componente Dock Manager mejora la experiencia general con la aplicación.
¿Qué hace diferente a Ignite UI Dock Manager?
Uno de los mayores diferenciadores es que Ignite UI componente Dock Manager es un componente web puro y sin dependencias que está disponible para Angular, Blazor, React y Web Components. Le permite no solo crear una experiencia de escritorio, similar a la de Visual Studio, sino que también le ayuda a crear mejores aplicaciones web para cualquier sector y negocio.
Por ejemplo, las empresas financieras manejan una gran cantidad de datos y, a menudo, requieren paneles complejos para mostrar y comprender estos datos. La pregunta aquí es, ¿cómo pueden beneficiarse las empresas financieras del uso de Ignite UI Dock Manager? Con él, pueden hacer varias cosas:
- Cree paneles personalizables que sean fáciles de organizar y cambiar de tamaño teniendo en cuenta los propósitos de la empresa y las necesidades de los usuarios individuales.
- Cambie de manera eficiente el tamaño de los elementos de la interfaz de usuario en la pantalla para maximizar el volumen de datos financieros que se visualizan a la vez.
- Muestre rápidamente información súper accesible que se adapte a los usuarios finales.
- Proporciona una experiencia de usuario coherente en todos los dispositivos gracias a la compatibilidad multiplataforma de Ignite UI Dock Manager.
Para ilustrar mejor esto, compartiré un problema de la vida real que encontramos durante nuestras reuniones de diseño de la "Herramienta de análisis de datos". Para utilizar la herramienta de análisis de datos, primero hay que seleccionar los datos, elegir un gráfico adecuado, seleccionarlo y luego, ahí está, la primera serpiente en la hierba, se está en una aplicación de navegador, no en una de escritorio.
Pero, ¿dónde visualizas este gráfico? Es un diálogo estático que no se puede mover. Oculta su vista de cuadrícula y usted está atrapado allí. Si necesita desplazarse para buscar otra cosa, debe cerrar el cuadro de diálogo del gráfico, verificar lo que necesita y comenzar desde cero. Es tan torpe como suena. Solo está limitado por el navegador. Aquí es donde Dock Manager se vuelve invaluable. Con él, puede crear fácilmente un diseño multipantalla, sin sacrificar la usabilidad y limitar al usuario final.
A continuación, se muestra un ejemplo sencillo de Dock Manager y una comparación visual:
Herramienta de análisis de datos sin Dock Manager:
Herramienta de análisis de datos con Dock Manager:
Supongo que es por eso que muchas personas, incluidos los desarrolladores profesionales, sienten nostalgia por las aplicaciones de escritorio. Hoy en día no es raro ver diez o más pestañas abiertas en una ventana del navegador. Si necesita utilizar datos de n número de páginas, entonces necesita n número de ventanas. Esa libertad para reorganizar tu diseño según lo necesites es la razón por la que el componente Dock Manager es importante. No se trata de restar importancia a las aplicaciones de una sola página (SPA), sino de compartir otro punto de vista.
Así que, ahora que sabemos qué es y por qué es importante, vamos a echar un vistazo a las partes y características básicas del Ignite UI Dock Manager:
¿Cómo usar Ignite UI Dock Manager?
Puede incluir el componente web Ignite UI Dock Manager en el proyecto como una dependencia mediante el paquete NPM. Para instalar el paquete Dock Manager, ejecute el siguiente comando:
npm install --save igniteui-dockmanager
Luego es necesario importar y llamar a la función defineCustomElements():
import { defineCustomElements } from 'igniteui-dockmanager/loader';
defineCustomElements();
TS
Una vez importado el Dock Manager, puedes agregarlo en la página:
<igc-dockmanager id="dockManager"> </igc-dockmanager>
Hemos agregado pasos rápidos e información adicional en nuestro repositorio de GitHub Ignite UI Dock Manager.
Algunas cosas importantes que debe saber sobre los principales bloques de construcción en el Dock Manager es que se llaman paneles.
Uso de paneles en Dock Manager
Los principales bloques de construcción en el Dock Manager son los paneles:
El panel de contenido representa un panel con encabezado y contenido. Se puede alojar dentro de un panel dividido o un panel de grupo de pestañas.
El panel dividido es un panel contenedor que apila todos sus paneles secundarios horizontal o verticalmente en función de su propiedad de orientación.
El panel de grupo de pestañas muestra sus paneles de contenido secundarios como las pestañas de un componente de pestañas.
El panel flotante es un panel dividido que se representa por encima de todos los demás en una ventana flotante.
El host de documentos es un área de pestañas para documentos, similar a la de Visual Studio para la edición de código y la vista de diseño.
Aquí hay otra demostración de Dock Manager que creamos usando Ignite UI:
Personalización de temas en Ignite UI para el componente Dock Manager
Dock Manager viene con temas incorporados de tema claro y oscuro. El uso de temas listos para usar puede ser útil, pero no es suficiente para dar forma a la apariencia que necesita para su aplicación, por lo que le brindamos más opciones para personalizar el Dock Manager de Ignite UI mediante el uso de variables CSS y partes CSS.
En primer lugar, proporcione sus propios iconos, utilizando las ranuras closeButton, maximizeButton, minimizeButton, pinButton y unpinButton.
Después de eso, usa las partes expuestas en la hoja de estilo. De esta manera, tiene control total del estilo del componente.
Aquí tienes. Ahora tiene un DockManager con iconos personalizados y área de pestañas.
Si quieres puedes probarlo con este ejemplo de stackblitz en vivo.
Customizing Layouts
Los usuarios finales pueden realizar las siguientes acciones para personalizar el diseño en tiempo de ejecución:
- Pin a pane
Puede guardar todo el contenido y los paneles de pestañas que no necesita en este momento en una bandeja desanclándolos. Cuando los necesite en su última posición acoplada, simplemente fíjelos.
- Cambiar el tamaño de un panel
- Cerrar un panel
- Float a pane
Puede crear un panel flotante arrastrando el encabezado de cualquier panel. El panel flotante es un panel dividido que se representa por encima de todos los demás en una ventana flotante. Se mueve por encima de todos los demás paneles y no está limitado por la ventana del Administrador de Dock. Se puede cambiar de tamaño y acoplar o alojar dentro de un panel dividido o un grupo de pestañas.
- Navegador de panel
Indicación visual (joystick) sobre las posiciones disponibles para acoplar o alojar el panel que es contextual al panel sobre el que se encuentra actualmente el cursor. Puedes:
- Acople un panel a la izquierda, a la derecha, a la parte superior o inferior a cualquier nivel de anidamiento, incluido el global/raíz.
- Acople un panel de registro en tiempo real en la parte inferior de la ventana.
- Acoplar un panel con comandos y operaciones en la parte superior de mi ventana como la cinta de MS Office.
- Acoplar un panel como una pestaña de otra vista sin dividir el área de contenido.
- Abra la bandeja y arrastre un elemento a un panel de destino y acójelo a una posición determinada.
Crear diseños personalizados y complejos puede ser complicado y extremadamente molesto si necesitas recrearlos constantemente. Es por eso que hemos incluido una opción para guardar y cargar diseños. Ahora puede personalizar su diseño, específicamente para satisfacer sus necesidades actuales, y guardarlo como predeterminado, lo que reduce las iteraciones y le ahorra tiempo.
Si quieres probarlo tú mismo, solo necesitas un proyecto Angular, por ejemplo, y puedes seguir las instrucciones aquí.
Al final, Dock Manager proporciona a los desarrolladores web la capacidad de mejorar la usabilidad de aplicaciones web complejas, ofreciendo una experiencia completa de ventanas en la web. Lo hace de forma rápida y sencilla, lo que le permite ser un héroe y satisfacer las necesidades de sus usuarios en el tiempo que se tarda en obtener su próxima bebida con cafeína.