Share My Creation Create User Interface from Variable Declarations

It is time consuming to create the elements in the user interface GUI.
This has become more relevant for me in using AI to create code because AI declares the UI elements in the Process_Globals sub but does not create the UI. So I have to do it manually.
Not any more!

A MASSIVE THANK YOU TO WILLIAM LANCEE!!! He added BalConverter to my code so that it creates the layout file directly. No intermediate JSON to convert!

This code accepts input of your variable declarations such as this (These are the supported Designer Types):

UI Declarations:
Private Accordion1 As Accordion
Private Canvas1 As Canvas
Private CheckBox1 As CheckBox
Private ChoiceBox1 As ChoiceBox
Private ColorPicker1 As ColorPicker
Private ComboBox1 As ComboBox
Private DatePicker1 As DatePicker
Private HTMLEditor1 As HTMLEditor
Private Label1 As Label
Private MenuBar1 As MenuBar
Private Pagination1 As Pagination
Private ProgressBar1 As ProgressBar
Private ProgressIndicator1 As ProgressIndicator
Private ScrollPane1 As ScrollPane
Private Slider1 As Slider
Private Spinner1 As Spinner
Private SplitPane1 As SplitPane
Private ToggleButton1 As ToggleButton
Private TreeTableView1 As TreeTableView
Private TreeView1 As TreeView
Private WebView1 As WebView
Private TextField1 As TextField
Private RadioButton1 As RadioButton
Private Button1 As Button
Private ListView1 As ListView
Private TextArea1 As TextArea
Private Pane1 As Pane

and gives layout files for all of the B4X apps.

The resulting UI in the GUI editor has each type of UI element across the top. All elements of the same type will be in a separate column. Zoom out on the GUI to see them all:
1738961650061.png

Here is a zoomed in view:
1738961665275.png


After running this code, click on the link to open the location of the layout files.
 

Attachments

  • UI Variables to JSON.zip
    15.4 KB · Views: 60
Last edited:

William Lancee

Well-Known Member
Licensed User
Longtime User
Just a suggestion. You can add the BalConverter.bas class to your project and with a few tweaks you can avoid the
cumbersome step to use the stand-alone. I have done it for different reasons, and it works well. Unzip the source code attached to @Erel 's post.
 

Tim Chapman

Active Member
Licensed User
Longtime User
Just a suggestion. You can add the BalConverter.bas class to your project and with a few tweaks you can avoid the
cumbersome step to use the stand-alone. I have done it for different reasons, and it works well. Unzip the source code attached to @Erel 's post.
Did you already add the BalConverter code as a class to my code? If so, I would love to see it.
 

Tim Chapman

Active Member
Licensed User
Longtime User
No I haven't done it with your code, but if you like I can do so. I am already familiar with the class.
I used it for a converting to yaml strings:
https://www.b4x.com/android/forum/t...-also-be-used-to-convert-json-to-yaml.163074/

Or, you can take a look yourself, it is quite nicely written, obvious in what it does.
Hi William,
I would be happy to have your assistance with that. I created the code here as a tool to help me get my work done. Now, I am back to doing my other coding work. Your suggestion would be a great improvement. I thought about doing it, but only needed a workable tool so I did not proceed with that refinement.
Thank you!
I will put it in the first post and give you credit as well when it is done.
 
Top