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).

SS-2014-06-01_17.03.59.png


The JSON format is made of three main elements:

SS-2014-06-01_17.08.40.png


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.

SS-2014-06-01_17.11.10.png


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.
 

Attachments

  • BalConverter.zip
    6.3 KB · Views: 1,445
Last edited:

Topwiz

Member
Licensed User
Longtime 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.
 

warwound

Expert
Licensed User
Longtime 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:

PHP:
        "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.
 

Reviewnow

Active Member
Licensed User
Longtime User
any chance for bal to xml and xml to bal
I understand xml better than json

Thanks
 

Jaames

Active Member
Licensed User
Longtime User
It is not clear to me, what is benefit (purpose) of editing designer files this way?
 

LucaMs

Expert
Licensed User
Longtime User
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 :p)
 

warwound

Expert
Licensed User
Longtime User
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.
 

LucaMs

Expert
Licensed User
Longtime 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)


Erel, this is complicated! :confused:

(I also had a look at JsonTree)
 

LucaMs

Expert
Licensed User
Longtime 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:

B4X:
#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 :(
 

LucaMs

Expert
Licensed User
Longtime User
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.
 
Top