JSF 在单击按钮时动态添加文本字段答案

【问题标题】：JSF adding textfields dynamically on click of a buttonJSF 在单击按钮时动态添加文本字段
【发布时间】：2013-05-19 08:42:41
【问题描述】：

我编写了以下代码，以便在底部有一个文本字段，后跟一个添加按钮和一个保存按钮。

我希望修复第一个文本字段和添加按钮，但是每当用户点击添加按钮时，就会在当前文本字段下方添加一个文本字段，并且添加按钮和保存按钮会关闭。

我有以下代码，但它似乎不起作用。

<?xml version="1.0" encoding="UTF-8"?>
<!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://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dashboard | BlueWhale Admin</title>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../css/text.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../css/grid.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../css/layout.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="../css/nav.css" media="screen" />

</h:head>
<body>
<h:form>

        <hr/>
        <h:dataTable id="newsinputs" value="#{newsAlerts.values}" var="item" cellspacing="10">
        <h:column>
             <h:outputLabel value="#{item.label}" /> &nbsp;&nbsp;&nbsp;
        </h:column>
        <h:column>
             <h:inputText value="#{item.news}" size="100" /><br/>
        </h:column>
        </h:dataTable>

        <h:commandButton styleClass="btn btn-blue" action="#{newsAlerts.add()}" value="Add"></h:commandButton>
        <hr/>
        <h:commandButton styleClass="btn btn-blue" action="#{newsAlerts.submit}" value="Save" />

</h:form>
</body>
</html>

bean类如下

package com.kc.aop.bean;

import java.util.ArrayList;
import java.util.List;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import com.kc.aop.VO.NewsVO;

@ManagedBean(name = "newsAlerts")
@ViewScoped
public class News
{
        private List<NewsVO> values;

        public News()
        {
            this.values = new ArrayList<NewsVO>();
            NewsVO newsVO = new NewsVO();
            newsVO.setLabel("News "+ this.values.size()+1);
            getValues().add(newsVO);
        }

        public String submit() {

            for(NewsVO newsVO : this.values)
            {
                System.out.println(newsVO.getNews());
                System.out.println(newsVO.getLabel());
            }
            return null;
            // save values in database
        }


        public List<NewsVO> getValues() {
            return values;
        }

        public void setValues(List<NewsVO> values) {
            this.values = values;
        }


        public String add()
        {
            NewsVO newsVO = new NewsVO();
            newsVO.setLabel("News "+ this.values.size()+1);
            this.values.add(newsVO);
            return "success";
        }


}

【问题讨论】：

查看这篇文章stackoverflow.com/questions/16623563/…

标签： jsf dynamic jsf-2

【解决方案1】：

您正在从操作方法返回非 null/void：

public String add() {
    // ...

    return "success";
}

非 null/void 结果会创建一个新的视图范围。您需要返回 null 或 void 来保持相同的视图。

public String add() {
    // ...

    return null;
}

或

public void add() {
    // ...
}

绝对没有必要按照其他答案的建议通过动作侦听器进行更改。它的用途完全不同。

另见：

Recommended JSF 2.0 CRUD frameworks

【讨论】：

【解决方案2】：

您需要使用actionListener 或至少修改action 以在您的<h:commandButton /> 中返回void 或null，因为您保持在同一个视图中。通过使用带有返回值的action，ViewScope 被破坏并重新创建。

查看代码：

<h:commandButton styleClass="btn btn-blue" actionListener="#{newsAlerts.add}" value="Add" />
<hr/>
<h:commandButton styleClass="btn btn-blue" actionListener="#{newsAlerts.submit}" value="Save" />

Bean 代码：

public void add(ActionEvent event)
{
    NewsVO newsVO = new NewsVO();
    newsVO.setLabel("News "+ this.values.size()+1);
    this.values.add(newsVO);
}

public void submit(ActionEvent event)
{
    for(NewsVO newsVO : this.values)
    {
        System.out.println(newsVO.getNews());
        System.out.println(newsVO.getLabel());
    }
}

更多信息：

Action vs ActionListener

【讨论】：

嘿，alex 感谢您的回答，但是我如何在添加其他文本字段之前保留 1 个文本字段，因为我在 add() 中将“values”值设为“null”，我已经在我的内部对其进行了初始化构造函数。
刚加载页面时，您的视图是否至少显示了一个输入？你改成 actionListener 了吗？
是的，我已更改为 actionListener，并且添加按钮工作正常，但我仍然不明白如何在加载页面时保留文本字段并在单击添加按钮时添加其他文本字段。还有一个问题，目前“添加”按钮位于文本字段下方。我想在文本字段旁边显示按钮。
您的第一个文本字段应该在视图创建时创建（News() 被调用）。当您单击添加时，网页应该重新加载 2 个文本字段等。如果它不起作用，则其他地方有问题。当然，如果您转到另一页并返回，列表将重置为一个文本字段。