业务系统设计之三：系统主控设计（下）
关于业务系统设计之系统主控设计，前一篇文章里已经将整个流程走了一便，最终开发出来的案例运行效果如下图：
本文将深入到系统主控的开发实现上，层层分析系统主控的各部分。首先从创建选项标签开始，通过点击菜单项来创建或选择一个已存在的选项标签，RadMenu和RadTabstrip控件对客户端事件的支持很强大，我们可以通过他的客户端事件去创建一个选项标签、选中一个存在的标签和关闭标签等等。
*程序功能：RadMenu客户端单击事件
*开发日期：2008-11-08 Beniao
*参数说明：
* sender:执行请求的当前对象
* eventArgs:当前对象的事件
*------------------------------------------------
*>>>>>直接使用硬参数,Url值为相对路径(不加任何前缀修饰)
*/
function OnClientClick(sender, eventArgs)
{
var value = eventArgs.Item.Value; //隐藏Url
var text = eventArgs.Item.Text; //显示文本
//设置容器高度
SetContentHeight();
//关闭菜单项
CloseItem(sender, eventArgs);
//是否为首节点
if(IsFirstTab(value))
{
//显示当前页签
DisplayCurrentTab(text);
return;
}
if(value != '#')
{
//存在则直接显示(即实现选中)
if(IsExsitTab(value))
{
DisplayCurrentTab(text);
eventArgs.Item.Blur();
}
else
{
//是否为动态创建的第一个Tab
//不存在,创建新的
CreateTabPage(value,text);
eventArgs.Item.Blur();
}
}
}
*开发日期：2008-11-08 Beniao
*参数说明：
* sender:执行请求的当前对象
* eventArgs:当前对象的事件
*------------------------------------------------
*>>>>>直接使用硬参数,Url值为相对路径(不加任何前缀修饰)
*/
function OnClientClick(sender, eventArgs)
{
var value = eventArgs.Item.Value; //隐藏Url
var text = eventArgs.Item.Text; //显示文本
//设置容器高度
SetContentHeight();
//关闭菜单项
CloseItem(sender, eventArgs);
//是否为首节点
if(IsFirstTab(value))
{
//显示当前页签
DisplayCurrentTab(text);
return;
}
if(value != '#')
{
//存在则直接显示(即实现选中)
if(IsExsitTab(value))
{
DisplayCurrentTab(text);
eventArgs.Item.Blur();
}
else
{
//是否为动态创建的第一个Tab
//不存在,创建新的
CreateTabPage(value,text);
eventArgs.Item.Blur();
}
}
}
首先通过RadMenu控件的客户端事件参数获取到菜单项的文本和隐藏的URL值，因为系统主控一般有一个默认的首页，当在创建或选择的时候都需要判断下当前是否为默认的首页。
/*
*程序功能：是否为首节点
*开发日期：2008-11-08 20:15
*参数说明：
* requestUrl:请求的Url
*/
function IsFirstTab(requestUrl)
{
var flag = false;
if(requestUrl == "")
return flag;
if(requestUrl.toLowerCase() =="First.aspx".toLowerCase())
{
flag = true;
}
return flag;
}
*程序功能：是否为首节点
*开发日期：2008-11-08 20:15
*参数说明：
* requestUrl:请求的Url
*/
function IsFirstTab(requestUrl)
{
var flag = false;
if(requestUrl == "")
return flag;
if(requestUrl.toLowerCase() =="First.aspx".toLowerCase())
{
flag = true;
}
return flag;
}
如果当前页不是首页，则需要判断当前所选的菜单项的隐藏URL值是不是为“#”，数据库中的设计为如果是"#"则代表是顶层菜单项，否则则创建新的选项标签。这里又需要注意，如果将要创建的选项已经存在则选中就OK，如果不存在则创建。
/*
*程序功能：判断当前页签是否存在
*开发日期：2008-11-08 10:20
*参数说明：
* requestUrl:请求的Url
*/
function IsExsitTab(requestUrl)
{
var flag = false;
var tabStrip = <%=RadTabStripMain.ClientID %>;
var ofrms = divMain.childNodes;
var count = ofrms.length;
for (var i = 0; i < count; i++)
{
//if(i == 1) continue;
var frmID = ofrms[i].id;
var index = GetIndex(frmID);
var value = tabStrip.Tabs[index].Value;
if(value.toLowerCase() == requestUrl.toLowerCase())
{
flag = true;
break;
}
}
return flag;
}
/*
*程序功能：显示当前页签
*开发日期：2008-11-08 10:20
*参数说明：
* text:Tab上显示的文本内容
*/
function DisplayCurrentTab(text)
{
var tab = <%=RadTabStripMain.ClientID %>.FindTabByText(text);
if(tab)
{
tab.SelectParents();
}
}
*程序功能：判断当前页签是否存在
*开发日期：2008-11-08 10:20
*参数说明：
* requestUrl:请求的Url
*/
function IsExsitTab(requestUrl)
{
var flag = false;
var tabStrip = <%=RadTabStripMain.ClientID %>;
var ofrms = divMain.childNodes;
var count = ofrms.length;
for (var i = 0; i < count; i++)
{
//if(i == 1) continue;
var frmID = ofrms[i].id;
var index = GetIndex(frmID);
var value = tabStrip.Tabs[index].Value;
if(value.toLowerCase() == requestUrl.toLowerCase())
{
flag = true;
break;
}
}
return flag;
}
/*
*程序功能：显示当前页签
*开发日期：2008-11-08 10:20
*参数说明：
* text:Tab上显示的文本内容
*/
function DisplayCurrentTab(text)
{
var tab = <%=RadTabStripMain.ClientID %>.FindTabByText(text);
if(tab)
{
tab.SelectParents();
}
}
按照上面的代码则实现了判断是否为默认页---当前项是否存在---显示已经存在的选项标签。那要创建新的该怎么实现呢？这里首先需要弄清楚一个规则，实现多选项标签是利用的RadTabstrip控件的标签功能，而其下是通过iframe嵌入的一个页面，这个页面通过动态创建iframe包含到主控台上。其中每一个iframe的命名为：frm+一个数字(从0开始)，如果要创建新的iframe则首先将现在的最大“frm数字”中的数字取出来然后加1，来作为新的选项标签的iframe的ID。
/*
*程序功能：创建一个新的页签
*开发日期：2008-11-08 10:45
*参数说明：
* value:请求的Url
* text:显示的文本
*/
function CreateTabPage(requestUrl,text)
{
var tabStrip = <%=RadTabStripMain.ClientID %>;
var number = GetMaxNumber(tabStrip);
//动态创建选项卡
var li = document.createElement("li");
li.id='tab' + number;
var a = document.createElement('a');
a.id = 'Id' + number;
li.appendChild(a);
var span = document.createElement('span');
span.className = "wrap";
a.appendChild(span);
var span1 = document.createElement('span');
span1.className = "innerWrap";
var image = document.createElement('img');
image.src="Images/close.gif";
image.attachEvent("onclick",OnCloseTab);
image.attachEvent("onmouseover",function(){HightLight(image);}); //鼠标移入
image.attachEvent("onmouseout",function(){Normal(image);}); //鼠标移出
image.alt="关闭";
span1.appendChild(image);
span1.appendChild(document.createTextNode(text));
a.firstChild.appendChild(span1);
tabStrip.ChildStripDomElement.appendChild(li);
var tabObject = tabStrip.CreateTabObject(tabStrip,li.firstChild,number);
tabObject.Value = requestUrl; //Modify by Beniao at 2008-11-07 14:10
tabObject.Text = text;
tabObject.Initialize();
//为当前页签选项创建一个iframe并添加到界面上
CreateDivAppend(requestUrl,number);
//选中当前页签选项
var sid = "Id" + number;
var stab = tabStrip.FindTabById(sid);
stab.Select();
SetIndex(tabStrip, number);
SetImage(tabStrip, tabObject);
}
*程序功能：创建一个新的页签
*开发日期：2008-11-08 10:45
*参数说明：
* value:请求的Url
* text:显示的文本
*/
function CreateTabPage(requestUrl,text)
{
var tabStrip = <%=RadTabStripMain.ClientID %>;
var number = GetMaxNumber(tabStrip);
//动态创建选项卡
var li = document.createElement("li");
li.id='tab' + number;
var a = document.createElement('a');
a.id = 'Id' + number;
li.appendChild(a);
var span = document.createElement('span');
span.className = "wrap";
a.appendChild(span);
var span1 = document.createElement('span');
span1.className = "innerWrap";
var image = document.createElement('img');
image.src="Images/close.gif";
image.attachEvent("onclick",OnCloseTab);
image.attachEvent("onmouseover",function(){HightLight(image);}); //鼠标移入
image.attachEvent("onmouseout",function(){Normal(image);}); //鼠标移出
image.alt="关闭";
span1.appendChild(image);
span1.appendChild(document.createTextNode(text));
a.firstChild.appendChild(span1);
tabStrip.ChildStripDomElement.appendChild(li);
var tabObject = tabStrip.CreateTabObject(tabStrip,li.firstChild,number);
tabObject.Value = requestUrl; //Modify by Beniao at 2008-11-07 14:10
tabObject.Text = text;
tabObject.Initialize();
//为当前页签选项创建一个iframe并添加到界面上
CreateDivAppend(requestUrl,number);
//选中当前页签选项
var sid = "Id" + number;
var stab = tabStrip.FindTabById(sid);
stab.Select();
SetIndex(tabStrip, number);
SetImage(tabStrip, tabObject);
}
通过JavaScript动态的创建一个RadTabstrip控件的页签选项，然后又动态的创建一个DIV和iframe并将指定的页面包含到iframe中。
/*
*程序功能：查找DIV对象(divMain),并根据参数新创建一个iframe对象追加到divMain的子节点上
*开发日期：2008-11-07 09:32
*参数说明：
* requestUrl:请求Url
* index:索引号
*/
function CreateDivAppend(requestUrl,index)
{
var divObject = document.getElementById("divMain");
//根据Url创建iframe
var oForm = CreateForm(requestUrl,index);
//将新创建的iframe追加到divMain的子节点中
divObject.appendChild(oForm);
}
/*
*程序功能：创建一个特定请求Url的iframe对象
*开发日期：2008-11-08 11:05
*参数说明：
* requestUrl:请求Url
* index:索引号
*/
function CreateForm(requestUrl,index)
{
var oFrom = document.getElementById("frm0");
var oFromNew = document.createElement("iframe");
oFromNew.id = "frm" + index; //新创建的iframe的唯一id
oFromNew.src = requestUrl;
oFromNew.style.position = "absolute";
oFromNew.style.setAttribute("left","0px");
oFromNew.style.setAttribute("top","0px");
oFromNew.style.setAttribute("width","100%");
oFromNew.style.setAttribute("height","100%");
oFromNew.style.setAttribute("z-index",index);
oFromNew.setAttribute("frameBorder","0");
oFromNew.setAttribute("marginHeight","0");
oFromNew.className="tabFrm";
return oFromNew;
}
*程序功能：查找DIV对象(divMain),并根据参数新创建一个iframe对象追加到divMain的子节点上
*开发日期：2008-11-07 09:32
*参数说明：
* requestUrl:请求Url
* index:索引号
*/
function CreateDivAppend(requestUrl,index)
{
var divObject = document.getElementById("divMain");
//根据Url创建iframe
var oForm = CreateForm(requestUrl,index);
//将新创建的iframe追加到divMain的子节点中
divObject.appendChild(oForm);
}
/*
*程序功能：创建一个特定请求Url的iframe对象
*开发日期：2008-11-08 11:05
*参数说明：
* requestUrl:请求Url
* index:索引号
*/
function CreateForm(requestUrl,index)
{
var oFrom = document.getElementById("frm0");
var oFromNew = document.createElement("iframe");
oFromNew.id = "frm" + index; //新创建的iframe的唯一id
oFromNew.src = requestUrl;
oFromNew.style.position = "absolute";
oFromNew.style.setAttribute("left","0px");
oFromNew.style.setAttribute("top","0px");
oFromNew.style.setAttribute("width","100%");
oFromNew.style.setAttribute("height","100%");
oFromNew.style.setAttribute("z-index",index);
oFromNew.setAttribute("frameBorder","0");
oFromNew.setAttribute("marginHeight","0");
oFromNew.className="tabFrm";
return oFromNew;
}
创建和选择已存在的页签选项都已经完成，这一切都是通过菜单驱动完成的。用户自己选择已存在的其中一页签选项怎么实现的呢？这个功能很简单实现，RadTabstrip控件有这样的一个客户端API，只要实现这样一个方法就可以完成功能。
/*
*程序功能：页签的选择事件
*开发日期：2008-11-08 11:30
*参数说明：无参数
*修改时间：2008-11-08 17:20
*/
function OnTabSelected()
{
//debugger;
var tabStrip = <%=RadTabStripMain.ClientID %>;
//当前所选择的页签
var selectTab = tabStrip.SelectedTab;
//如:Default.aspx
var requestUrl = selectTab.Value;
var oForms = divMain.childNodes;
var count = oForms.length;
//将第二个选项的关闭X图片处理掉
for ( var i = 0; i< count; i++)
{
//
.
}
for (var i = 0; i < count; i++)
{
//当前选择的Tab相对应的iframe的id
var formID = oForms[i].id;
var index = GetIndex(formID);
if(document.getElementById(formID) != undefined)
{
if(document.getElementById(formID).getAttribute('src') != requestUrl)
{
document.getElementById(formID).style.display='none';
}
else
{
document.getElementById(formID).style.display='';
}
}
}
SetIndex(tabStrip, index);
SetImage(tabStrip, selectTab);
}
*程序功能：页签的选择事件
*开发日期：2008-11-08 11:30
*参数说明：无参数
*修改时间：2008-11-08 17:20
*/
function OnTabSelected()
{
//debugger;
var tabStrip = <%=RadTabStripMain.ClientID %>;
//当前所选择的页签
var selectTab = tabStrip.SelectedTab;
//如:Default.aspx
var requestUrl = selectTab.Value;
var oForms = divMain.childNodes;
var count = oForms.length;
//将第二个选项的关闭X图片处理掉
for ( var i = 0; i< count; i++)
{
//
. }
for (var i = 0; i < count; i++)
{
//当前选择的Tab相对应的iframe的id
var formID = oForms[i].id;
var index = GetIndex(formID);
if(document.getElementById(formID) != undefined)
{
if(document.getElementById(formID).getAttribute('src') != requestUrl)
{
document.getElementById(formID).style.display='none';
}
else
{
document.getElementById(formID).style.display='';
}
}
}
SetIndex(tabStrip, index);
SetImage(tabStrip, selectTab);
}
当我么双击页签选项的时候可实现关闭页签，这一功能也可以通过控件提供的客户端API来实现，实现API功能的方法就OK。
/*
*程序功能：鼠标双击关闭当前页签
* 首页是不允许关闭的
*开发日期：2008-11-08 16:30
*参数说明：无参数
*/
function OnDoubleClick()
{
if(!IsDoubleClickClose())
{
RemoveTab();
}
}
/*
*程序功能：鼠标双击是否允许关闭当前页签(默认为不可关闭)
* 首页是不允许关闭的
*开发日期：2008-11-08 16:35
*参数说明：无参数
*/
function IsDoubleClickClose()
{
var flag = false;
var selectedTab = <%=RadTabStripMain.ClientID %>.SelectedTab;
var value = selectedTab.Value;
if(value == 'Default.aspx')
{
flag = true;
}
return flag;
}
*程序功能：鼠标双击关闭当前页签
* 首页是不允许关闭的
*开发日期：2008-11-08 16:30
*参数说明：无参数
*/
function OnDoubleClick()
{
if(!IsDoubleClickClose())
{
RemoveTab();
}
}
/*
*程序功能：鼠标双击是否允许关闭当前页签(默认为不可关闭)
* 首页是不允许关闭的
*开发日期：2008-11-08 16:35
*参数说明：无参数
*/
function IsDoubleClickClose()
{
var flag = false;
var selectedTab = <%=RadTabStripMain.ClientID %>.SelectedTab;
var value = selectedTab.Value;
if(value == 'Default.aspx')
{
flag = true;
}
return flag;
}
其他的就是设置一些效果的功能开发了，这全是一些脚本的开发，主要就是利用RadMenu和RadTabstrip控件的客户端API来实现各种功能，详细也没有什么好介绍的，本文几乎全是代码短，不过我相信对大家有所帮助。
文中只是贴出了比较关键的代码以作参考，如果有什么不明白之处，请大家下载源代码了解。
