In questo articolo
The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
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"
- Style name for new class need a preceding point ".myStyle" in the addStyle method.
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, following you will find some examples:
Selector | Selected elements |
.xyz | Select all elements with class xyz NB.: 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 | page |
body | content of the report |
phead | page header |
pfoot | page footer |
div | section |
p | paragraph |
table | table |
caption | table caption |
thead | table header |
tbody | table body |
tfoot | table footer |
tr | table row |
td | 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;");
}