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

Organiza los subformularios con un combobox

0
0

VITAMINA – 14

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 combobox. De esta forma el usuario tendrá la posibilidad de acceder directamente a cada una de ellas e incluso las opciones podrán tener textos largos más descriptivos, además del correspondiente icono.

Formulario en  ejecución con interfaz de subformularios sincronizados con combobox

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 en la parte superior será el combobox (MEN_CFG) que contendrá las lista de opciones (subformularios), debajo 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 combobox y la pila de formularios sincronizada

Combobox 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 combobox 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 combobox 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 combobox y el de los subformularios en la pila es el mismo, por lo que cuando el usuario selecciona un elemento del combobox, 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 combobox 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 combobox 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 combobox
Manejador onShow sincornización combbox y pila de formularios

Manejador de evento CAR_COM_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 combobox
// ------------------------------

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

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

// Limpiamos el combobox antes de cargarlo
controlComboBox.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());
	controlComboBox.addItem(icono, nombre, numFormulario);
};

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

Es muy importante cargar los elementos del combobox 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 combobox que se corresponde con el formulario abierto, esto es necesario tanto para la carga inicial como sobre todo si cargamos el combobox 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 combobox 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 combobox el icono que se corresponda con la propiedad icono declarada en cada uno de los formularios añadidos a la pila. Para que el combobox 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 combobox
Manejador de cambio de elemento seleccionado en el combobox

Manejador de evento CAR_FRM_SEL

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

A diferencia de lo que hacíamos en la vitamina 13 con el listbox aquí no hemos incluido en la última línea el código para establecer el foco en el formulario de la pila, ya que esto facilita la navegación por el combobox a través de flechas o escribiendo las primeras letras de la opción que queremos disparar.

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 combobox (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 listbox consulta la VITAMINA – 13 Organiza los subformularios con un listbox.

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


Viewing all articles
Browse latest Browse all 10

Latest Images

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

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.2 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:





Latest Images

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

Doodle Jump 3.11.30 by Lima Sky LLC

Doodle Jump 3.11.30 by Lima Sky LLC

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.1 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Vimeo 10.6.0 by Vimeo.com, Inc.

Re:

Re:

Re:

Re: