1

I found this tip how to expose the SelectionModel for multi-selection when using the CharmListView, but my issue is the same even with the normal ListView.

When I do as shown below, I can select (highlight) multiple list items. Using CTRL or SHIFT on the desktop while mouse clicking, I can choose many items instead of just one at a time. When I test on my phone, only single selection behavior is still what I see as I choose one, then another.

How do we multi-select items on a list when on a mobile device?

@FXML
private CharmListView<Widget, Integer> myWidgetListView;

public void initialize() {

    Platform.runLater(() -> {
        ListView<Widget> innerList = (ListView<Widget>) myWidgetListView.lookup(".list-view");
        innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
    });
}
José Pereda
  • 44,311
  • 7
  • 104
  • 132
Javateer
  • 65
  • 6
  • Ho do you plan to use "Ctrl"/"Shift" on mobile? I mean, multi-selection might work but with a very different approach than on desktop: You might want to back your selected items one by one and report the multiple selection back to the listView. – José Pereda Aug 12 '21 at 14:45
  • @JoséPereda with multi-select on the desktop, when we select a list item, the control changes that item's color. Selecting the same one again reverts the color back, acknowledging it being unselected. I can try coding this behavior for the same list control on the phone but then so will every next developer that wants that too. It would be better if the control itself was coded to behave as so. I believe each next dev will assume it already works like that as I did. It will save people time if the docs are updated to forewarn readers otherwise. – Javateer Aug 12 '21 at 20:31
  • If I get it right you want multi-selection to work out of the box on mobile, just by tapping on different items? How would you deselect all (tapping again one by one)? Do you know of mobile apps that allow multi-selection? If this is a desired feature, it could be added to CharmListView, of course, as long it is feasible and not confusing UX-wise. – José Pereda Aug 12 '21 at 20:40
  • I explored my phone for a few apps supporting multi-select lists. Two File System browsing apps and one Email app. Two of those immediately present a button/icon once selection begins. Pressing it resets the list as none chosen. The 3rd app shows no UX control to reset the list. Instead I gesture on my phone to "go back one screen", the app view stays the same but the list resets. Another go back gesture invokes the app to go back to the previous view. So, I think it's up to the Gluon Developer how to listen to the User wanting to reset the list, then using the List's API to signal reset. – Javateer Aug 12 '21 at 23:20
  • I see indeed that Google Files uses a long press to start multilselection, and back button or X button on AppBar cancels it. Anyway, there is no unified UX or gesture to use multi-selection on mobile, and definitely it is not in line with how multi-selection is defined in JavaFX for desktop. For mobile, a custom implementation is needed, probably as part of CharmListView, or even part of OpenJFX... For now it could be easily added to your code, you just need to set a flag to identify that multiselection is allowed, and for every click you don't process the regular eventHandler for that cell. – José Pereda Aug 13 '21 at 09:33

1 Answers1

0

I got my multi-select list working. If you click on another list item after already selecting one, both stay highlighted. The 2nd selection does not deselect the 1st. You can select (highlight) the entire list, one list-item selection at a time. For any list-item already selected, to select it again deselects it without changing the selected state of others in the list.

This solution is functional but isn't quite finished. This doesn't yet stop a User from selecting the CharmListView's Header items. Also, when selecting another item, the others that were already selected will flicker. It's more noticeable on desktop than Android. If someone can help tweak what I've done below to stop the flicker, that would help complete this solution.

public class MyPresenter extends GluonPresenter<MyWidgets> {

  @FXML
  private CharmListView<Widget, Integer> charmListView;

  private Set<Integer> selectedIndices = new HashSet<Integer>();

  public void initialize() {

    Platform.runLater(() -> {
      ListView<Widget> innerList = (ListView<Widget>) charmListView.lookup(".list-view");
      innerList.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
      innerList.setOnMouseClicked((event) -> {
          int selectedIndex = innerList.getSelectionModel().getSelectedIndex();
          if(selectedIndices.contains(selectedIndex)) {
            selectedIndices.remove(selectedIndex);        
            innerList.getSelectionModel().clearSelection(selectedIndex);
          }                           
          else {
            selectedIndices.add(selectedIndex);
          }

          for(int index : selectedIndices)
            innerList.getSelectionModel().selectIndices(index);
      });
    });
  }
Javateer
  • 65
  • 6