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.
分享到：
相关推荐
在JSP中，可以利用JSTL的`<c:forEach>`标签遍历数据，动态生成Tab按钮和内容区域。配合EL（Expression Language）表达式，可以将后端数据绑定到前端显示。同时，使用JavaScript或jQuery处理点击事件，实现内容切换...
tabContents.forEach((c) => c.classList.remove('active')); document.getElementById(tab.dataset.target).classList.add('active'); } tabs.forEach((tab) => { tab.addEventListener('click', () => ...
contents.forEach(c => c.style.display = 'none'); // 添加当前选项卡的激活状态和显示对应的内容 tab.classList.add('active'); contents[index].style.display = 'block'; }); }); // 如果有默认激活的...
在这个"js用户中心tab标签切换特效.zip"压缩包中，我们主要探讨的是如何利用JavaScript来实现用户中心界面中的标签切换特效，这是一种提升用户体验的重要技术。 首先，Tab切换特效是网页设计中常见的一种元素，通常...
"JS简单实用的网页TAB切换效果"这个主题，就是关于如何利用JavaScript实现这种功能的一个教程。在这个项目中，我们将探讨如何通过HTML结构、CSS样式以及JavaScript脚本来创建一个简单的TAB切换系统。 首先，HTML是...
<div class="tab-c"> <p>内容1</p> <p style="display:none;">内容2</p> </div> </div> <script> function initTabs(options) { var tabBtns = getByClassName(options.tabBtn), tabCons = getByClassName...
**循环**：使用`<% foreach (item in collection) { %>...<% } %>`遍历集合。 E. **自定义函数**：在函数区域定义的方法可以被模板其他部分调用。 CodeSmith的强大在于其灵活性和可扩展性。通过编写模板，开发者...
contents.forEach(function(c) { c.style.display = 'none'; }); // 添加当前选项卡的选中状态，并显示其对应的内容 tab.classList.add('active'); contents[index].style.display = 'block'; }); }); ``` 在...
标题中提到的TCL是一个用C/C++语言的过程库实现的解释器。要了解这一点，首先要明确解释器是什么以及它的工作原理。解释器是一种软件，它可以分析计算机程序代码，并且执行这些代码。TCL（Tool Command Language）是...
wordlist(2, 3, a b c d) -> wordlist(2, 3, a b c d) = b c ``` - `words` 函数统计字符串中的单词数量： ```makefile words(a b c d) -> words(a b c d) = 4 ``` - `firstword` 函数获取字符串中的第一个...
当需要更复杂的分割逻辑时，可以利用`System.Text.RegularExpressions`命名空间中的`Regex.Split`方法，该方法接受正则表达式作为参数来定义分割规则： ```csharp using System.Text.RegularExpressions; string ...
var tagElement = $('<span>' + tag + '<span class="close">x</span></span>'); $(this.panel).append(tagElement); // 更新隐藏字段的值 $(this.value).val((this.value().split(',')).concat([tag]).join(',...
- **命令重定向(`>`、`>>`符号)**: 支持输入/输出重定向，用于修改或追加文件内容。 5. **条件语句与函数** - **ifeq/endif**: 条件语句用于根据变量的值决定是否执行某段代码。 - **函数测试**: `$(if ...
- 条件语句（ifeq, ifneq, endif）和循环（foreach）可以实现更复杂的逻辑。 - 多个 Makefile 可以通过 `-include` 或 `include` 指令组合在一起。 - 使用 `$(MAKE)` 在一个 Makefile 中调用另一个 Makefile。 总之...
除了基本的规则定义，Makefile还支持一些高级特性，如变量、函数、条件语句和循环结构，这些使得Makefile能够处理更复杂和动态的构建需求。 **1. 变量**：允许在Makefile中定义和使用变量，如`CC = gcc`，可以在...
**示例**：假设文本为“x.c.c bar.c”，目标是将所有以“.c”结尾的单词替换为以“.o”结尾的单词，则函数调用为`$(patsubst %.c,%.o,x.c.c bar.c)`，结果为“x.c.o bar.o”。 **使用场景**：适用于批量处理文件...
foreach (char c in barcode) { SendKeys.Send(c.ToString()); SendKeys.SendWait("+"); // 模拟扫描枪的暂停，通常是回车键或Tab键 } } ``` 在这个函数中，我们遍历条形码字符串的每个字符，然后使用`Send...
在编程世界里，Makefile是一个不可或缺的工具，尤其在C/C++等编译型语言的项目中，它扮演着自动化构建、编译和链接过程的角色。"跟我一起写 Makefile"是一个面向初学者的资源，旨在帮助理解并掌握如何编写Makefile。...