B4J Question Changing property values when adding custom views by code

[aeric]

[B4X] Custom Views with Enhanced Designer Support

Custom views are implemented as B4X classes or in a library. A custom view includes a set of properties that can be set from the visual designer. Note that the visual designer will show a box instead of the actual view. Using custom views is very simple. You need to add the class or library to...

www.b4x.com

I run the example project above. I can see that the font size is different in the view added by designer vs view created by code programmatically. (LabeledTextField2 is smaller)
How is the font size property value determined if no value is specified in the code?

' Example creating by code
LabeledTextField2.Initialize(Me, "LabeledTextField2")
LabeledTextField2.AddToParent(MainForm.RootPane, 20, 200, 200,30)
LabeledTextField2.LabelText = "Enter 2:"
LabeledTextField2.FieldValue = "Hello World 2"

When I try to add another custom view by code, the width and height are not changed accordingly (no effect).

Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private btnShowFieldContent As Button
    Private LabeledTextField1 As LabeledTextField
    Private LabeledTextField2 As LabeledTextField
    Private LabeledTextField3 As LabeledTextField
End Sub

Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.SetFormStyle("UTILITY")
    MainForm.RootPane.LoadLayout("Main")
    MainForm.Title = "B4J HowTo Custom View Example - LabeledTextField"
    MainForm.Show

    CallSubDelayed(Me, "Resize")
    '
    ' Example creating by code
    LabeledTextField2.Initialize(Me, "LabeledTextField2")
    LabeledTextField2.AddToParent(MainForm.RootPane, 20, 200, 200, 30)
    LabeledTextField2.LabelText = "Enter 2:"
    LabeledTextField2.FieldValue = "Hello World 2"
    
    LabeledTextField3.Initialize(Me, "LabeledTextField3")
    LabeledTextField3.AddToParent(MainForm.RootPane, 20, 250, 300, 60)
    LabeledTextField3.LabelText = "Enter 3:"
    LabeledTextField3.FieldValue = "Hello World 3"
    LabeledTextField3.SetWidth(300)
    LabeledTextField3.SetHeight(60)
End Sub

Sub Resize
    CallSubDelayed2(LabeledTextField1, "SetWidth", 100)
    LabeledTextField1.Top = 20
    LabeledTextField1.Left = 20   
End Sub

Sub btnShowFieldContent_Action
    fx.Msgbox(Null, $"The content of the LabeledTextField:${CRLF}1=${LabeledTextField1.GetFieldValue}${CRLF}2=${LabeledTextField2.GetFieldValue}"$, "Info")
End Sub

 

[Erel]

AddToParent is a thing of the past. Developers should add custom views with the designer (if needed: [B4X] I need 100 <custom view here>s. How to add programmatically? )

 

[aeric]

AddToParent is a thing of the past. Developers should add custom views with the designer (if needed: [B4X] I need 100 <custom view here>s. How to add programmatically? )

If I understand correctly, it is not recommended to use AddToParent anymore. The recommend way is to use Designer to add the view.

 

[Alexander Stolte]

The recommend way is to use Designer to add the view.

yes, but there is another way. Erel please listen away ^^

I'm using this way in some of my customviews if i need a xCustomListView. I know i can add LayoutFiles to a .b4xlib
CustomViews have a Public Sub named "DesignerCreateView", there are 3 Parameters.
But you are responsible yourself to maintain them, for example if a CustomView gets new #DesignerProperty, then you have to adapt your code.

• Base = a panel for this view you want to add, the customview is built on it
• Lbl = a normal panel, some customviews access the properties
• Props = a map of the "#DesignerProperty" they are usually at the top of the customviews code

An example xCustomListView:

Dim xpnl_base as B4XView = xui.CreatePanel("") 'on this panel the view will build
xpnl_base.SetLayoutAnimated(0,0,0,50dip,50dip)

Dim tmplbl As Label 'some view access this properties
tmplbl.Initialize("")

Dim tmpmap As Map 'a map of the #DesignerProperty
tmpmap.Initialize
tmpmap.Put("DividerColor",0x00FFFFFF)
tmpmap.Put("DividerHeight",0)
tmpmap.Put("PressedColor",0x00FFFFFF)
tmpmap.Put("InsertAnimationDuration",0)
tmpmap.Put("ListOrientation",g_orientation)
tmpmap.Put("ShowScrollBar",False)
xclv_main.Initialize(Me,"xclv_main")
xclv_main.DesignerCreateView(xpnl_base,tmplbl,tmpmap)

 

[aeric]

yes, but there is another way. Erel please listen away ^^

I'm using this way in some of my customviews if i need a xCustomListView. I know i can add LayoutFiles to a .b4xlib
CustomViews have a Public Sub named "DesignerCreateView", there are 3 Parameters.
But you are responsible yourself to maintain them, for example if a CustomView gets new #DesignerProperty, then you have to adapt your code.

• Base = a panel for this view you want to add, the customview is built on it
• Lbl = a normal panel, some customviews access the properties
• Props = a map of the "#DesignerProperty" they are usually at the top of the customviews code

An example xCustomListView:

Dim xpnl_base as B4XView = xui.CreatePanel("") 'on this panel the view will build
xpnl_base.SetLayoutAnimated(0,0,0,50dip,50dip)

Dim tmplbl As Label 'some view access this properties
tmplbl.Initialize("")

Dim tmpmap As Map 'a map of the #DesignerProperty
tmpmap.Initialize
tmpmap.Put("DividerColor",0x00FFFFFF)
tmpmap.Put("DividerHeight",0)
tmpmap.Put("PressedColor",0x00FFFFFF)
tmpmap.Put("InsertAnimationDuration",0)
tmpmap.Put("ListOrientation",g_orientation)
tmpmap.Put("ShowScrollBar",False)
xclv_main.Initialize(Me,"xclv_main")
xclv_main.DesignerCreateView(xpnl_base,tmplbl,tmpmap)

What is xclv_main ?

 

[Alexander Stolte]

What is xclv_main ?

Thats just the declaration in Sub Class_Globals so i can access the xCustomListview through the class:

Private xclv_main As CustomListView

 

[Alexander Stolte]

You can look in the ASViewPager code.