### Labeled TextField

Example Custom View: Labeled TextField (LabeledTextField)
[Label]
[TextField]
B4J Custom View Class
' Set the designer properties for the Label and the TextField
#DesignerProperty: Key: LabelText, Displayname: LabelText, Fieldtype: String, Defaultvalue: Enter:, Description: The LabeledTextField Label
#DesignerProperty: Key: FieldValue, Displayname: FieldValue, Fieldtype: String, Defaultvalue: Hello World, Description: The LabeledTextField Field
`Private Sub Class_Globals
Private fx As JFX
Private mEventName As String 'ignore
Private mCallBack As Object 'ignore
Private mBase As Pane
Private mProps As Map
'The Views label and textfield
Private lblField As Label
Private tfField As TextField
End Sub`
`Public Sub Initialize (vCallback As Object, vEventName As String)
mEventName = vEventName
mCallBack = vCallback
End Sub`
`Public Sub DesignerCreateView (Base As Pane, Lbl As Label, Props As Map)
mBase = Base
mProps = Props
CSSUtils.SetBorder(mBase, 0, fx.Colors.Transparent, 0)
lblField.Initialize("lblField")
lblField.Style = Lbl.Style
lblField.Text = mProps.Get("LabelText")
Base.AddNode(lblField, 0, 0, 200, -1)
tfField.Initialize("tfField")
tfField.Style = Lbl.Style
tfField.Text = mProps.Get("FieldValue")
Base.AddNode(tfField, 0, 20, 200, -1)
End Sub`
`Public Sub AddToParent(Parent As Pane, Left As Int, Top As Int, Width As Int, Height As Int)
mBase.Initialize("mBase")
' Label
lblField.Initialize("lblField")
mBase.AddNode(lblField, 0, 0, 200, -1)
' TextField
tfField.Initialize("tfField")
mBase.AddNode(tfField, 0, 20, 200, -1)
' Add the base node to the parent
Parent.AddNode(mBase, Left, Top, Width, Height)
End Sub`
' Handle resize of the base
`Private Sub Base_Resize (Width As Double, Height As Double)
lblField.SetLayoutAnimated(0, 2, 0, Width, (Height / 2) - 2)
tfField.SetLayoutAnimated(0, 2, Height / 2, Width, (Height / 2) - 2)
End Sub`
' Subroutine: Set the width of the base
`Public Sub SetWidth(Width As Double)
If Width < 100 Then Width = 100
mBase.PrefWidth = Width
End Sub`
' Subroutine: Set the height of the base
`Public Sub SetHeight(Height As Double)
If Height < 50 Then Height = 50
mBase.PrefHeight = Height
End Sub`
' Property: Get or set the top position of the base
`Public Sub setTop(Top As Double)
If Top < 0 Then Top = 0
mBase.Top = Top
End Sub`
`Public Sub getTop As Double
Return mBase.Top
End Sub`
' Property: Get or set the left position of the base
`Public Sub setLeft(Left As Double)
If Left < 0 Then Left = 0
mBase.Left = Left
End Sub`
`Public Sub getLeft As Double
Return mBase.Left
End Sub`
' Property: Get or set the label text
`Public Sub setLabelText(LabelText As String)
lblField.Text = LabelText
End Sub`
`Public Sub getLabelText As String
Return lblField.Text
End Sub`
' Property: Get or set value of the textfield
`Public Sub getFieldValue As String
Return tfField.Text
End Sub`
`Public Sub setFieldValue(FieldValue As String)
tfField.Text = FieldValue
End Sub`
B4J Example using the Custom View Class
The layout Main.bjl contains the custom view and a a button (to show the field values).
`Sub Process_Globals
Private fx As JFX
Private MainForm As Form
Private btnShowFieldContent As Button
Private LabeledTextField1 As LabeledTextField
Private LabeledTextField2 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
'Set the properties of LabeledTextField1
CallSubDelayed(Me, "Resize")
'
' Example creating a LabeledTextField by code
LabeledTextField2.Initialize(Me, "LabeledTextField2")
LabeledTextField2.AddToParent(MainForm.RootPane, 20, 200, 200,30)
LabeledTextField2.LabelText = "Created by Code"
LabeledTextField2.FieldValue = "Hello World 2"
End Sub`
' Set the position of LabeledTextField1
`Sub Resize
CallSubDelayed2(LabeledTextField1, "SetWidth", 200)
LabeledTextField1.Top = 20
LabeledTextField1.Left = 20
LabeledTextField1.LabelText = "Created with the B4J Designer"
End Sub`
`Sub btnShowFieldContent_Action
fx.Msgbox(Null, $"The content of the LabeledTextField:${CRLF}1=${LabeledTextField1.FieldValue}${CRLF}2=${LabeledTextField2.FieldValue}"$, "Info")
End Sub`

Changed: , Category: Custom Views, File: T6C179M1299.htm, ID: 1299