Share My Creation MakeBxL - create a layout file from text or from an SQLite table (B4X) (Tool) (Source included)

I wanted a quick way to generate a layout file (add the views and their names and events) to then fine-tune it with the Designer - MakeBxL does that, either from
- a list of names (for the views) that you add in its TextArea, or
- from an SQLite database table
Some additional options are available - see the screenshots below.

All basic views for B4A, B4I, and B4J are included in the project. To extract custom views from layout files, use the 'Extract custom view' RadioButton and then click the 'Select file' button to select the layout file, after which you can pick one from a list of views in that file. See post 11 for a how-to if you want/need to do that manually.

Hints:
- To make your own specific version of a view (with different properties like e.g. colours, text, ...) make a layout that contains it and then extract it as a custom view.
- After extracting custom views, you may want to give the extracted files more significant names. E.g., when extracting a Button, the produced files may have names like 'bjl.button1.hdr.json' and 'bjl.button1.json'. If you rename them, only replace the 'button1' part and make it identical for both files, e.g. 'bjl.BigRedButton.hdr.json' and 'bjl.BigRedButton.json'.

Screenshots and project attached, enjoy!

CHANGES:
- 2024-02-07 (v1.03):
* Added custom view extraction from layout files
* Corrected bug in 'CustomViews' directory processing when file names weren't all lowercase

- 2024-02-06 (v1.02):
* Added tests to avoid exceptions if definition files are missing
* Added custom views processing (in other words, 'Bring Your own Views'); see post 11 for a how-to
* Updated project attached

- 2024-02-05 (v1.01):
* B4I (.bil) processing added (thank you for the json file, @mcqueccu)
* A check was added for duplicate view names
* Updated project attached

- 2024-02-09 (v1.04):
* Enhanced custom view extraction as per @Mashiane's suggestions/request in post 13
* Custom view extraction now has an '<All>' option to extract all views from the selected layout file (so either select one view, or get all of them)
* Custom view extraction now makes sure each view has a distinct name (across the complete collection of standard views and custom views)
* The 'Restart' button now refreshes the lists of available views, no need to exit and restart the entire program
* Added column 'JSON' to the TableView, which shows the view's JSON as a TreeView (based on JsonTree: https://www.b4x.com/android/forum/t...ith-json-parsing-updated-as-23-4-2022.140068/)
* Used ComboBoxes instead of ChoiceBoxes for improved performance
* Bug fixes

- 2024-02-10 (v1.05):
* Bug fixes (thank you for pointing out the ChoiceBox/ComboBox issue, @Mariano Ismael Castro )

Start:

SQLite-based:

Text-based:

Extraction:

 

[Mashiane]

Awesome wow.

@Magma

 

[mcqueccu]

B4i uses .bil for layout. I dont believe I have seen Bil to Json or Bil to Bal

 

[walt61]

Correct, but I have the impression that BalConverter handles those too (like it does bjl files despite its name).

 

[mcqueccu]

This is all the default items in B4i. Find the json file attached.

 

[walt61]

Thanks for the json file, @mcqueccu ; attached to this post is a zipped .bil file I generated, could you please try to open it in the B4I Designer to see if it works? (Fingers crossed...)

 

[mcqueccu]

This is what I got. The ABCD to the Right point to the controls. Example B is a button, C is a Datepicker

 

[walt61]

Excellent, thanks again; that means it works! (As Designer accepted the file)

 

[Mashiane]

If you don't mind me asking, are custom views doable with this methodology?

 

[walt61]

I don't mind I did a quick test with CustomListView and the approach is indeed the same. I'll
- add processing for a 'CustomViews' directory (within the Files.DirApp directory) where you can add any custom views you like
- write a brief 'how to' to show how to add a view

Watch this space!

 

[walt61]

EDIT: this can now be handled by the program itself (as of v1.03).

How to add custom views (as of v1.02)

1. In the IDE, create a layout with the custom view.

2. Run BalConverter on the layout to produce the JSON file - for the sake of this post, let's call it 'layout.json'. (Any name will do)

3. Create two text files in subdirectory CustomViews of your DirApp directory. For example, for a bjl CustomListView combination these would be:
bjl.CustomListView.json
bjl.CustomListView.hdr.json
The filenames are case-insensitive. Upon completion, 'CustomListView' will appear in MakeBxL's 'type' ChoiceBoxes.

4. Look for 'ControlsHeaders' in layout.json, and copy the relevant block to the bjl.CustomListView.hdr.json file. It will look like:

{
    "JavaType": ".CustomViewWrapper",
    "DesignerType": "CustomView",
    "Name": "CustomListView1"
}

5. Replace the view's name with '$MAKEBXL_CHILD_NAME$' (this is case-sensitive) so that the file now looks like:

{
    "JavaType": ".CustomViewWrapper",
    "DesignerType": "CustomView",
    "Name": "$MAKEBXL_CHILD_NAME$"
}

6. Look for 'Kids' in layout.json, and copy the relevant block to the bjl.CustomListView.json file. That block will look like (I've only left the relevant lines here):

            "0": {
...
                "variant0": {
                    "top": 100,
                    "left": 100,
                    "hanchor": 0,
                    "width": 100,
                    "vanchor": 0,
                    "height": 100
                },
...
                "eventName": "CustomListView1",
...
                "name": "CustomListView1",
...
                "font": {
                    "fontName": "DEFAULT",
                    "csType": "Dbasic.Designer.FontGrid",
                    "fontSize": {
                        "ValueType": 7,
                        "Value": 15
                    },
                    "bold": false,
                    "type": "B4IFontWrapper",
                    "italic": false
                }
            }

7. Replace the following values with these strings (again, case-sensitive):
- view number: $MAKEBXL_CHILD_NUM$
- view name: $MAKEBXL_CHILD_NAME$
- event name: $MAKEBXL_CHILD_NAME$
- font (or typeface) name: $MAKEBXL_FONTNAME$
- font (or typeface) size: $MAKEBXL_FONTSIZE$
- left, top, width, height: $MAKEBXL_LEFT$, $MAKEBXL_TOP$, $MAKEBXL_WIDTH$, $MAKEBXL_HEIGHT$
It will look like:

            "$MAKEBXL_CHILD_NUM$": {
...
                "variant0": {
                    "top": $MAKEBXL_TOP$,
                    "left": $MAKEBXL_LEFT$,
                    "hanchor": 0,
                    "width": $MAKEBXL_WIDTH$,
                    "vanchor": 0,
                    "height": $MAKEBXL_HEIGHT$
                },
...
                "eventName": "$MAKEBXL_CHILD_NAME$",
...
                "name": "$MAKEBXL_CHILD_NAME$",
...
                "font": {
                    "fontName": "$MAKEBXL_FONTNAME$",
                    "csType": "Dbasic.Designer.FontGrid",
                    "fontSize": {
                        "ValueType": 7,
                        "Value": $MAKEBXL_FONTSIZE$
                    },
                    "bold": false,
                    "type": "B4IFontWrapper",
                    "italic": false
                }
            }

8. That's it. Restart MakeBxL and it will pick the new view(s) up from the CustomViews directory

 

[walt61]

That was a bit cumbersome, not very elegant, and could become boring quite rapidly.

v1.03 contains functionality to extract views from layout files and automatically generate the files mentioned in the previous post.

 

[Mashiane]

Thank you so much.....

So I had a look at this and its amazing tool you have here. Thank you so much.

So Im playing around, here are some observations, if you dont mind. I mostly use custom views, so I will be a little biased towards that.

I like this...

The tricky part though is that on the created output and header files, everything is a "customview". A look at the generated json file with BalConvertor, I learned that the "child" > shortType key has the custom view name.

So, the I thought about having the shortType added where it exists..., so that we have the following "CustomView.[ActualCustomViewName]"

This is a tweak to SelectLayout.., by moving the "Dim Data..." up so that we can execute the FindKidCustomType call, so we can get the actual custom view name.

'extract the data, so that if its a custom type, we get the 'shortType', i.e. real custom view type
    Dim Data As Map = layoutMap.Get("Data")
    Try
        lstViews.Initialize
        Dim LayoutHeader As Map = layoutMap.Get("LayoutHeader")
        Dim ControlsHeaders As List = LayoutHeader.Get("ControlsHeaders")
        For Each colControlsHeaders As Map In ControlsHeaders
            Dim Name As String = colControlsHeaders.Get("Name")
            If (Name = "Main") Or (Name = "Activity") Then Continue
            Dim DesignerType As String = colControlsHeaders.Get("DesignerType")
            'find the kid based on the control header name
            Dim theKidX As Map = FindKidCustomType(ext, Name, Data)
            'get the shortType i.e. the actual custom view name
            Dim sshortType As String = theKidX.GetDefault("shortType","")
            'if this is blank, use the usual addition
            If sshortType = "" Then
                lstViews.Add(Name & " (" & DesignerType & ")")
            Else
                'this has a short name, add the name
                lstViews.Add(Name & " (" & DesignerType & "." & sshortType &  ")")
            End If  
        Next
    Catch
        fx.Msgbox(MainForm, LastException, "Couldn't parse the layout file")
        Return
    End Try

A new method added to just return the kid

'we need to find the custom type of the kid
'findKid replaces the original map
Private Sub FindKidCustomType(ext As String, selectedName As String, parent As Map) As Map
    Dim kids As Map = parent.Get(":kids")
    If kids.IsInitialized = False Then Return kids ' Parent doesn't have kids

    For Each kidKey As String In kids.Keys
        Dim onekid As Map = kids.Get(kidKey)
        If onekid.Get("name") = selectedName Then ' Got it
            Return onekid
        End If
        ' Kids can have grandkids etc
        Dim nextKid As Map = FindKidCustomType(ext, selectedName, onekid)
        If nextKid.IsInitialized And nextKid.Size > 0 Then Return nextKid
    Next

    ' This should not happen
    Dim noKid As Map
    Return noKid

End Sub

PS: Im not really sure whether the shortType can ever be blank, so I just worked on assumptions..

So the output without having to overwrite whatever is on the folder becomes..

Here is the update, I suffixed it with "_Mashy" so that there is no confusion with your original

Let me continue exploring...


Update: I see now. I am using an existing layout that has user defined names. I could just use custom layouts without changing the original IDE given name. Cool.

Actually, this is now even better...

So i created a couple of files... and added them to the project.

and whalla... this thing works beautifully!!! Wow. Im mind blown right now.

NB: The attached project does not ask you which custom view to process, it processes everything on the file.

 

[Mashiane]

Let me push my luck.

Feature Request: Functionality for parent child relationship definition here, so that some components can be inside one another

 

[walt61]

Thank you so much.....

So I had a look at this and its amazing tool you have here. Thank you so much.

So Im playing around, here are some observations, if you dont mind. I mostly use custom views, so I will be a little biased towards that.

...

Thanks for your tests, suggestions, and ground work @Mashiane , I'll implement that (and some more stuff I thought of) in the next version!

 

[walt61]

Let me push my luck.

Feature Request: Functionality for parent child relationship definition here, so that some components can be inside one another

Alas, that's one I'm going to give a pass. The objective was to be able to quickly (without having to select them from a menu and then changing the name etc in the Designer) put a bunch of elements into a layout, and then polish the layout in the Designer. As you did with the 'shortType' parameter, I had to make some assumptions based on what I found in the JSON generated from the layout files. Also, making the program more complicated would - in my opinion - increase the odds for errors (when Erel changes things to internal structures).

 

[Mashiane]

I agree. It's not a train smash either way.

 

[Magma]

Great Work walt61 !

Also Mashiane, cool ideas !

* Until today didn't find the time to run it... but today (v1.03) tried to run it (b4j v10, jdk11) and freezing (debug and release)

Tested in OpenJDK11... or other needed ?

 

[walt61]

No hangs here @Magma ; my environment is:
- B4J 10.00
- OpenJDK 14.0
- Linux Mint Cinnamon (latest) / Wine

 

[Magma]

- OpenJDK 14.0

That's a difference... for now keeping openjdk 11 - because of projects... but i will try it for sure - later (thought was that)

but... then check at Images posted using Fonts... (and yes i am having a lot ~4000)

so removing this line... get fast into
'ChoiceBoxFont.Items.AddAll(fx.GetAllFontFamilies)