在JSF Primefaces中動態生成日期標簽

Question

在頁面中，我有一個輸入文本框，用於輸入priod的持續時間（以int表示的月份），並使用ap：calendar輸入來選擇初始日期。 我需要從初始日期起的所有月份都生成標簽（年份）。 例如，如果持續時間為3，初始日期為2014年12月10日，則應生成以下三個標簽：2014年12月2014年1月2015年2月2015年我嘗試在不使用bean的情況下執行此操作：

<c:forEach var="i" begin="1" end="${myBean.duration}">
                        <p:outputLabel value=" ${i+myVar} ${year+1900} " />
                        <h:panelGrid columnClasses="input, slider" columns="2">
                            <p:inputText id="inputTxt_${i}" style="width:70px;" />
                            <p:slider for="inputTxt_${i}"
                                style="padding-left: 100px; margin-left:5px">
                                <p:ajax event="slideEnd" />
                            </p:slider>
                        </h:panelGrid>

但是以這種方式我無法正確生成標簽。 任何人都知道如何使用帶有或不帶有提交按鈕的JSF或Backing bean（例如，使用諸如event =“ keyup”或event =“ dateSelect”之類的事件）來完成此操作？

Answer 1

每當我像您嘗試執行動態jsf-stuff一樣，我都會通過后備bean在Java中創建組件。 這主要是由於這樣的原因：我覺得用一種既定的編程語言編寫條件語句或循環會更自如，並且我認為結果變得更易於理解。 為此，您需要定義一個與后備豆綁定的組件。 JSF將在使用setter方法創建該元素時將其插入到bean中，並在每次更新時通過相應的getter對其進行檢索。 在這兩者之間，您基本上可以對組件執行任何操作。 這包括刪除和添加子級，更改屬性等。因此，在您的情況下，您可以按以下方式定義html標記：

<h:form id="dateform">
    <!-- calendar for setting the date -->
    <p:calendar value="#{backingbean.date}">
        <p:ajax event="change" update=":#{p:component('dateform')}" />
    </p:calendar>
    <!-- input for setting the duration -->
    <p:inputText value="#{backingbean.duration}">
        <p:ajax event="change" update=":#{p:component('dateform')}" />
    </p:inputText>
    <!-- panel for printing the labels, bound to a backingbean -->
    <p:outputPanel binding="#{backingbean.labelPanel}" />
</h:form>

這里的重要部分是primefaces庫提供的outputPanel。 每當日歷或持續時間的值更改時，其內容都將綁定到backing-bean並進行更新。 對於后備bean，除了Date和duration的setter和getter之外，還需要labelPanel的getter和setter，以便JSF能夠將組件填充到bean中：

private Date date;
private int duration;
private OutputPanel panel;

public Date getDate() {
    return this.date;
}

public void setDate(Date date) {
    this.date = date;
    this.updatePanel();
}

public int getDuration() {
    return this.duration;
}

public void setDuration(int duration) {
    this.duration = duration;
    this.updatePanel();
}

public OutputPanel getLabelPanel() {
    return this.panel;
}

public void setLabelPanel(OutputPanel panel) {
    this.panel = panel;
}

private void updatePanel() {
    if (this.panel != null) {
        this.panel.getChildren().clear();
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(this.date);
        for (int i = 0; i < this.duration; i++) {
            calendar.add(Calendar.MONTH, 1);
            OutputLabel label = new OutputLabel();
            label.setValue(calendar.getDisplayName(Calendar.MONTH, Calendar.LONG, Locale.getDefault()));
            this.panel.getChildren().add(label);
        }
    }
}

如您所見，每次調用日期或持續時間的setter時，代碼將動態生成OutputLabel元素並將其添加到由bean管理的OutputPanel中。

我確定您的問題還有很多其他解決方案，但是這是我個人實現此問題的方式，通常效果很好。

Answer 2

我認為您的xhtml-Structure不正確。

• 您缺少結束語</c:forEach>
• 如果在代碼段末尾關閉，則會獲得{i}滑塊

假設您需要一個滑塊和日期的{i}輸出

• 建立BackingBean來保存您的價值觀
• 值是：“ monthCount”保存整數，“ dateList”保存（計算的）日期

• listener-根據滑塊輸入的整數計算日期的方法public void listenerMonthCount(SlideEndEvent ae)

   <h:form id="form"> <h:panelGrid columns="2"> <p:inputText id="monthCount" style="width:70px;" value="#{backingBean.monthCount}" /> <p:slider for="monthCount" style="padding-left: 100px; margin-left:5px" maxValue="12"> <p:ajax event="slideEnd" process="@form" listener="#{backingBean.listenerMonthCount}" update="form" /> </p:slider> </h:panelGrid> <ui:repeat var="month" value="#{backingBean.dateList}"> <h:outputText value="#{month}"> <f:convertDateTime pattern="MMM-yyyy" /> </h:outputText> <br /> </ui:repeat> </h:form> 

更詳細的解釋： p:ajax -Tag不僅需要event -Attribute，而且還需要被告知該怎么做。 因此，定義監聽器listener="#{backingBean.listenerMonthCount}" 。 為了使偵聽器知道新選擇的monthValue，必須將其傳輸到服務器， process="@form"用於將這種形式的所有值從客戶端傳輸到服務器。 update="form"指示在處理偵聽器后更新所有值。

<ui:repeat> -Block包含輸出的呈現。 遍歷List<Date>並將每個項目分配給變量month 。 這是使用f:convertDataTime打印和格式化的，它采用Java-DateFormatPattern作為pattern -Attribute。

在您的Backing-Bean中，您基本上需要這個

private int monthCount = 0; // +getter/setter

private List<Date> dateList = new ArrayList<Date>(); // +getter/setter

public void listenerMonthCount(SlideEndEvent ae) {
    dateList.clear(); // clear the list to remove entries from possible old runs
    if (monthCount > 0) {
        Date now = new Date();
        dateList.add(now); // add first date
        Calendar cal = Calendar.getInstance();
        for (int i = 1; i < monthCount; i++) {
            cal.setTime(dateList.get(dateList.size() - 1)); // get last date from list and set calendar
            cal.add(Calendar.MONTH, 1);// add one month
            dateList.add(cal.getTime()); // add calculated date
        }
    }
}