Sabías que … (5)

Nuestro “Papá Noel” Particular nos ha regalado una nueva entrega  “Sabías que“. En este post veremos curiosidades sobre funciones, contenidos iniciales, rejillas y personalización de gráficos nativos mediante CSS.

Por si te perdiste las cuatro primeras entregas del “juego”, no está de mas recordarlas:

¿Sabías que..?

Si no te fijas bien, la función getStringRegExp() te puede jugar una mala pasada

    • La función de cadena getStringRegExp(cadena, expresionRegular, posIni, caseSensitive, numSubExpresion) recibe como expresión regular una cadena.
    • En las expresiones regulares se usan metacaracteres, algunos de los cuales deben escaparse y ¿cuál es el caracter de escape?, pues precisamente el caracter \.
    • Por lo tanto, en Velneo debemos escapar los metacaracteres con doble caracter \ para que funcione correctamente la función getStringRegExp

Un ejemplo para obtener el código a la derecha de la palabra Informe:
 getStringRegExp(“Informe  233421122”, “Informe (\\d{1,}$)”, 0, 0, 1)  = 233421122

    • Cuando copiéis expresiones regulares de Internet, prestad atención a estos detalles, o padeceréis horas de desconcierto

Podemos recorrer los controles de una Caja de grupo (QGroupBox) para aplicar una determinada acción

    • El API de Velneo es una herramienta muy útil y este es un ejemplo de ello.
    • La clase QGroupBox (control caja de Grupo) dispone de 2 funciones, childWidgetAt(nIndex) y childWidget(nCount), que nos permiten recorrer todos los controles contenidos en la caja de grupo.
    • La función childWidgetAt devuelve un objeto Widget al que podremos aplicar una determinada acción.

Se puede establecer el tiempo que se muestran los caracteres en las cajas de edición que tienen la propiedad Contraseña activada

    • Debemos usar un par de propiedades CSS, lineedit-password-character y lineedit-password-mask-delay
    • La propiedad CSS lineedit-password-character determina código UNICODE elegido para ocultar la contraseña.
      Ejem:  ● 9679  * 42
    • La propiedad CSS lineedit-password-mask-delay establece el retardo en milisegundos
QLineEdit { 
   lineedit-password-character: 9679;
   lineedit-password-mask-delay: 300;
}

La columna de la rejilla puede mostrar directamente un icono

    • Si solo deseamos mostrar un icono en la columna de un rejilla no es necesario hacerlo en la parte reservada para ello.
    • Podemos hacerlo en la zona reservada para el contenido de la columna.
    • El editor de fórmulas no nos dejará insertar, por ejemplo, el campo ICONO de la tabla estática. Lo tecleamos manualmente.
      #BLOQUEADO_ICO.ICON

¿En qué plano se determinan los valores iniciales de los campos de la tabla?

    • El plano donde se ejecuta el comando Crear nueva ficha en memoria es en el que se determinan los valores iniciales.
    • Si queremos que siempre se determinen en 3P tendremos que calcular el valor inicial en el Trigger anterior al Alta.
    • En el API con el VRegister, los valores iniciales se calculan en la función setTable(), ¡¡ cuidado con esto !!.

¿Para qué sirve la función de campo getID()?

    • ¿Qué sentido tiene la función GetID() si devuelve el mismo ID que uso para llamarla?
    • Pues nos permite refactorizar los nombres de campo de una tabla cuando éstos son renombrados
      Por ejemplo:
      Hay que pasar a una función un string con los nombres de campo separados por comas.
      Si renombramos los campos AUTOR, CSS_FINAL o NOTAS, la aplicación seguirá funcionando correctamente.
Set (CLISTA_CAMPOS, "ID,NAME," + #AUTOR:getID() + "," + #CSS_FINAL:getID()  + "," + #NOTAS:getID()

Podemos usar el control Combobox en formularios sin Origen

    • El control combobox del formulario es muy cómodo de usar para el usuario si va a seleccionar de una lista corta, entre otras cosas, porque la lista se despliega directamente al pulsar con el ratón.
    • A veces tenemos un formulario sin origen y necesitamos desplegar los valores de una tabla maestra.
    • Una técnica habitual es crear una tabla temporal con todos los punteros a maestro que vayamos a usar en controles de selección
    • En el formulario sin origen añadimos una Ficha de Extensión FIEXT que se alimente por proceso, Alta, Baja y Modificación estarán a cero.
Crear nueva ficha en memoria (hMaestros, MAESTROS_TEMP@MiApp_app)
        Añadir ficha a la salida
    • Añadimos el control combobox y lo asociamos al campo puntero a maestro de la Ficha de Extensión FIEXT.
    • Ya sabemos que el valor seleccionado en el Combobox se lee mediante ##FIEXT.EMPRESA.ID.

Podemos personalizar los Gráficos nativos con CSS

    • El nuevo gráfico de Velneo es un control nativo LifeIsSoft y por lo tanto desesperadamente poco personalizable.
    • Sin embargo, teniendo en cuenta que los Títulos y Etiquetas son objetos Label de Qt, podemos usar tags HTML y código CSS.

Veamos 2 ejemplos que puedes probar en la aplicación del cloud vatp://pruebas:pruebas@c6.velneo.com:16400/0PS__MisCSS_iapp:

/* Gráfico nativo */
/* No existe selector de clase
Aunque podemos usar los tags HTML y código CSS en los Títulos y etiquetas del Gráfico
Pero limitados al subconjunto de HTML4 - http://doc.qt.io/qt-5/richtext-html-subset.html */

/* Cada etiqueta QLbel personaliza un elemento del gráfico.
Lo que hacemos es parsear el código CSS y aplicar un Atributo HTML style="font: bold 18px verdana; ...." mediante variables locales 
definidas en el Gráfico nativo que se añaden como prefijo a los Títulos y Etiquetas
*/

QLabel#GRAF_TITULO {
   font: bold 18px verdana;
   text-align: center;
   background-color: WhiteSmoke;
   color: DarkSlateGray;
   padding: 0 80 0 80;
}
QLabel#GRAF_TITULO_EJEY {
   font: bold 12px arial;
   text-align: center;
   color: DarkSlateGray;
}
QLabel#GRAF_TITULO_EJEX {
   font: bold 11px arial;
   text-align: center;
   color: DarkSlateGray;
}
QLabel#GRAF_ETIQUETAS_EJEY {
   font: bold 12px arial;
   text-align: center;
   color: DimGray;
}
QLabel#GRAF_ETIQUETAS_EJEX {
   font: bold 10px arial;
   background-color: IndianRed;
   color: Cornsilk;
   padding: 3 10 3 10;
}
QLabel#GRAF_ETIQUETAS_SERIE1 {
   font: bold 12px verdana;
   background-color: DarkGreen;
   color: HoneyDew;
   padding: 3 10 3 10;
}
QLabel#GRAF_ETIQUETAS_SERIE2 {
   font: bold 12px arial;
   color: white;
}

Las funciones CurrentDateTime() y CurrentUTCDateTime() tienen truco

    • Un día quise obtener el huso horario de vClient y como no me acordaba de la función getSysTimeZone(), hice lo siguiente:
set ( NDIF_HOR, secondsTo(currentDateTime(), currentUTCDateTime()))

Sin embargo, el resultado es cero.

    • Consultado a soporte, resulta que currentDateTime() y currentUTCDateTime() representan internamente la misma fecha, lo que ocurre es que las variables de tipo Tiempo guardan el huso horario en el que han sido creadas y Velneo no nos proporciona ese dato. Estas funciones devuelven fechas distintas en algunas operaciones y en otras actúan como valores iguales, lo que crea una gran confusión. Como muchas veces ocurre, no está documentado.
    • Así que tenerlo en cuenta:
dateTimeToTime(currentUTCDateTime()) es distinto de dateTimeToTime(currentDateTime())
dateTimeToString(currentUTCDateTime(), "hh:mm") es distinto de dateTimeToTime(currentDateTime(), "hh:mm")
pero
currentUTCDateTime() es igual a currentDateTime()
    • Si no existiera getSysTimeZone() la forma correcta de obtener el huso horario sería:
// Creamos 2 variables Tiempo nuevas a partir de información devuelta por las funciones currentDateTime y currentUTCDateTime
Set (THORA_LOCAL, setDateTime(dateTimeToDate(currentDateTime()), dateTimeToTime(currentDateTime()))
Set (THORA_UTC, setDateTime(dateTimeToDate(currentUTCDateTime()), dateTimeToTime(currentUTCDateTime()))
// Ya podemos operar con las variables Tiempo
Set (NDIF_HORARIA , secondsTo(THORA_UTC, THORA_LOCAL) / 3600)
Mensaje ("Hora local: " + dateTimeToString(currentDateTime(), "dd/MM/yyyy hh:mm") + "<br>" + 
"Hora UTC: " + dateTimeToString(currentUTCDateTime(), "dd/MM/yyyy hh:mm") + "<br>" +
"Diferencia horaria: " + numberToString(NDIF_HORARIA, "L", 0)

Los formularios del Bloc de Formularios no ejecutan el evento PRE_INI

    • Los formularios pueden ser los contenedores de los registros en algunos controles de Vista de datos de tipo Lista como el Bloc de formularios.
    • En este caso hay que tener en cuenta lo siguiente:
      • El evento Pre-inizialización del formulario solo se ejecutará cuando se muestra el Bloc de formularios, es decir, solo se ejecuta para el formulario mostrado en ese momento. Cuando navegamos por la Lista de registros no se dispara este evento.
      • Aparece un evento Item: pre cambio de seleccionado que funciona al contrario que el evento Pre-inizialización. En este caso se ejecuta solo cuando navegamos por la LIsta de registros.
      • En el Bloc de formularios no podemos usar en el manejador PRE_INI código que dependa del registro de la tabla, sobre todo el código que determina el nivel de acceso del Usuario a los registros. 

Y ahora confiesa… ¿cuántas de estas curiosidades sobre gráficos, rejillas y funciones sabías? 

Déjame un comentario mas abajo y comenzamos el debate.

La entrada Sabías que … (5) aparece primero en AyudaVelneo.

Sabías que … (5)

Nuestro “Papá Noel” Particular nos ha regalado una nueva entrega  “Sabías que“. En este post veremos curiosidades sobre funciones, contenidos iniciales, rejillas y personalización de gráficos nativos mediante CSS.

Por si te perdiste las cuatro primeras entregas del “juego”, no está de mas recordarlas:

¿Sabías que..?

Si no te fijas bien, la función getStringRegExp() te puede jugar una mala pasada

    • La función de cadena getStringRegExp(cadena, expresionRegular, posIni, caseSensitive, numSubExpresion) recibe como expresión regular una cadena.
    • En las expresiones regulares se usan metacaracteres, algunos de los cuales deben escaparse y ¿cuál es el caracter de escape?, pues precisamente el caracter \.
    • Por lo tanto, en Velneo debemos escapar los metacaracteres con doble caracter \ para que funcione correctamente la función getStringRegExp

Un ejemplo para obtener el código a la derecha de la palabra Informe:
 getStringRegExp(“Informe  233421122”, “Informe (\\d{1,}$)”, 0, 0, 1)  = 233421122

    • Cuando copiéis expresiones regulares de Internet, prestad atención a estos detalles, o padeceréis horas de desconcierto

Podemos recorrer los controles de una Caja de grupo (QGroupBox) para aplicar una determinada acción

    • El API de Velneo es una herramienta muy útil y este es un ejemplo de ello.
    • La clase QGroupBox (control caja de Grupo) dispone de 2 funciones, childWidgetAt(nIndex) y childWidget(nCount), que nos permiten recorrer todos los controles contenidos en la caja de grupo.
    • La función childWidgetAt devuelve un objeto Widget al que podremos aplicar una determinada acción.

Se puede establecer el tiempo que se muestran los caracteres en las cajas de edición que tienen la propiedad Contraseña activada

    • Debemos usar un par de propiedades CSS, lineedit-password-character y lineedit-password-mask-delay
    • La propiedad CSS lineedit-password-character determina código UNICODE elegido para ocultar la contraseña.
      Ejem:  ● 9679  * 42
    • La propiedad CSS lineedit-password-mask-delay establece el retardo en milisegundos
QLineEdit { 
   lineedit-password-character: 9679;
   lineedit-password-mask-delay: 300;
}

La columna de la rejilla puede mostrar directamente un icono

    • Si solo deseamos mostrar un icono en la columna de un rejilla no es necesario hacerlo en la parte reservada para ello.
    • Podemos hacerlo en la zona reservada para el contenido de la columna.
    • El editor de fórmulas no nos dejará insertar, por ejemplo, el campo ICONO de la tabla estática. Lo tecleamos manualmente.
      #BLOQUEADO_ICO.ICON

¿En qué plano se determinan los valores iniciales de los campos de la tabla?

    • El plano donde se ejecuta el comando Crear nueva ficha en memoria es en el que se determinan los valores iniciales.
    • Si queremos que siempre se determinen en 3P tendremos que calcular el valor inicial en el Trigger anterior al Alta.
    • En el API con el VRegister, los valores iniciales se calculan en la función setTable(), ¡¡ cuidado con esto !!.

¿Para qué sirve la función de campo getID()?

    • ¿Qué sentido tiene la función GetID() si devuelve el mismo ID que uso para llamarla?
    • Pues nos permite refactorizar los nombres de campo de una tabla cuando éstos son renombrados
      Por ejemplo:
      Hay que pasar a una función un string con los nombres de campo separados por comas.
      Si renombramos los campos AUTOR, CSS_FINAL o NOTAS, la aplicación seguirá funcionando correctamente.
Set (CLISTA_CAMPOS, "ID,NAME," + #AUTOR:getID() + "," + #CSS_FINAL:getID()  + "," + #NOTAS:getID()

Podemos usar el control Combobox en formularios sin Origen

    • El control combobox del formulario es muy cómodo de usar para el usuario si va a seleccionar de una lista corta, entre otras cosas, porque la lista se despliega directamente al pulsar con el ratón.
    • A veces tenemos un formulario sin origen y necesitamos desplegar los valores de una tabla maestra.
    • Una técnica habitual es crear una tabla temporal con todos los punteros a maestro que vayamos a usar en controles de selección
    • En el formulario sin origen añadimos una Ficha de Extensión FIEXT que se alimente por proceso, Alta, Baja y Modificación estarán a cero.
Crear nueva ficha en memoria (hMaestros, MAESTROS_TEMP@MiApp_app)
        Añadir ficha a la salida
    • Añadimos el control combobox y lo asociamos al campo puntero a maestro de la Ficha de Extensión FIEXT.
    • Ya sabemos que el valor seleccionado en el Combobox se lee mediante ##FIEXT.EMPRESA.ID.

Podemos personalizar los Gráficos nativos con CSS

    • El nuevo gráfico de Velneo es un control nativo LifeIsSoft y por lo tanto desesperadamente poco personalizable.
    • Sin embargo, teniendo en cuenta que los Títulos y Etiquetas son objetos Label de Qt, podemos usar tags HTML y código CSS.

Veamos 2 ejemplos que puedes probar en la aplicación del cloud vatp://pruebas:pruebas@c6.velneo.com:16400/0PS__MisCSS_iapp:

/* Gráfico nativo */
/* No existe selector de clase
Aunque podemos usar los tags HTML y código CSS en los Títulos y etiquetas del Gráfico
Pero limitados al subconjunto de HTML4 - http://doc.qt.io/qt-5/richtext-html-subset.html */

/* Cada etiqueta QLbel personaliza un elemento del gráfico.
Lo que hacemos es parsear el código CSS y aplicar un Atributo HTML style="font: bold 18px verdana; ...." mediante variables locales 
definidas en el Gráfico nativo que se añaden como prefijo a los Títulos y Etiquetas
*/

QLabel#GRAF_TITULO {
   font: bold 18px verdana;
   text-align: center;
   background-color: WhiteSmoke;
   color: DarkSlateGray;
   padding: 0 80 0 80;
}
QLabel#GRAF_TITULO_EJEY {
   font: bold 12px arial;
   text-align: center;
   color: DarkSlateGray;
}
QLabel#GRAF_TITULO_EJEX {
   font: bold 11px arial;
   text-align: center;
   color: DarkSlateGray;
}
QLabel#GRAF_ETIQUETAS_EJEY {
   font: bold 12px arial;
   text-align: center;
   color: DimGray;
}
QLabel#GRAF_ETIQUETAS_EJEX {
   font: bold 10px arial;
   background-color: IndianRed;
   color: Cornsilk;
   padding: 3 10 3 10;
}
QLabel#GRAF_ETIQUETAS_SERIE1 {
   font: bold 12px verdana;
   background-color: DarkGreen;
   color: HoneyDew;
   padding: 3 10 3 10;
}
QLabel#GRAF_ETIQUETAS_SERIE2 {
   font: bold 12px arial;
   color: white;
}

Las funciones CurrentDateTime() y CurrentUTCDateTime() tienen truco

    • Un día quise obtener el huso horario de vClient y como no me acordaba de la función getSysTimeZone(), hice lo siguiente:
set ( NDIF_HOR, secondsTo(currentDateTime(), currentUTCDateTime()))

Sin embargo, el resultado es cero.

    • Consultado a soporte, resulta que currentDateTime() y currentUTCDateTime() representan internamente la misma fecha, lo que ocurre es que las variables de tipo Tiempo guardan el huso horario en el que han sido creadas y Velneo no nos proporciona ese dato. Estas funciones devuelven fechas distintas en algunas operaciones y en otras actúan como valores iguales, lo que crea una gran confusión. Como muchas veces ocurre, no está documentado.
    • Así que tenerlo en cuenta:
dateTimeToTime(currentUTCDateTime()) es distinto de dateTimeToTime(currentDateTime())
dateTimeToString(currentUTCDateTime(), "hh:mm") es distinto de dateTimeToTime(currentDateTime(), "hh:mm")
pero
currentUTCDateTime() es igual a currentDateTime()
    • Si no existiera getSysTimeZone() la forma correcta de obtener el huso horario sería:
// Creamos 2 variables Tiempo nuevas a partir de información devuelta por las funciones currentDateTime y currentUTCDateTime
Set (THORA_LOCAL, setDateTime(dateTimeToDate(currentDateTime()), dateTimeToTime(currentDateTime()))
Set (THORA_UTC, setDateTime(dateTimeToDate(currentUTCDateTime()), dateTimeToTime(currentUTCDateTime()))
// Ya podemos operar con las variables Tiempo
Set (NDIF_HORARIA , secondsTo(THORA_UTC, THORA_LOCAL) / 3600)
Mensaje ("Hora local: " + dateTimeToString(currentDateTime(), "dd/MM/yyyy hh:mm") + "<br>" + 
"Hora UTC: " + dateTimeToString(currentUTCDateTime(), "dd/MM/yyyy hh:mm") + "<br>" +
"Diferencia horaria: " + numberToString(NDIF_HORARIA, "L", 0)

Los formularios del Bloc de Formularios no ejecutan el evento PRE_INI

    • Los formularios pueden ser los contenedores de los registros en algunos controles de Vista de datos de tipo Lista como el Bloc de formularios.
    • En este caso hay que tener en cuenta lo siguiente:
      • El evento Pre-inizialización del formulario solo se ejecutará cuando se muestra el Bloc de formularios, es decir, solo se ejecuta para el formulario mostrado en ese momento. Cuando navegamos por la Lista de registros no se dispara este evento.
      • Aparece un evento Item: pre cambio de seleccionado que funciona al contrario que el evento Pre-inizialización. En este caso se ejecuta solo cuando navegamos por la LIsta de registros.
      • En el Bloc de formularios no podemos usar en el manejador PRE_INI código que dependa del registro de la tabla, sobre todo el código que determina el nivel de acceso del Usuario a los registros. 

Y ahora confiesa… ¿cuántas de estas curiosidades sobre gráficos, rejillas y funciones sabías? 

Déjame un comentario mas abajo y comenzamos el debate.

La entrada Sabías que … (5) aparece primero en AyudaVelneo.

Deshabilitar controles de formulario con CSS en Velneo V7

VITAMINA – 9

Como continuación de la vitamina 8 en la que deshabilitamos y habilitamos los controles de un formulario con el API de Velneo V7 y JavaScript, en esta vitamina lo haremos también de forma sencilla y aprenderemos a deshabilitar controles de formulario con CSS en Velneo V7.

Podemos utilizar el comando de instrucción de procesos V7 “Interfaz: Establecer hoja de estilo CSS” en un manejador de evento del formulario que se ejecute, por ejemplo, al dispararse la señal “Post-inicializado” del formulario, o en cualquier momento que consideremos oportuno.

Deshabilitar controles de formulario con CSS en Velneo V7

Deshabilitar controles de formulario con CSS en Velneo V7

El siguiente script CSS se puede usar para deshabilitar todos los controles del formulario que sean del tipo (edición alfabética, edición fecha, edición fecha/hora, edición hora, edición numérica, edición de maestro, combobox, listbox y botones:

VLineEdit, VDateEdit, VDateTime, VTimeEdit, VDateTimeEdit, 
VNumberSpinBox, VLineEditBrowser, VBoundFieldEdit, VBoundFieldComboBox,
VBoundFieldListBox, VComboBox, VListBox, VPushButton
{
    qproperty-enabled: false
}

VPushButton#BTN_HAB_CTL_CSS
{
    qproperty-enabled: true
}

Si nos fijamos en el CSS podemos observar como tras deshabilitar los controles, y en concreto todos los botones VPushButton, a continuación se habilita de nuevo el botón cuyo identificador es BTN_HAB_CTL_CSS.

Es decir, que podemos habilitar individualmente cualquier control de cualquier tipo indicando primero el tipo de control (VPushButton, VLineEdit, VDateEdit, etc.) el símbolo “#” y el identificador del control. Incluso se puede especificar varios controles a la vez.

Habilita controles del formulario

El siguiente script CSS se puede usar para deshabilitar todos los controles del formulario que sean del tipo (edición alfabética, edición fecha, edición fecha/hora, edición hora, edición numérica, edición de maestro, combobox, listbox y botones:

VLineEdit, QTextEdit, VDateEdit, VDateTime, VTimeEdit, VDateTimeEdit,
VNumberSpinBox, VLineEditBrowser, VBoundFieldEdit, VBoundFieldComboBox,
VBoundFieldListBox, VComboBox, VListBox, VPushButton
{
    qproperty-enabled: true
}

Ventajas y desventajas del CSS respecto al API de Velneo V7 y JavaScript

Esta píldora demuestra que deshabilitar y habilitar opciones con CSS es realmente sencillo, a continuación identifico algunas ventajas de hacerlo mediante CSS o con el API de Velneo V7 y JavaScript:

Ventajas de hacerlo con CSS:

  • Más sencillo de aplicar.
  • Se aplica en cascada a todos los formularios que se abran desde aquel en el que se haya aplicado el estilo.
  • Permite individualizar el estilo de múltiples controles a la vez.

Ventajas de hacerlo con el API de Velneo V7 y JavaScript:

  • Muy configurable y personalizable mediante programación.
  • Muy potente al permitir aplicarlo a todas las propiedades y funciones.
  • Código muy reutilizable y de aplicación directa, no en cascada.

 

Si te ha gustado este artículo, por favor compártelo con los tuyos en las redes sociales

The post Deshabilitar controles de formulario con CSS en Velneo V7 appeared first on Lógica mente Velneo V7.

Desactivar ordenación en rejillas con CSS en Velneo V7

VITAMINA – 7

En esta vitamina aprenderás a desactivar ordenación en rejillas con CSS en Velneo V7.

Desactivar ordenación en rejillas con CSS en Velneo V7

Si necesitas evitar que el usuario pueda cambiar el orden de los registros visualizados en una rejilla, necesitas conseguir que el usuario:

  1. No tenga acceso a la opción ordenar en el menú contextual ni en el menú lista.
  2. Al hacer clic en la cabecera de una columna no se ordene la rejilla.

El primer punto lo lograrás desactivando el menú contextual por defecto de la rejilla y no dando acceso al usuario al menú de lista en el que se encuentra la opción ordenar.

Para conseguir desactivar la ordenación de los registros mostrados en una rejilla haciendo clic en la cabecera sólo tienes que hacer lo siguiente:

  1. Declara una conexión de evento en la rejilla para atrapar la señal Pre inicializado
  2. Asigna a la conexión de evento pre inicializado un manejador de evento que contenga el siguiente código:

Código para desactivar la ordenación haciendo clic en la cabecera de rejilla

QTableView
{
    qproperty-sortingEnabled: false
}

Observarás que la línea de código aplica un estilo CSS en el que pone a false la propiedad de rejilla sortingEnabled, consiguiendo de esta forma que cuando el usuario haga clic en cualquier cabecera de columna la rejilla no se ordene y siga con los registros visualizados en el orden en el que fueron cargados.

La vitamina no sólo es sencilla de programar, además es muy potente ya que si lo deseas puedes aplicar el CSS a nivel general para que todas las rejillas de la aplicación se comporten de la misma forma sin permitir la ordenación. Particularmente puedes aplicar un CSS específico a cualquier rejilla.

 

Si te ha gustado este artículo, por favor compártelo con los tuyos en las redes sociales

The post Desactivar ordenación en rejillas con CSS en Velneo V7 appeared first on Lógica mente Velneo V7.

Exprimir la caja de grupo con CSS y JavaScript en Velneo V7

VITAMINA – 4

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 V7 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:

Exprimir la caja de grupo con CSS y JavaScript en Velneo V7

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 V7 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:

Píldora 4. Caja de grupo aplicado CSS general

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:

Píldora 4. Caja de grupo aplicado CSS personalizada

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:

Píldora 4. Caja de grupo aplicado CSS con checkable

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.

Píldora 4. Caja de grupo aplicado CSS con checkable desactivado

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.

 

Si te ha gustado este artículo, por favor compártelo con los tuyos en las redes sociales

The post Exprimir la caja de grupo con CSS y JavaScript en Velneo V7 appeared first on Lógica mente Velneo V7.

En la sencillez esta el gusto

Post de autor invitado

Este post está escrito por alguien relevante dentro de la comunidad Velneo.  No tiene por qué coincidir con mis puntos de vista o mis opiniones. Si quieres colaborar como autor invitado no dudes en ponerte en contacto conmigo.

Cuando empezamos la realización de una aplicación normalmente nos preocupamos mas por definir todos los detalles en cuestión de bugs, peso, potencia de la herramienta he incluso llegamos a realizar aplicaciones que llegan a ser complejas en su utilización.

A lo largo de los años hemos visto como las aplicaciones han aumentado de tamaño considerablemente y exponencialmente con respecto a la potencia que nos brindan los ordenadores actuales.

Pero realmente es esto lo que queremos mostrar?

Si nos fijamos en los grandes nos damos cuenta de que toda la complejidad, vistosidad excesiva e incluso los colores chillones están desapareciendo.

Tango Google como Microsoft han dando un vuelco en lo que ha practicidad y sencillez en las interfaces he incluso en su manejo. Incluso si nos fijamos en Velneo nos damos cuenta que lleva esta línea.

Es cierto que la potencia de una aplicación marca la diferencia con el resto, pero por muy potente que sea si no es práctica no vende.

Gracias a Velneo tenemos la oportunidad de realizar las 2 cosas. Una herramienta potente pero a la vez sencilla y práctica.

A voz de pronto las interface que ofrece Velneo están preconfiguradas con un estilo y marcadas e inamovibles gracias a que nos permite cambiar de aspecto en la configuración. Pero esto no siempre es práctico o sencillo.

Para seguir esta línea, por ejemplo, podemos cambiar los botones a un estilo más simple pero no menos vistoso.

En lugar de incluir los botones típicos una práctica recomendable es crear interfaces fáciles y simples a la vista. Además debemos otorgarles a los usuarios una experiencia agradable y rápida en su utilización. Nunca olvidar que debemos intentar hacer más fácil el uso de nuestra herramienta y que todo ha de tener una pequeña coherencia.

Por defecto al crear un formulario este tendrá un fondo Gris, lo cual no es malo ya que no es blanco y muchas veces el blanco hace daño a la vista y distrae de lo realmente importante, los campos a editar.

Ahora bien, esto realmente puede ser un Formulario normal o podemos darle un aspecto mas amigable.

Pero para esto necesitaremos la ayuda de otro elemento, el CSS u Hojas de Estilo en Cascada.

Para darle mas sencillez al formulario en Velneo podemos usar el siguiente código:

” QLineEdit { border: 1px solid gray; } “

De esta manera obtendremos lo siguiente:

Si nos fijamos lo que hemos hecho es cambiar el aspecto de los campos de edición.

Esto provoca que los usuarios no sufran distracciones y la usabilidad aumenta. Así mismo da sencillez a nuestra aplicación, lo cual la hace mas atractiva.

No profundizare en el tema puesto que se han escrito varios post de como realizar estos cambios en las aplicaciones:

No solo el aspecto debe ser amigable y sencillo para nuestros usuarios sino que ademas no debe de complicarse en exceso a la hora de que estos puedan ingresar los campos.

Si para dar de alta una entidad debemos rellenar demasiados campos esto empero su rendimiento, debemos intentar minimizar lo máximo posible.

Por ejemplo, si sabemos de antemano que una persona normal tiene 1 teléfono fijo, 1 móvil y 1 un email, ¿por que ponemos 3 campos por cada persona?

A una empresa le pasa lo mismo, pero lo que si tiene son contactos y muchos.

Nos preocupamos mucho por la Normalización en las Bases de Datos para optimizarlas pero no miramos realmente la usabilidad final para ganar en el rendimiento de nuestras aplicaciones.

Si queremos que nuestra aplicación tenga impacto y guste a todos empieza por hacerte esta pregunta:

¿Es mi aplicación sencilla y útil?

Si la respuesta es no, ya sabes lo que tienes que hacer.

Un vSaludo a todos.

El artículo En la sencillez esta el gusto fue publicado en Ayudavelneo por

Recursos CSS

Velneo V7 incluye la posibilidad de utilizar CSS (Cascade Style Sheets) también conocidas como Hojas de estilo en cascada para así dar formato a diversos controles.

Esto amplía enormemente las posibilidades gráficas de la plataforma, sin embargo, ¿qué sabemos de CSS?. Este artículo pretende compartir diversas guías, recursos y herramientas que nos permitirás sacarle el máximo partido a las CSS.

Tutoriales de CSS

Con estos tutoriales podrás aprender lo básico y lo no tan básico sobre CSS. Algunos de ellos te permitirán profundizar en temas como la disposición o los selectores.

Continue reading "Recursos CSS"

Aprende de los mejores en los seminarios de Life is soft 2011

3 días durará esta primera edición, 2011, de Life is soft. El 9, 10 y 11 de noviembre en la Universidad Laboral de Gijón tendrá lugar este evento.

 

 

Contenido de los seminarios

Velneo ha recopilado a los mejores ponentes y ha organizado unos seminarios que esperamos sean de gran interés por la diversidad y alto nivel técnico de sus contenidos. Un numeroso grupos de ponentes nos ayudarán a conocer a fondo técnicas de programación y tecnologías relacionadas con el desarrollo de aplicaciones con Velneo V7  que con seguridad nos resultarán de interés y que podremos usar en 2012.

 

  • ¿Te gustaría conocer en primicia las novedades en las que Velneo lleva trabajando mucho tiempo y que verán la luz en 2012 de la mano del vArquitecto, Juan Muñoz-Cobos?
  • ¿Quieres conocer directamente del equipo de desarrollo de Velneo V7 las novedades presentadas en la versión 7.8.
  • ¿Estás interesado en desplegar tus aplicaciones en Tablets Android?
  • ¿Te interesa conocer como integrar tus bases de datos con aplicaciones que corren en iOS?
  • ¿Te interesa la presentación de las Open Apps oficiales vConta y vERP?
  • ¿Quieres aprender a integrar gráficos dinámicos en tus aplicaciones mediante jquery?
  • ¿Quieres conocer como integrar una solución de mensajería en tus aplicaciones?
  • ¿Te gustaría conocerlo todo sobre como  aplicar CSS para cambiar la interfaz de tus aplicaciones sin reprogramar?
  • ¿Has oído hablar de QML? En Velneo creemos que es algo que debes conocer ¿Quieres recibir un primer curso sobre QML y conocer su potencia y posibilidades?
  • ¿Estás buscando una solución web de integración con un CMS como Drupal? ¿Sabes lo que te puede aportar?
  • ¿Te interesa poder dar salida web a tus aplicaciones de forma sencilla o integrar una cesta de la compra integrada con tu base de datos en soluciones web?

 

Las respuestas a estas preguntas las encontrarás en los seminarios que se celebrarán los días 9 y 10 en el evento Life is soft. Las plazas son limitadas. Si estás interesado, regístrate ahora.

Velneo con Estilo (En la práctica)

En Velneo con Estilo (II) damos por finalizado, de momento, las hojas de estilo en Velneo.

Para que veáis en la práctica un CSS aplicado en una aplicación real que estoy desarrollando, aquí os dejo un pequeño video. He intentado pasar por todos los controles para que lo veáis, perdonar la calidad del video y que no esté comentado..me encuentro sin tiempo :P

Nota: Tanto la aplicación, como la hoja de estilo, están sin terminar..ser piadosos :D

Ver Video… ->

La hoja de estilo aplicada, tras el salto.

Puede estar desordenada, ya que, recibió muchos cambios desde su concepción, pero la idea básica podréis entenderla.


/* CONTENEDORES*/

QMenuBar {
background: #FFFFFF;
}

/* STATUS BAR */
QDockWidget {
border: 2px solid green;
border-radius: 4px;
background: #FFFFFF;
}

QDockWidget::title {
border: 2px solid green;
border-radius: 4px;
background: #FFFFFF;
}

QToolBar {
border: 2px solid green;
border-radius: 4px;
background: #FFFFFF;
}

QFrame, QToolTip {
border: 2px solid green;
border-radius: 4px;
padding: 2px;
/*background: #FFFFFF;*/
background: qlineargradient(x1: 0, y1: 0, x2: 400, y2: 400,
stop: 0 #FFFFFF, stop: 1 #CCCCCC);
}

QFrame QLabel {
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background: #DDDDDD;
}

/* ****************************** TAB TAB TAB TAB TAB TAB TAB **************************************************** */

QTabWidget::pane { /* The tab widget frame */
border-top: 2px solid #C2C7CB;
position: absolute;
top: -0.5em;
}

QTabWidget::tab-bar {
alignment: center;
}

QTabBar::tab {
/*background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);*/
background: #AAAAAA;
border: 2px solid #C4C4C3;
border-bottom-color: #C2C7CB; /* same as the pane color */
border-top-left-radius: 4px;
border-top-right-radius: 4px;
min-width: 8ex;
padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}

QTabBar::tab:selected {
border-color: solid green;
border-bottom-color: solid green; /* same as pane color */
}

QTabBar::tab:!selected {
margin-top: 2px; /* make non-selected tabs look smaller */
}

/* ****************************** GROUPBOX GROUPBOX GROUPBOX**************************************************** */

QGroupBox {
background-color: #FFFFFF;
}

QGroupBox#INACTIVO_INFERIOR {
background-color: #FF0000;
}

/* ****************************** BOTON BOTON BOTON BOTON BOTON **************************************************** */

QPushButton {
border: 2px solid green;
border-radius: 4px;
padding: 6px;
background: #AAAAAA;
}

/* ****************************** EDITS EDITS EDITS EDITS **************************************************** */

QLineEdit {
border: 2px solid green;
border-radius: 4px;
background: #EEEEEE;
}

QLineEdit:focus {
border: 2px solid blue ;
border-radius: 4px;
background: #fbffb6;
}

QDoubleSpinBox {
border: 2px solid green;
border-radius: 4px;
background: #EEEEEE;
}

QDoubleSpinBox:focus {
border: 2px solid blue ;
border-radius: 4px;
background: #fbffb6;
}

QSpinBox {
border: 2px solid green;
border-radius: 4px;
background: #EEEEEE;
}

QSpinBox:focus {
border: 2px solid blue ;
border-radius: 4px;
background: #fbffb6;
}

VCEditMaestro {
border: 2px solid green;
border-radius: 4px;
background: #EEEEEE;
}

VCEditMaestro:focus {
border: 2px solid blue ;
border-radius: 4px;
background: #fbffb6;
}

QComboBox {
border: 2px solid green;
border-radius: 4px;
background: #EEEEEE;
}

QComboBox:focus {
border: 2px solid blue ;
border-radius: 4px;
background: #fbffb6;
}

/* ****************************** REJILLAS REJILLAS REJILLAS REJILLAS REJILLAS **************************************************** */

QHeaderView::section {
background-color: lightblue;
color: black;
padding:2px;
border: 1px solid #6c6c6c;
margin: 2px;
min-width: 20px;
/*max-width: 150px;*/
min-height: 20px;
max-height: 20px;
}

Velneo con estilo (II)

En la primera parte, estuvimos echando un vistazo a las posibilidades que nos brinda la librería QT para poder personalizar el comportamiento de la interfaz de aplicaciones.

En esta segunda parte, y para finalizar de momento con CSS, tras el salto, profundizaremos un poco más en estas posibilidades.

Vamos a comenzar, partiendo del siguiente CSS, que en los controles mencionados, nos pone un borde gris redondeado y el fondo en amarillo.

“QLineEdit, QDateEdit, QDoubleSpinBox {
border: 2px solid gray;
border-radius: 10px;
padding: 0 8px;
background: yellow;
selection-background-color: darkgray;
}”

Estados

Por requerimientos del cliente, necesitamos destacar el control que contiene el foco, para ello, usaremos la propiedad “focus”. Para establecer los estilos para un determinado estado del control, usaremos el símbolo “:” tras el nombre de la clase del Widget, y a continuación, el estado en cuestión, y el resto, os lo podéis imaginar. Por ejemplo, para los Edits sería “QLineEdit:focus { … }”. Pongámoslo a la práctica con nuestro anterior CSS.

Añadimos lo siguiente a nuestro código:

QLineEdit:focus {

border: 2px solid red;
border-radius: 10px;padding: 0 8px;
background: blue;
selection-background-color: yellow;

}

Y el resultado es….

Con “:focus”, hemos definido que cuando un Edit reciba el foco, cambiará el borde a rojo, el fondo a azul, y el color de selección a amarillo. Obviamente, no es una combinación de colores buena, pero la intención es que se noten los distintos colores (y mi gandulería de ponerme a convertir colores a hexadecimal :D )

QLineEdit:focus {

border: 2px solid red;
border-radius: 10px;padding: 0 8px;
background: blue;
selection-background-color: yellow;

}

Si quisiéramos heredar este comportamiento a los otros dos controles, bastaría con especificarlo en la cabecera:

QDateEdit:focus, QDoubleSpinBox:focus, QLineEdit:focus {

border: 2px solid red;
border-radius: 10px;
padding: 0 8px;
background: blue;
selection-background-color: yellow;

}”

Con el estado “:Hover” podemos controlar el comportamiento visual cuando el puntero del ratón pasa por encima del control, así, podemos copiar y pegar el anterior bloque, y modificar simplemente el borde y fondo, para que al pasar el ratón sobre el control, el borde aparezca azul, y el fondo naranja…

QDateEdit:focus, QDoubleSpinBox:focus, QLineEdit:focus {

border: 2px solid blue;
border-radius: 10px;
padding: 0 8px;
background: orange;
selection-background-color: yellow;

}”

Foco (:focus) en campo código..puntero del raton sobre (:hover) control con texto “Komenco”

Aunque sólamente hemos hablado del típico foco, etc.. si el control se encuentra deshabilitado, en modo sólo lectura, etc.. éstos, también son estados, y podríamos especificarlos en la hoja de estilo como “:disabled“, “:readonly“, “:pressed“, etc…

Definiendo estilos a controles, por su identificador

Según la documentación de QT, también podemos definir estilos a los controles partiendo de su identificador. Ésto nos ofrece bastante potencia. Por ejemplo, imagina que en una aplicación, queremos que los campos de edición de intervalos de fechas (los típicos Fecha Desde y Fecha Hasta), tengan un estilo distinto al resto de campos de edición de fechas. A todos estos controles, podríamos ponerle el identificador FECHADESDE y FECHAHASTA, por ejemplo, y modificar su estilo, definiénodolos con el símbolo “#” de la siguiente manera.

QDateEdit#FECHADESDE, QDateEdit#FECHAHASTA {

border: 2px solid blue;
border-radius: 10px;
padding: 0 8px;
background: orange;
selection-background-color: yellow;

}”

Todos los widgets DateEdit que tengan esos identificadores, podrán disponer de su propio  estilo respecto al resto de DateEdits.
La mala noticia, es, que según las pruebas que he podido realizar, no he conseguido que ésto funcione desde Velneo.

Cambiar imagen microscroller

En Velneo, para trabajar con números, y que éstos sean visualizados correctamente en pantalla, debemos hacer uso forzosamente del control microscroller. Este control, no es muy diferente de un Edit normal, salvo que dispone de dos flechas que a mucha gente puede llegar a molestar según en qué situaciones. Para variar, las posibilidades de las hojas de estilo en QT, salen al rescate, y podemos definir el comportamiento de estos “molestos” botones, para que o bien, tengan una imágen distinta, o bien, directamente no aparezcan. Para ello, el microscroller (QSpinBox y QDoubleSpinBox) dispone de dos “estados” que nos permiten acceder a sus “minicontroles” (las flechas)

QSpinBox:down-button, QSpinBox:up-button{
margin: 1px 1px 1px 1px;
subcontrol-origin: border;
subcontrol-position: top right;
width: 10px;
height: 10px;
background-color: transparent;
}

Hay más estados, widgets y posibilidades, pero la documentación de QT es bastante extensa y bien documentada, y la intención de este documento no es en entrar en detalle en cada una de ellas