UNIDAD 3: ARREGLOS

TEMA JSCRIPT 6: TABLAS VISUALES (TABLE)

Tablas visuales nos permiten presentary manipular informacion al usuario en forma tabular, pero tambien se pueden utilizar para formatear difernetes tipos de informacion en una pagina web(observar que en varias partes de este libro sobre todo en cuadros se han estado usando tablas para formatear la informacion)

Uno de los elementos importantes a entender con respecto a componentes o tablas visuales en el modelo de programacion que se ha estado analizando, es que existen los siguientes tipos de tablas visuales:

El objeto TABlE de HTML que es el control mas basico de este tipo.

El WARPER de este objeto es decir HTMLTABLE con una nueva serie de atributos y metodos.

El WEBCONTROL TABLE que permite procesar y manipular un objeto de tipo tabla en forma natural, con propiedades y metodos muy comunes a todas las propiedades y metodos de los diversos WEBCONTROLS que se han venido estuduando a lao largo de este libro.

DATAGRID WEBSERVERCONTROL es un excelente objeto que permiten desplegar y editar tablas, con la especificacion de que un datagrid debera estar enlazado(databound) fisicamente a una fuente de datos(datasource) del mismo tipo, por ejemplo una variable de tipo arreglo como las que se analizo en TEMA JSCRIPTs pasados o por ejemplo una tabla de ACCESS.

Para proposito de este TEMA JSCRIPT se analizara el control TABLE DE WEBCONTROL, en razon de que este curso se ha centrado en WEBCONTROLS y el componente, objeto o control DATAGRID se estudia y usa mas adelante en la quinta unidad.

Este componente es de los mas importantes, para el procesamiento de muchos datos, permite concentrar, procesar y mostrar gran cantidad de informacion para la vista del usuario.

Este componente presenta, manipula y procesa conjuntos de datos de tipo strings en forma tabular, es decir en forma de tablas, matrices, cuadros concentrados, ejemplo;

CIA ACME

INGRESOS POR VENTAS MENSUALES

MILLONES DE PESOS

ENE FEB MAR ABR
Suc A 1 2 3 4
Suc B 5 6 7 8
Suc C 9 10 11 12

Como nota curiosa: aqui se esta usando el componente table de html

Recordar que son los datos numericos internos quienes se procesan (es decir, se capturan, se realizan operaciones con ellos, se despliegan, etc.), es la informacion externa quien le da sentido.

Es importante tambien entender que un objeto TABLE es una coleccion o conjunto de objetos de tipo TABLEROW( y por ser objetos cada renglon tambien debera ser creado usando el operador new) ademas de que cada celda de cada renglon tambien es un objeto de tipo TABLECELL( es decir cada celda tambien debera ser creada usando new).

Algunas de sus propiedades y metodos mas interesantes que se usan en el programa ejemplo son:

CellPadding.- Se usa para definir el tamano del marco o separador de la celdas

GridLine.- Se usa para indicar si el marco debera ser solo vertical, horizontal o ambos.

Text.- Propiedad de la celda(TABLECELL) que se usa para manipular y procesar el dato.

Add.- Otra propiedad de CELL y tambien de ROW que se puede usar para cargar un dato en una celda o una celda en un renglon.

Como se observa de las dos propiedades anteriores CELDA es el elemento mas importante de una TABLA, CELDA tiene muchas propiedades y metodos y en el caso particular de TEXT y ADD recordar que TEXT tiene las caracteristicas de get-set que ya se ha analizado en TEMA JSCRIPTs anteriores y por tanto sera mas util o usado que el metodo ADD.

Otro aspecto importante a recordar, es que TABLE no permite edicion directa por parte del usuario de sus celdas, por ese motivo se usara un componente externo TextBox para capturas, asi como el evento click de un button apropiado.

Para procesar todos los elementos de la tabla, solo recordar que se deben usar dos ciclos for uno externo para controlar renglones y uno interno para controlar columna.

Si solo se quiere procesar un solo renglon o columna, entonces solo se ocupara el ciclo contrario y el renglon o columna original se daran como constantes.

Ejemplo prog20.aspx

<% // creando una pagina %>
<%@ PAGE LANGUAGE=JSCRIPT %>
<% // creando y definiendo el objeto tabla %>
<FORM RUNAT=SERVER>
<ASP:TABLE ID=TABLA RUNAT=SERVER CELLPADDING=10 GRIDLINES=BOTH /></ASP:TABLE>
Ren<ASP:TEXTBOX ID=REN SIZE=2 VALUE=0 RUNAT=SERVER/>
Col<ASP:TEXTBOX ID=COL SIZE=2 VALUE=0 RUNAT=SERVER/><BR>
DAME DATO<ASP:TEXTBOX ID=DATO SIZE=10 RUNAT=SERVER/>
<ASP:BUTTON TEXT=CARGAR ONCLICK=CARGAR RUNAT=SERVER/><BR>
<ASP:BUTTON TEXT=PROCESAR ONCLICK=PROCESO RUNAT=SERVER/><BR></FORM>
<SCRIPT RUNAT=SERVER>
//CREANDO E INICIALIZANDO TABLA AL TIEMPO DE EJECUCION
function Page_Load(sender: Object, e: EventArgs):void
{
// GENERANDO E INICIALIZANDO RENGLONES Y COLUMNAS
// creando los renglones de la tabla
for (var cantreng = 1; cantreng <= 3; cantreng++)
{ var renglon: TableRow = new TableRow();
// creando las celdas o columnas del renglon
for (var cantcol = 1; cantcol <= 4; cantcol++)
{var celda: TableCell = new TableCell();
// cargando celda con un dato cualquiera para inicializar
celda.Text = "dato";
// cargando la celda al renglon
renglon.Cells.Add(celda);
}
// cargando el renglon a la tabla
TABLA.Rows.Add(renglon);
}
}
function CARGAR(sender: Object, e: EventArgs):void
{
var reng = System.Int32.Parse(REN.Text);
var col = System.Int32.Parse(COL.Text);
TABLA.Rows[reng].Cells[col].Text =DATO.Text;
col++;
DATO.Text="";
if (col==4){reng++; col=0;};
if (reng==3){reng=0;col=0;DATO.Text="TABLA LLENA";};
REN.Text=reng.ToString();
COL.Text=col.ToString();
}
function PROCESO(sender: Object, e: EventArgs):void
{
var temp: int;
// procesando y sumandole 10 puntos al dato y desplegando
for(var reng = 0; reng <= 2; reng++)
for(var col = 0; col <= 3; col++)
{
temp =System.Int32.Parse(TABLA.Rows[reng].Cells[col].Text);
temp = temp+10;
TABLA.Rows[reng].Cells[col].Text=temp.ToString(); };
}
</SCRIPT>

Se empieza creando un objeto de tipo pagina (PAGE) de html, la razon de esto es doble, primero porque se necesita crear y tambien inicializar un objeto table, y se aprovecha el metodo ONLOAD DE PAGE para realizar este proceso, es decir en cuanto se carga la pagina se inicializa la tabla.

En cuanto a la creacion e inicializacion de la tabla, recordar que TABLEROW y TABLECELL son objetos y por tanto se usa el operador new.

Recordar tambien que cuando se crean o inicializan tablas, se usa la CANTRENG y CANTCOL, sim embargo cuando se va a acceder o manipular las celdas mas adelante en el programa se debera usar notacion [0][0].

Observar que Celda usa el metodo set en CELDA.TEXT=DATO;

Para cargar la celda al renglon respectivo asi como para cargar el renglon a la tabla(otro objeto tambien) se usa el metodo ADD.

Ya dentro del metodo de CARGAR observar que para procesar una celda determinada, se debera usar toda la ruta completa es decir TABLA.RENGLON.CELDA; en el caso de renglon y columna o celda respectiva usando su [indice] correspondiente.

Como se esta cargando TEXT de TextBox a TEXT de CELL, solo se igualaron las propiedades respectivas.

El resto de codigo en CARGAR ya se analizo en TEMA JSCRIPT anterior, solo es para validar no salir de los limites de la tabla, avisar cuando ya se lleno y dejarla lista para una nueva captura, se usan los dos textboxs como indices de reng y col respectiva.

En el metodo PROCESO, se usan los ciclos normales de for(renglon) y for(columna), los indices empiezan en 0, y el metodo TEXT de CELL con todas las notas vistas en TEMA JSCRIPTs anteriores.

Corrida prog20.aspx

image257.jpg

Un proceso muy comun con tablas, cuadros y concentrados es agregarles listas de totales y promedios ya sea por columna o por renglon, o ambas , por ejemplo;

CIA ACME

INGRESOS MENSUALES

(MILES DE PESOS)

ene feb mar totsuc promsuc
Suc a 1 2 3 4 2
Suc b 4 5 6 15 5
Suc c 7 8 9 24 8
Suc d 10 11 12 33 11
totmes 22 26 30
promes 5.5 6.5 7.9

En este ejemplo aparte de la tabla se ocupan 4 listas, dos para totales y dos para promedios.

El Codigo, para este tipo de problemas ya se dio en el TEMA JSCRIPT de arreglos normales tipo tabla.

TAREAS PROGRAMACION JSCRIPT

1.- Construir un concentrado que despliegue los costos fijos de tres diversos productos que se fabrican en cuatro sucursales de una empresa MAQUILADORA.

2.- Construir un concentrado que contenga los ingresos por ventas mensuales de los 4 primeros meses del ano de tres sucursales de una cadena refaccionaria, agregar listas de ingresos totales por mes e ingresos promedios por sucursal.

3.- Construir un cuadro que contenga las calificaciones de 5 materias de cuatro alumnos cualesquiera, incluir promedios de calificaciones por materia y por alumno.

Politica de Privacidad