Banana.Report.ReportStyleSheet

The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
It contains multiple Banana.Report.ReportStyle objects.

Create a report stylesheet

A report stylesheet object is created using the function Banana.Report.newStylesheet().

// Create a new stylesheet for the report
var stylesheet = Banana.Report.newStyleSheet();

Page size and orientation

At this moment the report is rendered based on the page size defined in the default printer device.
You can't define a page size, but you can set the orientation with the Style @page.

Page orientation can't be set only once per report, you can't switch from potrait to landscape. 

var stylesheet = Banana.Report.newStyleSheet();
stylesheet.addStyle("@page").setAttribute("size", "landscape");

Methods

addStyle(selector)

Create a new style with the given selector. The return object is of type Banana.Report.ReportStyle.

The syntax of selector follows the CSS specification.

• Style name without a preceding dot are reserved predefined tags like "td", "p", "table",... ( e.g. 'addStyle("td")' )
• Style name for a new custom class need a preceding dot "." ( e.g. 'addStyle(".myStyle")' )
  The dot name is not used when adding the class name to the element

report.addParagraph("Text to print 24pt", "myStyle");
var style = stylesheet.addStyle(".myStyle");
myStyle.setAttribute("font-size", "24pt");
myStyle.setAttribute("text-align", "center"); 

report.addCell("Text to print");
var styleTd = stylesheet.addStyle("td");
styleTd.setAttribute("font-weight", "bold");

addStyle(selector, attributes)

Create a new style with the given selector and attributes. The return object is of type Banana.Report.ReportStyle.

The syntax of selector and attributes follow the CSS specification.

var style2 = stylesheet.addStyle(".style2", "font.size: 24pt; text-align: center");

parse(text)

Load the styles from the given text. The text follow the CSS specification.

stylesheet.parse(
  "p.style1 {font-size:24pt; text-align:center;}" +
  "@page {size:A4 landscape;}"
  );

See the How to use CSS file  tutorial example.

The selector

The selector follows the css syntax.

Example of selectors:

• .xyz
  Select all elements with class xyz. It is used with a preceding dot "." before the class name.
  When you set the class to a ReportElement you enter the name without "."
• table
  Select all tables
• table.xyz
  Select all tables with class xyz
• table.xyz td
  Select all cells in tables with class xyz

• @page
  Select the page
• body
  Select the content of the report
• phead
  Select the page header
• pfoot
  Select the page footer
• div
  Select the section
• p
  Select the paragraph
• table
  Select the table
• caption
  Select the caption
• thead
  Select the table header
• tbody
  Select the table body
• tfoot
  Select the table footer
• tr
  Select the table row
• td
  Select the table cell

You can get the tag of an element through the method getTag();

Function for adding styles

When you have multiple styles it would be helpful to add a function for all the styles you need. For example:

function exec() {

  // Create a new report object with the title "Report title"
  var report = Banana.Report.newReport("Report title");
  
  // Add example text for each style in the report
  report.addParagraph("Hello World", "title");                     // Example text for title style
  report.addParagraph("Subtitle Example", "subtitle");             // Example text for subtitle style
  report.addParagraph("Header Example", "header");                 // Example text for header style
  report.addParagraph("Data Example", "data");                     // Example text for data style
  report.addParagraph("Centered Text Example", "centerAlign");     // Example text for center alignment
  report.addParagraph("Right-Aligned Text Example", "rightAlign"); // Example text for right alignment
  report.addParagraph("Footer Example", "footer");                 // Example text for footer style

  // Create a new stylesheet object for the report
  var stylesheet = Banana.Report.newStyleSheet();

  // Call the function to define and apply styles to the stylesheet
  addStyles(stylesheet);

  // Display the report in a preview window with the applied stylesheet
  Banana.Report.preview(report, stylesheet);
}

// Function that defines all the CSS styles for the report elements
function addStyles(stylesheet) {

    // Style for headers: bold font and a bottom border
    stylesheet.addStyle(".header", "font-weight: bold; border-bottom: 1px solid black;");
    
    // Style for data cells: padding and a light bottom border
    stylesheet.addStyle(".data", "padding: 5px; border-bottom: 0.5px solid #ddd;");
    
    // Style to center-align text
    stylesheet.addStyle(".centerAlign", "text-align: center");
    
    // Style to right-align text
    stylesheet.addStyle(".rightAlign", "text-align: right");
    
    // Style for the main title: larger font, bold, centered, with top margin
    stylesheet.addStyle(".title", "font-size: 16px; font-weight: bold; text-align: center; margin-top: 20px;");
    
    // Style for subtitles: smaller font, centered, with bottom margin
    stylesheet.addStyle(".subtitle", "font-size: 10px; text-align: center; margin-bottom: 20px;");
    
    // Style for the footer: small font, centered, with top margin
    stylesheet.addStyle(".footer", "text-align: center; font-size: 8px; margin-top: 20px;");
}