B4J Question [ABMaterial] Possible to use autocompletion ?

Luk

Member
Licensed User
Longtime User
Not for the moment. The inputfield used in an ABMCombo can not handle this. This is not for the near future, as a combo is a very complex object to rewrite.

Ok, i understand. Thanks.
Can you tell me what's the recommended way to let the user choose from a long list of values using ABMaterial ? (I'm new to web programming, so please forgive my dumb questions :))
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
I don't really have a solution for this, but I'm thinking about it as it is something we'll need in the future too. The major problem is finding a way it all happens in the browser and that it does not have to go back and forth to the server to check things. One of the perks of being a hybrid system...
 
Upvote 0

Luk

Member
Licensed User
Longtime User
I don't really have a solution for this, but I'm thinking about it as it is something we'll need in the future too. The major problem is finding a way it all happens in the browser and that it does not have to go back and forth to the server to check things. One of the perks of being a hybrid system...

I was thinking of opening a dialog with search field and table that shows the first x values. The user can select one of the values and click the ok button. Or he/she can enter some text in the search field and by pressing enter, it will load the values that contains the text. I will try this and let you know if it's working fine.
 
Upvote 0

Luk

Member
Licensed User
Longtime User
I was thinking of opening a dialog with search field and table that shows the first x values. The user can select one of the values and click the ok button. Or he/she can enter some text in the search field and by pressing enter, it will load the values that contains the text. I will try this and let you know if it's working fine.

The above solution is working smoothly. Thanks for this great lib !
 
Upvote 0

Harris

Expert
Licensed User
Longtime User
@Luk Great to hear! Would you mind posting a snippit? This could help a lot of people :)
Yes please - post a snip or tutorial. So many of us struggle comprehending this framework and learn so much from others discoveries.

As each of us learns by trial and error; please post what you have successfully accomplished so others may understand how to create the same.
These hints/instructions go a long, long way in helping us all use ABM effectively.

Thanks
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
Took me the whole night, but I may have implemented AutoComplete for ABMInputs o_O

When searching, only the strings containing the search string are shown, and the 'found' part of the string is in bold in the list.
There are two types: STARTS (screenshot 1) and CONTAINS (screenshot 2)

abmaterial-autostarts.png


abmaterial-autocontain.png


The code looks like this:

B4X:
' create the input fields
Dim inp1 As ABMInput
inp1.Initialize(page, "inp1", ABM.INPUT_TEXT, "First Name", False, "")
inp1.PlaceHolderText = "or your call name"
inp1.AutoCompleteType = ABM.AUTOCOMPLETE_STARTS
inp1.AutoComplete.Add("Alain")
inp1.AutoComplete.Add("Jos")
inp1.AutoComplete.Add("Carine")
inp1.AutoComplete.Add("Mams")
inp1.AutoComplete.Add("Paps")
inp1.AutoComplete.Add("Paul")
inp1.AutoComplete.Add("Pauline")   
inp1.AutoComplete.Add("Pandora")
inp1.AutoComplete.Add("Pieter")
inp1.AutoComplete.Add("Philip")
inp1.AutoComplete.Add("Porter")
page.Cell(2,1).AddComponent(inp1)
   
Dim inp2 As ABMInput
inp2.Initialize(page, "inp2", ABM.INPUT_TEXT, "Last  Name", False, "")
inp2.AutoCompleteType = ABM.AUTOCOMPLETE_CONTAINS
inp2.AutoComplete.Add("Bailleul")
inp2.AutoComplete.Add("Williams")
inp2.AutoComplete.Add("Pauwels")
inp2.AutoComplete.Add("Walkers")
inp2.AutoComplete.Add("Jamesson")
inp2.AutoComplete.Add("Who")
inp2.AutoComplete.Add("Dekaasstekker")
page.Cell(2,2).AddComponent(inp2)

This truly is the last thing I did on 1.08, promise! :)

Cheers,

Alain
 
Upvote 0

Luk

Member
Licensed User
Longtime User
This a snippit of what I did...
(Please note that there is a small problem when selecting a row when using ABMaterial < 1.08)

@alwaysbusy : is it possible to include the text as parameter in the Enterpressed events ? (To reduce the calls between client - server)

B4X:
'Class module
Sub Class_Globals
    Private ws As WebSocket 'ignore
    ' will hold our page information
    Public page As ABMPage
    ' page theme
    Private theme As ABMTheme
    ' to access the constants
    Private ABM As ABMaterial 'ignore   
    ' name of the page, must be the same as the class name (case sensitive!)
    Public Name As String = "Test"  '<-------------------------------------------------------- IMPORTANT
    ' name of the app, same as in ABMApplication
    Public AppName As String = "MyTest"          '<-------------------------------------------------------- IMPORTANT
   
    ' your own variables
    Dim customers As List
    Dim selName As String = ""
    Dim sheet As ABMModalSheet
    Dim tbl As ABMTable
    Dim inpName As ABMInput   
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize
    ' build the local structure IMPORTANT!
    BuildPage
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)   
    Log("Connected")
    ws = WebSocket1   
    If ABMShared.NeedsAuthorization Then
        If ws.Session.GetAttribute2("IsAuthorized", "") = "" Then
            ABMShared.NavigateToPage(ws, "../")
            Return
        End If
    End If
    ' connect our page with the websocket   
    page.SetWebSocket(ws)   
    ' Prepare the page IMPORTANT!
    page.Prepare
   
    'tbl.Refresh
End Sub

Private Sub WebSocket_Disconnected
    Log("Disconnected")
End Sub

Sub Page_ParseEvent(Params As Map)
    Dim eventName As String = Params.Get("eventname")
    Dim eventParams() As String = Regex.Split(",",Params.Get("eventparams"))
    If SubExists(Me, eventName) Then
        Params.Remove("eventname")
        Params.Remove("eventparams")
        Select Case Params.Size
            Case 0
                CallSub(Me, eventName)
            Case 1
                CallSub2(Me, eventName, Params.Get(eventParams(0)))                   
            Case 2
                If Params.get(eventParams(0)) = "abmistable" Then
                    Dim PassedTables As List = ABM.ProcessTablesFromTargetName(Params.get(eventParams(1)))
                    CallSub2(Me, eventName, PassedTables)
                Else
                    CallSub3(Me, eventName, Params.Get(eventParams(0)), Params.Get(eventParams(1)))
                End If
            Case Else
                ' cannot be called diretly, to many param
                CallSub2(Me, eventName, Params)               
        End Select
    End If
End Sub

public Sub BuildTheme()
    ' start with the base theme defined in ABMShared
    theme.Initialize("pagetheme")
    theme.AddABMTheme(ABMShared.MyTheme)
   
    ' add additional themes specific for this page
End Sub

public Sub BuildPage()
    ' initialize the theme
    BuildTheme
   
    'Initialize our list
    'will be result from database
    customers.Initialize2(Array As String("Alain", "Jos", "Paul", "Bertrande", "Julie", "Stephanie", "Bert", "Charles", "James", "Walter"))
    customers.Sort(True)
   
    ' initialize this page using our theme
    page.InitializeWithTheme(Name, "/ws/" & AppName & "/" & Name, False, theme)
    page.ShowLoader=True
    page.PageHTMLName = "index.html"
    page.PageTitle = ""
    page.PageDescription = ""
    page.PageKeywords = ""
    page.PageSiteMapPriority = ""
    page.PageSiteMapFrequency = ABM.SITEMAP_FREQ_YEARLY

    ' Add sheet       
    page.AddModalSheetTemplate(BuildSelectSheet)

    ' create the page grid
    page.AddRows( 1,True,"").AddCells12(1,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
       
    inpName.Initialize(page, "inpname", ABM.INPUT_TEXT, "Search", False, "")

    page.Cell(1,1).AddComponent(inpName)
   
End Sub

' clicked on the navigation bar
Sub Page_NavigationbarClicked(Action As String, Value As String)
    page.SaveNavigationBarPosition   
End Sub

Sub Page_FileUploaded(FileName As String, success As Boolean)   
   
End Sub

Sub Page_ToastClicked(ToastId As String, Action As String)
       
End Sub

Sub Page_ToastDismissed(ToastId As String)   
   
End Sub

Sub Page_Ready()
    Log("ready!")
    page.RestoreNavigationBarPosition
End Sub

Sub inpname_EnterPressed()
    'Show our search sheet   
    page.ShowModalSheet("selectname")
    'Call this method to solve costmetic problem :)
    sheet.Refresh
End Sub

Sub txtsearch_EnterPressed()
  Dim find, tmp As String
  Dim txtsearch As ABMInput
   
  'Text to find
  txtsearch = sheet.Content.Component("txtsearch")
  find = txtsearch.Text
  Log(find)
  'Clear results
  tbl.Clear
  'Loop (probably use database to filter data)
  'e.g. select top 10 name from customer where name like '%' + find + '%'
  For i = 0 To customers.Size - 1
    tmp = customers.Get(i)
    If tmp.ToLowerCase.Contains(find.ToLowerCase) Then                
        Dim r As List
        r.Initialize()
        r.Add(customers.Get(i))
        tbl.AddRow("ID" & i, r)   
    End If
  Next
  tbl.Refresh           
End Sub

Sub msgcancel_Clicked(Target As String)   
    page.CloseModalSheet("selectname")
End Sub

Sub msgok_Clicked(Target As String)       
    inpName.Text = selName
    page.CloseModalSheet("selectname")
    inpName.Refresh
End Sub

Sub tblsearch_Clicked(PassedRowsAndColumns As List)
    ' Get selected name from table
    Dim tblCellInfo As ABMTableCell = PassedRowsAndColumns.Get(0)   
    selName = tbl.GetString(tblCellInfo.Row, 0)
    Log(selName)
    'tbl.Refresh   
End Sub

Sub BuildSelectSheet() As ABMModalSheet
    Dim txtsearch As ABMInput
   
    sheet.Initialize(page, "selectname", True, False, "")
    sheet.IsDismissible = False
   
    sheet.Content.AddRows(2, True,"").AddCells12(1,"")       
    sheet.Content.BuildGrid
   
    txtsearch.Initialize(page, "txtsearch", ABM.INPUT_TEXT, "Search", False, "")
    sheet.Content.Cell(1,1).AddComponent(txtsearch)
       
    ' create a scrollable table
    tbl.InitializeScrollable( page, "tblsearch", False, False, True , Array As Int(100), "")
    tbl.SetHeaders(Array As String("Name"))   
   
    ' scrollable, so we need to set a fixed height IMPORTANT!
    sheet.Content.Cell(2,1).SetFixedHeight(260)

    ' Show first 4 rows
    For i = 0 To 3
        Dim r As List
        r.Initialize()
        r.Add(customers.Get(i))
        tbl.AddRow("ID" & i, r)   
    Next
    sheet.Content.Cell(2,1).AddComponent(tbl)
   
    ' Add footer without margins to prevent scrollbar to appear
    ' (By default, a row has a bottom margin of 20 pixels)
    sheet.Footer.AddRowsM(1, True, 0,0,"").AddCells12(1,"")
    sheet.Footer.BuildGrid
   
    Dim msgok As ABMButton
    msgok.InitializeFlat(page, "msgok", "", "", "OK", "transparent")
    sheet.Footer.Cell(1,1).AddComponent(msgok)
   
    Dim msgcancel As ABMButton
    msgcancel.InitializeFlat(page, "msgcancel", "", "", "CANCEL", "transparent")
    sheet.Footer.Cell(1,1).AddComponent(msgcancel)
       
    Return sheet
End Sub

Cheers,
Luk
 
Upvote 0
Top