`
Arron.li
  • 浏览: 136557 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

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

    博客分类:
  • JSF
阅读更多

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.

 

 

1
0
分享到:
评论

相关推荐

    tab页的实现方法 实现tab

    在JSP中,可以利用JSTL的`&lt;c:forEach&gt;`标签遍历数据,动态生成Tab按钮和内容区域。配合EL(Expression Language)表达式,可以将后端数据绑定到前端显示。同时,使用JavaScript或jQuery处理点击事件,实现内容切换...

    非常简单的tab切换

    tabContents.forEach((c) =&gt; c.classList.remove('active')); document.getElementById(tab.dataset.target).classList.add('active'); } tabs.forEach((tab) =&gt; { tab.addEventListener('click', () =&gt; ...

    JavaScript和css实现tab样式

    contents.forEach(c =&gt; c.style.display = 'none'); // 添加当前选项卡的激活状态和显示对应的内容 tab.classList.add('active'); contents[index].style.display = 'block'; }); }); // 如果有默认激活的...

    js用户中心tab标签切换特效.zip

    在这个"js用户中心tab标签切换特效.zip"压缩包中,我们主要探讨的是如何利用JavaScript来实现用户中心界面中的标签切换特效,这是一种提升用户体验的重要技术。 首先,Tab切换特效是网页设计中常见的一种元素,通常...

    JS简单实用的网页TAB切换效果

    "JS简单实用的网页TAB切换效果"这个主题,就是关于如何利用JavaScript实现这种功能的一个教程。在这个项目中,我们将探讨如何通过HTML结构、CSS样式以及JavaScript脚本来创建一个简单的TAB切换系统。 首先,HTML是...

    原生javascript实现Tab选项卡切换功能

    &lt;div class="tab-c"&gt; &lt;p&gt;内容1&lt;/p&gt; &lt;p style="display:none;"&gt;内容2&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; function initTabs(options) { var tabBtns = getByClassName(options.tabBtn), tabCons = getByClassName...

    codesmith超级好的学习教程word版本代码生成器net必备学习.pdf

    **循环**:使用`&lt;% foreach (item in collection) { %&gt;...&lt;% } %&gt;`遍历集合。 E. **自定义函数**:在函数区域定义的方法可以被模板其他部分调用。 CodeSmith的强大在于其灵活性和可扩展性。通过编写模板,开发者...

    不错的图片选项卡网页特效

    contents.forEach(function(c) { c.style.display = 'none'; }); // 添加当前选项卡的选中状态,并显示其对应的内容 tab.classList.add('active'); contents[index].style.display = 'block'; }); }); ``` 在...

    由于TCL的解释器是用一个C\C++语言的过程库实现的

    标题中提到的TCL是一个用C/C++语言的过程库实现的解释器。要了解这一点,首先要明确解释器是什么以及它的工作原理。解释器是一种软件,它可以分析计算机程序代码,并且执行这些代码。TCL(Tool Command Language)是...

    How+to+Write+makefile.pdf

    wordlist(2, 3, a b c d) -&gt; wordlist(2, 3, a b c d) = b c ``` - `words` 函数统计字符串中的单词数量: ```makefile words(a b c d) -&gt; words(a b c d) = 4 ``` - `firstword` 函数获取字符串中的第一个...

    ASP.NET中split的用法

    当需要更复杂的分割逻辑时,可以利用`System.Text.RegularExpressions`命名空间中的`Regex.Split`方法,该方法接受正则表达式作为参数来定义分割规则: ```csharp using System.Text.RegularExpressions; string ...

    Javascript实现一个简单的输入关键字添加标签效果实例

    var tagElement = $('&lt;span&gt;' + tag + '&lt;span class="close"&gt;x&lt;/span&gt;&lt;/span&gt;'); $(this.panel).append(tagElement); // 更新隐藏字段的值 $(this.value).val((this.value().split(',')).concat([tag]).join(',...

    GNU_make中文手册

    - **命令重定向(`&gt;`、`&gt;&gt;`符号)**: 支持输入/输出重定向,用于修改或追加文件内容。 5. **条件语句与函数** - **ifeq/endif**: 条件语句用于根据变量的值决定是否执行某段代码。 - **函数测试**: `$(if ...

    Makefile 使用手册

    - 条件语句(ifeq, ifneq, endif)和循环(foreach)可以实现更复杂的逻辑。 - 多个 Makefile 可以通过 `-include` 或 `include` 指令组合在一起。 - 使用 `$(MAKE)` 在一个 Makefile 中调用另一个 Makefile。 总之...

    Makefile入门经典

    除了基本的规则定义,Makefile还支持一些高级特性,如变量、函数、条件语句和循环结构,这些使得Makefile能够处理更复杂和动态的构建需求。 **1. 变量**:允许在Makefile中定义和使用变量,如`CC = gcc`,可以在...

    linux中make的内嵌函数

    **示例**:假设文本为“x.c.c bar.c”,目标是将所有以“.c”结尾的单词替换为以“.o”结尾的单词,则函数调用为`$(patsubst %.c,%.o,x.c.c bar.c)`,结果为“x.c.o bar.o”。 **使用场景**:适用于批量处理文件...

    自定义Visual Studio IDE

    - **编辑器窗口**:支持分组管理tab窗口,并可以自由移动和放置。 - **工具栏**:根据活动窗口显示不同的工具栏。 2. **代码编辑器**:提供了丰富的功能来提高编程效率,例如: - 代码片段:支持快速插入常用的...

    C# 区分键盘和红外线扫描枪输入 模拟扫描枪

    foreach (char c in barcode) { SendKeys.Send(c.ToString()); SendKeys.SendWait("+"); // 模拟扫描枪的暂停,通常是回车键或Tab键 } } ``` 在这个函数中,我们遍历条形码字符串的每个字符,然后使用`Send...

    跟我一起写 Makefile

    在编程世界里,Makefile是一个不可或缺的工具,尤其在C/C++等编译型语言的项目中,它扮演着自动化构建、编译和链接过程的角色。"跟我一起写 Makefile"是一个面向初学者的资源,旨在帮助理解并掌握如何编写Makefile。...

Global site tag (gtag.js) - Google Analytics