B4J Tutorial [BANanoPDFDesign] WYSIWYG PDF Documents Designer

Ola

NB: Update browser settings to view PDF internally!!!

Test Drive

We started with BANanoPDFMake, which was a coding based approach to creating PDF Documents. To be able to display the documents in the browser using the pre-built in PDF viewer, we went on to BANanoPDFView

The nice thing about the viewer is that internally one does not even have to activate the 'preview of pdf' documents in the browser.



Why BANanoPDFDesign? Well, I was coding a PDF document, this involved debugging the document to ensure that it displays as expected. With breaks inbetween, this process took 3 hours for a single page report. Originally this was an excel report, not so complex but as I am new to PDFMake it was a little tricky too. So my dilemna is, I have about 5 other documents that I need to generate and not also for the app im doing but this I will use for other things too and other webapps going forward.

So I figured that I could spend a lot of hours creating a WYSIWYG designer and making it perfect so that my life is easier going forward creating reports. BANanoPDFDesign then came to life.

This stand alone web app will have a treeview, a viewing area for your pdf document and then a property bag to create / update / delete some settings.

The property bag allows a variety of input controls. You will recall that our first attempts for a property bag in B4J was discussed on this thread. We have followed a similar approach and also followed some approaches used in the new XUI PreferenceDialog.

This is just an example of the property bag controls one can add.



1. You create a document and specify its settings eg security etc. You can save and then compile the document. Once compiled, the pdf document will be viewable on the app. This means anytime you update anything on the report you are able to see how it will be right on the spot.

One accesses the document structure by selecting the document on the tree.



2. PDF also uses global styles as discussed before, these now can be easily configured by creating each style and then saving this. We use an accordion to separate the property bag sections. Each time you save a style, these are saved to the list of available styles for this document.



3. Creating Pages

One will be able to create multiple pages for the document and add the various items needed e.g. tables, lists, columns, texts, images, etc to make their document come to life.

Now that I think about it, one could be able to use this as part of a PDF generating reporting engine for their webapps.

Later!

 

Just finished most of the global style definitions, saving, previewing. 1st post updated with a vide.

#Excited 4 days.

 

You can now test drive this app. First post updated with a download link.

 

PDFQRCODE generation

1. Click Add QRCODE
2. Update the properties in the property bag
3. Click Save
4. Preview your QRCODE
5. Click Code to preview your PDFMake code to generate the QRCODE

 

Image Generation

One needs to specify the image URL and then PDFDesign gets the DataURL of the image and uses that for the definition. For this image, we have set it to fit on 400x400.