B4J Library [B4X] LayoutUtils - read and write B4X layout files

*** Work in progress. The API is not final ***

BalConvterer and JsonLayouts (https://www.b4x.com/android/forum/t...onize-json-and-binary-layouts.167398/#content) are tools that convert the binary layout files to json format. They retain the structure exactly as in the binary file. LayoutUtils evolved from these tools and provides a higher level representation of the layout data. It can be used to manipulate layout files. As layout files are loaded from the assets folder, and the assets folder is read-only, it is not possible to manipulate layouts at runtime (maybe in the future...). The expected usage of this tool is as a macro or custom build action.

For example:

Layout.Initialize.ReadFromBinary(File.DirApp, "..\Files\MainPage.bjl") 'initialize and load the layout.
Dim Button1Layout As BLView = Layout.ViewsMap.Get("Button1") 'get a BLView from the layout
Button1Layout.ExtraProperties.Put("text", Layout.CreateProperty("new text: " & DateTime.Time(DateTime.Now))) 'change its property
Dim vv As BLVariantValues = Button1Layout.VariantValues.Get(0) 'number of VariantValues = number of layout variants
vv.HAnchor = Layout.ANCHOR_BOTH
vv.X1 = 5 'left (don't use dip here)
vv.X2 = 5 'right
Layout.WriteToBinary(File.DirApp, "..\Files\MainPage.bjl") 'write back

There is a useful Describe method that prints the layout content. CodeBundle will be updated to use this output instead of the low level json output which is significantly more verbose and less clear.

 

[LucaMs]

It looks like a language specifically for layouts.
I'll have to study for the next... 81 years (approximately ).

 

[fernando1987]

This is a very interesting addition to the B4X ecosystem! Great work, Erel!

I think LayoutUtils opens the door to many useful development tools that could complement the existing B4X IDEs.

Some ideas that come to mind:

1. Visual Layout Inspector: A tool to explore the hierarchy of views, properties, anchors, and layout variants in a more visual way.
2. Layout Comparison Tool: Compare two versions of a layout and highlight changes in positions, sizes, properties, and controls. Very useful when working with Git.
3. Layout Validator: Automatically detect common design issues, such as overlapping views, invalid dimensions, inconsistent anchors, or controls positioned outside their parent containers.
4. Batch Layout Editor: Apply changes to multiple layout files at once, such as updating fonts, colors, margins, control names, or other properties.
5. Theme and Style Manager: Apply consistent styles across multiple layouts, making it easier to maintain the appearance of large applications.
6. Layout Documentation Generator: Automatically generate readable documentation showing the view hierarchy, properties, variants, and screenshots or visual diagrams.
7. Layout Migration and Refactoring Assistant: Help rename controls, reorganize layouts, or apply structural changes while preserving existing properties.
8. Visual Layout Preview: Using WebView, HTML, CSS, and JavaScript, it might be possible to build an external layout visualization tool that works with LayoutUtils, depending on the API capabilities.
9. AI-Assisted Layout Tools: In the future, it could be interesting to explore generating or modifying layouts from natural language instructions, with LayoutUtils handling the layout structure.
10. Layout Templates and Component Libraries: Create reusable layout templates and apply predefined design patterns to existing projects.

Of course, these would be complementary development utilities, not replacements for the official B4X designers or IDEs.

I believe this could become a very useful foundation for community-created productivity tools, especially when combined with B4J and WebView.

I understand the API is still a work in progress, but the possibilities are exciting.

Thank you for continuing to expand the B4X ecosystem!

 

[fernando1987]

And why not even a lightweight, community-developed B4X code editor or IDE?

With Monaco Editor, B4J, WebView, and LayoutUtils, it could be possible to combine code editing, project exploration, visual layout design, and other productivity tools in a single application.

Of course, this would be an independent, complementary tool that respects B4X's intellectual property and relies on officially supported APIs and formats.

The possibilities are really exciting!