Splitter
El componente Splitter, diseñado para dividir y redimensionar contenido dentro de tu aplicación, encapsula dos componentes redimensionables: el componente maestro y el componente detalle. Un divisor separa estos componentes, permitiendo a los usuarios ajustar dinámicamente el tamaño de cada componente según sus preferencias.
Creando un splitter
Crea un Splitter pasando dos componentes a su constructor. El primero se convierte en el panel maestro y el segundo en el panel detalle.
Mostrar Código
- Java
Tamaño mínimo y máximo
El componente Splitter proporciona métodos para establecer tamaños mínimos y máximos para sus paneles, permitiéndote controlar el comportamiento de redimensionamiento de los componentes dentro del Splitter. Cuando los usuarios intentan redimensionar paneles más allá de los tamaños mínimos o máximos especificados, el componente splitter hace cumplir estas restricciones, asegurando que los paneles permanezcan dentro de los límites definidos.
Estableciendo tamaños
El método setMasterMinSize(String masterMinSize) especifica el tamaño mínimo para el panel maestro del splitter. Asimismo, el método setMasterMaxSize(String masterMaxSize) especifica el tamaño máximo para el panel maestro.
Puedes especificar tamaños usando cualquier unidad CSS válida, como se muestra a continuación:
Mostrar Código
- Java
Orientación
Puedes configurar la orientación en el componente Splitter, lo que te permite crear diseños adaptados a requisitos de diseño específicos. Al especificar la orientación, el componente organiza los paneles horizontal o verticalmente, proporcionando versatilidad en el diseño del layout.
Para configurar la orientación, utiliza el enumerador de orientaciones soportadas para especificar si el Splitter debe renderizarse horizontal o verticalmente:
Mostrar Código
- Java
Posición relativa
Para establecer la posición inicial de la barra divisoria en el componente Splitter, utiliza setPositionRelative. Este método toma un valor numérico de 0 a 100 que representa el porcentaje del espacio dado en el Splitter, y muestra el divisor en el porcentaje dado del ancho total:
Mostrar Código
- Java
Anidamiento
El anidamiento de splitters permite crear diseños complejos con niveles de paneles redimensionables. Esto habilita la creación de interfaces de usuario sofisticadas con control granular sobre la disposición y el redimensionamiento del contenido.
Para anidar componentes Splitter, instancia nuevas instancias de Splitter y agrégalas como hijos de componentes Splitter existentes. Esta estructura jerárquica permite la creación de diseños de múltiples niveles con capacidades de redimensionamiento flexible. El siguiente programa demuestra esto:
Mostrar Código
- Java
Auto guardar
El componente Splitter incluye una opción de AutoGuardar, que guarda el estado de los tamaños de los paneles en el almacenamiento local para mantener las dimensiones consistentes entre recargas.
Cuando configuras la opción de auto-guardar, el componente Splitter almacena automáticamente el estado de los tamaños de los paneles en el almacenamiento local del navegador web. Esto asegura que los tamaños que los usuarios eligen para los paneles persistan a través de recargas de página o sesiones de navegador, reduciendo la necesidad de ajustes manuales.
Limpiando el estado
Para revertir programáticamente el Splitter a la configuración y dimensiones por defecto, llama al método cleanState() para eliminar cualquier dato de estado guardado relacionado con el componente Splitter del almacenamiento local del navegador web.
Mostrar Código
- Java
En la demostración anterior, cada instancia de Splitter activa la característica de AutoGuardar llamando al método setAutosave. Esto asegura que los tamaños de los paneles se guarden automáticamente en el almacenamiento local. Así, al recargar el navegador, los tamaños de estos splitters permanecen igual.
Hacer clic en el botón "Limpiar Estado" llama al método cleanState() y actualiza la ventana del navegador para mostrar las dimensiones originales.
Estilo
Mejores prácticas
Para asegurar una experiencia de usuario óptima al utilizar el componente Splitter, considera las siguientes mejores prácticas:
-
Ajustar según el contenido: Al decidir sobre la orientación y los tamaños iniciales de los paneles, considera la prioridad del contenido. Por ejemplo, en un diseño con una barra lateral de navegación y un área de contenido principal, la barra lateral debería permanecer típicamente más estrecha con un tamaño mínimo establecido para una navegación clara.
-
Anidamiento estratégico: Anidar splitters puede crear diseños versátiles, pero puede complicar la interfaz de usuario y afectar el rendimiento. Planifica tus diseños anidados para asegurar que sean intuitivos y mejoren la experiencia del usuario.
-
Recordar las preferencias del usuario: Utiliza la función de AutoGuardar para recordar los ajustes de los usuarios entre sesiones, mejorando la experiencia del usuario. Proporciona una opción para permitir a los usuarios restablecer a la configuración por defecto.