B4J Tutorial Customized ListView

Discussion in 'B4J Tutorials' started by Erel, Nov 25, 2013.

  1. Erel

    Erel Administrator Staff Member Licensed User

    B4J ListView can hold simple items like strings or numbers and also customized items.
    The core ListView is similar to both B4A ListView and CustomListView class.

    Adding custom items is done by adding Nodes to the ListView items collections.
    Instead of showing the item "value" the Node itself will be displayed.
    The Node can be an AnchorPane that holds other nodes or it can be any other node type as well.

    For example to create a list that shows the available fonts:

    [​IMG]

    Code:
    Sub Process_Globals
       
    Private fx As JFX
       
    Private MainForm As Form
       
    Private lv As ListView
    End Sub

    Sub AppStart (Form1 As Form, Args() As String)
       MainForm = Form1
       MainForm.Show
       lv.Initialize(
    "lv")
       MainForm.RootPane.AddNode(lv, 
    0000)
       MainForm.RootPane.SetAnchors(lv, 
    000,0)
       
    For Each family As String In fx.GetAllFontFamilies
         
    Dim lbl As Label
         lbl.Initialize(
    "")
         lbl.Text = family
         lbl.Font = fx.CreateFont(family, 
    22FalseFalse)
         lv.Items.Add(lbl)
       
    Next
    End Sub

    Sub lv_SelectedIndexChanged(Index As Int)
       
    If Index > -1 Then
         
    Dim lbl As Label = lv.SelectedItem
         
    Log(lbl.Text)
       
    End If
    End Sub
    A more complicated example is attached. It uses ImageDownloader to download a list of images (similar to this B4A example: http://www.basic4ppc.com/android/fo...ple-way-to-download-images.30875/#post-179512 )

    Note that the images show when they are ready.

    [​IMG]

    This feature depends on v1.00 (beta 5+).
     

    Attached Files:

  2. holdemadvantage

    holdemadvantage Active Member Licensed User

    Hi Erel, the zip is ok? Imagedownloader.b4j loads an empty project

    Thanks
     
  3. Erel

    Erel Administrator Staff Member Licensed User

    Seems to be fine here. Note that the code will fail to compile as it depends on beta 5+ (which will be released later today).
     
  4. holdemadvantage

    holdemadvantage Active Member Licensed User

    Sorry, it was my fail.
    I try with beta 1 and did't work
    Now is ok with beta4
     
  5. alienhunter

    alienhunter Active Member Licensed User

    hi
    i try to understand why the background is still white in bj4.jpg
    but the fx.jpg is set to black and ( i am loading it with LoadLayout )
    do i have to specify the css for it ?
    "ListView1.StyleClasses"


    thanks AH


    Code:
    For i = 0 To 100
            
    Dim p As AnchorPane
            p.Initialize(
    "")
            p.LoadLayout(
    "ListItem")
            ImageView1.SetImage(backbmp)
          
            listview1.Items.Add(p)
          
    Next
     

    Attached Files:

    • fx.jpg
      fx.jpg
      File size:
      16.2 KB
      Views:
      1,288
    • bj4.jpg
      bj4.jpg
      File size:
      147.5 KB
      Views:
      1,601
  6. Erel

    Erel Administrator Staff Member Licensed User

    Can you upload your project (File - Export as zip)?
     
  7. alienhunter

    alienhunter Active Member Licensed User

    yes here you have it

    thanks AH
     

    Attached Files:

  8. Erel

    Erel Administrator Staff Member Licensed User

    The db file is missing.
     
  9. alienhunter

    alienhunter Active Member Licensed User

    can you please skip the sub i forgot to take it out there is personal user info there
    thanks
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    The background color is not set in your code (or layout). You can set the style of the AnchorPane:
    Code:
    -fx-background-color:black
     
  11. tdocs2

    tdocs2 Well-Known Member Licensed User

    Greetings.

    I downloaded ImageDownloader, opened and ran it in B4J. When I click on Designer, Listitem.fxml, and Edit layout, IE opens the xml file. Where is the Scene Builder? How do I install it?

    Any help will be appreciated.

    Edit - found problem:
    I reassigned the extension fxml to open with Scene Builder instead of IE. Thanks anyway.
     
    Last edited: Dec 5, 2013
    Erel likes this.
  12. B4JExplorer

    B4JExplorer Active Member Licensed User

    How do you add Strings, which are retrieved from the Text property of a TextField, to a ListView? Append/Add doesn't do the trick.
     
    Last edited: Dec 24, 2013
  13. Erel

    Erel Administrator Staff Member Licensed User

    Code:
    lv.Items.Add(TextField1.Text)
     
  14. B4JExplorer

    B4JExplorer Active Member Licensed User

    Perfect, thanks.
     
  15. B4JExplorer

    B4JExplorer Active Member Licensed User

    How do you handle a Mouse DOUBLE click event? Need to be able to double click a ListView item, resulting in the copying of the item text, back into a Textbox, where it originally came from.

    Also, any way of responding to ENTER on a listview item? I know _Action is appropriate for other controls, but anything analogous on a listview?
     
    Last edited: Dec 24, 2013
  16. Erel

    Erel Administrator Staff Member Licensed User

    See the example in the first post. You can add labels and set their EventName parameter (it is an empty string in the above example). This will allow you to handle the labels MouseClicked event.

    The EventData parameter holds the number of clicks.
     
  17. B4JExplorer

    B4JExplorer Active Member Licensed User

    Good, thanks Erel.
     
  18. adalexander

    adalexander Member Licensed User

    Hello erel, we say that a nose I managed to make a listview with bitmaps, now I make sure that references to the touch line starts a call to the number that is written on this list, hog s early activated the library on phone and declared globals : dim p as phnecalls, how can I do to make sure that the call is made? I have seen several guides but none that explains, in addition to this I have another doubt when you turn the smartphone, how can I do so that the app is effectively the same? thanks for everything!
    so far no one has responded, I hope you ...
     
  19. Erel

    Erel Administrator Staff Member Licensed User

    I'm not sure that I understand. Are you asking about B4J or Basic4android?
     
  20. StarinschiAndrei

    StarinschiAndrei Active Member Licensed User

    Hi Erel ,
    Could you please tell me what's wrong is in my code ? when i click on list item to get the label content i receive the following error. The error comes from this line Dim lbl As Label = lv.SelectedItem
    View attachment 28252
    Code:
    #Region  Project Attributes
        
    #MainFormWidth: 600
        
    #MainFormHeight: 400
    #End Region

    Sub Process_Globals
        
    Private fx As JFX
        
    Private MainForm As Form
        
    Private lv As ListView
        
    Dim lbl1 As Label
        
    Dim chk1 As CheckBox
        
    Dim p As AnchorPane
        
    Private Toast As ToastMessageShow

    End Sub

    Sub AppStart (Form1 As Form, Args() As String)
          MainForm = Form1
       MainForm.Show
       MainForm.RootPane.LoadLayout(
    "Main")
       Toast.Initialize(
    "Toast")

    End Sub
    Sub fillList
    For i=0 To 10
           p.Initialize(
    "")
         p.LoadLayout(
    "listItemP")
         lv.Items.Add(p)
         lbl1.Text = 
    "Test"&"  "&i
         chk1.Checked=
    False
       
    Next
    End Sub
    Sub btnSend_MouseClicked (EventData As MouseEvent)
        lv.Items.Clear
         fillList
    End Sub
    Sub lv_SelectedIndexChanged(Index As Int)
       
    If Index > -1 Then
         
    Dim lbl As Label = lv.SelectedItem
         
    'Toast.ToastShow(lbl.text)
         Log(lbl.Text)
       
    End If
    End Sub
     

    Attached Files:

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