B4A Library [B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

Alexander Stolte · Apr 10, 2023

Herbert32 said:
AS_TextFieldAdvanced.bas is missed in the B4A Example-Project

Check the lib. in the lib. manager in the ide.

Alexander Stolte · May 20, 2023

Update

1.19
- Add FocusedShapeColor
  - Default: White with alpha 0 = Transparent
- Add set TextColor
- Add Designer Property TextFieldCornerRadius
  - Default: 5dip
- B4J BugFix - The EnterPressed Event was not triggered

FocusedShapeColor
Default color is Transparent, so that it does not break anything existing

TextFieldCornerRadius
Your TextFields can now look like this:

behnam_tr · May 25, 2023

thank you[B] Alexander[/B]

Multiline Bug
-readonly mode
-text alignment

Soheyl · May 26, 2023

The usage of NativeTextField and NativeTextFieldMultiline is resulting in an error.

B4X:

Dim su          As StringUtils
Dim MaximumSize As Int = su.MeasureMultilineTextHeight(AS_TextFieldAdvanced_1.NativeTextFieldMultiline, "Text Size") * 8

log:

java.lang.RuntimeException: Object should first be initialized (B4XView).

Alexander Stolte · May 26, 2023

Soheyl said:
The usage of NativeTextField and NativeTextFieldMultiline is resulting in an error.

Works on my machine. Be sure, you set the "Mode" to "Multiline" in the designer, otherwise it is not a multiline textfield!

Alexander Stolte · May 26, 2023

Update

1.20
- BugFixes
- Add Designer Property StrengthIndicator - Password strength indicator
  - None|Line|Segmented
  - Default: None

behnam_tr said:
Multiline Bug
-readonly mode
-text alignment

Works now
StrengthIndicator
Example:

[B4X] AS TextFieldAdvanced Password Strength Indicator

This is a Example project for the AS_TextFieldAdvanced, to show the password strength indicator. https://www.b4x.com/android/forum/threads/b4x-xui-as-textfieldadvanced-title-information-counter-password-button-prefix-suffix-icons-multiline.141337/ Have Fun :)

www.b4x.com

Lucas Siqueira · May 28, 2023

Alexander Stolte said:
With this view you can quickly and easily add good looking text fields, with title and or bottom text. Additionally you can make the TextField a button, so that you can open menus, but still keep the design of the text fields.
The view speeds up development because you don't have to worry about almost anything, it looks nice by default and is functional.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.

~~In B4J the view does not work properly yet, I am working on fixing the bugs.~~ B4J works now
View attachment 131718
Password strength indicator V1.20+
View attachment 142346

[B4X] AS TextFieldAdvanced Password Strength Indicator

This is a Example project for the AS_TextFieldAdvanced, to show the password strength indicator. https://www.b4x.com/android/forum/threads/b4x-xui-as-textfieldadvanced-title-information-counter-password-button-prefix-suffix-icons-multiline.141337/ Have Fun :)

www.b4x.com

ASTextFieldAdvanced
Author: Alexander Stolte
Version: 1.07

ASTextFieldAdvanced_Counter

Fields:

CounterMax As Int

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

TextColor As Int

View As ASTextFieldAdvanced_ViewCounter

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_Hint

Fields:

FocusedTextColor As Int

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

NonFocusedTextColor As Int

Text As String

View As ASTextFieldAdvanced_ViewHint

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_Information

Fields:

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

Text As String

TextColor As Int

View As ASTextFieldAdvanced_ViewInformation

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_LeadingIcon

Fields:

Icon As B4XBitmap

IsInitialized As Boolean
Tests whether the object has been initialized.

View As ASTextFieldAdvanced_ViewLeadingIcon

Visible As Boolean

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_Prefix

Fields:

Gap As Float

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

Text As String

TextColor As Int

View As ASTextFieldAdvanced_ViewPrefixSuffix

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_Suffix

Fields:

Gap As Float

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

Text As String

TextColor As Int

View As ASTextFieldAdvanced_ViewPrefixSuffix

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_Title

Fields:

Height As Float

IgnoreProperties As Boolean

IsInitialized As Boolean
Tests whether the object has been initialized.

Text As String

TextColor As Int

View As ASTextFieldAdvanced_ViewTitle

Visible As Boolean

xFont As B4XFont

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_TrailingIcon

Fields:

Icon As B4XBitmap

IsInitialized As Boolean
Tests whether the object has been initialized.

View As ASTextFieldAdvanced_ViewTrailingIcon

Visible As Boolean

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewCounter

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xlbl_Counter As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewHint

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xlbl_Hint As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewInformation

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xlbl_Information As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewLeadingIcon

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xiv_Icon As B4XView

xpnl_Background As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewPrefixSuffix

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xlbl_PrefixSuffix As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewTitle

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xlbl_Title As B4XView

Functions:

Initialize
Initializes the fields to their default value.

ASTextFieldAdvanced_ViewTrailingIcon

Fields:

IsInitialized As Boolean
Tests whether the object has been initialized.

xiv_Icon As B4XView

xpnl_Background As B4XView

Functions:

Initialize
Initializes the fields to their default value.

AS_TextFieldAdvanced

Events:

ButtonClick

EnterPressed

FocusChanged (HasFocus As Boolean)

LeadingIconClick

PasswordRevealChanged (Revealed As Boolean)

TextChanged (Text As String)

TrailingIconClick

Fields:

mBase As B4XView

Tag As Object

Functions:

Class_Globals As String

CreateASTextFieldAdvanced_Counter (Visible As Boolean, CounterMax As Int, IgnoreProperties As Boolean, xFont As B4XFont, TextColor As Int, View As ASTextFieldAdvanced_ViewCounter) As ASTextFieldAdvanced_Counter

CreateASTextFieldAdvanced_Hint (Visible As Boolean, Text As String, IgnoreProperties As Boolean, FocusedTextColor As Int, NonFocusedTextColor As Int, xFont As B4XFont, View As ASTextFieldAdvanced_ViewHint) As ASTextFieldAdvanced_Hint

CreateASTextFieldAdvanced_Information (Visible As Boolean, Text As String, IgnoreProperties As Boolean, xFont As B4XFont, TextColor As Int, View As ASTextFieldAdvanced_ViewInformation) As ASTextFieldAdvanced_Information

CreateASTextFieldAdvanced_LeadingIcon (Visible As Boolean, Icon As B4XBitmap, View As ASTextFieldAdvanced_ViewLeadingIcon) As ASTextFieldAdvanced_LeadingIcon

CreateASTextFieldAdvanced_Prefix (Visible As Boolean, Text As String, IgnoreProperties As Boolean, xFont As B4XFont, TextColor As Int, Gap As Float, View As ASTextFieldAdvanced_ViewPrefixSuffix) As ASTextFieldAdvanced_Prefix

CreateASTextFieldAdvanced_Suffix (Visible As Boolean, Text As String, IgnoreProperties As Boolean, xFont As B4XFont, TextColor As Int, Gap As Float, View As ASTextFieldAdvanced_ViewPrefixSuffix) As ASTextFieldAdvanced_Suffix

CreateASTextFieldAdvanced_Title (Visible As Boolean, Text As String, Height As Float, IgnoreProperties As Boolean, xFont As B4XFont, TextColor As Int, View As ASTextFieldAdvanced_ViewTitle) As ASTextFieldAdvanced_Title

CreateASTextFieldAdvanced_TrailingIcon (Visible As Boolean, Icon As B4XBitmap, View As ASTextFieldAdvanced_ViewTrailingIcon) As ASTextFieldAdvanced_TrailingIcon

DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
Base type must be Object

getBackgroundColor As Int

getBackgroundPanel As B4XView

getBottomHeight As Float
Call Refresh if you change something

getButtonTextLabel As B4XView

getClearButtonLabel As B4XView

getCounter As ASTextFieldAdvanced_Counter
Call Refresh if you change something

getHint As ASTextFieldAdvanced_Hint
Call Refresh if you change something

getInformation As ASTextFieldAdvanced_Information
Call Refresh if you change something

getisPasswordMode As Boolean

getKeyboardType As String

getLeadingIcon As ASTextFieldAdvanced_LeadingIcon
Call Refresh if you change something

getLeftGap As Float
Default: 10dip
Call Refresh if you change something

getNativeTextField As TextField
Gets the native TextField view

getNativeTextFieldMultiline As TextArea

getNativeTextFieldPassword As TextField
Gets the native TextField view

getPrefix As ASTextFieldAdvanced_Prefix
Call Refresh if you change something

getReadOnly As Boolean

getRevealButtonLabel As B4XView

getReveale As Boolean

getShowClearButton As Boolean
Call Refresh if you change something

getShowRevealButton As Boolean
Call Refresh if you change something

getSuffix As ASTextFieldAdvanced_Suffix
Call Refresh if you change something

getText As String

getTextField As B4XView

getTextFieldMultiline As B4XView

getTextFieldPassword As B4XView

getTextFull As String
Gets the full text, with Prefix and Suffix

getTitle As ASTextFieldAdvanced_Title
Call Refresh if you change something

getTrailingIcon As ASTextFieldAdvanced_TrailingIcon
Call Refresh if you change something

Initialize (Callback As Object, EventName As String) As String

IsInitialized As Boolean
Tests whether the object has been initialized.

Refresh As String

setBackgroundColor (Color As Int) As String

setBottomHeight (Height As Float) As String

setButtonText (Text As String) As String

setLeftGap (Gap As Float) As String

setReadOnly (ReadOnly As Boolean) As String

setReveale (Revealed As Boolean) As String

setShowClearButton (Show As Boolean) As String

setShowRevealButton (Show As Boolean) As String

setText (Text As String) As String

Properties:

BackgroundColor As Int

BackgroundPanel As B4XView [read only]

BottomHeight As Float
Call Refresh if you change something

ButtonText

ButtonTextLabel As B4XView [read only]

ClearButtonLabel As B4XView [read only]

Counter As ASTextFieldAdvanced_Counter [read only]
Call Refresh if you change something

Hint As ASTextFieldAdvanced_Hint [read only]
Call Refresh if you change something

Information As ASTextFieldAdvanced_Information [read only]
Call Refresh if you change something

isPasswordMode As Boolean [read only]

KeyboardType As String [read only]

LeadingIcon As ASTextFieldAdvanced_LeadingIcon [read only]
Call Refresh if you change something

LeftGap As Float
Default: 10dip
Call Refresh if you change something

NativeTextField As TextField [read only]
Gets the native TextField view

NativeTextFieldMultiline As TextArea [read only]

NativeTextFieldPassword As TextField [read only]
Gets the native TextField view

Prefix As ASTextFieldAdvanced_Prefix [read only]
Call Refresh if you change something

ReadOnly As Boolean

RevealButtonLabel As B4XView [read only]

Reveale As Boolean

ShowClearButton As Boolean
Call Refresh if you change something

ShowRevealButton As Boolean
Call Refresh if you change something

Suffix As ASTextFieldAdvanced_Suffix [read only]
Call Refresh if you change something

Text As String

TextField As B4XView [read only]

TextFieldMultiline As B4XView [read only]

TextFieldPassword As B4XView [read only]

TextFull As String [read only]
Gets the full text, with Prefix and Suffix

Title As ASTextFieldAdvanced_Title [read only]
Call Refresh if you change something

TrailingIcon As ASTextFieldAdvanced_TrailingIcon [read only]
Call Refresh if you change something

Changelog

1.00

Release

1.01 (read more)

Add Designer Property LeadingIcon - An icon which is placed in front of the text and has its own click event

Add Designer Property TrailingIcon - An icon which is placed behind the text and has its own click event

Add Event LeadingIconClick

Add Event TrailingIconClick

Add some more properties

1.02

Add Type ASTextFieldAdvanced_Title

Add Type ASTextFieldAdvanced_Information

Add Type ASTextFieldAdvanced_Counter

Add Type ASTextFieldAdvanced_Hint

Add Type ASTextFieldAdvanced_LeadingIcon

Add Type ASTextFieldAdvanced_TrailingIcon

Removed some properties, they are now in the new types

BugFixes

1.03 (read more)

Add Type ASTextFieldAdvanced_Prefix

Add Type ASTextFieldAdvanced_Suffix

Add Designer Properties Prefix, PrefixText, Suffix, SuffixText

Add get TextFull - Gets the full text, with Prefix and Suffix

BugFixes

1.04

BugFixes

1.05

BugFixes

1.06

BugFixes

Add Designer Property ReadOnly - Disables the user input

Default: False

1.07

BugFixes

Add "Multiline" to the designer property "Mode"

New Multiline mode

1.08

Multiline BugFixes

1.09

Add Focus - Sets input focus

1.10

BugFixes

get Reveale is renamed to isRevealed

1.11

Add Designer Property TextAlignment

Default: Left

1.12

Add set Text2 - Sets the text, without TextChanged Event

Add set ButtonText2 - Sets the button text, without TextChanged Event

1.13

BugFixes

1.14

ClearButtonClick

1.15

BugFix

1.16

BugFixes

Performance improvements

1.17

BugFixes - Character delimiter (Counter = True)

B4J Only - Click on the TextField to focus it

1.18

BugFix - ReadOnly = True - ClearButton and RevealButton are now also read only

1.19 (read more)

Add FocusedShapeColor

Default: White with alpha 0 = Transparent

Add set TextColor

Add Designer Property TextFieldCornerRadius

Default: 5dip

B4J BugFix - The EnterPressed Event was not triggered

1.20 (read more)

BugFixes

Add Designer Property StrengthIndicator - Password strength indicator

None|Line|Segmented

Default: None

Have Fun

it would be great if it had mascara, here is a code to add to the class, I tested it on android, and it worked 100%

B4X:

#DesignerProperty: Key: Mask, DisplayName: Mask, FieldType: String, DefaultValue: None, List: None|Left|Right, Description: Where to start the mask.
#DesignerProperty: Key: MaskText, DisplayName: MaskText, FieldType: String, DefaultValue: XXX.XXX.XXX-XX, Description: Mask format use X or 0 to indicate the characters that will be replaced.

Sub Class_Globals
...
    Private m_Mask As String = ""
    Private m_MaskText As String = ""
End Sub

Private Sub IniProps(Props As Map)
...
    m_Mask = Props.GetDefault("Mask","")
    m_MaskText = Props.GetDefault("MaskText","")
End Sub



Private Sub TextChanged(Text As String)
    If m_Mask<>"None" And (m_MaskText.Contains("X") Or m_MaskText.Contains("0"))  Then
        Dim textMasked As String = applyMask(Text, m_MaskText, m_Mask)
        If Text <> textMasked Then 
            xtf_TextField.Text = textMasked
            xtf_TextField.SelectionStart = xtf_TextField.Text.Length
        End If        
    End If

    If g_Counter.Visible Then
        If Text.Length > g_Counter.CounterMax Then
            
            If xtf_TextField.IsInitialized Then 
                Dim SelectionStart As Int = xtf_TextField.SelectionStart
                xtf_TextField.Text = Text.SubString2(0,g_Counter.CounterMax)
                xtf_TextField.SelectionStart = Min(SelectionStart,xtf_TextField.Text.Length)
            End If
            If xtf_TextFieldPassword.IsInitialized Then 
                Dim SelectionStart As Int = xtf_TextFieldPassword.SelectionStart
                xtf_TextFieldPassword.Text = Text.SubString2(0,g_Counter.CounterMax)
                xtf_TextFieldPassword.SelectionStart = Min(SelectionStart,xtf_TextFieldPassword.Text.Length)
            End If
            If xtf_Multiline.IsInitialized Then    
                Dim SelectionStart As Int = xtf_Multiline.SelectionStart
                xtf_Multiline.Text = Text.SubString2(0,g_Counter.CounterMax)
                xtf_Multiline.SelectionStart = Min(SelectionStart,xtf_Multiline.Text.Length)
            End If
            Text = Text.SubString2(0,g_Counter.CounterMax)
        End If
    End If
    
    If Text.Length = 0 Then
        xlbl_ClearButton.Visible = False
        xlbl_RevealButton.Visible = False
        xlbl_Hint.Visible = g_Hint.Visible
    Else
        xlbl_ClearButton.Visible = m_ShowClearButton
        xlbl_RevealButton.Visible = m_PasswordField And m_ShowRevealButton
        xlbl_Hint.Visible = False
    End If
    
    xlbl_Counter.Text = Text.Length & "/" & g_Counter.CounterMax
    TextChanged_Event(Text)
End Sub


Private Sub lettersAndNumbers(Text As String) As String
    Dim enable As String = "abcdefghijklmnopqrstuvwxyzçáãàâäéèêëíìîïóòôõöúùûüçABCDEFGHIJKLMNOPQRSTUVWXYZÁÃÀÂÄÉÈÊËÍÌÎÏÓÒÔÕÖÚÙÛÜÜÇ0123456789"
    
    Dim textClear As StringBuilder
    textClear.Initialize
    For i = 0 To Text.Length-1
        Dim c As String = Text.CharAt(i)
        If enable.Contains(c) Then 
            textClear.Append(c)
        End If        
    Next
    Return textClear.ToString
End Sub

Private Sub applyMask(Text As String, Mask As String, Start As String) As String
    Dim textClear As String = lettersAndNumbers(Text)
    Dim textMasked As StringBuilder
    textMasked.Initialize
    Log(textClear)
    Try
        
        'check how many zeros are in the mask -> verifica quantos zeros tem na mascara
        Dim zeros As Int = 0
        For i = 0 To (Mask.Length-1)
            If Mask.CharAt(i)="0" Then
                zeros = zeros + 1
            End If
        Next
        
        If zeros > 0 Then
            If IsNumber(textClear) Then
                textClear = textClear.As(Long)
            End If
        End If
        
        'if there are more zeros in the mask than characters in the text, add zeros to the text, until you get the number of zeros in the mask -> caso tem mais zeros na mascara do que caracteres no texto, adiciona zeros ao texto, até dar a quantidade de zeros da mascara
        If zeros > textClear.Length Then
            textClear = "000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000" & textClear
            textClear = textClear.SubString(textClear.Length-zeros)
        End If
        
        If Start="Left" Then
            For i = 1 To Mask.Length
                Dim c As Char = Mask.CharAt(i-1)
                If (c="X" And textClear.Length>0) Or (c="0" And textClear.Length>0) Then
                    Dim t As Char = textClear.CharAt(0)'get the last character -> pega o ultimo caracter
                    textClear = textClear.SubString(1)'remove the last character -> remove o ultimo caracter
                    textMasked.Append(t)
                Else
                    If c="X" Or textClear.Length=0 Then
                        Exit
                    End If
                    textMasked.Append(c)
                End If
            Next
            
        Else If Start="Right" Then
            For i = Mask.Length To 1 Step -1
                Dim c As Char = Mask.CharAt(i-1)
                If (c="X" And textClear.Length>0) Or (c="0" And textClear.Length>0) Then
                    Dim t As Char = textClear.CharAt(textClear.Length-1)'get the last character -> pega o ultimo caracter
                    textClear = textClear.SubString2(0,textClear.Length-1)'remove the last character -> remove o ultimo caracter
                    textMasked.Insert(0, t)
                Else
                    If c="X" Or textClear.Length=0 Then
                        Exit
                    End If
                    textMasked.Insert(0, c)
                End If
            Next
        End If
    Catch
        Log(LastException)
    End Try
    Log(textMasked.ToString)
    Return textMasked.ToString
End Sub

Alexander Stolte · 2023-06-03T15:26:42+0100

Update

1.21
- Add Designer Property RequiredField - if True the field is a required field and is marked with a colored star
  - Default: False
- Add Designer Property RequiredFieldColor
  - Default: Red
- Add ShowDisplayMissingField - Call this function to inform the user that not all required fields are filled in
  - Call HideDisplayMissingField to remove it
- Add HideDisplayMissingField - Removes the user notification from ShowDisplayMissingField
- Add Designer Property Mask - You can use masks now
  - Default: None
- Add Designer Property MaskText
  - Example: XXX.XXX.XXX-XX

Special thanks to @Lucas Siqueira for his code in #67 for the mask feature.

RequiredFields
Call the function "ShowDisplayMissingField" to show the user he has to fill something. Call the "HideDisplayMissingField" function to remove it

[B4X] AS TextFieldAdvanced Text Validation/Required Fields Example

This is a exmaple project to show the required field feature in the AS TextFieldAdvanced https://www.b4x.com/android/forum/threads/b4x-xui-as-textfieldadvanced-title-information-counter-password-button-prefix-suffix-icons-multiline.141337/

www.b4x.com

Mask
When the user types something, the text view automatically formats it into the correct format

B4A Library [B4X] [XUI] AS TextFieldAdvanced - Title, Information, Counter, Password, Button, Prefix, Suffix, Icons, Multiline

[B4X] AS TextFieldAdvanced Password Strength Indicator

[B4X] AS TextFieldAdvanced Text Validation/Required Fields Example

Attachments

Alexander Stolte

Expert

Alexander Stolte

Expert

behnam_tr

Active Member

Soheyl

Member

Alexander Stolte

Expert

Alexander Stolte

Expert

[B4X] AS TextFieldAdvanced Password Strength Indicator

Lucas Siqueira

Active Member

[B4X] AS TextFieldAdvanced Password Strength Indicator

Alexander Stolte

Expert

[B4X] AS TextFieldAdvanced Text Validation/Required Fields Example

Similar Threads