Organiza los subformularios con un listbox

VITAMINA – 13

Planteamiento de la necesidad

Hay ocasiones en las que nos encontramos con la necesidad de incorporar en el separador de un formulario un numero elevado de subformularios, además es habitual que los textos de las pestañas no sean cortos para poder describir con precisión su contenido. En estos casos la interfaz de la aplicación plantea un problema de usabilidad al usuario final ya que dependiendo de la resolución de su pantalla es posible que no tenga a la vista de forma directa todas las pestañas por lo que le resultará más complicado acceder a una de las ocultas. Incluso debemos tener en cuenta que la organización de pestañas horizontalmente resulta más difícil de leer cuando el número de pestañas es elevado.

Formulario con muchas pestañas con la interfaz a mejorar

Objetivo a conseguir

Con el fin de mejorar la usabilidad de la aplicación para el usuario final vamos a intentar sustituir las pestañas por una lista de opciones ubicada en un control de tipo listbox. De esta forma el usuario tendrá muchas opciones a la vista, con la posibilidad de acceder directamente a cada una de ellas e incluso las opciones podrán tener textos largos más descriptivos.

Formulario en  ejecución con intefaz de subformularios sincronizados con listbox

Piezas de la solución

Para conseguir programar una solución práctica y sencilla con un código fácilmente reutilizable vamos a crear un formulario que contenga solo 2 subcontroles: El primero que estará situado a la izquierda será el listbox (MEN_CFG) que contendrá las lista de opciones (subformularios), a su derecha ubicaremos un control de tipo pila de formularios (FRM_CFG) que será el contenedor de todos los subformularios que el usuario tendrá visibles.

Formulario en edición con el control listbox y la pila de formularios sincronizada

Listbox sincronizado con la pila de formularios

La idea se basa en que solo nos tengamos que preocupar en añadir subformularios al control pila de formularios en el orden que deseemos aparezcan en el control listbox que hará de menú. A partir de ahí, al ejecutar la aplicación el código que vamos a ver a continuación se encarga de leer los subformularios de la pila y añadir al listbox los elementos correspondientes basados en los nombre de los objeto formulario incrustados en la pila.

Realmente no se necesita nada más porque el orden de elementos del listbox y el de los subformularios en la pila es el mismo, por lo que cuando el usuario selecciona un elemento del listbox, la posición de ese elemento nos sirve para conocer el índice del subformlulario que debemos activar.

Otro aspecto a tener en cuenta de esta solución es que contempla los puntos de inserción que serán totalmente funcionales, por lo que la personalización de estos controles para incluir nuevos formularios es realmente sencillo, ya que una vez incluido el subformulario a través del punto de inserción el elemento se incorpora automáticamente al listbox igual que el resto de formulario incrustados por el programador directamente en el control pila de formularios.

2 conexiones y 2 manejadores de evento para controlarlo todo

Para programar esta vitamina necesitamos crear 2 manejadores de evento y sus correspondientes conexiones de evento:

Conexión de evento OnShow formulario para carga del listbox
Manejador OnShow para cargar elementos del listbox

Manejador de evento CAR_LIS_BOX

// -----------------------------
// Cargar formularios en listbox
// -----------------------------

var controlListBox = theRoot.dataView().control("MEN_CFG");
var controlPila = theRoot.dataView().control("FRM_CFG");

// -------------------------------------------------------------
// Leer los subformularios  y añadir los registros en el listbox
// -------------------------------------------------------------
var numFormularios = controlPila.count;
for (var numFormulario = 0; numFormulario < numFormularios; numFormulario++)
{
	var formulario = controlPila.form(numFormulario);
	var nombre = formulario.objectInfo().name();
	controlListBox.addItem(nombre);
};

Es muy importante cargar los elementos del listbox en el mismo orden es que están declarados los formularios en el control, y más aún teniendo en cuenta que podemos usar puntos de inserción.

Conexión de evento ítem de cambio seleccionado en el listbox
Manejador de cambio de elemento seleccionado en el listbox

Manejador de evento CAR_FRM_SEL

// --------------------------------
// Abrir el formulario seleccionado
// ---------------------------------
var controlListBox = theRoot.dataView().control("MEN_CFG");
var controlPila = theRoot.dataView().control("FRM_CFG");
controlPila.setCurrentIndex(controlListBox.currentRow);
controlPila.form(controlPila.currentIndex).setFocus();

En la última línea de este código fijamos el foco en el formulario de la pila, por lo que una vez seleccionado el formulario el usuario ya puede comenzar a escribir en los controles del formulario sin necesidad de usar el ratón. Si no deseas esa funcionalidad puedes comentar o quitar la última línea.

Código reutilizable

Lo único que tenemos que hacer para utilizarlo en otro formulario es asegurarnos de que o bien coinciden los identificadores de los controles listbox (MEN_CFG) y pila de formularios (FRM_CFG) o cambiamos dichos identificadores en el código.

El próximo artículo será similar a este pero usando un control combobox en lugar del listbox empleado en esta vitamina.

The post Organiza los subformularios con un listbox appeared first on Lógica mente Velneo V7.