Exprimir la caja de grupo con CSS y JavaScript en Velneo

En esta vitamina verás que el control caja de grupo tiene más posibilidades de las que podemos utilizar de forma directa en el control, aprende a exprimir la caja de grupo con CSS y JavaScript en Velneo y sacarle todo el partido disponible.

Sin personalizar

El control caja de grupo es un control que nos ayuda a reorganizar la información ubicada en un formulario. vDevelop a través del árbol de propiedades del control nos da acceso a un número limitado de propiedades que nos permite crear controles con este aspecto:

En esta píldora vamos como de forma sencilla podemos personalizar el estilo visual de las cajas de grupo así como aprovechar su funcionalidad como contenedor de controles.

Personalizando el estilo con CSS

Con este sencillo script CSS vamos a conseguir aplicar a nuestros controles caja de grupo una fuente, tamaño y color específicos, pero además las CSS en Velneo permiten aplicar propiedades de los controles y objetos directamente desde la CSS, por eso vemos como cambiamos la alineación del control y lo convertimos en una línea en lugar de una caja, lo que nos permite ahorrar espacio en la interfaz de nuestro formulario.

VGroupBox
{
    font-family: 'Avenir LT Com 55 Roman';
    font-size: 16px;
    color: black;
    background-color: transparent;
    qproperty-alignment: AlignCenter;
    qproperty-flat: 1;
}

Esta CSS puede aplicarse a nivel del marco general de la aplicación AUTOEXEC con lo que esta configuración se aplicaría a todas las cajas de grupos de todos los formularios de la aplicación o, directamente al inicializarse este formulario: señales pre y pos inicializado. En cualquier caso el resultado de aplicar este script CSS es el siguiente:

Podemos observar como ambos controles tienen ahora el texto centrado y se pinta como una línea y no como una caja. Es muy importante darse cuenta de que las CSS permiten aplicar propiedades de controles, igual que lo podemos hacer desde JavaScript, utilizando el prefijo qproperty-.

Personalizando el estilo con CSS a nivel de control

Si lo que deseamos hacer es que de forma general las cajas de grupos salgan con el texto centrado pero con estilo de caja y sólo para algunos controles específicos aplicar el estilo línea.

Podemos hacerlo aplicando CSS generales, por ejemplo a nivel del marco AUTOEXEC aplicaríamos este CSS:

VGroupBox
{
    font-family: 'Avenir LT Com 55 Roman';
    font-size: 16px;
    color: black;
    background-color: transparent;
    qproperty-alignment: AlignCenter;
    qproperty-flat: 0;
}

Y a nivel de formulario aplicaríamos esta CSS que personaliza de forma concreta el control con el identificador CAJA_GRUPO_2 para que se pinte como una línea. Si el siguiente código lo aplicamos a nivel del marco AUTOEXEC, por ejemplo, estaríamos consiguiendo que salgan con estilo línea todas las cajas de grupo de todos los formularios que contengan este control con el identificador CAJA_GRUPO_2.

VGroupBox#CAJA_GRUPO_2
{
    qproperty-flat: 1;
}

El resultado de aplicar estas CSS sería el siguiente:

Como podemos apreciar en la imagen anterior, hemos conseguido mediante CSS que cada caja de grupo tenga un estilo diferente.

Mostrando el check oculto de las cajas de grupo

La caja de grupo todavía nos guarda un secreto realmente útil para gestionar los controles de nuestros formularios tal y como indica el nombre del control, «en grupo». Con el siguiente script CSS podemos hacer visible en nuestras cajas de grupo un check, que por defecto se muestra «marcado o activado».

VGroupBox
{
    font-family: 'Avenir LT Com 55 Roman';
    font-size: 16px;
    color: black;
    background-color: transparent;
    qproperty-alignment: AlignCenter;
    qproperty-flat: 0;
    qproperty-checkable: 1;
}

Gracias a aplicar la nueva propiedad checkable conseguimos hacer visible un check en cada caja de grupo, tal y como se muestra en la siguiente imagen:

Lo realmente interesante de estos checks es que funcionan como la propiedad activado/desactivado para la caja de grupo, que como es un contenedor de controles aplica ese estado a todos los controles que contiene. Si el usuario manualmente o de forma programada desactivamos el check conseguiremos desactivar a la vez todos los controles que contiene la caja de grupo.

Con JavaScript también podemos cambiar el estilo de la caja de grupo

Podemos utilizar código JavaScript como este que se muestra a continuación para aplicar propiedades como la alineación, el estilo flat, si es o no checkable, etc.

/* ------------------------------------------------------------
 * Control Caja de grupo 1
 * ------------------------------------------------------------ */
var controlCajaGrupo1 = theRoot.dataView().control( "CAJA_GRUPO_1" );
if ( controlCajaGrupo1 )
{
	controlCajaGrupo1.alignment = VGroupBox.AlignCenter;
	controlCajaGrupo1.checkable = true;
	controlCajaGrupo1.checked = false;
}

/* ------------------------------------------------------------
 * Control Caja de grupo 2
 * ------------------------------------------------------------ */
var controlCajaGrupo2 = theRoot.dataView().control( "CAJA_GRUPO_2" );
if ( controlCajaGrupo2 )
{
	controlCajaGrupo2.alignment = VGroupBox.AlignLeft;
	controlCajaGrupo2.checkable = true;
	controlCajaGrupo2.flat = true;
}

El resultado obtenido sería el mismo que hemos conseguido con CSS, incluso podemos combinar el script anterior con un script de CSS en el que aplicamos los estilo de fuente, tamaño y colores, dejando el resto de configuración a cargo del script de JavaScript.

VGroupBox
{
    font-family: 'Avenir LT Com 55 Roman';
    font-size: 16px;
    color: black;
    background-color: transparent;
}

Hay que tener en cuenta que también desde JavaScript podemos aplicar hojas de estilo al marco, al formulario o a cualquier control de forma específica.

Si nos fijamos en el código JavaScript anterior hemos aplicado el valor false a la propiedad checked del control CAJA_GRUPO_1. Esto significa que los controles de dicha caja de grupo saldrán por defecto desactivados, como podemos ver en la siguiente imagen.

Conclusiones

Esta claro que tanto CSS como JavaScript son dos poderosos aliados a la hora de personalizar el estilo visual de nuestras aplicaciones, y en el caso del control caja de grupo además nos permite agregarle funcionalidad para activar o desactivar todos los controles contenidos dentro de la caja.