B4J Question CustomListView B4A to B4J

trueboss323

Active Member
Licensed User
Longtime User
I'm trying to convert a B4A code of CustomListView to work with B4J. I need help please how to convert this code

B4X:
Sub CreateListItem(Text As String, Text2 As String, Width As Int, Height As Int, Image As Bitmap) As Panel

Dim p as Panel
Dim mycheckboxes as List
Dim chk as Checkbox

   p.Initialize("")
   p.Color = Colors.Black
   Dim img1 As ImageView
   img1.Initialize("img1")
   img1.Gravity = Gravity.FILL
   img1.Bitmap = Image
  
   chk.Initialize("chk")
   mycheckboxes.Add(chk)
  
   Dim title as Label
   title.Initialize("")
   title.Gravity = Bit.Or(Gravity.CENTER_VERTICAL, Gravity.LEFT)
   title.Text = Text
   title.TextSize = 16
   title.TextColor = Colors.White
   Dim subtitle As Label
   subtitle.Initialize("")
   subtitle.Gravity = Bit.Or(Gravity.CENTER_VERTICAL, Gravity.BOTTOM)
   subtitle.Text = Text2
   subtitle.TextSize = 14
   subtitle.TextColor = Colors.White
   p.AddView(img1, 2dip, 2dip, 50dip, Height - 4dip) 'view #0

   p.AddView(title, 65dip, -7dip, 300dip, Height - 4dip) 'view #1
   p.AddView(subtitle, 66dip, -2dip, 300dip,Height - 4dip) 'view #1
   p.AddView(chk, 88%x, 2dip, 50dip, Height - 4dip) 'view #2
  
   Return p

End Sub

And then use it with:

B4X:
Dim clv as CustomListView
      clv.Add(CreateListItem("Title","Subtitle", clv.AsView.Width, 50dip, LoadBitmap(File.DirAssets, "image.png")), 50dip, "")
 

Knoppi

Active Member
Licensed User
Longtime User
in my version I assume that Text2 is the description of checkbox

B4X:
' Library: CSSUtils
Sub CreateListItem(Text As String, Text2 As String, Width As Int, Height As Int, Picture As Image) As Pane

    Dim p As Pane
    Dim mycheckboxes As List
    mycheckboxes.Initialize
    Dim chk As CheckBox

    p.Initialize("")
    CSSUtils.SetBackgroundColor( p, fx.Colors.Black)
    Dim img1 As ImageView
    img1.Initialize("img1")
    CSSUtils.SetStyleProperty( img1, "fx-background-position", "center center")
    img1.SetImage( Picture)
  
    chk.Initialize("chk")
    chk.Alignment = "BOTTOM_LEFT"
    chk.TextColor = fx.Colors.White
    chk.TextSize = 14
    chk.Text = Text2
    mycheckboxes.Add(chk)

    Dim title As Label
    title.Initialize("")
    title.Alignment = "CENTER_LEFT"
    title.Text = Text
    title.TextSize = 16
    title.TextColor = fx.Colors.White

'    Dim subtitle As Label
'    subtitle.Initialize("")
'    subtitle.Alignment = "BOTTOM_CENTER"
'    subtitle.Text = Text2
'    subtitle.TextSize = 14
'    subtitle.TextColor = fx.Colors.White
  
    p.AddNode( img1, 2dip, 2dip, 50dip, Height -4dip)
  
    p.AddNode( title, 65dip, -7dip, 300dip, Height - 4dip) 'view #1
    'p.AddNode( subtitle, 66dip, -2dip, 300dip, Height - 4dip) 'view #1
    p.AddNode( chk, Width * 0.88, 2dip, 300dip, Height - 4dip) 'view #2
    
    Return p
End Sub
 
Upvote 0

trueboss323

Active Member
Licensed User
Longtime User
Cross platform CustomListView: [B4X] [XUI] xCustomListView - cross platform CustomListView

The best solution is to create a layout file for the items (with anchors) and load it for each item.
I have that library but I'm just trying to figure out how to migrate code from my old B4A project to the new CustomListView

in my version I assume that Text2 is the description of checkbox

Both Text1 and Text2 are in the form of labels I believe. The end result should look like this:
Untitled.png
 
Last edited:
Upvote 0

Knoppi

Active Member
Licensed User
Longtime User
B4X:
' Library: CSSUtils
Sub CreateListItem(Text As String, Text2 As String, Width As Int, Height As Int, Picture As Image) As Pane

    Dim p As Pane
    Dim mycheckboxes As List
    mycheckboxes.Initialize
    Dim chk As CheckBox

    p.Initialize("")
    CSSUtils.SetBackgroundColor( p, fx.Colors.Black)
    Dim img1 As ImageView
    img1.Initialize("img1")
    CSSUtils.SetStyleProperty( img1, "fx-background-position", "center center")
    img1.SetImage( Picture)
  
    chk.Initialize("chk")
    mycheckboxes.Add(chk)

    Dim title As Label
    title.Initialize("")
    title.Alignment = "CENTER_LEFT"
    title.Text = Text
    title.TextSize = 16
    title.TextColor = fx.Colors.White

    Dim subtitle As Label
    subtitle.Initialize("")
    subtitle.Alignment = "BOTTOM_LEFT"
    subtitle.Text = Text2
    subtitle.TextSize = 12
    subtitle.TextColor = fx.Colors.White
  
    p.AddNode( img1, 2dip, 2dip, 50dip, Height -4dip)
  
    p.AddNode( title, 65dip, -7dip,  Width -65dip -50dip, Height - 4dip) 'view #1
    p.AddNode( subtitle, 65dip, -2dip, Width -65dip -50dip, Height - 4dip) 'view #1
    p.AddNode( chk, Width-50dip, 2dip, 50dip, Height - 4dip) 'view #2
  
    Return p
End Sub
example.png
 
Upvote 0

trueboss323

Active Member
Licensed User
Longtime User
The layout works correctly but when I try to add multiple items , the text is garbled and it doesn't make a new Pane below it as expected. What am i doing wrong?

Untitled.png
 
Upvote 0

Knoppi

Active Member
Licensed User
Longtime User
change this line
B4X:
Dim p As Pane
to
B4X:
Dim p As AnchorPane
i tested it with standard listview
B4X:
Sub AppStart (Form1 As Form, Args() As String)
    MainForm = Form1
    MainForm.Show
   
    Dim lv As ListView
    lv.Initialize( "lv")
    MainForm.RootPane.AddNode( lv, 0, 0, 300dip, MainForm.Height)

    For i=0 To 9
        lv.Items.Add( CreateListItem( "Text1 - "&i, "Text2", 300dip, 75dip, fx.LoadImage( File.DirAssets, "b4a-200.png")))
    Next
End Sub

test-listview.png
 
Upvote 0
Top