Índice

• Introducción
• Coordenadas relativas del cursor del ratón en el lienzo especificado para el dibujo
• Cambios en la estructura de la tabla
• Determinación del rango de las filas dentro del área de visibilidad
• Imágenes en las celdas de la tabla
• Resalto de la fila de la tabla al situar el cursor encima
• Métodos para el redibujo rápido de la celda de la tabla
• Aplicación para la prueba del control
• Conclusión

Introducción

El primer artículo de la serie nos cuenta con más detalles para qué sirve esta librería: Interfaces gráficas I: Preparación de la estructura de la librería (Capítulo 1). Al final de cada artículo de la serie se muestra la lista completa de los capítulos con los enlaces. Además, se puede descargar la versión completa de la librería en la fase actual del desarrollo del proyecto. Es necesario colocar los ficheros en los mismos directorios, tal como están ubicados en el archivo.

Seguiremos completando la tabla dibujada (CCanvasTable) con nuevas funcionalidades. Esta vez, vamos a añadir las siguientes posibilidades:

• Resalto de la fila de la tabla al situar el cursor encima.
• Posibilidad de agregar el array de imágenes para cada celda y el método para su conmutación.
• Posibilidad de establecer y editar el texto de las celdas durante la ejecución del programa. 
  

Aparte de eso, optimizaremos el código y algunos algoritmos para acelerar el redibujo de la tabla. 

Coordenadas relativas del cursor en el lienzo especificado para el dibujo

Con el fin de evitar el código repetitivo en muchos métodos y clases para el cálculo de las coordenadas relativas en el lienzo para el dibujo, ahora la clase CMouse va a incluir los métodos adicionales CMouse::RelativeX() y CMouse::RelativeY() para obtener estas coordenadas. La referencia al objeto tipo CRectCanvas debe ser pasada a estos métodos para poder calcular la coordenada relativa, tomando en cuenta el desplazamiento actual del área de visibilidad del lienzo para el dibujo.

Durante el proceso del desarrollo de nuestra librería, estos métodos van a usarse para obtener las coordenadas relativas de todos los controles dibujados. 

Cambios en la estructura de la tabla

Para optimizar al máximo la ejecución del código de la tabla dibujada, tenía que modificar un poco y completar la estructura de la tabla tipo CTOptions, así como añadir nuevas estructuras que permiten construir los arrays multidimensionales. Nuestra tarea consiste en hacer que algunos fragmentos de la tabla se redibujen según los valores calculados anteriormente. Por ejemplo, puede tratarse de las coordenadas de los límites de columnas y filas.

Como ejemplo, calcular y guardar las coordenadas X de los límites de las columnas conviene en el método CCanvasTable::DrawGrid(), que se usa para trazar la cuadrícula, y solamente al dibujar la tabla entera. Y cuando el usuario selecciona alguna fila de la tabla, se puede usar los valores ya preparados. Lo mismo se refiere al resalto de las filas de la tabla al situar el cursor encima (lo veremos a continuación). 

Para guardar las coordenadas Y de las filas de la tabla, y tal vez en el futuro, otras propiedades de las filas, crearemos una estructura separada (CTRowOptions) y declararemos el array de sus instancias. Las coordenadas Y de las filas se calculan en el método CCanvasTable::DrawRows(), que sirve para dibujar el fondo de las filas. Puesto que este método se invoca antes del trazado de la cuadrícula, en el método CCanvasTable::DrawGrid() se utilizan los valores ya calculados desde la estructura CTRowOptions. 

Para almacenar los valores y las propiedades de las celdas de la tabla, vamos a crear una estructura separada tipo CTCell. Precisamente con este tipo se declara el array de las instancias en la estructura CTRowOptions, como array de las filas de la tabla. En esta estructura van a almacenarse:

• Arrays de imágenes
• Arrays de tamaños de imágenes
• Indice de la imagen seleccionada (mostrada) en la celda
• Texto completo
• Texto reducido
• Color del texto

Puesto que cada imagen representa un array de los píxeles, necesitaremos una estructura separada (CTImage) con el array dinámico para su almacenamiento. A continuación, se muestra el código de las estructuras mencionadas:

Las correcciones correspondientes han sido introducidas en todos los métodos donde se utilizan estos tipos de datos. 

Determinación del rango de las filas dentro del área de visibilidad

Dado que la tabla puede contener un gran numero de filas, la búsqueda del foco en una de las filas con el posterior redibujo de la tabla puede ralentizar considerablemente el proceso. Lo mismo se refiere a la selección de la fila y a la corrección del largo del texto al cambiar el ancho de la columna manualmente. Para evitar la ralentización, es necesario determinar el primer y el último índice en el área visible de la tabla y organizar el ciclo del repaso precisamente en este rango. Para eso disponemos del método CCanvasTable::VisibleTableIndexes(). Primero, en este método se determinan los límites del área visible. El límite superior es el desplazamiento del área visible por el eje Y, y el límite inferior se determina como el límite superior + el tamaño del área visible por el eje Y.

Para determinar los índices de la fila superior e inferior del área visible de la tabla, será suficiente dividir los valores de los límites obtenidos por el alto de la fila establecido en las propiedades de la tabla. Al final del método, se realiza la corrección si hemos salido fuera de los límites de la última fila de la tabla.

La determinación de los índices va a realizarse en el método CCanvasTable::DrawTable(). Ahora a este método se le puede pasar el argumento para indicar que es necesario redibujar solamente la parte visible de la tabla. Por defecto, el valor del argumento es igual a false, lo que indica en el redibujo de la tabla entera. Abajo se muestra la versión reducida de este método.

La llamada al método CCanvasTable::VisibleTableIndexes() también es necesaria en el método para la determinación del foco en las filas de la tabla: 

Imágenes en las celdas de la tabla

A cada celda se le puede vincular varias imágenes que se podrá ir cambiando en el proceso de ejecución del programa. Vamos a añadir los campos y los métodos para establecer los márgenes de la imagen desde el lado izquierdo de la celda:

Para colocar las imágenes dentro de la celda especificada, hay que pasar el array con su ubicación en el directorio local del terminal. Antes de eso,  deben estar conectadas a la aplicación MQL como recursos (#resource). Para eso se utiliza el método CCanvasTable::SetImages(). Aquí, si ha sido pasado el array vacío o se ha detectado la salida fuera de los límites del array, el programa sale del método.

Si las comprobaciones han sido superadas, a los arrays de la celda se le asigna nuevo tamaño y luego, usando el método ::ResourceReadImage(), leemos en el ciclo el contenido de la imagen al array unidimensional, guardando dentro los colores de todos los píxeles. Los tamaños de la imagen se guardan en los arrays correspondientes. Serán necesarios para organizar los ciclos en los que las imágenes van a dibujarse sobre el lienzo. Por defecto, en la celda se elegirá la primera imagen del array.

Para saber cuántas imágenes contiene una u otra celda, usamos el método CCanvasTable::ImagesTotal():

Ahora veremos los métodos que van a aplicarse para dibujar las imágenes. En primer lugar, a la clase CColors ha sido añadido el nuevo método CColors::BlendColors() que permitirá mezclar correctamente el color superior e inferior, tomando en cuenta la transparencia de la imagen solapada encima. También ha sido agregado el método adicional CColors::GetA() para obtener el valor de la transparencia del color pasado.

En el método CColors::BlendColors(), los colores pasados primero se dividen en los componentes RGB, y del color superior se extrae el canal alfa. El canal alfa se convierte en los valores de cero a uno. Si en el color pasado no hay transparencia, el mezclado no se realiza. En caso si hay transparencia, cada componente de dos colores pasados se mezcla tomando en cuenta la transparencia del color superior. Después de eso, los valores de los componentes obtenidos se corrigen, en caso de salir fuera del diapasón (255). 

Ahora, no es tan complicado escribir el método para dibujar la imagen. Abajo se muestra el código del método CCanvasTable::DrawImage(). Hay que pasarle los índices de la celda de la tabla en la que es necesario dibujar la imagen. Al principio del método, obtenemos las coordenadas de la imagen teniendo en cuenta los márgenes, así como el índice de la celda seleccionada y sus tamaños. Luego, la imagen se muestra en el ciclo píxel por píxel. Si el píxel especificado está vacío, es decir no tiene color, se produce el cambio al siguiente. Si hay color, determinamos el color del fondo de la celda y el color del píxel actual, y luego mezclamos estos colores, tomando en cuenta la transparencia del color solapado, y dibujamos el color obtenido en el lienzo.

Para dibujar todas las imágenes de la tabla a la vez, tomando en cuenta cuando es necesario dibujar solamente el área visible de la tabla, se usa el método CCanvasTable::DrawImages(). En la versión actual de la tabla, se puede dibujar las imágenes sólo si el texto en la columna está alineado por la izquierda. Aparte de eso, en cada iteración se comprueba si la imagen está colocada en la celda, así como si el array de sus píxeles no está vacío. Si todas las comprobaciones han sido superadas, llamamos al método CCanvasTable::DrawImage() para dibujar la imagen. 

En la captura de pantalla de abajo se muestra la tabla con imágenes dentro de las celdas:

Fig. 1. Tabla con imágenes dentro de las celdas. 

Resalto de la fila de la tabla al situar el cursor encima

Para que las filas de la tabla dibujada se resalten al situar el cursor encima de ellas, vamos a necesitar los campos y métodos adicionales. Utilice el método CCanvasTable::LightsHover() para activar el modo del resalto. El color de la fila puede establecerse a través del métod CCanvasTable::CellColorHover().

Para resaltar la fila, no es necesario redibujar la tabla entera una y otra vez al mover el cursor. Es más, no se recomienda insistentemente hacerlo, porque eso ralentizará considerablemente la aplicación y ocupará muchísimos recursos de la CPU. Con la primera entrada del cursor dentro del área de la tabla, será suficiente buscar el foco de la fila sólo una vez (repasando en el ciclo el array entero de las filas). Para eso se utiliza el método CCanvasTable::CheckRowFocus(). Después de encontrar el foco y guardar el índice de la fila, al mover el cursor sólo hay que comprobar si ha cambiado el foco sobre la fila con el índice guardado. El algoritmo descrito está implementado en el método CCanvasTable::ChangeRowsColor(), cuyo código se muestra más abajo. Para cambiar el color de la fila, se usa el método CCanvasTable::RedrawRow(), cuyo código conoceremos más tarde. El método CCanvasTable::ChangeRowsColor() se invoca dentro del método CCanvasTable::ChangeObjectsColor() para el cambio de los objetos de la tabla. 

El método para redibujar rápidamente una fila de la tabla CCanvasTable::RedrawRow() trabaja en dos modos:

•  al seleccionar la fila
  
•  en el modo para resaltar la fila al situar el cursor encima.
  

Para indicar el modo, es necesario pasar el valor correspondiente del argumento del método. Por defecto, el argumento tiene asignado el valor false, lo que significa el uso del método en el modo del resalto de las filas de la tabla. Para ambos modos, en la clase hay campos especiales para determinar la fila seleccionada/resaltada actual y anterior. De esta manera, para marcar la siguiente fila, se redibuja sólo la fila anterior y la fila actual, en vez de la tabla entera.

El programa sale del método si los índices no están determinados (WRONG_VALUE). Luego, hay que determinar el número de índices determinados. Si es la primera entrada en la tabla y ha sido determinado un solo índice (actual), el color será cambiado, por consiguiente, sólo para una fila, la fila actual. Si volvemos a entrar en la tabla, el color va a cambiarse para las dos filas (actual y anterior). 

Ahora, hay que determinar en qué sucesión va a cambiar el color de las filas. Si el índice de la fila actual es mayor que el de la fila anterior, eso significa que el cursor se desplazará hacia abajo. Entonces, primero cambiamos el color en el índice anterior, y luego en el actual. De lo contrario, hacemos al revés. Aquí también se toma en cuenta el momento de la salida del área de la tabla, cuando el índice de la fila actual no está determinado, y el índice de la fila anterior todavía existe.

Después de que todas las variables locales para el trabajo hayan sido inicializadas, se dibuja el fondo de las filas, la cuadrícula, las imágenes y el texto, en estricta sucesión.

Al final, obtenemos el siguiente resultado:

Fig. 2. Demostración del resalto de las filas de la tabla al situar el cursor encima. 

Métodos para redibujar rápidamente la celda de la tabla

Hemos considerado el método para redibujar rápidamente las filas de la tabla. Ahora voy a demostrar los métodos para el redibujo rápido de la celda. Por ejemplo, si hace falta cambiar el texto, su color o la imagen en una celda de la tabla, será suficiente redibujar sólo esta celda, en vez de la tabla entera. Para eso se utiliza el método privado CCanvasTable::RedrawCell(). Se redibuja sólo el contenido de la celda, y el borde no se actualiza. El color del fondo se determina tomando en cuenta el modo del resalto, si éste está activado. Una vez determinados los valores e inicializadas las variables locales, en la celda se dibuja el fondo, la imagen (si está establecida y la alineación es por la izquierda) y el texto.

Ahora vamos a analizar los métodos a través de los cuales se puede cambiar el texto, color del texto y la imagen (seleccionar entre las establecidas) dentro de la celda. Para establecer el texto y su color, hay que usar los métodos públicos CCanvasTable::SetValue() y CCanvasTable::TextColor(). A estos métodos se les pasan los índices de la celda (columna y fila) y el valor que hay que establecer. Para el método CCanvasTable::SetValue() es un valor string que va a mostrarse en la celda. Aquí, en los campos correspondientes de la estructura de la celda (CTCell) se guarda la línea entera que ha sido pasada y su versión reducida si la línea entera no cabe en la celda por su ancho. Para el método CCanvasTable::TextColor(), es necesario pasar el color del texto. En ambos métodos, en calidad del cuarto parámetro, se puede indicar si es necesario redibujar la celda enseguida o eso se hará más tarde usando la llamada al método CCanvasTable::UpdateTable().

Para cambiar la imagen de la celda, puede usar el método CCanvasTable::ChangeImage(). Como el tercer parámetro, aquí se debe indicar el índice de la imagen a la que queremos cambiar. Además, igual que en los métodos para el cambio de las propiedades de la celda que hemos descrito antes, se puede indicar el redibujo ahora o más tarde. 

Vamos a necesitar otro método público para redibujar la tabla entera, CCanvasTable::UpdateTable(). Puede invocarse en dos modos: 

1. Cuando es necesario simplemente actualizar la tabla para mostrar los últimos cambios con los métodos descritos antes.
2. Cuando es necesario redibujar completamente la tabla si han sido introducidos algunos cambios.

Por defecto, el único argumento del método tiene asignado el valor false, lo que significa la actualización sin la necesidad de redibujar. 

Abajo se muestra el resultado de nuestro trabajo:

Fig. 3. Demostración de nuevas posibilidades de la tabla dibujada.

Se puede descargar el EA que demuestra este resultado de los archivos adjuntos al artículo. Durante la ejecución del programa, las imágenes de todas las celdas de la tabla (5 columnas y 30 filas) van a cambiar con una frecuencia de 100 milisegundos. En la captura de pantalla de abajo se muestra la carga sobre la CPU sin la interacción del usuario con la interfaz gráfica de la aplicación MQL. La carga sobre la CPU con la frecuencia de la actualización de 100 milisegundos no supera el 3%.

Fig. 4. Carga sobre la CPU durante la ejecución de la aplicación MQL de prueba. 

Aplicación para la prueba del control

La versión actual de la tabla dibujada ya es bastante «inteligente» para crear las mismas tablas, por ejemplo, en la ventana «Observación del Mercado». Intentaremos demostrarlo. Como ejemplo, crearemos una tabla que se compone de 5 columnas y 25 filas. Serán 25 símbolo que están presentes en el servidor MetaQuotes-Demo. Los datos serán los siguientes:

• Symbol – instrumentos financieros (pares de divisas).
• Bid – precios Bid.
• Ask – precios Ask.
• Spread (!) – diferencia entre los precios Bid y Ask.
• Time – hora de la llegada de la última cotización.

Para mostrar la última dirección en el cambio del precio, vamos a preparar las mismas imágenes que figuran en la tabla de la ventana «Observación del Mercado» La primera actualización de las celdas de la tabla va a ejecutarse inmediatamente en el método de la creación del control y realizarse con la llamada al método auxiliar de la clase personalizada CProgram::InitializingTable(). 

En el proceso del trabajo, los valores de las celdas de nuestra tabla van a actualizarse cada 16 milisegundos usando el temporizador. Para eso, ha sido creado otro método auxiliar, CProgram::UpdateTable(). Aquí el programa sale del método si es el fin de semana (sábado o domingo). Luego, en el ciclo doble se hace el repaso de todas las columnas y filas de la tabla donde obtenemos dos últimos ticks para cada símbolo, y a base del análisis del cambio de precios establecemos los valores correspondientes. 

Este es el resultado que hemos obtenido:

Fig. 5. Comparación entre los datos en la ventana «Observación del Mercado» y el análogo del usuario. 

Puede descargar esta aplicación de prueba al final del artículo para estudiarla más detalladamente. 

Conclusión

En esta fase del desarrollo de la librería para la creación de las interfaces gráficas, su esquema general tiene el siguiente aspecto.

Fig. 6. Estructura de la librería en la fase actual del desarrollo.

Abajo puede descargar la última versión de la librería y los archivos para las pruebas.