B4J Tutorial [BANano] Absolute Placement of Elements & "Hidden" Props

Hi

What we will do:

From:

To:

How:

Take any BANano custom view, add a Log(Props) on the DesignerCreateView sub, magic happens, use the view in your layout and check the web console for the output.

You get to see some "hidden props" that you can use. These are for enabled, visible, hanchor, vanchor, height, width, left and top AS defined in the abstract designer. I will call these "hidden" because these are generated by BANano for you and are read from the values set when you place the view on the abstract designer.

To get access to these anywhere in the code, this is what I have done.

1. create a global variable called CustProps

2. Copy these to the global variable

3. Set some getters for the values. I did not define temporal values to store these, so I will read them directly from the copied map

Sub getB4XEnabled As Boolean
    Return CustProps.Get("B4XEnabled")
End Sub

Sub getB4XVisible As Boolean
    Return CustProps.Get("B4XVisible")
End Sub

Sub getB4XVAnchor As String
    Return CustProps.Get("B4XVAnchor")
End Sub

Sub getB4XHAnchor As String
    Return CustProps.Get("B4XHAnchor")
End Sub

Sub getB4xHeight As String
    Return CustProps.Get("B4XHeight") & "px"
End Sub

Sub getB4XWidth As String
    Return CustProps.Get("B4XWidth") & "px"
End Sub

Sub getB4XTop As String
    Return CustProps.Get("B4XTop") & "px"
End Sub

Sub getB4XLeft As String
    Return CustProps.Get("B4XLeft") & "px"
End Sub

Interestingly enough, if I want to store the "state" of the custom element, I can just add another sub, to convert the whole thing to json.

When used, I do a log(...ToJSON) and whala!

 

[Mashiane]

As noted above, we are able to read the exact TOP, LEFT, WIDTH, HEIGHT, HANCHOR and VANCHOR of the element. Let's use these to place out layout in our designer.

To achieve this, we will use the "style" attribute. As we want these to be placed at the actual positions that are based on the abstract designer placement, our "position" should be "absolute"

I have added a prop on the custom view called "Absolute", I read this and when set to True, change the style to take into consideration those positions and apply them.

My code in the DesignerCreateView sub includes...

This then ensures that for each placed element, when set to absolute, it uses the b4x(props) directly, and thus placing my elements EXACTLY where I placed them.

 

[Mashiane]

Anchors

These are rather interesting and Im still exploring how I can make sense and translate them into usable code. What I know so far is that. They mean 0, 1, 2.

= 0

= 1

= 2

Same applies to the VAnchors

= 0

= 1

= 2

And yes, changing them DOES change the placement of your element on the final app. For Example...

The placement of SHIonBaseElement1 when anchors are 2 and 1

Becomes:

I will update this post as soon as I find my way around the anchors. For now, I will attach the demo project.

 

[Mashiane]

For now, lets create a copy of our element via code and use the ToJSON content.

I have placed another element on the abstract designer, named lblCode.

The output is:

I then generate members to access it. We will copy SHIonBaseElement1 to lblCode, via code.

We update our code:

'get the state of the component
    Dim sCopy As String = SHIonBaseElement1.ToJSON
    'define a new component
    Dim elCopy As SHIonBaseElement
    elCopy.Initialize(Me, "elCopy", "elCopy")
    'use add to parent to inject the copied state.
    elCopy.AddToParentJSON(lblCode.Here, sCopy)

When ran, the final result is.

We achieved this by 1. copying the state of the previous component and 2. using a AddToParentJSON sub, which is an enhanced AddToParent but to use JSON string.

Public Sub AddToParentJSON(targetID As String, sJSON As String)
    targetID = CleanID(targetID)
    mTarget = BANano.GetElement("#" & targetID)
    Dim props As Map = BANano.FromJson(sJSON)
    DesignerCreateView(mTarget, props)
End Sub

The original AddToParent is

'add this element to an existing parent element
Public Sub AddToParent(targetID As String, props As Map)
    targetID = CleanID(targetID)
    mTarget = BANano.GetElement("#" & targetID)
    DesignerCreateView(mTarget, props)
End Sub

Code on first post updated: