BBjGrid paso a paso

La grid será editable si el check box que aparece en la zona superior del formulario está marcado y la edición comenzará cuando se pulse doble click sobre la celda escogida.

1. Define la ventana. Como ya lo aprendiste en los primeros pasos de BBj, tu programa que define el formulario debe tener este aspecto inicial:

rem "[PRG01] Usando un BBjGrid con sintaxis de objetos
rem
rem "Obtiene una instancia del objeto BBjAPI
rem "=======================================
LET miAPI!=BBjAPI()
rem
rem "Abre el dispositivo SYSGUI
rem "==========================
SYSGUI=UNT
OPEN (SYSGUI) "X0"
rem
rem "Obtiene la instancia del objeto BBjSysGui
rem "=========================================
LET sysgui!=miAPI!.getSysGui()
rem
rem "Valores para crear una ventana
rem "==============================
X=10
Y=10
ANCHO=700
ALTO=500
TITULO$="Formulario que usa BBjGrid"
rem
rem "Establece el contexto actual
rem "============================
sysgui!.setContext(0)
rem
rem "Crea la ventana
rem "===============
window! = sysgui!.addWindow(X,Y,ANCHO,ALTO,TITULO$)
escape

2. A continuación crea otros controles importantes de nuestro ejemplo:

window!.addStaticText(101,10,05,150,25,"Pronostico del tiempo",$0000$)
window!.addStaticText(102,160,10,200,25,"Temperatura en grados Fahrenheit",$0000$)
editable! = window!.addCheckBox(103,450,05,100,25,"Grid Editable",$0000$)

3. Crea el control Grid básico con el método correspondiente:

numfil=7
numcol=9
miGrid!=window!.addGrid(104,20,30,544,230,$8856$,numfil,numcol)

4. Establece algunos atributos de la Grid:

miGrid!.setFitToGrid(1)
miGrid!.setRowHeaderWidth(100)
miGrid!.setRowHeight(20)
miGrid!.setVisible(1)

5. A continuación definimos los títulos de encabezado usando la sintaxis de objetos. Para ello creamos un BBjVector para agregar los encabezados:

rem "Establece encabezados de columnas
rem "=================================
vector!=sysgui!.makeVector()
vector!.add("8 AM")
vector!.add("9 AM")
vector!.add("10 AM")
vector!.add("11 AM")
vector!.add("12 PM")
vector!.add("1 PM")
vector!.add("2 PM")
vector!.add("3 PM")
vector!.add("Lluvia")
miGrid!.setCoalumnHeaderText(vector!)

6. Lo mismo con los encabezados de filas, para lo cual aprovechamos el mismo vector de títulos al que le aplicamos una inicialización para reutilizar:

rem
rem "Establece encabezado de filas
rem "=============================
vector!.clear()
vector!.add("Domingo")
vector!.add("Lunes")
vector!.add("Martes")
vector!.add("Miercoles")
vector!.add("Jueves")
vector!.add("Viernes")
vector!.add("Sabado")
miGrid!.setRowHeaderText(vector!)

7. Definimos el estilo de la última columna:

miGrid!.setColumnStyle(8, sysgui!.GRID_STYLE_UNCHECKED)

8. Establecemos algunas celdas individuales como chequeadas:

rem
rem "Establece algunas celdas chequeadas
rem "===================================
miGrid!.setCellStyle(1,8,sysgui!. GRID_STYLE_CHECKED)
miGrid!.setCellStyle(4,8,sysgui!. GRID_STYLE_CHECKED)

9. Establece los colores de las columnas. Los objetos color se generan usando BBjSysGui::makeColor. (Aprovecha de notar la sintaxis multilínea de la construcción IF..THEN..ELSE..ENDIF)

rem
rem "establece colores de las columnas
rem "=================================
for col=0 to 8
    if col<3 then
        let color!=sysgui!.makeColor("green")
     else
        if col<6 then
            let color!=sysgui!.makeColor("yellow")
         else
            if col<8 then
                let color!=sysgui!.makeColor(255,50,50)
             else
                let color!=sysgui!.makeColor("blue")
             endif
         endif
     endif
    miGrid!.setColumnBackColor(col,color!)
next col

10. Ahora colocamos texto en las celdas de la Grid usando BBjGrid::setCellText(BBjVector)

rem "Establece el texto en las celdas usando setCellText(BBjVector)
rem "Primero se llena el vector. Se cargan los datos en las filas partiendo
rem "desde la fila 0, columna 0 for as many strings are in the BBjVector
vector!.clear()
for fila=0 to 6
    for col=0 to 8
        if col = 8
            buff$=""; REM “la ultima columna sin texto
        else
            buff$=str(50+fila+col)
        endif
        vector!.add(buff$)
    next col
next fila
miGrid!.setCellText(vector!)

11. Establece propiedades de la grid

miGrid!.setUpdateCached(0)
gosub deja_editable
rem
rem "establece la propiedad de tomar y arrastrar
miGrid!.setDragAccept(1)

La apariencia de nuestra Grid debiera ser semejante a esta:



La apariencia de la Grid cuando está siendo editada debiera ser semejante a esta:



12. Tenemos que registrar los Callbacks e iniciar el ciclo de eventos. El ciclo de eventos es necesario para el manejo opcional de la grid.

REM "Registra callbacks para controlar algunos eventos
REM "Solo necesitas registrar eventos que quieres manejar
CALLBACK(ON_CHECK_ON,ACTIVA_EDICION,sysgui!.getContext(),editable!.getID())
CALLBACK(ON_CHECK_OFF,DESACTIVA_EDICION,sysgui!.getContext(),editable!.getID())
CALLBACK(ON_GRID_DOUBLE_CLICK,DOBLECLICK_GRID,sysgui!.getContext(),miGrid!.getID())
CALLBACK(ON_CLOSE,CIERRA_APLIC,sysgui!.getContext())
rem
rem "Procesa Eventos
rem "===============
PROCESS_EVENTS
REM

13. Cuando la casilla de verificación es marcada o desmarcada el Callback registrado llamara a una de éstas dos subrutinas, que activan o desactivan la edición en la grid

REM "Activa o desactiva edicion
REM "==========================
ACTIVA_EDICION:
miGrid!.setGridEditable(1)
RETURN
REM
DESACTIVA_EDICION:
miGrid!.setGridEditable(0)
RETURN
REM

14. Si el usuario hace doble click sobre una celda, pero la grid no está “editable”, usa métodos para averiguar el estado o texto que contiene la celda y entonces despliega un mensaje indicando el contenido de la celda. Para recuperar la cadena de evento usa BBjSysGui::getLastEvent. Esto permite al método recuperar más información desde el evento, en este caso la fila y la columna donde se hizo el doble click.

DOBLECLICK_GRID:
eventoGrid!=sysgui!.getLastEvent()
fila=eventoGrid!.getRow()
colu=eventoGrid!.getColumn()
if MiGrid!.isEditable()=0 then
if colu=numcol-1 then
            REM “REVISA EL ESTADO DE LA COLUMNA
            marcado = miGrid!.getCellState(fila,colu)
            if marcado=0 then
                  mensaje$="No se pronostican lluvias"
            else
                  mensaje$="Se pronostican lluvias"
            endif
      else
REM “Obtiene el texto de la celda
CELDA$=miGRID!.getCellText(fila,colu)
mensaje$="La temperatura a esa hora será de "+$0A$+CELDA$+$0A$+"grados Fahrenheit"
endif
REM "DESPLIEGA EL MENSAJE CORRESPONDIENTE
REM "====================================
X=msgbox(mensaje$,0+48+0,”Pronostico”)
endif
RETURN
REM

15. Agregamos la necesario subrutina para salir de la aplicación:

REM "Rutina Callback llamada cuando el usuario cierra la ventana de la aplicación
REM "============================================================================
CIERRA_APLIC:
RELEASE
RETURN

La apariencia de la grid después de hacer doble click cuando no está en modo editable:

Así cerramos el ciclo completo de la aplicación manejando BBjStandardGrid con mucha de la funcionalidad más común de la cual disponemos en la nueva sintaxis de objetos de BBj.

Seguro este tutorial te permitirá apreciar la simplificación que logramos usando esta nueva modalidad. Ahora aplica tus conocimientos a las grids de tus propios programas.