RichFaces-선택 구성 요소
이 장에서는 RichFaces Technology에서 제공하는 다양한 선택 구성 요소에 대해 알아 봅니다.
<rich : pickList>
이 태그를 사용하여 채워진 목록에서 하나의 값을 선택할 수 있습니다. 또한 다른 List에 목록 구성 요소를 추가하고 제거 할 수 있습니다. 다음 예제는 이것이 어떻게 작동하는지 보여줍니다. 계속해서 하나의 xhtml 파일을 만들고 이름을 "pickListExample.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>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>xhtml 파일의 목록 구성 요소를 채우기 위해 managedBean.java 파일을 수정해야합니다. 다음은 수정 된 Java 파일의 스냅 샷입니다.
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;
}
}위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다. pickList 태그의 "value"속성은 빈 클래스의 "getSubjectList ()"일뿐입니다. "itemValue"는 객체 클래스의 약어이고 해당 "itemLabel"은 인스턴스 값 이름입니다. 이 예에서 pickList 태그는 "sourceCaption"및 "targetCaption"이라는 두 개의 개별 목록을 자동으로 생성합니다. 정렬 가능한 속성은 대상 목록에서 선택 순서를 유지하는 데 사용됩니다.
<rich : orderingList>
이 태그는 전체 목록을 렌더링하는 데 사용됩니다. <orderingList>는 목록을 통해 전파하는 기능과 같은 일부 버튼을 자동으로 제공하며 선택한 항목의 주문을 도와줍니다. 다음 예제에서는“OrderingListExample.xhtml”에 대해 다음 코드를 사용하여 하나의 orderingList를 만듭니다.
<?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>다른 표현에 대해 다른 태그를 사용하여 동일한 목록을 다시 채우므로 빈 클래스를 변경할 필요가 없습니다. 이전 예제와 마찬가지로 여기에서도 값 속성은 "getSubjectList ()"에서 오는 전체 목록을 보유합니다. "itemValue"및 "itemLabel"은 각각 객체 클래스의 값과 해당 인스턴스 변수를 보유합니다.
위의 코드는 브라우저에서 다음과 같은 출력을 생성합니다.
<rich : ListShuttle>
ListShuttle 태그는 RichFaces 3에서 사용할 수 있습니다. 하나의 목록을 통해 전파되고 동일한 값을 다른 목록에 넣는 데 도움이됩니다. RichFaces 4에서는 위에서 설명한대로 <rich : pickList>라는 다른 새 태그로 동일한 기능을 수행 할 수 있기 때문에이 태그가 표시되지 않습니다. RichFaces 3.0을 사용하는 경우 다음과 같은 방식으로이 태그를 사용할 수 있습니다.
<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>두 줄의 코드 만 작성하면 pickList를 사용하여 동일한 기능을 얻을 수 있으므로이 태그를 사용하는 것보다 pickList를 사용하는 것이 매우 편리합니다.