FrançaisGet started

The master-detail interface

A list and the detail of the chosen item: selection as the link, the no-selection state, editing with save and cancel, updating the list, and the two-screen version on a phone.

  • 22 cards
  • 5 topics
  • Free
Study this deck

The outline, topic by topic

Each topic is weighted the way the exam weighs it.

  1. Concepts
  2. Questions
  3. Sort and link
  4. Scenarios
  5. Understand

A few cards from the deck

  • Master-detail interface: what is it?

    Show the answer

    A screen that shows a list of items on one side and, on the other, the information of the one the user has chosen.

    A mailbox or an address book are examples: the list is the master, the reading or editing pane the detail.

  • When does this code throw a NullPointerException?

    ```java
    liste.getSelectionModel().selectedItemProperty().addListener((obs, ancien, nouveau) -> {
    champNom.setText(nouveau.getNom());
    });
    `

    • When the selection is cleared: nouveau is then null
    • At the first click on a row, when nouveau is not yet initialised
    • When the user clicks the same row twice in a row
    • When the list holds more than one item
    Show the answer

    When the selection is cleared: nouveau is then null

    When the selection is cleared, the listener's nouveau value is null. That case must be handled: test nouveau == null and set the detail to the empty state.

  • In a master-detail interface, the list's … is the link: the detail is tied to the selected item, not to the whole list.

    Show the answer

    In a master-detail interface, the list's selection is the link: the detail is tied to the selected item, not to the whole list.

    List and detail do not know each other; they only share the selection. One can be replaced without touching the other.

  • Selected item: what is it?

    Show the answer

    The list item the user has picked, or the absence of an item when nothing has been picked.

    It is the only link between list and detail: the detail binds to the selection, not to the list. It can be empty, so that case must be planned.

  • The displayed item is deleted, and the detail still shows its fields, which fail when edited. What is the cause and the fix?

    • The list did not refresh; reload it in full after each deletion
    • The Delete button should disable the item instead of removing it from the displayed list
    • The detail fields should be permanently read-only
    • The detail is not tied to the selection; it needs an empty state when that disappears
    Show the answer

    The detail is not tied to the selection; it needs an empty state when that disappears

    When the selection becomes empty, the detail must know it: it empties or disables its fields and invites the user to pick an item. Reloading the list would not change the detail left on the old item.

Study this deck