RichFaces-選択コンポーネント

この章では、RichFaces Technologyが提供するさまざまな選択コンポーネントについて学習します。

<rich：pickList>

このタグを使用して、入力されたリストから1つの値を選択できます。また、リストコンポーネントを別のリストに追加および削除することもできます。次の例は、これがどのように機能するかを示しています。先に進んで1つの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>

managedBean.javaファイルを変更して、xhtmlファイルにリストコンポーネントを入力する必要があります。以下は、変更した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」属性は、Beanクラスの「getSubjectList（）」に他なりません。「itemValue」はオブジェクトクラスの略語であり、対応する「itemLabel」はインスタンス値の名前です。この例では、pickListタグは「sourceCaption」と「targetCaption」という名前の2つの個別のリストを自動的に作成します。順序付け可能な属性は、ターゲットリストで選択順序を維持するために使用されます。

豊富な選択リスト

<rich：orderingList>

このタグは、リスト全体をレンダリングするために使用されます。 <orderingList>は、リストを介して伝播する機能のようなボタンを自動的に提供し、選択したアイテムの順序付けに役立ちます。次の例では、「OrderingListExample.xhtml」の次のコードを使用して1つの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>

異なる表現のために異なるタグを使用して同じリストを再度作成するため、Beanクラスを変更する必要はありません。前の例と同様に、ここでも値属性は「getSubjectList（）」からのリスト全体を保持します。「itemValue」と「itemLabel」は、それぞれオブジェクトクラスと対応するインスタンス変数の値を保持します。

上記のコードは、ブラウザに次の出力を生成します。

Rich OrderingList

<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を使用することは非常に便利です。2行のコードのみを記述することでpickListを使用しても同じ機能を実現できるからです。

Richfaces-selection-component

RichFaces-選択コンポーネント

<rich：pickList>

<rich：orderingList>

<rich：ListShuttle>

目次