Page Comparison

----
{scrollbar}
----
En esta sección se detallan los pasos necesarios para hacer que el reporte luzca mejor. En particular se verá cómo
* Alinear las celdas de datos
* Formateo de elementos numéricos
* Formateo de los encabezados
* Ajustes a la fuente utilizada
\\

Tal como se vio en secciones anteriores, al seleccionar un elemento del reporte, el Editor de Propiedades muestra atributos relacionados con el elemento seleccionado permitiendo así modificar su comportamiento o presentación.

Esto permite modificar el formato de cada uno de los elementos del reporte en forma independiente logrando una gran flexibilidad.

Sin embargo, también es posible ajustar el formato del reporte definiendo estilos que permitan controlar las propiedades de varios elementos similares en forma simultánea. Este tutorial explica cómo formatear el reporte haciendo uso de los estilos.

h3. Definiendo Estilos

En el reporte construido hasta el momento se pueden identificar los siguientes tipos de elementos
* Títulos en el encabezado de la tabla
* Nombre del Vendedor en el encabezado del grupo de Vendedores
* Nombre del Vino en la fila de detalle
* Valores numéricos correspondientes a Cantidad de Litros y Venta Neta en la fila de detalle
* Subtotales para los valores numéricos

Esta clasificación sugiere la necesidad de contar con estilos diferentes para cada caso.

h5. Estilo para el Encabezado de la Tabla

# Seleccione la opción de menú Element -> New Style...
Esto despliega el editor de estilos. Este editor puede invocarse mediante otros mecanismos como por ejemplo botón derecho sobre el elemento al que luego se le asignará el estilo
# Ingrese *Encabezado* como nombre del Estilo (Custom Style)
# Seleccione el grupo de atributos *Text Block* a la izquierda
# Seleccione la alineación del texto (Text alignment) centrada
# Seleccione el grupo de atributos *Border*
# Defina los bordes superior e inverior de tipo *Solid* y de ancho *1 point*
!EditorEstilos.png|vspace=10,hspace=10!
# Acepte los cambios para cerrar el Editor de Estilos
Con esto se ha creado el nuevo estilo Encabezado el cual podrá asignarse a cualquier elemento del reporte
# Seleccione la etiqueta Vinos_Vino del encabezado de la tabla
# En el Editor de Propiedades de dicha etiqueta, en el grupo General, seleccione el estilo (style) recién creado
El reporte se ajustará para formatear la etiqueta de acuerdo al formato del estilo
# Asigne el estilo a las etiquetas Litros Vendidos y Venta Neta

h5. Estilo para el Encabezado del Grupo de Vendedores

# Cree un nuevo estilo llamado Encabezado Grupo
# Seleccione el grupo de atributos *Background* y defina como color de fondo RGB(240,240,240)
# Asigne este estilo a la etiqueta correspondiente al nombre del Vendedor Vendedores_Vendedor

Hasta el momento el reporte debería verse similar a la siguiente figura
!FormateandoEncabezados.png|vspace=10,hspace=10!

h5. Juntando Celdas

El encabezado del grupo se vería más vistoso si abarcara el ancho total del reporte. Esto puede lograrse juntando celdas (Merge Cells)
# Seleccione la celda donde se encuentra la etiqueta Vendedores_Vendedor
Notar que para seleccionar la celda debe hacerse click en el espacio disponible entre las líneas de división de la tabla y el borde de la etiqueta. Verificar en el Editor de Propiedades que se ha seleccionado la celda y no la etiqueta. El título de dicho editor debería decir *Properties Editor - Cell* y no *Properties Editor - Data*
# Seleccione el resto de las celdas de la fila de encabezado de grupo mientras se mantiene presionada la tecla SHIFT
La selección se irá agrandando hasta abarcar todas las celdas de dicha fila
# Presione el botón derecho del mouse y seleccione la opción *Merge Cells*
Las celdas de la fila de encabezado del grupo se juntarán de modo que quede una sola que abarque el ancho total de la tabla. El estilo con el color de fondo deja más en evidencia esto

h5. Estilo para valores numéricos de detalle

# Cree un nuevo estilo llamado Valor
# Seleccione el grupo de propiedades *Text Block* y defina la alineación a la derecha
# Seleccione el grupo de propiedades *Format Number*
# Elija el formato predefinido *Fixed* con 2 decimales y active el checkbox del separador de miles
# Asigne este nuevo estilo a los elementos Litros Vendidos y Venta Neta de la fila de detalle

h5. Estilo para los subtotales

# Cree un nuevo estilo llamado Subtotal
# Ajuste la alineación a a la derecha y el formato numérico similar al del estilo Valor
# Defina un borde superior que de la idea de totalización
# Asigne este nuevo estilo a los subtotales de Litros Vendidos y Venta Neta

h5. Indentación de la fila de detalle

Por último ajustaremos el ancho de la primera columna para que tenga un tamaño fijo y dé la noción de indentación necesaria para identificar los vinos que corresponden a cada vendedor
# Seleccione la tabla
Esto muestra selectores para las filas y columnas alrededor de la tabla
# Seleccione la primera columna
# Especifique un ancho de 1 cm para dicha columna en el Editor de Propiedades

El reporte formateado debería verse más o menos así
!ReporteFormateado.png|vspace=10,hspace=10!

h3. Estilos predefinidos

Existe un conjunto de estilos ya predefinidos con la herramienta que permiten formatear elementos famosos del reporte.
Tal es el caso de tablas, filas, celdas, etc.
A continuación se muestra el editor de estilos donde se ha seleccionado la opción de Estilo Predefinido, lo cual permite seleccionar el estilo que se desea modificar.
!EstilosPredefinidos.png|vspace=10,hspace=10!

En particular la imagen muestra la selección del estilo *report* que permite configurar el formato de todo el reporte.

h3. Formato Condicional

Permite resaltar elementos cuando ocurre alguna condición, la cual puede ser sobre el propio dato u otro.

Por ejemplo:
* Resaltar ventas por debajo de un monto.
* Resaltar Vendedores con ventas por debajo del promedio.
* Resaltar valores negativos.
* Coloración de acuerdo a una meta (rojo, amarillo, verde).

!reportHighlights.png|vspace=10,hspace=10!

Otra alternativa puede ser alternar el color de las filas, facilitando la lectura de la tabla con muchos datos.

!expressionRowsColor.png|vspace=10,hspace=10!

!rowsColor.png|vspace=10,hspace=10!
----