Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

...

Wiki Markup
----
{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.
----
{scrollbar}
{scrollbar}

...

In this section the necessary steps to make the report look better are detailed.
In particular we'll see how to:

  • Align data cells
  • Format numeric elements
  • Format headers
  • Adjust the selected font

Just like it was seen in the previous section, when selecting an element in the report, the Properties Editor shows the attributes related to the selected element thus allowing us to modify its behavior or presentation.

This lets us modify the format of each of the elements in the report independently, thus achieving great flexibility.

However, it is also possible to adjust the format of the report by defining styles that will let us control the properties of several similar elements simultaneously.
This tutorial explains how to format the report through the use of styles.

Defining Styles

In the report built so far the following elements can be identified:

  • Titles in the table header.
  • Salesperson's name in the Salespeople group header
  • Name of the Wine in the detail row.
  • Numeric values corresponding to the Litres sold and Net Sales in the detail row.
  • Subtotals for the numeric values.

This classification suggests the need to count on different styles for each case.

Style for the Table Header
  1. Select the option New Style from the Element menu (Element -> New Style...)
    This displays the styles editor. This editor can be invoked through other mechanisms, such as right clicking on the element to be given a new style.
  2. Enter Header as the Style name (Custom Style)
  3. Select the group of attributes Text Block on the left
  4. Select a centered Text alignment
  5. Select the group of attributes Border
  6. Define the top and bottom borders as Solid with a width of 1 point
    Image Added
  7. Confirm changes to close the Style Editor.
    Thus we have created the new Header style which could be assigned to any element in the report.
  8. Select the label Wines_Wine (Vinos_Vino)from the table header
  9. In the Properties Editor, in the General group, select the recently created style.
    The report will adjust to format the label according to the format of the style.
  10. Asign the style to the Litres Sold and Net Sales labels.
Style for the Salespeople Group Header
  1. Create a new style called Group Header.
  2. Select the group of attributes Background and define y define RGB(240,240,240)as the background color.
  3. Asign this style to the label corresponding to the Salesperson's name (Vendedores_Vendedor)

So far the report should look something like the following image.
Image Added

Merging Cells

The group header would look more attractive if it were spread over all the width of the report. This can be achieved by Merging Cells.

  1. Select the cell where the Salespeople_Salesperson label is (Vendedores_Vendedor)
    Please note that in order to select the cell you must click on the available space between the division lines of the table and the edge of the label. In the Properties Editor, make sure that the cell, not the label, has been selected.
    The title of that editor should read Properties Editor - Cell and not Properties Editor - Data
  2. Select the remaining cells in the group header row while you keep the SHIFT key pressed.
    The selection will enlarge to contain all the cells in such row.
  3. Press the right mouse button and select the option Merge Cells
    The cells in the group header row will merge so that there will be only one covering all the width of the table. The style with a background color makes this even more evident.
Style for detail numeric values
  1. Create a new style named Value.
  2. Select the properties group Text Block and define the right alignment
  3. Select the properties group Format Number
  4. Choose the predefined format Fixed with 2 decimal positions and activate the checkbox for the thousand separator.
  5. Assign this new style to elements Litres Sold and Net Sales in the detail row.
Style for the subtotals
  1. Create new style called Subtotal
  2. Adjust alignment to the right and the numeric format similar to the Value style.
  3. Define a top and bottom border to suggest totalizing.
  4. Assign this new style to subtotals Litres sold and Net Sales.
Indenting the detail row

Finally, we will adjust the width of the first column so that it has a fixed size and suggests the necessary indentation to identify the wines that correspond to each salesperson.

  1. Select the table
    This shows selectors for the rows and columns around the table.
  2. Select the first column
  3. Specify a width of 1 cm for that column in the Properties Editor.

The formatted report should look more or less like this.
Image Added

Predefined Styles

The tool includes a set of predefined styles that enable you to format relevant elements in the report.
Such is the case of tables, rows, cells, etc
Below, you can see the Styles Editor, where the option Predefined Style has been selected, which enables us to select the style you wish to modify.
Image Added

In particular, the image shows the selection of report style that allows for configuration of all the report.

...

Wiki Markup
{scrollbar}