超簡單實(shí)現(xiàn) .NET開發(fā)類似Web Parts的功能_.Net教程

2024-07-10 12:50:40

字體：大中小

供稿：網(wǎng)友

推薦：數(shù)據(jù)訪問層的第一種實(shí)現(xiàn):Access SQL
經(jīng)過上面篇文章的介紹，整個(gè)系統(tǒng)的框架算是基本搭建完了，下面，我們要具體實(shí)現(xiàn)各個(gè)層次。關(guān)于數(shù)據(jù)訪問層的實(shí)現(xiàn)，我準(zhǔn)備討論三種實(shí)現(xiàn)方式，這一篇文章討論第一種：Access 動態(tài)生成SQL。顧名

微軟推出SharePoint2003 ，SharePoint2007以來，一個(gè)新的技術(shù)Web Parts也隨著推出來了。剛一接觸到這個(gè)東西，作為了一個(gè)開發(fā)人員，感到十分的好奇，這雖然算不上一次技術(shù)上的革命，但對用戶的體驗(yàn)來講，卻是一個(gè)實(shí)實(shí)在在的好東東，能給使用的用戶帶來使用軟件的幸福感，自在感。一句話，真是太棒了！

看了很多軟件已經(jīng)實(shí)現(xiàn)了這個(gè)功能，像google這種大公司也早就實(shí)現(xiàn)了這種功能，還有許多其它公司也實(shí)現(xiàn)了類似的功能。最近我們在做E8.HelpDesk For ITSM產(chǎn)品，這樣的好東西怎么能放過了。。。

Web Parts的實(shí)現(xiàn)有多種方式，由于對.Net 2.0的Web Parts不是很熟，我們用最方便快捷的javascrpt腳本來實(shí)現(xiàn)，實(shí)現(xiàn)的原理是用Iframe，用戶可以自定義自己的桌面，每個(gè)Iframe里可以放入一個(gè)網(wǎng)頁地址，具體要放什么網(wǎng)頁，我們可以做一個(gè)管理界面，加一個(gè)自定義桌面表，可以根據(jù)自己的需要，不斷的延伸這個(gè)功能，做到非常的靈活，強(qiáng)大，這里面有用的XmlHttp技術(shù)，讓用戶自定義自已的桌面時(shí)，休驗(yàn)到快速的效果，最后的效果，類似于google的定義功能。現(xiàn)在把實(shí)現(xiàn)的腳本代碼貼出來，與大家共享，共同進(jìn)步。

// Input 0
/**
* get element
* document.getElementById的封裝

* 如果瀏覽器不支持getElementById方法則返回null
*/
function _getElementById(a)
{
return document.getElementById?document.getElementById(a):null
}
/**
* get elements tag name
* document.getElementsByTagName的封裝

* 根據(jù)tagName返回?cái)?shù)組，*返回所有tag。

* 如果瀏覽器不支持getElementsByTagName方法，則返回空數(shù)組

*/
function _getElementsByTagName(a)
{
return document.getElementsByTagName?document.getElementsByTagName(a):new Array()
}

//標(biāo)志瀏覽器是否為Safari
var isSafari=navigator.userAgent.indexOf("Safari")>=0;

/**
* 一個(gè)標(biāo)準(zhǔn)的colArrayAX替換頁面內(nèi)容典范
* 變量a為地址，aa為回掉處理函數(shù)

*/
function _sendXMLRequest(theURL,aa)
{
var xmlHttpObj=getXMLHttpObj();
if(!xmlHttpObj||isSafari&&!aa)
{//特殊瀏覽器特殊照顧

(new Image()).src=theURL;
}
else
{//正常的瀏覽器，用XMLHTTP顯示內(nèi)容
xmlHttpObj.open("GET",theURL,true);
xmlHttpObj.setRequestHeader( "CONTENT-TYPE ", "application/x-www-form-urlencoded ");
xmlHttpObj.send(null);
}
}
/**
* 拿到一個(gè)可用的XMLHttpRequest對象
*/
function getXMLHttpObj()
{
var a=null;
if(window.ActiveXObject)
{
a=new ActiveXObject("Msxml2.XMLHTTP");
if(!a)
{
a=new ActiveXObject("Microsoft.XMLHTTP");
}
}
else if(window.XMLHttpRequest)
{
a=new XMLHttpRequest();
}
return a;
}

function _del(a)
{
msg="確認(rèn)不在桌面上顯示該模塊么?/n/n您可以通過自定義桌面恢復(fù)顯示！";
if(window.confirm(msg))
{
var module=_getElementById("module_" a);
if(module)
module.style.display="none";
aI();
}
return false
}

/**
* 查找CSS，將class名字為a的aa自段定義值為ab
* 例如setCSSAttrib("medit","display", "none");
* 則代表將.media的display定義為none
*
*/
function setCSSAttrib(clasName,attrName,attrValue)
{
if(document.styleSheets)
{//瀏覽器有styleSheets，查找CSS列表并修改

clasName="." clasName;
for(var i=0;i<document.styleSheets.length;i )
{
var classI=document.styleSheets[i];
var rulesI=classI.rules;
if(!rulesI)
{
rulesI=classI.cssRules;
if(!rulesI){return}
}
for(var j=0;j<rulesI.length;j )
{
if(rulesI[j].selectorText.toLowerCase()==clasName.toLowerCase())
{
rulesI[j].style[attrName]=attrValue
}
}
}
}
else
{//瀏覽器不支持styleSheets，一個(gè)元素一個(gè)元素地找并修改-_-b
var elementI=_getElementsByTagName("*");
for(var i=0;i<elementI.length;i )
{
if(elementI[i].className==clasName)
{
elementI[i].style[attrName]=attrValue
}
}
}
}

var aC="";

var _pnlo;
var _mod;
var ay=false;

var aq=0;

var colArray=[];
var ap=0;
var am=null;

/**
* 如果am為null，將am創(chuàng)建為<div>標(biāo)簽，暫時(shí)先不顯示，鼠標(biāo)形狀為move，

* 背景為白色，底部padding為0px，直接創(chuàng)建在<body>下。最后返回am
*/
function createDiv()
{
if(!am)
{
am=document.createElement("DIV");
am.style.display="none";
am.style.position="absolute";
am.style.cursor="move";
am.style.backgroundColor="#ffffff";
am.style.paddingBottom="0px";
document.body.appendChild(am)
}
return am
}

/**
* 核心代碼
* al是這樣一個(gè)對象，它有一個(gè)屬性obj，默認(rèn)為null，和init/start/drag/end/fixE五個(gè)方法
* init() ---- 設(shè)置初始方法
* 設(shè)置元素a的onmousedown事件響應(yīng)為al.start方法，并設(shè)置am（那個(gè)直接隸屬于
* <body>的隱藏<div>）的左邊在頁面左上角（如果沒有設(shè)置過的話），設(shè)置上a的空拖拽
* 事件
* start() --- 拖拽開始事件

* 設(shè)置全局變量aa和al.obj為事件源（同一時(shí)刻只能有一個(gè)box在drag狀態(tài)）。得到隱藏div
* 元素的坐標(biāo)和當(dāng)前事件的鼠標(biāo)坐標(biāo)，回掉aa變量在initHead()函數(shù)中注冊的onDragStart()函數(shù)（將
* 隱藏div內(nèi)容填好，移動到鼠標(biāo)位置）。將當(dāng)前鼠標(biāo)坐標(biāo)記錄在aa變量中。設(shè)置鼠標(biāo)移動

* 事件響應(yīng)和鼠標(biāo)抬起事件響應(yīng)。

* drag() ---- 拖拽中事件

* 設(shè)置全局變量aa為事件源。得到當(dāng)前鼠標(biāo)坐標(biāo)和移動中的div的位置，與上次鼠標(biāo)坐標(biāo)相比

* 計(jì)算出偏移量，修改移動中的div的坐標(biāo)。記錄鼠標(biāo)當(dāng)前位置，回掉aa的onDrag()函數(shù)。設(shè)置

* al.obj為null，等待下個(gè)box的移動。

* end() ----- 拖拽結(jié)束事件
* 設(shè)置onmousemove和onmouseup不響應(yīng)事件，回掉aa的onDragEnd()函數(shù)。

* fixE()
* 確保瀏覽器兼容性，保證變量a為event事件，并修正事件的layerX/Y（似乎沒有用處）
*/
var al = {"obj":null,
"init":function(a){
a.onmousedown=al.start;
if ( isNaN(parseInt(createDiv().style.left)) ) {
createDiv().style.left="0px";
}
if ( isNaN(parseInt(createDiv().style.top)) ) {
createDiv().style.top="0px";
}
a.onDragStart=new Function();
a.onDragEnd=new Function();
a.onDrag=new Function()
},
"start":function(a){
var aa=al.obj=this;
a=al.fixE(a);
var ab=parseInt(createDiv().style.top);
var ac=parseInt(createDiv().style.left);
aa.onDragStart(ac,ab,a.clientX,a.clientY);
aa.lastMouseX=a.clientX;
aa.lastMouseY=a.clientY;
document.onmousemove=al.drag;
document.onmouseup=al.end;
return false
},
"drag":function(a){
a=al.fixE(a);
var aa=al.obj;
var ab=a.clientY;
var ac=a.clientX;
var ad=parseInt(createDiv().style.top);
var ae=parseInt(createDiv().style.left);
var af,ag;
af=ae ac-aa.lastMouseX;
ag=ad ab-aa.lastMouseY;
createDiv().style.left=af "px";
createDiv().style.top=ag "px";
aa.lastMouseX=ac;
aa.lastMouseY=ab;
aa.onDrag(af,ag,a.clientX,a.clientY);
return false
},
"end":function(){
document.onmousemove=null;
document.onmouseup=null;
al.obj.onDragEnd(parseInt(createDiv().style.left),parseInt(createDiv().style.top));
al.obj=null
},
"fixE":function(a){
if (typeof a=="undefined") {
a=window.event;
}
if (typeof a.layerX=="undefined") {
a.layerX=a.offsetX;
}
if (typeof a.layerY=="undefined") {
a.layerY=a.offsetY;
}
return a
}
};

var aw=false;
/**
* 本函數(shù)作用是設(shè)置所有標(biāo)題可拖動，給元素加入拖拽事件響應(yīng)代碼。

* 本函數(shù)只執(zhí)行一次，aw為true時(shí)函數(shù)直接返回。

* 對第一列c_1、第二列c_2、第三列c_3做初始設(shè)置。每一列下均有若干id為m_x的<div>標(biāo)簽
* 每一個(gè)<div>標(biāo)簽內(nèi)容均為一個(gè)<table>，該table中有一個(gè)<td>命名為m_x_h，這就是可可拖拽的

* 標(biāo)題。得到這個(gè)<td>元素，加入拖拽事件代碼，就是本函數(shù)的作用。

*/
function initHead(a)
{
if(aw)return;
aw=true;
//設(shè)置全局變量colArray為當(dāng)前要處理的列數(shù)組，也即三個(gè)id為c_1、c_2和c_3的<td>元素
colArray=a;
//數(shù)組colArray中的每個(gè)元素都要執(zhí)行。其實(shí)數(shù)組colArray只有三個(gè)元素，c_1、c_2和c_3，也即第一/二/三列
for(var i=0;i<colArray.length;i )
{//對所有c_x的子結(jié)點(diǎn)遍歷，其實(shí)也就是命名為m_x的div標(biāo)簽。最后一個(gè)div標(biāo)簽有其它用處，
//故此處length-1
for(var j=0;j<colArray[i].childNodes.length-1;j )
{
var module_i=colArray[i].childNodes[j];
var head_i=_getElementById(module_i.id "_head");
if(!head_i)
continue;

//此刻，已經(jīng)得到了id為m_x_h的<td>元素，即box的標(biāo)題td
//將整個(gè)大<div>記錄在ad對象的module屬性中，這個(gè)module屬性是？？？？
head_i.module=module_i;
//用al對象的init方法初始化可拖拽標(biāo)題td。

al.init(head_i);

//得到m_x_h的<a>元素，即id為m_x_url的<a>
var url_i=_getElementById(module_i.id "_url");
if(url_i)
{//設(shè)置<a>的h屬性為ad（即上層標(biāo)題的<td>元素）,這個(gè)h屬性是？？？？
url_i.h=head_i;
//當(dāng)超級鏈接被點(diǎn)中，設(shè)置上層標(biāo)題<td>的href和target屬性

//為當(dāng)前超級鏈接的href和target屬性。這樣用戶也可以拖超級鏈接

url_i.onmousedown=function() {
this.h.href=this.href;
this.h.target=this.target;
}
}

分享：依賴注入機(jī)制及IoC的設(shè)計(jì)與實(shí)現(xiàn)
我們設(shè)計(jì)的分層架構(gòu)，層與層之間應(yīng)該是松散耦合的。因?yàn)槭菃蜗騿我徽{(diào)用，所以，這里的“松散耦合”實(shí)際是指上層類不能具體依賴于下層類，而應(yīng)該依賴于下層提供的一個(gè)接口。這樣，上層