利用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"