B4J Tutorial 2 Tips: Animated Gifs and ListView items size

Two tips learned while developing a custom SDK manager for B4A:

SS-2017-05-29_15.47.14.png


1. I wanted to show an animated indicator while the external process runs. You can show a ProgressBar or ProgressIndicator with Progress set to -1 (indeterminate mode). However these modes should be avoided as they prevent the screen from updating properly.
A better solution is to use an animated gif. I wasn't aware to the fact that JavaFX (B4J ui engine) natively supports animated gifs. This makes it very simple to add nice animations as regular images.

2. The ListView items are made of panes with various layouts. You can see that if you resize the window the checkbox move and if the list is not wide enough then the version label moves under the description label. This is done with two layout variants.

SS-2017-05-30_09.50.13.png


For the resizing to work the panes need to be resized when the ListView is resized:
B4X:
Sub MainForm_Resize (Width As Double, Height As Double)
   For Each p As Pane In lstItems.Items
     p.SetSize(lstItems.Width - 40, p.Height) '-40 to provide space for the scroll bar
   Next
End Sub

I encountered an issue where the height of the items is not set correctly in some cases. The solution was to add a CSS file that explicitly set the height:
B4X:
.list-cell {
  -fx-cell-size: 40px;
}
 
Top