En este artículo
The class Banana.Report.ReportStyleSheet is used to set the styles to format a report.
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();