RichFaces - Auswahlkomponenten
In diesem Kapitel lernen wir verschiedene Auswahlkomponenten kennen, die von RichFaces Technology bereitgestellt werden.
<rich: pickList>
Mit diesem Tag können wir einen Wert aus der ausgefüllten Liste auswählen. Außerdem können wir eine Listenkomponente zu einer anderen Liste hinzufügen und daraus entfernen. Das folgende Beispiel zeigt, wie dies funktioniert. Erstellen Sie eine xhtml-Datei, nennen Sie sie "pickListExample.xhtml" und fügen Sie den folgenden Code ein.
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>PickList Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "Pick List Example"/>
<br/>
<br/>
<rich:pickList value = "#{managedBean.subjectList}"
sourceCaption = "SubjectList"
targetCaption = "Selected Subject"
listWidth = "170px"
listHeight = "120px"
orderable = "true">
<f:selectItems value = "#{managedBean.subjectList}"
itemValue = "#{subject}" itemLabel = "#{subject.subjectName}"/>
</rich:pickList>
</h:form>
</h:body>
</html>Wir müssen unsere DateiagedBean.java ändern, um die Listenkomponenten in der xhtml-Datei zu füllen. Es folgt der Schnappschuss unserer modifizierten Java-Datei.
import java.util.Arrays;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class managedBean {
String message;
String job;
private List<String> SubjectList = Arrays.asList(
"Richface","AJAX","JAVA","JSF","DOTNET","python");
public String getMessage() {
return message;
}
public void setMessage(String message) {
System.out.println("setMessage method is getting called with--"+message);
this.message = message;
}
public String getJob() {
return job;
}
public void setJob(String job) {
System.out.println("setJob method is getting called with--"+job);
this.job = job;
}
public List<String> getSubjectList() {
return SubjectList;
}
public void setSubjectList(List<String> SubjectList) {
this.SubjectList = SubjectList;
}
}Der obige Code liefert die folgende Ausgabe im Browser. Das Attribut "value" des Tags pickList ist nichts anderes als das Attribut "getSubjectList ()" der Bean-Klasse. "ItemValue" ist die Abkürzung für die Objektklasse und das entsprechende "itemLabel" ist der Name des Instanzwerts. In diesem Beispiel erstellt unser pickList-Tag automatisch zwei separate Listen mit den Namen "sourceCaption" und "targetCaption". Das Attribut orderable wird verwendet, um die Auswahlreihenfolge in der Zielliste beizubehalten.
<rich: orderList>
Dieses Tag wird verwendet, um eine Liste als Ganzes zu rendern. <orderingList> bietet automatisch eine Schaltflächenfunktion, die sich in der Liste ausbreitet, und hilft bei der Bestellung eines ausgewählten Elements. Im folgenden Beispiel erstellen wir eine Bestellliste mit dem folgenden Code für "OrderingListExample.xhtml".
<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml"
xmlns:h = "http://java.sun.com/jsf/html"
xmlns:f = "http://java.sun.com/jsf/core"
xmlns:ui = "http://java.sun.com/jsf/facelets"
xmlns:a4j = "http://richfaces.org/a4j"
xmlns:rich = "http://richfaces.org/rich">
<h:head>
<title>OrderingList Example</title>
</h:head>
<h:body>
<h:form>
<h:outputText value = "ordering List Example"/><br/><br/>
<rich:orderingList value = "#{managedBean.subjectList}"
itemValue = "#{subject}"
itemLabel = "#{subject.subjectName}" >
</rich:orderingList>
</h:form>
</h:body>
</html>Wir müssen unsere Bean-Klasse nicht ändern, da wir dieselbe Liste erneut mit unterschiedlichen Tags für unterschiedliche Darstellungen füllen. Wie im vorherigen Beispiel enthalten auch hier die Wertattribute die gesamte Liste von "getSubjectList ()". "ItemValue" und "itemLabel" enthalten den Wert der Objektklasse bzw. der entsprechenden Instanzvariablen.
Der obige Code erzeugt die folgende Ausgabe im Browser.
<rich: ListShuttle>
Das ListShuttle-Tag ist in RichFaces 3 verfügbar. Es hilft bei der Verbreitung in einer Liste und fügt denselben Wert in eine andere ein. In RichFaces 4 wurde dieses Tag unterdrückt, da die gleiche Funktionalität durch ein anderes neues Tag mit dem Namen <rich: pickList> wie oben beschrieben erreicht werden kann. Wenn Sie RichFaces 3.0 verwenden, können Sie dieses Tag folgendermaßen verwenden.
<rich:listShuttle sourceValue = "#{toolBar.freeItems}"
targetValue = "#{toolBar.items}" var = "items" listsHeight = "150"
sourceListWidth = "130" targetListWidth = "130"
sourceCaptionLabel = "Available Items"
targetCaptionLabel = "Currently Active Items"
converter = "listShuttleconverter">
<rich:column width = "18">
<h:graphicImage value = "#{items.iconURI}"></h:graphicImage>
</rich:column>
<rich:column>
<h:outputText value = "#{items.label}"></h:outputText>
</rich:column>
<a4j:support event = "onlistchanged" reRender = "toolBar" />
<a4j:support event = "onorderchanged" reRender = "toolBar" />
</rich:listShuttle>Es ist sehr praktisch, pickList anstelle dieses Tags zu verwenden, da dieselbe Funktionalität mit pickList erreicht werden kann, indem nur zwei Codezeilen geschrieben werden.