0

これを行う方法は複数あると思いますが、別のコンポーネントが変更されたときに1つのJSF / PrimeFacesコンポーネントを更新する良い方法は何ですか？

入力フィールドをその値（バッキングBeanの値を含む）で正しく更新するスライダーがあります。しかし、その値は数値であり、テキスト値として表示したいと思います。たとえば、1の場合は「Easy」を表示し、4の場合は「Difficult」を表示します。

数値を格納する入力フィールドを非表示にすることで、部分的に機能しています。次に、数値をテキスト値に変換するバッキングBeanのゲッターにリンクされた別の「可視」outputLabelを追加しました。

しかし、「非表示フィールドの値が変更されたら、outputLabelに表示されている値を更新する」と言う方法がわかりません。

確かにそれはvalueChangeListenersまたは'update'属性と関係がありますが、すべてをまとめるのに苦労しています。

誰かがぼんやりと正しい方向に私を向けることができますか？私は試しましたが、グーグルに何をするのかよくわかりません。

ありがとう

4

2 に答える 2

3

JavaScript に基づくソリューションを使用する代わりに、PrimeFaces に基づくソリューションを使用する方がはるかに簡単だと思います。したがって、私の場合、これを使用しましたが、うまくいきました。

SliderBean:

package ma.klagrida;

import javax.faces.bean.ManagedBean;


import org.primefaces.event.SlideEndEvent;

@ManagedBean
public class SliderBean {

    private int number;

    private String category = "Start";

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }


    public String getCategory() {
        return category;
    }

    public void setCategory(String category) {
        this.category = category;
    }

    public void onSlideEnd(SlideEndEvent event) {
        int value = event.getValue();
        if(value > 0 && value <= 50) {
            category = "Easy";
         } else if(value > 50 && value <= 100) {
            category = "Difficult";
         } else {
                category = "Start";
         } 
    }

}

インデックス.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui">
<h:head><title>PrimeFaces Slider</title>
</h:head>
<h:body>

<h:form> 
    <h:inputText id="number" value="#{sliderBean.number}" />
    <p:slider for="number">
        <p:ajax event="slideEnd" listener="#{sliderBean.onSlideEnd}" update="category" />
    </p:slider>
    <h:inputText id="category" value="#{sliderBean.category}" />
</h:form>

</h:body></html>
于 2015-01-08T14:35:08.703 に答える
2

Javascriptonchangeイベントを使用して、目的のラベルでラベルを更新するだけです。

または.. primefacesonSlideEndイベントを使用できます。

valueChangeListeners は、バッキング Bean までずっと行き、その後クライアントに戻ります。

これに基づいて

入力フィールドをその値 (バッキング Bean の値を含む) で正しく更新するスライダーがあります。しかし、その値は数値であり、テキスト値として表示したいです。たとえば、1 の場合は「簡単」と表示し、4 の場合は「難しい」と表示します。

必要なのは、JavaScript の onchange イベントとラベルの更新だけです。

ここに例があります (私はそれをテストしたり、構文をチェックしたりしませんでしたが、それはあなたにアイデアを与えるはずです) ユーザーが初めて入ったとき、サーバーまたはクライアントからラベルを初期化することができます.スライダー。

  <script>
      var labelElement = document.getElementById('output');
      var sliderElement = document.getElementById('txt2');

      function updateSliderLabel(){
         if(sliderElement.value > 75){
              labelElement.value = "Large";
         } else if(sliderElement.value > 50){
              labelElement.value = "Avg";
         } else {
              labelElement.value = "Small";
         }

      }
  </script>

  <h:form id="form">
    <h:panelGrid columns="1" style="margin-bottom:10px">  
        <h:panelGroup>  
            <h:outputText value="Set ratio to "/>  
            <h:outputText id="output" value="#{sliderBean.number2}"/>  
        </h:panelGroup>   

        <h:inputHidden id="txt2" value="#{sliderBean.number2}" />  
        <p:slider onSlideEnd="updateSliderLabel()" for="txt2" display="output" style="width:200px" />  
    </h:panelGrid>
  </h:form>
于 2012-05-10T21:27:16.603 に答える