Lijsten

Openen in ChatGPT

info

Dit gedeelte beschrijft de gemeenschappelijke functies van alle lijstcomponenten en is geen klasse die kan worden geïnstantieerd of direct kan worden gebruikt.

Er zijn drie soorten lijsten beschikbaar voor gebruik binnen je apps: ListBox, ChoiceBox en ComboBox. Deze componenten tonen allemaal een lijst van sleutel-waarde-items en bieden methoden om de items binnen de lijst toe te voegen, te verwijderen, te selecteren en te beheren.

Deze pagina schetst de gedeelde kenmerken en het gedrag van alle lijstcomponenten, terwijl specifieke details voor elk worden behandeld op hun respectieve pagina's.

Gebruik van ListItem

Lijstcomponenten zijn samengesteld uit ListItem objecten, die individuele items binnen een lijst voorstellen. Elke ListItem is geassocieerd met een unieke sleutel en displaytekst. Belangrijke kenmerken van de ListItem klasse zijn:

• Een ListItem encapsuleert een unieke sleutel Object en een tekst String om binnen de lijstcomponent te tonen.
• Je kunt een ListItem construeren door een sleutel en tekst op te geven, of door alleen de tekst op te geven, die ook als sleutel wordt gebruikt.

Sleutels moeten uniek zijn binnen een lijst. Het toevoegen van een tweede item alleen met tekst met dezelfde tekst werpt een IllegalArgumentException. Om dubbele labels weer te geven, geef verschillende sleutels op voor die items.

Beheren van ListItem objecten met de API

De verschillende lijstcomponenten bieden verschillende methoden voor het beheren van de lijst met items en het handhaven van een consistente staat tussen de lijst en de client. Door deze methoden te gebruiken, kun je de items binnen de lijst effectief beheren. De API stelt je in staat om interactie te hebben met en de lijst te manipuleren om te voldoen aan de eisen van je app.

Items toevoegen

• Een item toevoegen:

  • Om een ListItem aan de lijst toe te voegen, kun je de add(ListItem item) methode gebruiken.
  • Je kunt ook een nieuw ListItem toevoegen door de sleutel en tekst op te geven met de add(Object key, String text) of add(String text) methode.

• Een item op een specifieke index invoegen:

  • Om een item op een specifieke index in te voegen, gebruik de insert(int index, ListItem item) methode.
  • Je kunt een item met sleutel en tekst invoegen met de insert(int index, Object key, String text) of insert(int index, String text) methode.

• Meerdere items invoegen:

  • Je kunt meerdere items op een gespecificeerde index invoegen met de insert(int index, List< ListItem > items) methode.

tip

Om de prestaties te optimaliseren, is het efficiënter om een Lijst van ListItem objecten eerst te creëren, in plaats van elke keer dat je de add() methode gebruikt een server-naar-client bericht te versturen. Nadat je deze lijst hebt, kun je ze allemaal in één keer toevoegen met behulp van de insert(int index, List<ListItem> items) methode. Deze aanpak vermindert de communicatie tussen server en client, wat de algehele efficiëntie verbetert. Voor gedetailleerde richtlijnen over dit en andere best practices in de webforJ-architectuur, zie Client/Server Interaction.

Items verwijderen

• Een item verwijderen:

  • Om een item uit de lijst te verwijderen, gebruik de remove(int index) of remove(Object key) methode.

• Alle items verwijderen:

  • Je kunt alle items uit de lijst verwijderen met removeAll().

Items selecteren

Alle lijsttypen implementeren de SelectableList interface. Deze interface biedt meerdere manieren om het huidige ListItem te selecteren.

Met een gegeven ListItem

select(ListItem item) neemt een ListItem als parameter om te selecteren.

ListBox demoList = new ListBox();
ListItem demoItem = new ListItem("demo","Demo Item");
demoList.add(demoItem);
demoList.select(demoItem);

Met een gegeven sleutel van een ListItem

selectKey(Object key) neemt een sleutel naar een ListItem als parameter om te selecteren.

ListBox demoList = new ListBox();
demoList.add("demo","Demo Item");
demoList.selectKey("demo");

Met een gegeven index van een ListItem

selectIndex(int index) neemt een index naar een ListItem als parameter om te selecteren.

ListBox demoList = new ListBox();
demoList.add("demo","Demo Item");
demoList.selectIndex(0);

Andere lijstbewerkingen

• Toegang en bijwerken van items:

  • Om items op sleutel of index te benaderen, gebruik getByKey(Object key) of getByIndex(int index).
  • Je kunt de tekst van een item bijwerken met de setText(String text) methode binnen de ListItem klasse.

• Informatie over de lijst ophalen:

  • Je kunt de grootte van de lijst krijgen met de size() methode.
  • Om te controleren of de lijst leeg is, gebruik je de isEmpty() methode.

Itereren over lijsten

Alle lijstcomponenten implementeren de Java Iterable interface. Gebruik forEach() of een for lus om toegang te krijgen tot of elke ListItem te wijzigen.

De onderstaande code toont twee eenvoudige manieren om door een lijst te itereren:

list.forEach(item -> {
   item.setText("Gewijzigd: " + item.getText());
});

for (ListItem item : list) {
   item.setText("Gewijzigd2: " + item.getText());
}

Zoeken 26.02

Alle Lijstcomponenten hebben een ingebouwd zoekveld dat de items filtert op basis van hun tekst. Het veld is standaard uitgeschakeld. Gebruik getSearch() om de zoekconfiguratie te bereiken, en setFieldVisible(true) om het veld bovenaan de lijst van de component weer te geven.

ComboBox comboBox = new ComboBox("Fruit");
comboBox.insert("Apple", "Banana", "Cherry", "Apricot", "Pineapple");

comboBox.getSearch()
  .setFieldVisible(true)
  .setPlaceholder("Zoek naar fruit")
  .setEmptyMessage("Geen fruits gevonden");

Filtering verbergt alleen de items die niet overeenkomen. Itemindexen en de huidige selectie blijven onveranderd, zodat getSelectedIndex() verwijst naar de volledige lijst in plaats van naar de momenteel zichtbare items.

Het zoekveld kan opnieuw verborgen worden met setFieldVisible(false).

Het veld configureren

• setPlaceholder() stelt de placeholder-tekst van het zoekveld in. De standaardwaarde is Zoeken.

• setEmptyMessage() stelt de boodschap in die wordt weergegeven wanneer een zoekopdracht geen resultaten oplevert. De standaardwaarde is Geen gegevens om weer te geven.

Elke instelling heeft een bijbehorende getter: isFieldVisible(), getPlaceholder(), getEmptyMessage(), en getTerm().

Filteren vanuit code

setTerm() stelt de zoekterm in en filtert de lijst. Het werkt of het veld zichtbaar is of niet, zodat een lijst gefilterd kan worden zonder enige zoekgebruiksinterface weer te geven.

listBox.getSearch().setTerm("appel");

getTerm() en het zoekveld

Typen in het zoekveld schrijft de term niet terug naar de configuratie. getTerm() retourneert de laatste waarde die aan setTerm() is doorgegeven, niet wat de gebruiker heeft getypt.

Gedeelde lijst eigenschappen

Label

Alle Lijstcomponenten kunnen een label worden toegewezen, wat een beschrijvende tekst of titel is die aan de component is gekoppeld. Labels bieden een korte uitleg of prompt om gebruikers te helpen het doel of de verwachte selectie voor die specifieke lijst te begrijpen. Naast hun belang voor bruikbaarheid, spelen lijstlabels ook een cruciale rol in toegankelijkheid, zodat schermlezers en hulpmiddelen nauwkeurige informatie kunnen geven en het navigeren met het toetsenbord kunnen vergemakkelijken.

Hulptekst

Elke Lijstcomponent kan hulptekst onder de lijst weergeven met de setHelperText() methode. Deze hulptekst biedt aanvullende context of uitleg over de beschikbare opties, zodat gebruikers de nodige informatie hebben om weloverwogen keuzes te maken.

Horizontale uitlijning

Alle lijstcomponenten implementeren de HasHorizontalAlignment interface, waarmee je controle hebt over hoe tekst en inhoud binnen de component zijn uitgelijnd.

Gebruik de setHorizontalAlignment() methode met de HasHorizontalAlignment.Alignment enum om de uitlijning in te stellen:

• Alignment.LEFT (standaard)
• Alignment.MIDDLE
• Alignment.RIGHT

ListBox listBox = new ListBox();
listBox.setHorizontalAlignment(Alignment.LEFT);

Om de huidige uitlijning te verkrijgen:

Alignment alignment = listBox.getHorizontalAlignment();

Expanses

Alle lijstcomponenten in webforJ implementeren ook de HasExpanse interface, waarmee je de algehele grootte en visuele gewicht van de component kunt aanpassen. Dit is nuttig om de component aan te passen aan verschillende UI-contexten, zoals formulieren, dialoogvensters, zijbalken, enz.

Gebruik de setExpanse() methode om het expanse-niveau in te stellen. Opties zijn:

• Expanse.NONE
• Expanse.XSMALL
• Expanse.SMALL
• Expanse.MEDIUM (standaard)
• Expanse.LARGE
• Expanse.XLARGE

ListBox listBox = new ListBox();
listBox.setExpanse(Expanse.LARGE);

Je kunt de huidige instelling ophalen met:

Expanse current = listBox.getExpanse();

Onderwerpen

📄️ChoiceBox

Pick a single value from a fixed set with the ChoiceBox dropdown, including dropdown type styling, max row count, and keyboard navigation.

📄️ComboBox

Combine a dropdown list with a text input in the ComboBox to let users select preset items or type custom values with placeholder support.

📄️ListBox

Show a scrollable, always-visible list with the ListBox component, supporting single or multiple selection and keyboard navigation.

Blijf leren

ArtikelMulti-select in Java UI: ListBox and ChoiceBox with webforJArtikelComboBox in Java: preset items and custom values