B4J Tutorial [BANanoPDFDesign] WYSIWYG PDF Documents Designer

Discussion in 'B4J Tutorials' started by Mashiane, Nov 16, 2019.

  1. Mashiane

    Mashiane Expert Licensed User


    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.


    Attached Files:

    Last edited: Nov 18, 2019
  2. Mashiane

    Mashiane Expert Licensed User

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

    #Excited 4 days.
  3. Mashiane

    Mashiane Expert Licensed User

    You can now test drive this app. First post updated with a download link.
    joulongleu likes this.
  4. Mashiane

    Mashiane Expert Licensed User

    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


  5. Mashiane

    Mashiane Expert Licensed User

    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.



  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice