TableView

Funciones

Las TableView son vistas de datos que muestran información tabulada organizada en filas y columnas (Figura 1), (Figura 2), (Figura 3). El control habilita barras de scroll y permite la navegación mediante el teclado. En ¡Hola TableView! tienes un ejemplo de uso.

• Utiliza tableview_create parar crear un control de tabla.
• Utiliza tableview_new_column_text para añadir una columna.
• Utiliza tableview_size para establecer el tamaño por defecto.

1. Conexión de datos

Pensemos que una tabla puede contener miles de registros y estos pueden cambiar en cualquier momento desde diferentes fuentes de datos (disco, red, SGBDs, etc). Por este motivo, el TableView no mantendrá ninguna caché interna. Se ha diseñado con el objetivo de realizar un rápida visualización de los datos, pero sin entrar en la gestión de los mismos. Es la aplicación, en última instancia, la que debe suministrar esta información de una forma fluida.

• Utiliza tableview_OnData para vincular la tabla con el origen de datos.
• Utiliza tableview_update para forzar la actualización de los datos de la tabla.

Cuando una tabla deba dibujar su contenido, como respuesta a un evento OnDraw, en primer lugar pedirá a la aplicación el número total de registros mediante una notificación ekGUI_EVENT_TBL_NROWS. Con ello podrá calcular el tamaño del documento y configurar las barras de scroll (Figura 4). Posteriormente irá lanzando sucesivos eventos ekGUI_EVENT_TBL_CELL, donde pedirá a la aplicación el contenido de cada celda (Figura 5). Todos estos requerimientos se realizarán a través de la función callback establecida en tableview_OnData (Listado 1).

TableView solo pedirá el contenido de la parte visible en cada momento.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

static void i_OnTableData(App *app, Event *e)
{
    uint32_t etype = event_type(e);
    unref(app);

    switch(etype) {
    case ekGUI_EVENT_TBL_NROWS:
    {
        uint32_t *n = event_result(e, uint32_t);
        *n = app_num_rows(app);
        break;
    }

    case ekGUI_EVENT_TBL_CELL:
    {
        const EvTbPos *pos = event_params(e, EvTbPos);
        EvTbCell *cell = event_result(e, EvTbCell);

        switch(pos->col) {
        case 0:
            cell->text = app_text_column0(app, pos->row);
            break;

        case 1:
            cell->text = app_text_column1(app, pos->row);
            break;

        case 2:
            cell->text = app_text_column2(app, pos->row);
            break;
        }

        break;
    }

    }
}

TableView *table = tableview_create();
tableview_OnData(table, listener(app, i_OnTableData, App));
tableview_update(table);

2. Caché de datos

Como ya hemos comentado, en cada instante la tabla solo mostrará una pequeña porción del conjunto de datos. Con el fin de suministrar estos datos de la manera más rápida posible, la aplicación puede mantener una caché con aquellos que vayan a ser mostrados a continuación. Para ello, antes de comenzar a dibujar la vista, la tabla mandará un evento tipo ekGUI_EVENT_TBL_BEGIN donde indicará el rango de filas y columnas que necesitan actualización (Figura 6). Este evento precederá a cualquier ekGUI_EVENT_TBL_CELL visto en la sección anterior. De igual forma, una vez actualizadas todas las celdas visibles, se enviará el evento ekGUI_EVENT_TBL_END, donde la aplicación podrá liberar los recursos en caché (Listado 2).

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

static void i_OnTableData(App *app, Event *e)
{
    uint32_t etype = event_type(e);
    unref(app);

    switch(etype) {
    case ekGUI_EVENT_TBL_NROWS:
    {
        uint32_t *n = event_result(e, uint32_t);
        *n = app_num_rows(app);
        break;
    }

    case ekGUI_EVENT_TBL_BEGIN:
    {
        const EvTbRect *rect = event_params(e, EvTbRect);
        app->cache = app_fill_cache(app, rect->strow, rect->edrow, rect->stcol, rect->edcol);
        break;
    }

    case ekGUI_EVENT_TBL_CELL:
    {
        const EvTbPos *pos = event_params(e, EvTbPos);
        EvTbCell *cell = event_result(e, EvTbCell);
        cell->text = app_get_cache(app->cache, pos->row, pos->col);
        break;
    }

    case ekGUI_EVENT_TBL_END:
        app_delete_cache(app->cache);
        break;
}

TableView *table = tableview_create();
tableview_OnData(table, listener(app, i_OnTableData, App));
tableview_update(table);

3. Selección múltiple

Cuando navegamos por un TableView podemos activar la selección múltiple, que permitirá marcar más de una fila de la tabla (Figura 7).

• Utiliza tableview_multisel para activar o desactivar la selección múltiple.
• Utiliza tableview_selected para obtener las filas seleccionadas.
• Utiliza tableview_select para seleccionar un conjunto de filas.
• Utiliza tableview_deselect para de-seleccionar.
• Utiliza tableview_deselect_all para desmarcar todas las filas.
• Utiliza tableview_OnSelect para recibir un evento cuando cambie la selección.

La navegación por un TableView funciona igual que otros controles similares, como el explorador de archivos.

• [UP]/[DOWN] para desplazar verticalmente.
• [LEFT]/[RIGHT] para desplazar horizontalmente.
• [PAGEUP]/[PAGEDOWN] avanzar o retroceder una página.
• [HOME] va al inicio de la tabla.
• [END] va al final de la tabla.
• [CTRL]+clic selección múltiple con el ratón.
• [SHIFT]+[UP]/[DOWN] selección multiple con el teclado.

En selección múltiple, se producirá una de-selección automática de las filas siempre que hagamos clic liberando [CTRL] o pulsemos cualquier tecla de navegación liberando [SHIFT]. Si queremos navegar sin perder la selección previa, deberemos activar el flag preserve en tableview_multisel.

4. Configurar columnas

• Utiliza tableview_column_width para establecer el ancho de una columna.
• Utiliza tableview_column_limits para establecer limites en el ancho.
• Utiliza tableview_column_resizable para permitir estirar o contraer la columna.
• Utiliza tableview_header_visible para mostrar u ocultar la cabecera.
• Utiliza tableview_OnHeaderClick para notificar el clic sobre la cabecera.
• Utiliza tableview_column_freeze para fijar una o varias columnas (Figura 8).

5. Dibujo de rejilla

• Utiliza tableview_grid para mostrar u ocultar las líneas interiores (Figura 9), (Figura 10).

tableview_create ()

Crea un nuevo control de tabla.

TableView*
tableview_create(void);

Retorna

El TableView.

tableview_OnData ()

Establece un manejador para leer datos desde la aplicación.

void
tableview_OnData(TableView *view,
                 Listener *listener);

Observaciones

Ver Conexión de datos.

tableview_OnSelect ()

Notifica que la selección ha cambiado.

void
tableview_OnSelect(TableView *view,
                   Listener *listener);

Observaciones

Ver Selección múltiple.

tableview_OnHeaderClick ()

Notifica cada vez que se pulse sobre una cabecera.

void
tableview_OnHeaderClick(TableView *view,
                        Listener *listener);

Observaciones

Ver Configurar columnas.

tableview_font ()

Establece la fuente general para toda la tabla.

void
tableview_font(TableView *view,
               const Font *font);

tableview_size ()

Establece el tamaño por defecto del control tabla.

void
tableview_size(TableView *view,
               const S2Df size);

Observaciones

Corresponde al Dimensionado natural del control. Por defecto 256x128.

tableview_new_column_text ()

Añade una nueva columna a la tabla.

uint32_t
tableview_new_column_text(TableView *view);

Retorna

El identificador (índice) de columna.

Observaciones

Ver Configurar columnas.

tableview_column_width ()

Establece el ancho de una columna.

void
tableview_column_width(TableView *view,
                       const uint32_t column_id,
                       const real32_t width);

Observaciones

Ver Configurar columnas.

tableview_column_limits ()

Establece los límites de tamaño de una columna.

void
tableview_column_limits(TableView *view,
                        const uint32_t column_id,
                        const real32_t min,
                        const real32_t max);

Observaciones

Ver Configurar columnas.

tableview_column_resizable ()

Estable si una columna es redimensionable o no.

void
tableview_column_resizable(TableView *view,
                           const uint32_t column_id,
                           const bool_t resizable);

Observaciones

Ver Configurar columnas.

tableview_column_freeze ()

Permite fijar las primeras columnas de la tabla.

void
tableview_column_freeze(TableView *view,
                        const uint32_t last_column_id);

Observaciones

Ver Configurar columnas.

tableview_header_title ()

Establece el texto de la cabecera de una columna.

void
tableview_header_title(TableView *view,
                       const uint32_t column_id,
                       const char_t *text);

Observaciones

Ver Configurar columnas.

tableview_header_align ()

Establece la alineación del texto de la cabecera.

void
tableview_header_align(TableView *view,
                       const uint32_t column_id,
                       const align_t align);

Observaciones

Ver Configurar columnas.

tableview_header_visible ()

Establece si la cabecera de la tabla es visible o no.

void
tableview_header_visible(TableView *view,
                         const bool_t visible);

Observaciones

Ver Configurar columnas.

tableview_header_clickable ()

Establece si la cabecera de la tabla se puede pulsar como un botón.

void
tableview_header_clickable(TableView *view,
                           const bool_t clickable);

Observaciones

Ver Configurar columnas.

tableview_header_resizable ()

Establece si la cabecera permite el redimensionado de columnas.

void
tableview_header_resizable(TableView *view,
                           const bool_t resizable);

Observaciones

Ver Configurar columnas.

tableview_multisel ()

Establece el modo de selección de filas.

void
tableview_multisel(TableView *view,
                   const bool_t multisel,
                   const bool_t preserve);

Observaciones

Ver Selección múltiple.

tableview_grid ()

Establece el dibujo de las líneas interiores.

void
tableview_grid(TableView *view,
               const bool_t hlines,
               const bool_t vlines);

Observaciones

Ver Dibujo de rejilla.

tableview_update ()

Sincroniza la tabla con el origen de datos.

void
tableview_update(TableView *view);

Observaciones

Ver Conexión de datos. Deberemos llamar a esta función desde la aplicación siempre que cambien los datos vinculados con la tabla, con el fin de actualizar la vista.

tableview_select ()

Selecciona filas en la tabla.

void
tableview_select(TableView *view,
                 const uint32_t *rows,
                 const uint32_t n);

Observaciones

Ver Selección múltiple.

tableview_deselect ()

De-selecciona filas en la tabla.

void
tableview_deselect(TableView *view,
                   const uint32_t *rows,
                   const uint32_t n);

Observaciones

Ver Selección múltiple.

tableview_deselect_all ()

De-selecciona todas las filas de la tabla.

void
tableview_deselect_all(TableView *view);

Observaciones

Ver Selección múltiple.

tableview_selected ()

Devuelve las filas actualmente seleccionadas.

const ArrSt(uint32_t)*
tableview_selected(const TableView *view);

Retorna

Array con los índices de las filas seleccionadas.

Observaciones

Ver Selección múltiple.