A sneak peek on a new feature of ABMaterial for B4J I’m working on: Printing/Reporting.
This is an example of a report in ABMaterial. You build it right into your other pages and just by setting a couple of parameters, you control what will be shown on screen and what will be printed.
The block your see above ‘INVOICE’ will not be printed, just my setting lbl.IsPrintable = false. What is shown on screen you control by using the normal ABM.VISIBLE_ constants. For example there are some additional notes with a chart that you can’t see here on screen, but will be printed.
You can use almost every ABM component in your report. Good examples are the ABMChart, the ABMChronologyList or even like in this example you can let your client sign the document using an ABMSignaturePad and print it right out.
The ABM components avoid being split over two pages (e.g. an image will be printed on the next page if it does not fit). Browsers let you control very little on how things are printed, but I’ve added some things like ReportFooter.row(3).PrintPageBreak = ABM.PRINT_PAGEBREAK_BEFORE_ALWAYS to give you some control.
Note that the navigation bar is not printed either. All of this is taken care for you automatically by ABMaterial!
Some example pdf prints from the demo app (without making any modification to the source code!). Try printing the same pages with ABMaterial 3.50 or before and you’ll see the difference.
http://gorgeousapps.com/PrintExamples.zip
Making the above ‘invoice report’ is really simple and in the spirit of ABMaterial. I’ve created a new component ABMReport (and ABMReportBlock) which you can use just like you would make an ABMCustomComponent.
Relevant source code snippet of the above report (the Build event is where the magic happens, the rest are more helper methods):
Sub Class_Globals
Dim ABM As ABMaterial
Dim Report As ABMReport
' some CSS to format the 'body' of the report
Dim ReportCSS As String = $"
.repheader, .repfooter, .repheaderright, .repfooterright {
background-color: lightgray;
font-size: 1.8rem;
}
.repheaderright, .repbodyright, .repfooterright {
text-align: right;
}
.repbody, .repbodyright {
font-size: 1.5rem;
}
@media only print {
html { font-size: 60%}
}"$
Dim mSQL As SQL 'ignore
Dim mInvoiceID As Int 'ignore
End Sub
Public Sub Initialize(InternalPage As ABMPage, ID As String)
Report.Initialize("Report", Me, InternalPage, ID, ReportCSS, "")
End Sub
Sub Report_Build(InternalPage As ABMPage, internalID As String)
' the report header
Dim ReportHeader As ABMContainer = Report.Header.InitializeAsContainer(InternalPage, "reportheader", "", ABM.PRINT_PAGEBREAK_INSIDE_AVOID)
ReportHeader.AddRows(1,False, "border").AddCells12(1,"")
ReportHeader.AddRows(1,False, "").AddCellsOS(1,0,0,0,9,9,9,"").AddCellsOSMP(1,0,0,0,3,3,3,20,0,0,0,"right")
ReportHeader.AddRows(1,False, "").AddCellsOS(1,0,0,0,7,7,7,"").AddCellsOS(1,0,0,0,5,5,5,"")
ReportHeader.BuildGrid
ReportHeader.CellR(0,1).AddComponent(BuildLabel(InternalPage, "repTitle", "{B}I N V O I C E{/B}", ABM.SIZE_H4, "center", True, ABM.VISIBILITY_ALL))
ReportHeader.CellR(1,1).AddComponent(BuildLabel(InternalPage, "repAddress", "Jonathan Neal{BR}{BR}101 E. Chapman Ave{BR}Orange, CA 92866{BR}{BR}(800) 555-1234",ABM.SIZE_H5, "", True, ABM.VISIBILITY_ALL))
ReportHeader.CellR(0,2).AddComponent(BuildImage(InternalPage, "repImg", "../images/logo2.png", True, ABM.VISIBILITY_ALL))
ReportHeader.CellR(1,1).AddComponent(BuildLabel(InternalPage, "repCompany", "{B}Some Company{/B}{BR}{B}c/o Some Guy{/B}", ABM.SIZE_H4, "", True, ABM.VISIBILITY_ALL))
ReportHeader.CellR(0,2).AddComponent(Build3Block(InternalPage, "repInvoiceData", "{B}Invoice #{/B}", "101138", "{B}Date{/B}", "Januari 1, 2017","{B}Amount Due{/B}","$ 600.00", True, ABM.VISIBILITY_ALL) )
' the report body
Dim Body As ABMReport
Body.Initialize("Body", Me, InternalPage, internalID & "body", "", ABM.PRINT_PAGEBREAK_INSIDE_AVOID)
' header of the body
Body.Header.InitializeAsTexts(Array As String("Year(s) Overview", "Q1", "Q2", "Q3", "Q4"), Array As Int(40,15,15,15,15), Array As String("repheader","repheaderright","repheaderright","repheaderright","repheaderright"), "")
' detail lines: here you can e.g. run queries but for demo purposes let's do everything manual
Dim sums(5) As Int
For i = 1 To 9
' change the class of the last column on the second row
Dim ColorClass As String = "repbodyright"
If i = 2 Then
ColorClass = "repbodyright red-text"
End If
' create a text block
Dim block As ABMReportBlock
block.InitializeAsTexts(Array As String("Year 200" & i, 200*i, 300*i, 400*i, 500*i), Array As Int(40,15,15,15,15), Array As String("repbody","repbodyright",ColorClass, "repbodyright","repbodyright"), "")
Body.AddBodyBlock(block)
' dirty way to make the sums
For k = 1 To 4
sums(k) = sums(k) + (20 + (k-1)*100) * i
Next
Next
' footer of the body
Body.Footer.InitializeAsTexts(Array As String("{NBSP}", sums(1) , sums(2), "{B}" & sums(3) & "{/B}", sums(4)), Array As Int(40,15,15,15, 15), Array As String("repfooter", "repfooterright","repfooterright","repfooterright","repfooterright"), "")
' add the subreport 'body' to the body of the main report
Report.AddBodySubReport(Body)
' the report footer
Dim ReportFooter As ABMContainer = Report.Footer.InitializeAsContainer(InternalPage, "reportfooter", "", "")
ReportFooter.AddRows(1,False, "").AddCells12(1,"")
ReportFooter.AddRows(1,False, "").AddCellsOS(1,0,0,0,2,2,2,"").AddCellsOSMP(1,0,0,0,5,5,5,0,0,10,40,"").AddCellsOS(1,0,0,0,5,5,5,"")
ReportFooter.AddRows(1,False, "").AddCells12(1,"")
ReportFooter.AddRows(1,False, "").AddCells12(1,"")
ReportFooter.AddRows(1,False, "").AddCellsOSMP(1,4,4,4,4,4,4,0,0,0,0,"")
ReportFooter.AddRows(2,False, "").AddCells12(1,"")
ReportFooter.BuildGrid
ReportFooter.CellR(1,1).AddComponent(BuildLabel(InternalPage, "RepSignatureLbl", "Please sign this document", ABM.SIZE_H5, "", True, ABM.VISIBILITY_ALL))
ReportFooter.CellR(0,2).AddComponent(BuildSignature(InternalPage, "repSignature", True, ABM.VISIBILITY_ALL))
ReportFooter.CellR(0,3).AddComponent(Build3Block(InternalPage, "repTotalData", "{B}Total{/B}","$ 600.00","{B}Amount Paid{/B}","$ 0.00","{B}Balance Due{/B}","$ 600.00", True, ABM.VISIBILITY_ALL))
' avoid row 2 to be broken (can give weird results, depends on browser support!)
ReportFooter.row(2).PrintPageBreak = ABM.PRINT_PAGEBREAK_INSIDE_AVOID
' alaways break before printing row 3
ReportFooter.row(3).PrintPageBreak = ABM.PRINT_PAGEBREAK_BEFORE_ALWAYS
' all the rest is only visible on the print, not on the screen
ReportFooter.CellR(1,1).AddComponent(BuildLabel(InternalPage, "AdditionalNotes", "{B}A D D I T I O N A L {NBSP} N O T E S{/B}", ABM.SIZE_H4, "center", True, ABM.VISIBILITY_HIDE_ALL))
ReportFooter.CellR(0,1).AddComponent(BuildDivider(InternalPage, "divider", True, ABM.VISIBILITY_HIDE_ALL))
ReportFooter.CellR(0,1).AddComponent(BuildLabel(InternalPage, "note1", "Note 1: A finance charge of 1.5% will be made on unpaid balances after 30 days.", ABM.SIZE_H6, "", True, ABM.VISIBILITY_HIDE_ALL))
ReportFooter.CellR(1,1).AddComponent(BuildLabel(InternalPage, "note2", "Note 2: Your current purchase chart.", ABM.SIZE_H6, "", True, ABM.VISIBILITY_HIDE_ALL))
' create a pie chart
Dim chart5 As ABMChart
chart5.Initialize(InternalPage, "chart5", ABM.CHART_TYPEPIE, ABM.CHART_RATIO_SQUARE, "chart5theme")
chart5.Visibility = ABM.VISIBILITY_HIDE_ALL
' Something special, Label interpolation. the value will transformed into a percentage format (This is Javascript!)
Dim SumValues As Int = 30+50+70+80+100+140+170
chart5.OptionsPie.LabelInterpolation = "Math.round(value / " & SumValues & " * 100) + '%'"
' add ONE serie
Dim Serie5A As ABMChartSerie
Serie5A.InitializeForPie
Serie5A.SetValues(Array As Int(30,50,70,80,100,140,170))
chart5.AddSerie(Serie5A)
' add the chart to the cell
ReportFooter.CellR(1,1).AddComponent(chart5)
End Sub
' Helper Methods
Sub BuildLabel(internalPage As ABMPage, ID As String, Text As String, Size As String, theme As String, isPrintable As Boolean, Visibility As String) As ABMLabel
Dim tmpLbl As ABMLabel
tmpLbl.Initialize(internalPage, ID, Text, Size, False, theme)
tmpLbl.IsPrintable = isPrintable
tmpLbl.Visibility = Visibility
Return tmpLbl
End Sub
...
It will never be able to print everything of course (e.g. scrolling components), but I’m pretty happy with the things it will be able to do. Browser support for report printing is still in its infancy I’m afraid and it will take some time before all browsers are lined up supporting all HTML printing features.
But, together with the new ABMreport component, you will already be able to create reports with very little effort using ABMaterial and B4J!
ABMaterial 3.75 will be available for donators in a couple of weeks.
Alwaysbusy
Click here to 
and support ABMaterial
I’ve created an 
Alwaysbusy's Corner 