Android Tutorial [B4X] Input dialogs with XUI Views

Discussion in 'Tutorials & Examples' started by Erel, Jan 6, 2019.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    [​IMG]

    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:
    Code:
    Sub btnWholePositive_Click
       
    Dim input As B4XInputTemplate
       input.Initialize
       input.lblTitle.Text = 
    "Whole Positive:"
       input.ConfigureForNumbers(
    FalseFalse'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.
    Code:
    Sub btnCustom_Click
       
    Dim p As B4XView = xui.CreatePanel("")
       p.SetLayoutAnimated(
    000300dip150dip)
       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.
     

    Attached Files:

    Last edited: Jan 23, 2019
    edm68, fabricio, vecino and 12 others like this.
  2. paiac66

    paiac66 Member Licensed User

    Hi Erel,
    where I can find library "B4XInputTemplate"?
     
  3. DonManfred

    DonManfred Expert Licensed User

    fredo and Erel like this.
  4. paiac66

    paiac66 Member Licensed User

    Great! Thank you so much!
     
    Last edited: Jan 19, 2019
  5. incendio

    incendio Well-Known Member Licensed 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?
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    Code:
    Sub btnCustom_Click
       
    Dim p As B4XView = xui.CreatePanel("")
       p.SetLayoutAnimated(
    000300dip150dip)
       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: Jan 27, 2019
    BillMeyer and jimmyF like this.
  7. Erel

    Erel Administrator Staff Member Licensed User

Thread Status:
Not open for further replies.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice