弱弱的发一贴：Ext.Tab without Ext.Tab

于 2008-08-08 05:51:21 发布 · 170 阅读

收录于

J2EE应用相关

本文介绍了一种将 Ext.Tab 组件转换为 JSPTag 的方法，以便于在 Java Web 项目中更便捷地使用。该方法允许通过 JSP 属性配置 Tab 的各种特性，如宽度、高度、自动滚动等，并支持 Tab 的无限嵌套。

[b]1.写在前面[/b]
最近由于公司框架中的Tab组件Bug多多，迟迟不能解决。遂自己动手把Ext.Tab写成JSPTag来使用。发出来给和偶一样经常在海边拾贝壳的小鸟们借鉴参考之用。JS大师你们肯定要说，我是没事找事，直接用EXT不就行了何必那么麻烦，但问题是直接使用EXT的话，页面将大量引入一堆难读的JS和html而且也给一些作坊型的项目组带来了学习培训的成本。
[b]2.实现的功能[/b]
由Java后端根据JSPTag生成Ext.Tab界面所需的html元素和JS。实现全部功能不需要程序员编写一行html代码或者JS。主要功能列表:
无限嵌套生成标签卡。
标签卡容器的自动扩展、自动滚动条、高度、宽度、当前活动标签卡的JSP属性设置。
标签卡的禁用、onclick事件响应的JSP属性设置。
支持request重置当前活动标签卡。
[b]3.JSP代码[/b]


<body>
<%
 TabsUtil.setActiveTab(request, 2);
%>
<eRed:tabs tabsId="tabs" activeTab="0" width="400" height="100" autoScroll="true">
  <eRed:tab tabId="table1" title="标签卡1">
      <font size="800">标签卡1</font>
  </eRed:tab>
  <eRed:tab tabId="table2" title="标签卡2" disabled="true">
      标签卡2
  </eRed:tab>
  <eRed:tab tabId="table3" title="标签卡3" onclick="test">
      标签卡3
  </eRed:tab>
</eRed:tabs>
</body>
<script type="text/javascript">
function test(){
  Ext.MessageBox.alert('系统提示:', "响应onclick事件!");
}
</script>

[b]4.效果图[/b]
[img]http://www.shangrilaagroecology.org/eredlab/resource/e3/eredtab.jpg[/img]
[b]5.关键代码[/b]
[b]TLD描述:[/b]


	<tag>
		<name>tabs</name>
		<tagclass>com.eredlab.uilib.common.layout.ExtTabsTag</tagclass>
		<bodycontent>JSP</bodycontent>
		<info>标签卡容器标签-eRedUI公共标签</info>
		<attribute>
			<name>tabsId</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>activeTab</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>width</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>height</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>autoScroll</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>

   <tag>
		<name>tab</name>
		<tagclass>com.eredlab.uilib.common.layout.ExtTabTag</tagclass>
		<bodycontent>JSP</bodycontent>
		<info>标签卡标签-eRedUI公共标签</info>
		<attribute>
			<name>tabId</name>
			<required>true</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>title</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>disabled</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
		<attribute>
			<name>onclick</name>
			<required>false</required>
			<rtexprvalue>true</rtexprvalue>
		</attribute>
	</tag>

[b]标签实现类[/b]


/**
 * EXT风格标签选项卡容器标签-公共标签
 * @author 
 * @version eRedUI V0.1
 */
public class ExtTabsTag extends BodyTagSupport{
	private String tabsId;
	private String activeTab;
	private String width;
	private String height;
	private String autoScroll;
	private List tabs;
	public ExtTabsTag(){
		super();
		tabs = new ArrayList();
	}

	/**
	 * 标签开始:Do Nothing!
	 */
	public int doStartTag() throws JspException{
		tabs.clear();
		HttpServletRequest request = (HttpServletRequest)this.pageContext.getRequest();
		String tabNo = (String)request.getAttribute(UiConstants.EXTTAB_ACTIVETAB);
		this.activeTab = (tabNo == null || tabNo == "") ? "0" : tabNo;
		return super.EVAL_BODY_BUFFERED;
	}

	/**
	 * 标签结束：输出代码描述字符流
	 */
	public int doEndTag() throws JspException{
		JspWriter writer = pageContext.getOut();
        try {
        	String tabsDivStart = "<div id=\"tabs\">";
			writer.println(tabsDivStart);
			for(int i = 0; i < tabs.size(); i++){
				ExtTab tab = (ExtTab)tabs.get(i);
				String tabDivStart = "<div id=\"" + tab.getTabId() + "\" class=\"x-hide-display\">";
				writer.println(tabDivStart);
				String tabDivContent = tab.getContent();
				writer.println(tabDivContent);
				String tabDivEnd = "</div>";
				writer.println(tabDivEnd);
			}
        	String tabsDivEnd = "</div>";
			writer.println(tabsDivEnd);
			String scriptStart = "<script type=\"text/javascript\">";
			writer.println(scriptStart);
			String tabsScriptStart = "Ext.onReady(function(){var " + this.getTabsId() + " = new Ext.TabPanel({";
			tabsScriptStart = tabsScriptStart + "renderTo: '" + this.getTabsId() + "',";
			tabsScriptStart = tabsScriptStart + "width:" + (this.width == null ? "780" : this.width) + ",";
			tabsScriptStart = tabsScriptStart + "activeTab:" + (this.activeTab == null ? "0" : this.activeTab) + ",";
			tabsScriptStart = tabsScriptStart + "frame:true,";
			if(this.height != null)
				tabsScriptStart = tabsScriptStart + "height:" + this.height + ",";
			if(this.autoScroll != null)
				tabsScriptStart = tabsScriptStart + "autoScroll:" + this.autoScroll + ",";
			tabsScriptStart = tabsScriptStart + "defaults:{autoHeight: true},";
			tabsScriptStart = tabsScriptStart + "items:[";
			writer.println(tabsScriptStart);
			String tabScriptStart = "";
			for(int i = 0; i < tabs.size(); i++){
				ExtTab tab = (ExtTab)tabs.get(i);
			    tabScriptStart = tabScriptStart + "{contentEl:'" + tab.getTabId() + "',";
			    if(tab.getDisabled() != null)
			    	tabScriptStart = tabScriptStart + "disabled:" + tab.getDisabled() + ",";
			    if(tab.getOnclick() != null)
			    	tabScriptStart = tabScriptStart + "listeners: {activate:" + tab.getOnclick() + "},";
			    tabScriptStart = tabScriptStart + "title: '" + tab.getTitle();
			    tabScriptStart = tabScriptStart + "'},";
			}
			String tabScriptStart2 = tabScriptStart.substring(0, tabScriptStart.length() - 1);
			writer.println(tabScriptStart2);
			String tabScriptEnd = "]";
			writer.println(tabScriptEnd);
			String tabsScriptEnd = "});});";
			writer.println(tabsScriptEnd);
			String scriptEnd = "</script>";
			writer.println(scriptEnd);
		} catch (IOException e) {
			e.printStackTrace();
		}
        return super.doEndTag();
	}

	/**
	 * 添加Tab卡片
	 */
	public void addTab(ExtTabTag pTab){
		tabs.add(pTab);
	}

	/**
	 * 添加Tab卡片
	 */
	public void addTab(ExtTab pTab){
		tabs.add(pTab);
	}

	/**
	 * 释放资源
	 */
	public void release(){
		super.release();
		this.activeTab = null;
		this.tabsId = null;
		this.width = null;
		this.height = null;
	}

	public String getTabsId() {
		return tabsId;
	}
	public void setTabsId(String tabsId) {
		this.tabsId = tabsId;
	}
	public String getActiveTab() {
		return activeTab;
	}
	public void setActiveTab(String activeTab) {
		this.activeTab = activeTab;
	}
	public String getWidth() {
		return width;
	}
	public void setWidth(String width) {
		this.width = width;
	}

	public void setHeight(String height) {
		this.height = height;
	}

	public void setAutoScroll(String autoScroll) {
		this.autoScroll = autoScroll;
	}
}


/**
 * EXT风格标签选项卡标签-公共标签
 * @author 
 * @version eRedUI V0.1
 */
public class ExtTabTag extends BodyTagSupport{
	private String tabId;
	private String title;
	private String disabled;
	private String onclick;
	public ExtTabTag(){}

	/**
	 * 标签开始:Do Nothing!
	 */
	public int doStartTag() throws JspException{
		return super.EVAL_BODY_BUFFERED;
	}

	/**
	 * 标签结束：输出代码描述字符流
	 */
	public int doEndTag() throws JspException{
		String content = this.bodyContent.getString();
		ExtTabsTag tabs = (ExtTabsTag)findAncestorWithClass(this, ExtTabsTag.class);
		ExtTab tab = new ExtTab();
		tab.setTabId(this.getTabId());
		tab.setTitle(this.getTitle());
		tab.setContent(content);
		tab.setDisabled(this.getDisabled());
		tab.setOnclick(this.getOnclick());
		tabs.addTab(tab);
		//tabs.addTab(this);
        return super.doEndTag();
	}

	/**
	 * 释放资源
	 */
	public void release(){
		super.release();
        this.tabId = null;
        this.title = null;
	}

	public String getTabId() {
		return tabId;
	}
	public void setTabId(String tabId) {
		this.tabId = tabId;
	}
	public String getTitle() {
		return title;
	}
	public void setTitle(String title) {
		this.title = title;
	}

	public void setDisabled(String disabled) {
		this.disabled = disabled;
	}

	public void setOnclick(String onclick) {
		this.onclick = onclick;
	}

	public String getDisabled() {
		return disabled;
	}

	public String getOnclick() {
		return onclick;
	}
}