Android Tutorial [B4X] Input dialogs with XUI Views

Status
Not open for further replies.
SS-2019-01-06_17.52.32.png


B4XDialog from XUI Views library can show simple dialogs, template based dialogs and custom dialogs.

The example projects demonstrate the various template dialogs: https://www.b4x.com/android/forum/threads/b4x-xui-views-cross-platform-views-and-dialogs.100836/

This example focuses on B4XInputTemplate which is a template useful for text input. You can set a regex pattern that will be used to validate the input. The OK button will only be enabled when the pattern matches.

Starting from XUI Views v1.50 there is a preset configuration for numeric inputs. There are 4 possible modes based on the 2 options: whole numbers and positive numbers.
On B4A and B4i the keyboard type is set to best match the expected input type.

Example:
B4X:
Sub btnWholePositive_Click
   Dim input As B4XInputTemplate
   input.Initialize
   input.lblTitle.Text = "Whole Positive:"
   input.ConfigureForNumbers(False, False) 'AllowDecimals, AllowNegative
   Wait For (dialog.ShowTemplate(input, "OK", "", "CANCEL")) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       Dim res As Int = input.Text 'no need to check with IsNumber
       Log(res)
   End If
End Sub

The example also shows how to create a custom dialog. First you create a panel with the desired size then you load the layout and call Dialog.ShowCustom.
If text input is expected then set Dialog.PutAtTop to true to make sure that the keyboard doesn't hide the dialog.
B4X:
Sub btnCustom_Click
   Dim p As B4XView = xui.CreatePanel("")
   p.SetLayoutAnimated(0, 0, 0, 300dip, 150dip)
   p.LoadLayout("CustomDialog")
   dialog.PutAtTop = True 'put the dialog at the top of the screen
   Wait For (dialog.ShowCustom(p, "OK", "", "CANCEL")) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       dialog.Show(fieldFirstName.Text & " " & fieldLastName.Text, "OK", "", "")
   End If
End Sub

B4A, B4J and B4i projects are attached. Make sure to use XUI Views v1.50+.
See post #6 for recommended improvement to the custom dialog.
 

Attachments

  • B4A Dialogs.zip
    10.5 KB · Views: 5,183
  • B4i Dialogs.zip
    62.4 KB · Views: 1,288
  • B4J Dialogs.zip
    3.7 KB · Views: 1,765
Last edited:

DonManfred

Expert
Licensed User
Longtime User

incendio

Well-Known Member
Licensed User
Longtime User
Hi,

On Custom dialog, how to make cursor focus on First Name field & Virtual Keyboard automatically shows at the moment Dialog box appeared, just like other dialogs?
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
B4X:
Sub btnCustom_Click
   Dim p As B4XView = xui.CreatePanel("")
   p.SetLayoutAnimated(0, 0, 0, 300dip, 150dip)
   p.LoadLayout("CustomDialog")
   dialog.PutAtTop = True 'put the dialog at the top of the screen
   Dim rs As ResumableSub =  dialog.ShowCustom(p, "OK", "", "CANCEL")
   fieldFirstName.RequestFocusAndShowKeyboard
   fieldFirstName.NextField = fieldLastName
   #If B4A
   'need to make sure that it will not try to move to a field outside of the dialog
   Dim et As EditText = fieldLastName.TextField
   et.ForceDoneButton = True
   #end if
   
   Wait For (rs) Complete (Result As Int)
   If Result = xui.DialogResponse_Positive Then
       dialog.Show(fieldFirstName.Text & " " & fieldLastName.Text, "OK", "", "")
   End If
End Sub

Sub fieldLastName_EnterPressed
   dialog.Close(xui.DialogResponse_Positive)
End Sub

Updated code for the custom dialog based on XUI Views v1.81+.
 
Last edited:
Status
Not open for further replies.
Top