在JSF primefaces中动态生成日期标签(generate dates label dynamically in JSF primefaces)

在JSF primefaces中动态生成日期标签(generate dates label dynamically in JSF primefaces)

在页面中，我有一个输入文本框，用于priod的持续时间（月份为int）和ap：日历输入，用于选择初始日期。 我需要从初始日期开始生成所有月份的标签（月 - 年）。 例如，如果持续时间为3且初始日期为2014年12月10日，则应生成以下三个标签：Dec-2014 Jan-2015 Feb-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”）？

in a page I have an InputText box for the duration of a priod (months as int) and a p:calendar input for picking a intial date. I need to generate labels (month-year) for all months from the intial date. for example, if duration is 3 and intial date is 10-dec-2014, three following labels should be generated: Dec-2014 Jan-2015 Feb-2015 I tried to do it without backing 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>

but in this way I can not correctly generates the labels. Anyone knows how to do this by using JSF or Backing bean with or without a submit button(for example using events such as event="keyup" or event="dateSelect") ??

最满意答案

我认为你的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 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 } } }

I think your xhtml-Structure is not correct.

You are missing the closing </c:forEach> If closed at the end of the code-snippet you would get {i} Sliders

Assuming you want one slider and {i} outputs of the dates

Establish a BackingBean to hold your values values are: "monthCount" holding the integer, "dateList" holding the (calculated) dates

listener-Method to calculate the dates, according to integer-input by the slider 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>

Explanation in more detail: The p:ajax-Tag not only needs the event-Attribute, but also needs to be told what to do. So define the listener listener="#{backingBean.listenerMonthCount}". For the listener to know the newly chosen monthValue, it must be transferred to the server process="@form" is used to transfer all values in this form from the client to server. update="form" instructs to update all values after the listener is processed.

The <ui:repeat>-Block contains rendering of your output. It iterates over the List<Date> and assignes every item to the variable month. This is printed and formatted with f:convertDataTime wich takes a Java-DateFormatPattern as pattern-Attribute.

In your Backing-Bean you essentially need this

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 } } }