Tool [B4X] JsonLayouts - synchronize json and binary layouts

The purpose of this tool is to automatically generate json layout files, and synchronize them as they are updated. This can be useful when working with a source control and especially when multiple developers work on the same project.

Usage:
1. Download jar and put in additional libraries folder: https://www.b4x.com/b4j/files/JsonLayouts.jar
2. Add this code to Main module:

#Macro: After Save, Sync Layouts, ide://run?File=%ADDITIONAL%\JsonLayouts.jar&Args=%PROJECT%&Args=%PROJECT_NAME%
#Macro: Title, JsonLayouts folder, ide://run?File=%WINDIR%\explorer.exe&Args=%PROJECT%\JsonLayouts

The tool will run whenever the project is saved, and that includes running the project if "auto save" is enabled.
A folder named JsonLayouts will be created with the json layouts (Ctrl + 1 will open it). The files will be synchronized when the layouts are updated.

Notes
- The synchronization is at the file level, which means that if both the binary layout and the json layout are updated at the same time, then the tool will show a message about a conflict and will not make any change.
- There is a notion of the layout owner which is the source of the last conversion. If the owner is deleted then the converted layout is also deleted (moved to recycle bin).
- As this tool is compatible with B4A, B4J and B4i, it is recommended to put the jar in the B4X additional folder (https://www.b4x.com/android/forum/threads/b4x-additional-libraries-folder.103165/#content) and change the "After Save" macro to (thanks @aeric ):

#Macro: After Save, Sync Layouts, ide://run?File=%ADDITIONAL%\..\B4X\JsonLayouts.jar&Args=%PROJECT%&Args=%PROJECT_NAME%

The B4J code is attached.

 

[aeric]

Then it would be better to put it in the B4X folder and edit the macro, right?

Some B4X developers work only on a single platform.
If he/she is only working on B4A, he/she can just put the jar in the additonal libraries folder of B4A.

For me, yes because I work with more than 1 platform.
Some B4X developers may not have the B4X additional folder. It is just a recommended folder structure but not mandatory.

 

[aeric]

3. Only from @aeric's post did I understand that B4J JSON files are also created (I think).

Yes, the purpose of this tool; to create the JSON files for B4A / B4i / B4J.
From the source code, you can notice this line:

For Each extension As String In  Array(".b4a", ".b4j", ".b4i")

So it means it is a tool for these 3 platforms.

Edit: And also the title has emphasized that it has [B4X] prefix.

Tool [B4X] JsonLayouts​

If you are curious then study further what the rest of the code do in this tool.

 

[aeric]

4. bal to bil and vice versa (on site), but this also creates bjl (?!)

This tool has nothing to do with the conversion between bal to bil.
Maybe previous questions by other members made a little confusion.
The main purpose of this tool is explained in the first 2 lines of the first post.

 

[aeric]

5. The project contains a BalConverter class; so? It only converts bal files?

I think this is a hidden bonus.

I may want to agree with you, Erel should have clarified that BalConverter is also converting BJL (and BiL!) and hence

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

should retitled as

[B4X] BxlConverter - Convert the layouts files to JSON (and vice versa)​

Edit: Or better just call it Layout2JsonConverter
Maybe Erel's decsion not to rename it is due to historical reason and it could break existing projects.

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

Automation tool: https://www.b4x.com/android/forum/threads/b4x-jsonlayouts-synchronize-json-and-binary-layouts.167398/#content 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...

www.b4x.com

 

[LucaMs]

It is not a server.
It is the source code for JsonLayouts.jar which is a non-UI app created using B4J.

That's true, and I thought about it a little while ago, while I was in the bathroom
In fact, I edited my post and am only now reading yours.

 

[LucaMs]

O.T.

That dear Copilot wrote a class for me that generates a text file (with TABs, useful for Excel) based on those JSON files.
Copilot took 2 seconds, maybe less!

 

[Erel]

Good points. I'll add the B4X macro to the first post.

 

[Erel]

And removed the "beta" statement.

 

[LucaMs]

Erel, a few days ago I created a class to which I pass a .json file generated by your tool. It creates a CSV string (and save it if you want) that contains the "best" of your .json file, only the essential data useful for the AIs.
[Liar! Copilot created that class for me ]

Then I created a B4J-UI tool to perform the "conversion". A second version uses drag & drop:

Then... today I thought about modifying this tool of yours. I simply added the class and when your project creates and saves a .json file, the "concise" .csv file is also saved.
This is optional; just add a "true" parameter to the macro:

#Macro: After Save, Sync Layouts, ide://run?File=%ADDITIONAL%\..\B4X\lmJsonLayouts.jar&Args=%PROJECT%&Args=%PROJECT_NAME%&Args=true

Example of what it produces:

(Note: JSON 14KB - csv 1KB)

Spoiler: Layout1.csv

Name Type Parent Depth Order Left Top Width Height EventName Text Visible Tag CustomType DesignerType
btnDoSomething Button Main 1 0 20 530 120 50 btnDoSomething Click Me true Dbasic.Designer.MetaButton
ftfAddress B4XFloattexTfield Main 1 1 20 50 160 50 ftfAddress true b4j.example.B4XFloattexTfield Dbasic.Designer.MetaCustomView
ivPhoto B4XImageview Main 1 2 20 110 250 230 ivPhoto true b4j.example.B4XImageview Dbasic.Designer.MetaCustomView

Pasted into Excel for better viewing:

I'm almost certain you'll suggest I publish the new version, giving it a new name (currently lmJsonLayouts.jar).
I don't like this, as if I'd created something from scratch! I'd prefer to give you the source code—it contains the class that performs the "csv summary," and the very few changes I've made to your source code are marked with 'lm.

 

[Erel]

Nice work!

At some point I will make a similar change to code bundle, as currently the full layout is exported.

 

[LucaMs]

Nice work!

At some point I will make a similar change to code bundle, as currently the full layout is exported.

Well, I'll give you the source, hoping it'll be useful to you.

 

[aeric]

Erel, a few days ago I created a class to which I pass a .json file generated by your tool. It creates a CSV string (and save it if you want) that contains the "best" of your .json file, only the essential data useful for the AIs.
[Liar! Copilot created that class for me ]

Then I created a B4J-UI tool to perform the "conversion". A second version uses drag & drop:
View attachment 170324

Then... today I thought about modifying this tool of yours. I simply added the class and when your project creates and saves a .json file, the "concise" .csv file is also saved.
This is optional; just add a "true" parameter to the macro:

#Macro: After Save, Sync Layouts, ide://run?File=%ADDITIONAL%\..\B4X\lmJsonLayouts.jar&Args=%PROJECT%&Args=%PROJECT_NAME%&Args=true

Example of what it produces:
View attachment 170321
(Note: JSON 14KB - csv 1KB)

Spoiler: Layout1.csv

Name Type Parent Depth Order Left Top Width Height EventName Text Visible Tag CustomType DesignerType
btnDoSomething Button Main 1 0 20 530 120 50 btnDoSomething Click Me true Dbasic.Designer.MetaButton
ftfAddress B4XFloattexTfield Main 1 1 20 50 160 50 ftfAddress true b4j.example.B4XFloattexTfield Dbasic.Designer.MetaCustomView
ivPhoto B4XImageview Main 1 2 20 110 250 230 ivPhoto true b4j.example.B4XImageview Dbasic.Designer.MetaCustomView

Pasted into Excel for better viewing:
View attachment 170323


I'm almost certain you'll suggest I publish the new version, giving it a new name (currently lmJsonLayouts.jar).
I don't like this, as if I'd created something from scratch! I'd prefer to give you the source code—it contains the class that performs the "csv summary," and the very few changes I've made to your source code are marked with 'lm.

Can you explain why or is it more useful to use a CSV file while we already have the JSON file?
The file size?

 

[mcqueccu]

Can you explain why or is it more useful to use a CSV file while we already have the JSON file?
The file size?

Pasted into Excel for better viewing:

 

[LucaMs]

Can you explain why or is it more useful to use a CSV file while we already have the JSON file?
The file size?

Mainly for that reason, yes.
But I also suspect that the longer the chats and the files you send them, the dumber the AIs become.

Just now I asked Copilot to make a very simple change: add a field to a table and modify the DataManager class accordingly; it made a mess!
(It's a very simple thing that I could do myself in a few minutes, but since the AI takes a few milliseconds, why not take advantage of it? That's why, because it makes gross errors... when the chat is very long.)

I see it's actually blocked now; it must be offended

 

[LucaMs]

But I also suspect that the longer the chats and the files you send them, the dumber the AIs become.

Here is the final part of the DataManager that it has updated now:

    rs.Close
    Return lst
End Sub

Public Sub CategoryHasTasks

???

I think it's essential to change chat (the current one is too long)


Oops, sorry, O.T.
Close!

 

[LucaMs]

Erel, there's probably a strange bug in your .json generator.
I have a layout with some Labels; all their Tags are empty, yet for one of these Labels the following is generated:

                        "tag": "0",  <---------
                        "text": "Text",
                        "textColor": {
                            "ValueType": 6,
                            "Value": "0xFFF0F8FF"
                        },

According to Copilot, the reason is that even though the Tag is currently empty, it had not been previously

[Copilot]

Why does Designer only save for lblDone ?"tag": 0​

The actual behavior of the Designer is this:

• If a view has never had a Tag set , the JSON does not contain the key"tag"
• If a view has had the Tag set even just once , even if you then set it back to blank, the Designer saves:
  json
  
  "tag": 0

This happens because:

• The Tag is an Object
• the “empty” value is serialized as 0 (zero)
• The Designer does not distinguish between “never set” and “set and then deleted”

So:

• Labels that have never had a Tag → nothing in JSON → CSV shows empty cell"tag"
• lblDone, which probably had a Tag in the past ( even if only by mistake, or by copying a view that had it ) → → CSV show"tag": 0 0

This is a known behavior of the B4X layout serialization system.

 

[Erel]

I don't think that the explanation is correct. The zero comes from somewhere else.

 

[LucaMs]

I don't think that the explanation is correct

Me too

The zero comes from somewhere else

Of course, the tag isn't set in the Designer; it's empty by default.
I'll look in the class that "converts" from json to clv.

 

[LucaMs]

"tag": 0

We're talking about a paltry zero while the world is going crazy!
Sorry for this post, but everything is becoming more and more unbearable!

 

[LucaMs]

Of course, the tag isn't set in the Designer; it's empty by default.
I'll look in the class that "converts" from json to clv.

[I wasn't fully awake]
That zero is written by your tool in the JSON, Erel, not by the clsLayoutInspector class, which takes the key parts from the JSON created by the tool.