rss· 投稿· 设为首页· 加入收藏· 繁體版

jsf动态创建表单控件实例

利用JSF动态创建表单控件非常方便快捷,本例使用的环境如下:

richfaces3.3.0GA + myfaces1.2 + tomcat6.0.18 + JDK6

java源代码文件为CreateDynamicFormBean.java,页面文件为dynamicForm.jsp,具体代码实例如下:

CreateDynamicFormBean.java:

package hi.hzwei206.test.dynamicform;

import javax.faces.component.html.HtmlPanelGrid;

import javax.faces.component.UIComponent;

import javax.faces.component.html.HtmlInputText;

import javax.faces.component.html.HtmlOutputText;

import javax.faces.component.UISelectItems;

import javax.faces.model.SelectItem;

import javax.faces.event.ActionEvent;

import org.richfaces.component.html.HtmlEditor;

import org.richfaces.component.html.HtmlCalendar;

import java.util.ArrayList;

import java.util.List;

public class CreateDynamicFormBean {

    private HtmlPanelGrid formPanel = null; //用来保存表单的属性字段

    public void createForm(ActionEvent event)

    {

        if (formPanel == null)

        {

            formPanel = new HtmlPanelGrid();

        }

        List<UIComponent> formPanelChildList = formPanel.getChildren();

        formPanel.setId("dynamicForm_formPanelGrid");

        if (!formPanelChildList.isEmpty())

        {

            formPanelChildList.clear();

        }

        UIComponent component = null; //表单字段控件

        HtmlOutputText label = new HtmlOutputText(); //提示文本

        //创建文本框

        component = new HtmlInputText();

        ((HtmlInputText)component).setLabel("文本框");

        ((HtmlInputText)component).setId("textTest");

        label.setValue("文本框");

        label.setId(component.getId()+"_label");

        formPanelChildList.add(label);

        formPanelChildList.add(component);

        //创建日期选择框

        component = new HtmlCalendar();

        ((HtmlCalendar)component).setLabel("日期");

        component.setId("inputdateTest");

        label.setValue("日期");

        label.setId(component.getId()+"_label");

        formPanelChildList.add(label);

        formPanelChildList.add(component);

        //创建下拉单选框

        component = new HtmlSelectOneMenu();

        ((HtmlSelectOneMenu)component).getChildren().add(

                    getUISelectItems("selectOnlyItem"));

        ((HtmlSelectOneMenu)component).setLabel("下拉选择框");

        component.setId("selectOnlyTest");

        label.setValue("下拉选择框");

        label.setId(component.getId()+"_label");

        formPanelChildList.add(label);

        formPanelChildList.add(component);

        //创建富文本编辑器

        component = new HtmlEditor();

        ((HtmlEditor)component).setLabel("富文本框");

        ((HtmlEditor)component).setViewMode("visual");

        //设置富文本编辑器的显示样式属性文件advanced.properties

        //注:文件路径必须与本类的包路径相同,且jsp页面不能设置<base href="xxxx">

        //   否则可能会找不到该属性文件导致富文本编辑器显示不出来

        ((HtmlEditor)component).setConfiguration("/hi/hzwei206/test/dynamicform/advanced");

        component.setId("textEditorTest");

        label.setValue("富文本框");

         label.setId(component.getId()+"_label");

        formPanelChildList.add(label);

        formPanelChildList.add(component);

        //......暂时就加这么多控件,其他空间类似添加....

        //你也可以增加一些if判断,以便根据你的需要任意创建表单控件

    }

    //设置下拉列表的选择值

    private UISelectItems getUISelectItems(String id)

    {

        String[] strs = new String[4];

        strs[0] = "--无--";

        strs[1] = "可选值一";

        strs[2] = "可选值二";

        strs[3] = "可选值三";

        List<SelectItem> selectList = new ArrayList<SelectItem>(strs.length);

        for (String str:strs)

        {

            selectList.add(new SelectItem(str,str));

        }

        UISelectItems usi = new UISelectItems();

        usi.setId(id);

        usi.setValue(selectList);

    return usi;

    }

将该bean注册到faces-config.xml中:

<managed-bean>

   <managed-bean-name>createform</managed-bean-name>

   <managed-bean-class>hi.hzwei206.test.dynamicform.CreateDynamicFormBean</managed-bean-class>

   <managed-bean-scope>request</managed-bean-scope>

</managed-bean>

JSP页面代码非常简洁:

<%@ page language="java" pageEncoding="utf-8"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<%@ taglib uri="http://richfaces.org/rich" prefix="rich" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <base />

    <title>dynamic form</title>

</head>

<body>

   <f:view>

     <h:form id="form1">

        <h:commandButton actionListener="#{createform.createForm}" value="Create Form" />

        <h:panelGroup rendered="true" id="formPanelGridItems">

     <h:panelGrid binding="#{createform.formPanel}" columns="2"/>

</h:panelGroup>

     </h:form>

   </f:view>

</body>

</html>

点击【Create Form】按钮就可以看到动态创建的表单了。动态创建的表单提交时,获取表单字段的值可以采用如下方式:

formPanel.getChildren()中只包含两种类型的控件:UIComponent及HtmlOutputText,因此可以这样取值:

for (UIComponent component: panelGridChildList)

    if (component instanceof HtmlOutputText)

    {

        continue; //继续内层循环的下一循环

    }

    //文本框、下拉单选框、富文本框等的值

    String value = ((HtmlInputText/HtmlSelectOneMenu/HtmlEditor)component).getValue();

    //日期

    Date value = (Date) (((HtmlCalendar)component).getValue());

    //复选框的值:

    String[] values = ((javax.faces.component.html.HtmlSelectManyCheckbox)component).getValue();

附advanced.properties的内容(richfaces demo源码中找出来的):

theme="advanced"

theme_advanced_toolbar_location="top"

theme_advanced_toolbar_align="left"

plugins="preview,insertdatetime"

theme_advanced_buttons3="hr,removeformat,visualaid,separator,sub,sup,separator,charmap"

顶一下
(0)
踩一下
(0)