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

时间:2013-05-19 08:42:41

标签: jsf dynamic jsf-2

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

我想要第一个文本字段并添加要修复的按钮,但每当用户点击添加按钮时,文本字段将添加到当前文本字段下方,添加按钮和保存按钮会关闭。

我有以下代码,但它似乎无法正常工作。

<?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";
        }


}

2 个答案:

答案 0 :(得分:0)

您将从操作方法返回非null / void:

public String add() {
    // ...

    return "success";
}

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

public String add() {
    // ...

    return null;
}

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

根据其他答案的建议,完全没有必要通过动作侦听器对其进行更改。它有着完全不同的目的。

另见:

答案 1 :(得分:-1)

您必须使用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