利用<c:forEach>实现动态的tab

1 Overview

After a week,the dynamic tab is finished successfully,the result is that you can add the tab and close current tab,the following is  the page and backbean source code.

2 UI result

 

 

3 page code

<?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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:rich="http://richfaces.org/rich">
	<head>
		<title>Firefox Demo</title>
	</head>
	<body>
		<f:view>
			<h:form id="tab_form">
						<rich:panel >
							<h:outputText value="please input the url:  "></h:outputText>
							
							<h:inputText value="#{menuBean.taburl}" size="50" id="text" ></h:inputText>
							<h:commandButton value="search" reRender="w55" action="#{menuBean.search}"/>
							<h:commandButton value="add" reRender="w55" action="#{menuBean.addTab}"/>
							<h:commandButton value="close"  reRender="w55" action="#{menuBean.closetab}"/>
						</rich:panel>
						
						<rich:panel>					
							<rich:tabPanel switchType="client" id="w55">
								<c:forEach var="menu" items="#{menuBean.menuHeader}"
								     varStatus="status">
									<rich:tab label="#{menu.label_name}" name="#{menu.label_name}" rendered="true" 	
									id="rrr_#{status.index}" >
									<a4j:support  event="onlabelclick" ajaxSingle="true"  actionListener="#{menuBean.tabclick}"/>
									<a4j:support  event="eventsQueue" ajaxSingle="true"/>
									<a4j:include viewId="#{menu.url}"/>
									</rich:tab>
								</c:forEach>
							</rich:tabPanel>
						</rich:panel>			
			</h:form>			
		</f:view>
	</body>
</html>

 4 BackBean source code

package firefox.tal.freeborders.web.ui;

import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

import javax.faces.event.ActionEvent;

import org.richfaces.component.UIPanelMenuItem;
import org.richfaces.component.UITab;
import org.richfaces.component.html.HtmlTab;




public class MenuBean {
	private List<Menu> menuHeader = new ArrayList<Menu>();
	
	private HtmlTab richtab;
	private String taburl;
	
	private String url;
	
	private String tabname;
	
	public static Integer tabseqNO;
	
	private boolean tag;
	
	public MenuBean(){
		Menu tempMenu1=new Menu();
		tempMenu1.setUrl("tab.xhtml");
		tempMenu1.setLabel_name("index");
		tempMenu1.setVisible_ind(true);
		menuHeader.add(tempMenu1);
	}
	
	public List<Menu> getMenuHeader() {
		return menuHeader;
	}

	public void setMenuHeader(List<Menu> menuHeader) {
		this.menuHeader = menuHeader;
	}
	
	public void addTab(){
		Menu tempMenu=new Menu();
		SimpleDateFormat s=new SimpleDateFormat("yyyyMMdd_HHmmss");
		Date dt=new Date();
		String sr="tab"+s.format(dt.getTime());
		tempMenu.setUrl("tab.xhtml");
		tempMenu.setLabel_name(sr);
		tempMenu.setVisible_ind(true);
		menuHeader.add(tempMenu);
		
	}

	public String getTaburl() {
		return taburl;
	}

	public void setTaburl(String taburl) {
		this.taburl = taburl;
	}
	
	public void tabclick(ActionEvent event) {
		UITab tab=(UITab)event.getComponent().getParent();
		this.setTabname(tab.getLabel());
	}
	
	public void search(){
		if(this.getTaburl()==null||this.getTaburl().equals(""))
			return;
		if(this.getTaburl().contains("tab1")){
			this.setUrl("calendar.xhtml");
			this.setTag(true);
		}
		if(this.getTaburl().contains("tab2")){
			this.setUrl("fileupload.xhtml");
			this.setTag(true);
		}
		for(int i=0;i<menuHeader.size();i++){
			Menu m=new Menu();
			m=menuHeader.get(i);
			if(m.getLabel_name().equals(this.getTabname())){
				menuHeader.remove(i);
				m.setUrl(this.getUrl());
				menuHeader.add(i,m);
				return;
			}			
		}
	}

	public void closetab(){
		for(int i=0;i<menuHeader.size();i++){
			Menu m=new Menu();
			m=menuHeader.get(i);
			if(m.getLabel_name().equals(this.getTabname())){
				menuHeader.remove(i);
				return;
			}			
		}
	}
	
	public HtmlTab getRichtab() {
		return richtab;
	}

	public void setRichtab(HtmlTab richtab) {
		this.richtab = richtab;
	}

	public String getTabname() {
		return tabname;
	}

	public void setTabname(String tabname) {
		this.tabname = tabname;
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public boolean isTag() {
		return tag;
	}

	public void setTag(boolean tag) {
		this.tag = tag;
	}
	
	
}

 5 faces-config.xml  and web.xml config please refer my other artical.

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值