Manuales de TuGA Página Principal

Uso de CSS en pantallas y reportes.

Notaciones de este documento.

1. Cuando se muestra una frase que contiene XX quiere decir que las XX son reemplazadas por el código identificador de ese elemento

2. Cuando se muestra una frase que contiene la forma YYnombre (o similar), se hace referencia al nombre del elemento, por ejemplo :

div_etiqueta_YYnombredbgrid

Puede hacer referencia a un control dbgrid llamado viajeros

div_etiqueta_viajeros

Recomendación para trabajar con los estilos de pantallas y reportes. Utilice Mozilla Firefox como navegador e instale la extensión webdeveloper; con esta herramienta podrá identificar fácilmente el nombre y la clase de cada div.

Pantallas.

Cada pantalla está identificada por un código único al igual que los botones contenidos en ella. Cada bloque de estilos (div) es una combinación de una cadena que incluye el código de dicha pantalla, los principales bloques son los siguientes (reemplace XX con el código de la pantalla):

div_main_XX: bloque principal que encierra toda la pantalla (incluye la barra de titulo y el formulario), hereda la clase mainpantalla, ejemplo:

<div id="div_main_172" class="mainpantalla">

div_barra_X: barra de titulo de la pantalla, hereda la clase barra, ejemplo:

 <div id="div_barra_172" class="barra">
 
div_pantalla_X: bloque que encierra el formulario, hereda la clase pantalla, ejemplo:
 
 <div id="div_pantalla_172" class="pantalla">
 

El formulario está identificado por medio del id divformXX y su nombre es FormXX así que puede referirse a él usando javascript por cualquiera de las siguientes opciones:

document.getElemebtById(‘divformXX’)

Ó

document.FormXX

Por cada campo que se crea, se agregan dos elementos: la etiqueta y el campo. La etiqueta tiene el identificador div_etiqueta_YYnombreetiqueta y hereda la clase etiquetas, los campos tienen el identifcador div_campo_YYnombrecampo y hereda la clase campos, ejemplo:

<div id="div_etiqueta_usuarioreporta" class="etiquetas">
 Usuario que Reporta
</div>
 
<div id="div_campo_usuarioreporta" class="campos">
 <input type="text" name="usuarioreporta" size="40" id="usuarioreporta" value="" maxlength="80">
</div>

Los botones son agrupados por un bloque con identificador div_botones_XX que hereda la clase botones. Cada botón tiene como identificador div_boton_YYnombredelboton. Ejemplo:

<div id="div_botones_1" class="botones">
 <input type="hidden" name="_boton_presionado" value="">
 <input id="div_boton_Ejecuta un programa" type="button" name="Ejecuta un programa" value="Ejecuta un programa" onclick="null;Form1._boton_presionado.value='131';validar1(Form1,'null');">
 <input id="div_boton_Ejecuta un programa" type="button" name="Ejecuta un programa" value="Ejecuta un programa" onclick="null;Form1._boton_presionado.value='131';validar1(Form1,'null');">
 <input id="div_boton_Otro reporte" type="button" name="Otro reporte" value="Otro reporte" onclick="null;Form1._boton_presionado.value='136';genReporte1(Form1,'/Tuga/generador/reporte.jsp');">
 
</div>

Reportes.

Bloques de contenido

Los principales bloques en los reportes son los siguientes:

tituloreporte: Contiene el titulo del reporte

maincontainer: Es el bloque que agrupa todos los bloques de contenido

Cada bloque de contenido es agrupado por un bloque que tiene el id contenidoX donde X es el código del bloque dentro de TuGa y hereda la clase contrep, ejemplo:

<div id="contenido113" class="contrep">
<div id="graph113" class="contgrap">
<p><img src='../TugaChartServlet?index=113' border='0'></p>
</div>

Cuando el bloque de un reporte hace referencia a una tabla con el resultado de una sentencia SQL, el identificador de la tabla es tablaX donde X es el código del bloque dentro de TuGa.

Cuando el bloque de un reporte hace referencia a un gráfico, el identificador del bloque que contiene el grafico es graphX donde X es el código del bloque dentro de TuGa.

FAQ del uso de estilos en pantallas y reportes.

FAQ del uso de estilos en pantallas y Reportes

¿Cómo oculto el titulo de una pantalla?. 4

¿Cómo oculto el titulo de un reporte?. 5

¿Cómo defino el ancho de una pantalla?. 5

¿Cómo define el largo (alto) de una pantalla?. 6

¿Cómo defino el ancho de todas las etiquetas?. 6

¿Cómo defino el ancho de todos los campos?. 6

¿Cómo quito la etiqueta de un campo?. 6

¿Cómo cambio el ancho de un dbgrid?. 6

¿Cómo cambio el ancho de la línea de un dbgrid?. 6

¿Cómo quito la etiqueta del dbgrid?. 6

¿Cómo oculto un botón?. 7

¿Cómo especifico el ancho de un reporte?. 7

¿Cómo separo los bloques de un formulario con un texto?. 7

¿Cómo especifico la alineación de las celdas en un reporte?. 7

En un reporte compuesto por varias tablas, gráficos o pantallas, ¿Cómo cambio la alineación de un componente (tabla, grafico o pantalla) en particular (por ejemplo, alinear un gráfico a la izquierda)?. 8

¿Cómo oculto el titulo de una pantalla?

El titulo de la pantalla está identificado bajo el div div_barra_X donde X corresponde al código de la pantalla, por ejemplo:

div_barra_118 hace referencia al título de la pantalla de código 118.

Para deshabilitar el titulo existen dos opciones:

1. Ocultar el titulo por medio de javascript. Para ello, en la opción “JS / CSS de pie” escriba el siguiente código (haciendo la referencia correcta al div del título) :

<script>

document.getElementById("div_barra_118").style.display = 'none';

</script>

2. Ocultar el título por medio de estilos (CSS). Para ello en la opción “JS / CSS de inicio” escriba el siguiente bloque (haciendo la referencia correcta al div del título):

<style type="text/css">

#div_barra_143 {

display: none;

}

</style>

¿Cómo oculto el titulo de un reporte?

El titulo de un reporte está identificado bajo el div tituloreporte. Para deshabilitar el titulo, en la opción “JS/CSS” escriba el siguiente bloque:

<style type="text/css">

#tituloreporte{

display: none;

}

</style>

¿Cómo defino el ancho de una pantalla?

En CSS usando la clase

#tituloreporte{

display: none;

}

O usando el ID de la pantalla

#div_main_XX{

width: 800px;

}

¿Cómo define el largo (alto) de una pantalla?

#div_pantalla_XX {

height: 2900px;

}

¿Cómo defino el ancho de todas las etiquetas?

.etiquetas {

width: 300px;

}

¿Cómo defino el ancho de todos los campos?

.campos {

width: 500px;

}

¿Cómo quito la etiqueta de un campo?

#div_etiqueta_YYnombrecampo{

display: none;

}

¿Cómo cambio el ancho de un dbgrid?

.grid {

width: 800px;

}

¿Cómo cambio el ancho de la línea de un dbgrid?

.tuga_dbgrid_linea {

width: 1400px;

}

¿Cómo quito la etiqueta del dbgrid?

#div_etiqueta_YYnombredbgrid {

display: none;

}

#div_campo_YYnombredbgrid {

width: 100%

}

¿Cómo oculto un botón?

Programe por medio de javascript la siguiente instrucción:

document.getElementById(‘div_boton_YYnombreBoton’).style.display = ‘none’;

¿Cómo especifico el ancho de un reporte?

Para todas las consultas dentro de un reporte se especifica por medio de la clase

.tuga_grid{

width: 600px;

}

Para una bloque en partículas, se usa el ID de la consulta (ver código fuente del reporte generado)

#contenidoXX {

width: 600px;

}

¿Cómo separo los bloques de un formulario con un texto?

Se debe utilizar un campo con el tipo de dato USERDEF y en el texto poner el titulo deseado, ejemplo “Datos Laborales” con variable txt_datos_laborales.

Luego, por CSS ocultar la etiqueta div_etiqueta_txt_datos_laborales y dar formato al texto como se desee.

#div_etiqueta_txt_datos_laborales {

display:none;

}

#div_campo_txt_datos_laborales{

font_weight: bolder;

width: 100%;

border-bottom: 2px solid;

}

¿Cómo especifico la alineación de las celdas en un reporte?

Ejemplo:

.tuga_grid {

text-align: left;

}

En un reporte compuesto por varias tablas, gráficos o pantallas, ¿Cómo cambio la alineación de un componente (tabla, grafico o pantalla) en particular (por ejemplo, alinear un gráfico a la izquierda)?

Primero se debe identificar el bloque, una vez identificado programe el formato por CSS de la siguiente forma:

1. Si se trata de una pantalla incluida

#contenidoXX {

text-align: left;

}

2. Si es una tabla con un SQL (para alinearlo a la izquierda)

# tablaXX {

margin-left: 0;

margin-right: 0;

}

3. Si es un gráfico

#graphXX {

text-align: left;

}