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를 사용하는 것이 매우 편리합니다.