Overslaan naar hoofdinhoud

Lijsten

Openen in ChatGPT
info

Deze sectie beschrijft gemeenschappelijke eigenschappen van alle lijstcomponenten en is geen klasse die kan worden geïnstantieerd of direct 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 in de lijst toe te voegen, te verwijderen, te selecteren en te beheren.

Deze pagina beschrijft de gedeelde functies en het gedrag van alle lijstcomponenten, terwijl specifieke details voor elk worden behandeld op hun eigen pagina's.

Gebruik van ListItem​

Lijstcomponenten bestaan uit ListItem objecten, die individuele items binnen een lijst vertegenwoordigen. Elk ListItem is gekoppeld aan een unieke sleutel en weertekst. Belangrijke kenmerken van de ListItem klasse zijn:

  • Een ListItem bevat een unieke sleutel Object en een tekst String om binnen de lijstcomponent weer te geven.
  • Je kunt een ListItem construeren door een sleutel en tekst op te geven, of alleen de tekst op te geven zodat er een willekeurige sleutel wordt gegenereerd.

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 toestand 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 te communiceren met en de lijst te manipuleren om aan de vereisten van je app te voldoen.

Items toevoegen​

tip

Om de prestaties te optimaliseren, is het efficiënter om eerst een lijst van ListItem objecten te maken in plaats van elke keer dat je de add() methode gebruikt, een server-naar-client bericht te sturen. Zodra je deze lijst hebt, kun je ze allemaal tegelijk toevoegen met de insert(int index, List<ListItem> items) methode. Deze benadering 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, raadpleeg Client/Server Interaction.

Items verwijderen​

Items selecteren​

Alle lijsttypes implementeren de SelectableList interface. Deze interface biedt meerdere verschillende manieren om de huidige ListItem te selecteren.

Met een gegeven ListItem​

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

List demoList = new List();
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.

List demoList = new List();
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.

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

Andere lijstbewerkingen​

Itereren over lijsten​

Alle Lijstcomponenten implementeren de Java Iteratable interface, die een efficiënte en intuïtieve manier biedt om door de inhoud van een lijst te itereren. Met deze interface kun je eenvoudig door elk ListItem lopen, zodat je gemakkelijk toegang hebt tot, wijzigingen kunt aanbrengen of acties kunt uitvoeren op elk item met minimale inspanning. De Iterable interface is een standaardpatroon van de Java-taal, wat ervoor zorgt dat je code bekend en onderhoudbaar is voor elke Java-ontwikkelaar.

De onderstaande codefragmenten tonen twee gemakkelijke 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 gebruik vervolgens 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 fruit gevonden");
Toon Code

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

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

De velden configureren​

  • setPlaceholder() stelt de tijdelijke 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 de code​

setTerm() stelt de zoekterm in en filtert de lijst. Het werkt ongeacht of het veld zichtbaar is, zodat een lijst kan worden gefilterd zonder dat er een zoekgebruikersinterface wordt weergegeven.

listBox.getSearch().setTerm("apple");
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.

Gemeenschappelijke lijst eigenschappen​

Label​

Alle Lijstcomponenten kunnen aan een label worden toegewezen, wat een beschrijvende tekst of titel is die aan de component is gekoppeld. Labels bieden een korte uitleg of aanwijzing om gebruikers te helpen de bedoeling of verwachte selectie voor die specifieke lijst te begrijpen. Naast hun belang voor gebruiksvriendelijkheid spelen lijstlabels ook een cruciale rol in toegankelijkheid, waardoor schermlezers en ondersteunende technologieën nauwkeurige informatie kunnen bieden en navigatie per toetsenbord kunnen vergemakkelijken.

Helpertekst​

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

Horizontale uitlijning​

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

Gebruik de setHorizontalAlignment() methode om de uitlijning in te stellen:

  • HorizontalAlignment.LEFT (standaard)
  • HorizontalAlignment.MIDDLE
  • HorizontalAlignment.RIGHT
ListBox<String> listBox = new ListBox<>();
listBox.setHorizontalAlignment(HorizontalAlignment.LEFT);

Om de huidige uitlijning te krijgen:

HorizontalAlignment alignment = listBox.getHorizontalAlignment();

Expansies​

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 voor het aanpassen van de component aan verschillende UI-contexten, zoals formulieren, dialoogvensters, zijbalken, enz.

Gebruik de setExpanse() methode om het expansieniveau in te stellen. Opties omvatten:

  • Expanse.NONE
  • Expanse.XSMALL
  • Expanse.SMALL
  • Expanse.MEDIUM (standaard)
  • Expanse.LARGE
  • Expanse.XLARGE
ListBox<String> listBox = new ListBox<>();
listBox.setExpanse(Expanse.LARGE);

Je kunt de huidige instelling ophalen met:

Expanse current = listBox.getExpanse();

Onderwerpen​