Quantcast
Channel: Lógica mente Velneo V7 » Vitaminas
Viewing all articles
Browse latest Browse all 10

Organiza los subformularios con un listbox

$
0
0

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 interfaz 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. De la misma forma podemos marcar como seleccionado el elemento del listbox que se corresponda con el formulario en curso de la pila, es decir que se garantiza la sincronización en ambas direcciones.

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

/**
 * Devuelve el icono de un formulario
 *
 * @param {VObjectInfo} formulario Objeto de la clase VObjectInfo del formulario
 * @return {VImage} icono Objeto de la clase VImage con el icono del formulario
 */
var iconoFormulario = function (formulario)
{
	if (formulario)
	{
		importClass("VImage");
		var icono = new VImage();
		var iconoIdRef = formulario.propertyData(6).replace("@", "/");
		icono.loadResource(iconoIdRef);
		return icono;
	};
};

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

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

// -------------------------------------------------------------------
// Leer los subformularios  y dar de alta los registros en el listbox
// -------------------------------------------------------------------

// Limpiamos el listbox antes de cargarlo
controlListBox.clear();

var numFormularios = controlPila.count;
for (var numFormulario = 0; numFormulario < numFormularios; numFormulario++)
{
	var formulario = controlPila.form(numFormulario);
	var nombre = formulario.objectInfo().name();
	var icono = iconoFormulario(formulario.objectInfo());
	controlListBox.addItem(icono, nombre, numFormulario);
};

// Marcamos el primer elemento como seleccionado
controlListBox.currentRow = controlPila.currentIndex;

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.

La última línea del script se encarga de dejar seleccionada la líneas del listbox que se corresponde con el formulario abierto, esto es necesario tanto para la carga inicial como sobre todo si cargamos el listbox en el OnShow, ya que la primera vez estará cargado el primer formulario de la pila, pero si salimos de la pestaña y luego regresamos el formulario que veremos será el último seleccionado, y como en ese punto recargados el listbox es necesario volver a posicionarlo. Si no queremos que se cargue en el OnShow podemos hacerlo en la conexión de evento Post-inicializado, perdiendo dinamismo y ganando tiempos de ejecución ya que se solo se carga la primera vez.

Otro punto a tener en cuenta en el script es que añade al listbox el icono que se corresponda con la propiedad icono declarada en cada uno de los formularios añadidos a la pila. Para que el listbox quede homogéneo o bien le ponemos icono a todos los formularios o a ninguno.

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.

Si quieres ver como crear una interfaz similar pero con un control combobox consulta la VITAMINA – 14 – Organiza los subformularios con un combobox.

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


Viewing all articles
Browse latest Browse all 10

Latest Images

Pangarap Quotes

Pangarap Quotes

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Trending Articles


Ang Nobela sa “From Darna to ZsaZsa Zaturnnah: Desire and Fantasy, Essays on...


Lola Bunny para colorear


Dino Rey para colorear


Girasoles para colorear


Dibujos de animales para imprimir


Renos para colorear


Dromedario para colorear


Love Quotes Tagalog


Mga Patama Quotes at Pamatay Banat Quotes


RE: Mutton Pies (mely)


Gwapo Quotes : Babaero Quotes


Kung Fu Panda para colorear


Libros para colorear


Mandalas de flores para colorear


Dibujos para colorear de perros


Toro para colorear


mayabang Quotes, Torpe Quotes, tanga Quotes


Long Distance Relationship Tagalog Love Quotes


Love Quotes Tagalog


Mga Tala sa “Unang Siglo ng Nobela sa Filipinas” (2009) ni Virgilio S. Almario





Latest Images

Pangarap Quotes

Pangarap Quotes

Vimeo 10.7.0 by Vimeo.com, Inc.

Vimeo 10.7.0 by Vimeo.com, Inc.

HANGAD

HANGAD

MAKAKAALAM

MAKAKAALAM

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC