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.
- This tool also works with B4J and B4i, however as the #Macro feature isn't available yet, you should implement it with a regular comment link and click to synchronize.
- 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).

Current version is 0.9 and it is considered a beta version.

The B4J code is attached.

 

[aeric]

So my B4XPages project structure will look like?

MiniORM
  |_B4A
  |_B4i
  |_B4J
  |_JsonLayouts

 

[Erel]

No. The json layouts are inside the platforms folders.

 

[mcqueccu]

Wow, Thank you Erel

 

[aeric]

No. The json layouts are inside the platforms folders.

Would I have duplicate layout files?

Edit: I understand now. I think is like this.

B4XMiniORM
  |_B4A
      |_ Files
           |_1.bal
      |_ JsonLayouts
           |_1.json
  |_B4i
      |_ Files
           |_1.bil
      |_ JsonLayouts
           |_1.json
  |_B4J
      |_ Files
           |_1.bjl
      |_ JsonLayouts
           |_1.json

I drop the jar into B4X Additional folder so it can be shared between other platforms.

#Region Layout Files
' Sync Layouts:       ide://run?File=%ADDITIONAL%\..\B4X\JsonLayouts.jar&Args=%PROJECT%&Args=%PROJECT_NAME%
' JsonLayouts folder: ide://run?File=%WINDIR%\explorer.exe&Args=%PROJECT%\JsonLayouts
#End Region

 

[mcqueccu]

I am getting Page not found for the Jar

 

[aeric]

I am getting Page not found for the Jar

View attachment 164733

Me too. I compile the B4J code.

 

[hatzisn]

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/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.
- This tool also works with B4J and B4i, however as the #Macro feature isn't available yet, you should implement it with a regular comment link and click to synchronize.
- 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).

Current version is 0.9 and it is considered a beta version.

The B4J code is attached.

Great tool. Thank you. It is getting close to what I also have asked in the past when I asked for layout cloning between B4A and B4i when creating apps. If you could give us a table with the correspondencies between the "JavaObject" in a B4i layout and the "JavaObject" in a B4A layout we could easily create a program that transforms the layouts from 1st IDE to 2nd IDE... Or are there also any other differences? I looked at the layouts diagonally...

 

[Erel]

Link fixed.

If you could give us a table with the correspondencies between the "JavaObject" in a B4i layout and the "JavaObject" in a B4A layout we could easily create a program that transforms the layouts from 1st IDE to 2nd IDE... Or are there also any other differences? I looked at the layouts diagonally...

There are quite complicated conversion rules which are implemented in the IDE, and they don't cover everything as there are many differences between the platforms. This feature is exposed through the copy&paste actions.

 

[hatzisn]

Link fixed.


There are quite complicated conversion rules which are implemented in the IDE, and they don't cover everything as there are many differences between the platforms. This feature is exposed through the copy&paste actions.

Thanks. I see. I was having though trouble cloning the layout code, and also a multiplicity of files (not the controls).

 

[hatzisn]

Thanks. I see. I was having though trouble cloning the layout code, and also a multiplicity of files (not the controls).

Maybe exporting the B4A layout and taking just these parts while merging it in the B4i layout would do the trick... Duh-me!!!! It will just be two steps, copy controls and merge.

 

[Lucas Siqueira]

Excuse my ignorance on this subject, but if I convert my layout to json, what can be done with this json file?

Can I convert a .bal file (Android) to .bil (iOS) using the generated json files?

 

[aeric]

Excuse my ignorance on this subject, but if I convert my layout to json, what can be done with this json file?

Can I convert a .bal file (Android) to .bil (iOS) using the generated json files?

It can be useful outside the IDE.

As Erel mentioned, in a source control like Github, you can compare the changes like which line added, deleted or changed.

May useful if a team is working on the same project or for documentation.

It is still not easy to make use of the json files to convert between platforms.

 

[Lucas Siqueira]

I know that the layout can be copied from one IDE to another and congratulations for that, it's brilliant and helps a lot.

Would it be possible to create a way to take this json file and transform it into .bil?

I'm looking for a way to update a layout for another platform when I finish it. I know that there are differences in the behavior of each component between each IDE. There are even several components from Erel, Alessander and others that try to make them look and feel the same.

My problem is when a client asks for some changes and I have to adjust the layout in both b4a and b4i, it ends up being a lot of work when we have a lot of layouts. There are projects of mine where I have 92 layouts.

 

[hatzisn]

Excuse my ignorance on this subject, but if I convert my layout to json, what can be done with this json file?

Can I convert a .bal file (Android) to .bil (iOS) using the generated json files?

You can copy directly the controls from B4A to b4i. The thing that I found difficault in a project was that the B4A layout had "n" images selected out of "N" (n>>1 and N>>n) and this is difficault to copy. But with the JSONs of the IDEs you get a new degree of freedom. What you could do in my situation it would be to copy the controls directly from IDE to IDE, create the JSONs in both IDEs and then copy the files part of B4A JSON to B4i JSON. When you would save the project the new ".bil" file would be created with the whole set of files and you would not have to select "n" out of "N" which is really frustrating. The same is valid for the layout code part which is easier of course.

 

[aeric]

There are tools for converting bal to bil.

[Tool] Bal2Bil - B4A Layouts Converter

Don't use this tool. More powerful and simpler feature is available inside the IDE: https://www.b4x.com/android/forum/threads/b4x-sharing-layouts-between-platforms.109296/#content This is a small command line tool that converts B4A layout files (bal files) to B4i layout files. It is written in...

www.b4x.com

Bal to Bil Layouts converter - Drag Drop

Before After http://vnsoft.es/download/misc/Converter.zip Just execute command java -jar Converter.jar

www.b4x.com

But then B4X IDEs introduced support of copy and paste layout between platforms, the tools are considered not recommended.

I am not sure if it is still true now or there is something we can do about it.