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

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.

Updates

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.

 

[NJDude]

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

 

[Erel]

Done for the next update...

 

[Topwiz]

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.

 

[warwound]

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": [
            {
                "JavaType": ".ActivityWrapper",
                "DesignerType": "Activity",
                "Name": "Activity"
            },
            {
                "JavaType": ".EditTextWrapper",
                "DesignerType": "EditText",
                "Name": "EditText1"
            },
            {
                "JavaType": ".LabelWrapper",
                "DesignerType": "Label",
                "Name": "Label1"
            },
            {
                "JavaType": ".PanelWrapper",
                "DesignerType": "Panel",
                "Name": "Panel1"
            },
            {
                "JavaType": ".SpinnerWrapper",
                "DesignerType": "Spinner",
                "Name": "Spinner1"
            },
            {
                "JavaType": ".SpinnerWrapper",
                "DesignerType": "Spinner",
                "Name": "Spinner2"
            }
        ]

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

Martin.

 

[Erel]

The order is not important.

 

[Reviewnow]

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

Thanks

 

[Erel]

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

 

[LucaMs]

Source project:

 

[Erel]

This means that you need to download the byteconverter library.

http://www.b4x.com/search?query=ByteConverter+library

 

[Jaames]

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

 

[LucaMs]

This means that you need to download the byteconverter library.

http://www.b4x.com/search?query=ByteConverter library

This means that I had to copy the library from the B4A additional libraries folder

Thanks

 

[LucaMs]

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

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 )

 

[warwound]

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

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 .

Martin.

 

[Jaames]

Oh.. I see it now . Thank you for clearing this up for me.

 

[LucaMs]

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 )

Erel, this is complicated!

(I also had a look at JsonTree)

 

[Erel]

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?

 

[LucaMs]

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

And because I do not have the anchors

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
#EndRegion

' Views initialization
    Button1.Initialize("Button1")
    Button2.Initialize("Button2")
    EditText1.Initialize("EditText1")
    ImageView1.Initialize("ImageView1")
    Panel1.Initialize("Panel1")
    Button3.Initialize("Button3")
    Panel2.Initialize("Panel2")
    EditText2.Initialize("EditText2")
    Button4.Initialize("Button4")


' Views addition

    ' Activity
    Activity.AddView(Button1, 0%x, 0%y, 25%x, 10%y)
    Activity.AddView(Button2, 0%x, 14%y, 50%x, 10%y)
    Activity.AddView(EditText1, 50%x, 14%y, 50%x, 10%y)
    Activity.AddView(ImageView1, 12%x, 26%y, 75%x, 31%y)
    Activity.AddView(Panel1, 0%x, 62%y, 100%x, 26%y)

    ' Panel1
    Panel1.AddView(Button3, 0%x, 0%y, 34%x, 22%y)
    Panel1.AddView(Panel2, 46%x, 2%y, 46%x, 22%y)

    ' Panel2
    Panel2.AddView(EditText2, 6%x, 2%y, 34%x, 12%y)
    Panel2.AddView(Button4, 6%x, 14%y, 34%x, 8%y)

but the names are from tags

 

[Erel]

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.

 

[LucaMs]

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.

Martin.

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.