### Numeric Spinner

Example of a Custom View class - NumericSpinner.
B4J Custom View Class
'Custom View Properties: FieldValue as Int, Min and MaxValue as Int, TooltipText as string
#DesignerProperty: Key: FieldValue, Displayname: FieldValue, Fieldtype: Int, Defaultvalue: 0, Description: Use the arrows to increase or decrease the value
#DesignerProperty: Key: MinValue, Displayname: MinValue, Fieldtype: Int, Defaultvalue: 0, Description: Set the minimum value
#DesignerProperty: Key: MaxValue, Displayname: MaxValue, Fieldtype: Int, Defaultvalue: 100, Description: Set the maximum value
#DesignerProperty: Key: TooltipText, Displayname: TooltipText, Fieldtype: String, Defaultvalue: , Description: Use the arrows to increase or decrease the value
`Private Sub Class_Globals
Private Version As String = "v20161010"
Private fx As JFX
Private mEventName As String 'ignore
Private mCallBack As Object 'ignore
Private mBase As Pane
Private mProps As Map
Private tfNumericField As TextField
Private btnUp As ImageView
Private btnDown As ImageView
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)
tfNumericField.Initialize("tfNumericField")
mBase.AddNode(tfNumericField, 0, 0, 0, 0)
btnUp.Initialize("btnUp")
btnUp.SetImage(fx.LoadImage(File.DirAssets, "up.png"))
CSSUtils.SetBorder(btnUp, 3, fx.Colors.Black, 1)
mBase.AddNode(btnUp, 0, 0, 0, 0)
btnDown.Initialize("btnDown")
btnDown.SetImage(fx.LoadImage(File.DirAssets, "down.png"))
CSSUtils.SetBorder(btnDown, 3, fx.Colors.Black, 1)
mBase.AddNode(btnDown, 0, 0, 0, 0)
End Sub`
`Public Sub AddToParent(Parent As Pane, Left As Int, Top As Int, Width As Int, Height As Int)
mBase.Initialize("mBase")
mProps.Initialize
mProps.Put("MinValue",0)
mProps.Put("MaxValue",100)
CSSUtils.SetBorder(mBase, 0, fx.Colors.Transparent, 0)
tfNumericField.Initialize("tfNumericField")
mBase.AddNode(tfNumericField, 0, 0, 0, 0)
btnUp.Initialize("btnUp")
btnUp.SetImage(fx.LoadImage(File.DirAssets, "up.png"))
CSSUtils.SetBorder(btnUp, 3, fx.Colors.Black, 1)
mBase.AddNode(btnUp, 0, 0, 0, 0)
btnDown.Initialize("btnDown")
btnDown.SetImage(fx.LoadImage(File.DirAssets, "down.png"))
CSSUtils.SetBorder(btnDown, 3, fx.Colors.Black, 1)
mBase.AddNode(btnDown, 0, 0, 0, 0)
Parent.AddNode(mBase, Left, Top, Width, Height)
Base_Resize (Width, Height)
End Sub`
' Handle resize of the base
`Private Sub Base_Resize (Width As Double, Height As Double)
tfNumericField.SetLayoutAnimated(0, 1, 0, Width - 26, Height)
btnUp.SetLayoutAnimated(0, Width - 25, 1, 20, (Height / 2) - 2)
btnDown.SetLayoutAnimated(0, Width - 25, (Height / 2) + 1, 20, (Height / 2) - 2)
End Sub`
' Subroutine: Get or set the width of the base
`Public Sub SetWidth(Width As Double)
If Width < 100 Then Width = 100
mBase.PrefWidth = Width
End Sub`
`Public Sub GetWidth As Double
Return mBase.PrefWidth
End Sub`
' Subroutine: Get or set the height of the base
`Public Sub SetHeigth(Height As Double)
If Height < 10 Then Height = 10
mBase.PrefHeight=Height
End Sub`
`Public Sub GetHeigth As Double
Return mBase.PrefHeight
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 tag of the base
`Public Sub setTag(Tag As String)
mBase.Tag = Tag
End Sub`
`Public Sub getTag As String
Return mBase.Tag
End Sub`
' Property: Get or set the visibility of the base
`Public Sub setVisible(Visible As Boolean)
mBase.Visible = Visible
End Sub`
`Public Sub getVisible As Boolean
Return mBase.Visible
End Sub`
' Property: Get or set value of the textfield
`Public Sub getValue As String
Return tfNumericField.Text
End Sub`
`Public Sub setValue(Value As String)
tfNumericField.Text = Value
End Sub`
' Property: Get or set value of the textfield tooltip
`Public Sub setTooltipText(Value As String)
tfNumericField.TooltipText = Value
End Sub`
`Public Sub getTooltipText As String
Return tfNumericField.TooltipText
End Sub`
`Public Sub setMinValue(Value As Int)
If IsNumber(Value) Then mProps.Put("MinValue", Value)
End Sub`
`Public Sub getMinValue As Int
Return mProps.get("MinValue")
End Sub`
`Public Sub setMaxValue(Value As Int)
If IsNumber(Value) Then mProps.Put("MaxValue", Value)
End Sub`
`Public Sub getMaxValue As Int
Return mProps.get("MaxValue")
End Sub`
`Private Sub btnUp_MouseClicked (EventData As MouseEvent)
If tfNumericField.Text.Length = 0 Then tfNumericField.Text = 0
tfNumericField.Text = tfNumericField.Text + 1
End Sub`
`Private Sub btnDown_MouseClicked (EventData As MouseEvent)
If tfNumericField.Text.Length = 0 Then tfNumericField.Text = 0
tfNumericField.Text = tfNumericField.Text - 1
End Sub`
'Handle textfield changes:
'If not numeric then set old text; If < min or > max value then set min or max value
`Private Sub tfNumericField_TextChanged (Old As String, New As String)
If New.Length = 0 Then Return
If Not(IsNumber(New)) And (New.Length > 0) Then tfNumericField.Text = Old
If tfNumericField.Text < mProps.Get("MinValue") Then tfNumericField.Text = mProps.Get("MinValue")
If tfNumericField.Text > mProps.Get("MaxValue") Then tfNumericField.Text = mProps.Get("MaxValue")
End Sub`
`Public Sub GetVersion As String
Return Version
End Sub`
B4J Example using the Custom View Class
`Sub Process_Globals
Private fx As JFX
Public MainForm As Form
Private btnShowFieldContent As Button
Private NumericSpinner1 As NumericSpinner
Private NumericSpinner2 As NumericSpinner
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 NumericSpinner"
MainForm.Show
'Set the properties of spinner which has been added via the b4j designer
CallSubDelayed(Me, "Resize")
' Example creating a spinner by code
NumericSpinner2.Initialize(Me, "NumericSpinner2")
NumericSpinner2.AddToParent(MainForm.RootPane, 20, 200, 70,30)
NumericSpinner2.MinValue = 7
NumericSpinner2.MaxValue = 10
NumericSpinner2.Value = 9
End Sub`
`Sub Resize
CallSubDelayed2(NumericSpinner1, "SetWidth", 50)
NumericSpinner1.Top = 20
NumericSpinner1.Left = 20
NumericSpinner1.TooltipText = $"Use the arrow keys to change the value. Min is ${NumericSpinner1.MinValue}, Max is ${NumericSpinner1.MaxValue}."$
NumericSpinner1.Value = 20
End Sub`
`Sub btnShowFieldContent_Action
fx.Msgbox(Null, $"The content of the NumericSpinner:${CRLF}${NumericSpinner1.Value}${CRLF}${NumericSpinner2.Value}"$, "Info")
End Sub`

Changed: , Category: Custom Views, File: T6C179M1301.htm, ID: 1301