B4J Library [B4X] BalConverter - Convert the layouts files to JSON (and vice versa)

Discussion in 'B4J Libraries & Classes' started by Erel, Jun 1, 2014.

  1. Erel

    Erel Administrator Staff Member Licensed User

    BalConverter is a B4J app (desktop app) that converts between the designer layout files and JSON format.

    This allows you to edit the layout with a text editor. Note that the format is not so simple as the layout files were not designed to be edited this way.

    The converter app is simple. You choose a folder and it will convert all layout files from one format to another. The original files are not deleted.
    It filters the files based on the extension (bal or bal.json).


    The JSON format is made of three main elements:


    The Data element is a tree of views. All the views properties are stored here.

    The first view is the Activity view. The other views are stored under the :kids node (recursively). Note that the fields order is not important and is not consistent.


    The Variants element is a list of the variants. You will probably won't need to edit this section.

    The LayoutHeader element holds other information about the layout file. Note that all the views names are stored in this section under ControlsHeaders. This means that if you change the name of a view then you need to change it here and in the Data element.

    The b4j project is attached.

    It is recommended to backup your layout files before working with this tool.


    v2.30 - Designer script is now decoded and encoded. This means that it can be modified in the json file.
    - Layout recreated with the internal designer.
    - FontAwesome / Material Icons usage is preserved.

    Attached Files:

    Last edited: Jan 17, 2019
    AnandGupta, Kiffi, MarkusR and 14 others like this.
  2. NJDude

    NJDude Expert Licensed User

    Maybe add a "Select directory" prompt to the EXE, in case someone didn't read the instructions. ;)
  3. Erel

    Erel Administrator Staff Member Licensed User

    Done for the next update...
    arastoo likes this.
  4. Topwiz

    Topwiz Member Licensed User

    I think that a text file, be it JSON or some other format should be the native file format. Not only does it allow you to make minor changes in a text editor, it also works better with source control. With a binary file, you can't compare prior versions to see what changed.
    stanmiller likes this.
  5. warwound

    warwound Expert Licensed User

    One of the things i need to do is replace a standard b4a Spinner with a Designer CustomView.
    To understand what i need to do i have created an example layout file, converted it to json and examined the json.
    The layout structure is:
    • Activity
      • Panel1
        • Label1
        • Spinner1
        • EditText1
        • Spinner2

    I'll next create a layout file that contains just a single instance of my CustomView, convert it to json and extract the related parts of the json to make a 'template' from which i can create new instances of my CustomView.

    Now i'll replace the Data :kids Spinner objects with my CustomView object.

    My question:
    LayoutHeader.ControlHeaders is an array of objects, and i'll need to modify the objects that relate to Spinners.
    Is the order of the objects in the ControlHeaders array important - must i maintain this order?

    For example:

            "ControlsHeaders": [
    When i replace the Spinner1 object at index 4, must it's replacement (my CustomView) also be at index 4?

  6. Erel

    Erel Administrator Staff Member Licensed User

    The order is not important.
    warwound likes this.
  7. Reviewnow

    Reviewnow Active Member Licensed User

    any chance for bal to xml and xml to bal
    I understand xml better than json

  8. Erel

    Erel Administrator Staff Member Licensed User

    The source code is available. It shouldn't be too difficult to produce XML instead of JSON.
  9. LucaMs

    LucaMs Expert Licensed User

    Source project:
  10. Erel

    Erel Administrator Staff Member Licensed User

  11. Jaames

    Jaames Active Member Licensed User

    It is not clear to me, what is benefit (purpose) of editing designer files this way?
  12. LucaMs

    LucaMs Expert Licensed User

  13. LucaMs

    LucaMs Expert Licensed User

    I had a reason.

    I had developed a B4A module which would collect the dimensions and positions of the views, transform them into percentages and generate the code for that layout.

    The problem was that it could not get the names of the views, so I was forced to use their tags.

    I did not find the way to get those names (Nov 2013!)

    Now I can use the source code of this project (although Erel is best suited to do this, since it knows the project and also JSON :p)
    Jaames likes this.
  14. warwound

    warwound Expert Licensed User

    Imagine a large project with many complex layout files.
    Many layout files show similar Views - similar Labels and Spinners etc.
    Now imagine you want to make changes to the layout files - making similar changes to each layout file.

    Finally imagine opening each layout file in the Designer and manually making the changes - with a small number of layout files it'd be ok but with many layout files it'd be very tedious.

    I have a project with 62 layout files and need to update all Labels, EditTexts and Buttons, replacing the Text property of each of these Views with a new value based on the old value.
    In the same project i need to replace all Spinner Views with a custom View i have created - the custom View needs it's Left, Top, Width, Height, Prompt, Visible and other properties set to match the Spinner that it replaces.
    The layout files have 3 Variants defined so i need to set the custom View Left, Top, Width and Height 3 times - once for each Variant.

    I've spent the last few weeks working my way through the 62 layout files in the Designer manually updating them.
    If the updates to make change then i've had to start again working through each of the 62 layout files manually making the updates.

    This Monday and Tuesday i wrote a PHP script which automatically updates all 62 layout files in less than 60 seconds.
    The PHP script makes no human errors - manually editing lots of layout files in the Designer is so dull and boring that human errors are likely to occur.

    Today i've modified the PHP script to change how it updates the layout files and 60 seconds later my layout files are all updated.

    This has saved me many hours of tedious and boring manual work with the Designer :).

    toby, inakigarm, susu and 4 others like this.
  15. Jaames

    Jaames Active Member Licensed User

    Oh.. I see it now :) . Thank you for clearing this up for me.
  16. LucaMs

    LucaMs Expert Licensed User

    Erel, this is complicated! :confused:

    (I also had a look at JsonTree)
  17. Erel

    Erel Administrator Staff Member Licensed User

    I don't see anything useful coming out of this. Why generate the code? Will your code correctly handle anchors, auto scaling and the designer script features?
  18. LucaMs

    LucaMs Expert Licensed User

    Because I think that create layouts using percentages is the best solution.

    And because I do not have the anchors :rolleyes:

    My module works fine, this is an example of what it produces:

    #Region "Views Dim"
    Dim Button1 As Button
    Dim Button2 As Button
    Dim EditText1 As EditText
    Dim ImageView1 As ImageView
    Dim Panel1 As Panel
    Dim Button3 As Button
    Dim Panel2 As Panel
    Dim EditText2 As EditText
    Dim Button4 As Button

    ' Views initialization

    ' Views addition

    ' Activity
        Activity.AddView(Button1, 0%x0%y25%x10%y)
    Activity.AddView(Button2, 0%x14%y50%x10%y)
    Activity.AddView(EditText1, 50%x14%y50%x10%y)
    Activity.AddView(ImageView1, 12%x26%y75%x31%y)
    Activity.AddView(Panel1, 0%x62%y100%x26%y)

    ' Panel1
        Panel1.AddView(Button3, 0%x0%y34%x22%y)

    ' Panel2
        Panel2.AddView(EditText2, 6%x2%y34%x12%y)

    but the names are from tags :(
  19. Erel

    Erel Administrator Staff Member Licensed User

    Using percentage is not the best solution in almost all cases. It just creates stretched layouts.

    Using anchors together with autoscale allows you to quite easily build flexible layouts that look good on all devices. Anyway if you like to further discuss this idea then please start a new thread.
  20. LucaMs

    LucaMs Expert Licensed User

    I can not imagine how you did.

    The JSON file is so intricate!

    Have you used the Replace only or are you able to get "clean" hierarchical structures of layouts?

    Without this, the conversion is useless.
  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