Cutting Edge:為ASP.NET控件加入快捷菜單(2)
2024-07-10 13:03:55
供稿：網友
cutting edge:為asp.net控件加入快捷菜單(2)英文原文：adding a context menu to asp.net controls
作者：dino esposito
翻譯：劉瑞才
源碼：cuttingedge0502.exe 編程接口
我們的contextmenu控件從webcontrol繼承并執行inamingcontainer接口
public class contextmenu : webcontrol, inamingcontainer
圖一控件的成員細節,如下：
屬性 描述 autohide 標志當用戶鼠標移出控件區域時，是否自動隱藏快捷菜單 boundcontrols 返回使用快捷菜單的控件集合 cellpadding 返回或設置每個菜單項周圍的空間的象素數 contextmenuitems 返回菜單項的集合 rollovercolor 返回或設置當鼠標劃過菜單項時突顯的顏色 方法 描述 getescreference 返回當用戶按下esc鍵時用于隱藏頁面中的快捷菜單的javascrip代碼 getmenureference 返回一段javascript代碼，這段代碼將關聯到快捷菜單所對應的html元素上． getonclickreference 返回當用戶在菜單區域外點擊時隱藏快捷菜單的代碼． 事件 描述 itemcommand 當用戶點擊一個快捷菜單項進激發．
關鍵屬性是contextmenuitmes集合屬性，它包含了contextmenuitem類型的對象集合，每一個對象表示一個菜單項。contextmenuitem類的源碼如下：
[typeconverter(typeof(expandableobjectconverter))]
public class contextmenuitem
{
public contextmenuitem() {}
public contextmenuitem(string text, string commandname)
{
_text = text;
_commandname = commandname;
}
private string _text;
private string _commandname;
private string _tooltip;
public string text
{
get {return _text;}
set {_text = value;}
}
public string commandname
{
get {return _commandname;}
set {_commandname = value;}
}
public string tooltip
{
get {return _tooltip;}
set {_tooltip = value;}
}
}
每個菜單項具有顯示文本，命令名(command name)，提示文本(tooltip)。你可以通過各方法擴展這個類，例如添加一個圖片url，一個不可用狀態，或一個目標url等。顯示文本被顯示于菜單項上；命令名是一個唯一標識字符串，用于指定或確定與菜單項關聯的命令。tooltip獲取或設置當鼠標指針停留在菜單項上時顯示的工具提示文本
當用戶點擊菜單項時，頁面回傳并激發一個服務器端的itemcommand事件?？刂祈撏ㄟ^操作這一事件來執行一些代碼來響應用戶對菜單項的點擊。圖3是一個使用快捷菜單的示例工程的截圖：
要使用快捷菜單，你需要使用menu item對象填充contextmenuitems集合，調整一些可視化樣式，至少添加一個控件到boundcontrols集合中。然后在瀏覽器中打開示例頁，在任意綁定快捷菜單的控件上右擊。效果如圖：
每個菜單項包含一個linkbutton控件，這個linkbutton控件有一個內部綁定的點擊事件處理程序。當檢測到點擊時，頁面回傳并激發這個點擊事件。接著，預定義的處理程序將事件冒泡到上一級，并改名為itemcommand。
控件還定義了一些可視化的屬性，象cellpadding,rollovercolor和autohide。重申一下，在windows中快捷菜單可以在按下esc鍵或在菜單區域外點擊時取消。對于基于web的快捷菜單來說，autohide屬性為快捷菜單的根標簽添加onmouseleave腳本，所以當用戶的鼠標離開菜單區域時，這個根標簽的子樹將隱藏。把autohide作為一個可設置的屬性，用戶可以在需要的時候設置是否在鼠標離開時自動隱藏快捷菜單。
要使菜單能夠在點擊或按esc鍵時隱藏，需要添加如下處理程序：< br><bodyonkeypress="...">
處理程序腳本可以被程序化的添加到每一個頁面元素，只要這個元素被標記為runat=server。這樣實際上就是在contextmenu快捷菜單控件和頁面之間創建了一個邏輯信賴。另外，你必須在頁面上定義一個額外的服務器控件。當然，在運行時實例化一個額外的控件并不會嚴重的影響執行效果，但是為什么僅僅因為想容易的consume其它的控件而實例化一個無用的控件呢。作為選擇下面這個方法也可以達到同樣的效果：用body獲取按esc鍵和鼠標點擊，并且你節省了服務器控件的開支
<body onkeypress="<% = contextmenu1.getescreference() %>" >
讓我們更詳細的說一下控件的實現
控件的實現
contextmenu控件的核心在于重寫createchildcontrols方法。在這個方法中控件創建界面并在頁面中寫入所需的腳本。我們說過，contexmenu控件的用戶界面分為兩部分——圖形和腳本。我們先說圖形。
createchildcontrols方法產生一個可以在頁面移動的html塊，它就是所需的彈出菜單。照這樣看來，快捷菜單就是包含一個table表單的<div> ，每一個菜單項就是這個table表單中的一行。使用table是由于一系列的開發點（象邊框和浮動層）和它能很容易的擴展（例如添加側邊圖象）所決定的。
htmlgenericcontrol div = new htmlgenericcontrol("div");
div.id = "root";
div.style["display"] = "none";
div.style["position"] = "absolute";
if (autohide)
div.attributes["onmouseleave"] = "this.style.display='none'";
我們使用層疊樣式表(css)來隱藏最外層的<div>標簽，并且用絕對位置標記這個<div>。如果自動隱藏可用，那么<div> 還得處理 mouse-leave(鼠標離開)事件來隱藏本身。那么 onmouseout和onmouseleave事件有什么不同呢？前者是當鼠標移動到一個新的元素上時發生，而后者是當鼠標移出綁定對象時發生。舉例說明：你的鼠標在一個有兩行的表單（table）上移動。當你在table的兩行之間移動時，onmouseout事件就會發生；只有你的鼠標移動到table表單之外時onmouseleave事件才發生。
table包含和要顯示的菜單項個數相同的行，每一行有一個單元格，每個單元格里放一個linkbutton對象。菜單通過一個循環創建：
foreach(contextmenuitem item in contextmenuitems)
{
tablerow menuitem = new tablerow();
menutable.rows.add(menuitem);
tablecell container = new tablecell();
menuitem.cells.add(container);
linkbutton button = new linkbutton();
container.controls.add(button);
...
}
行的單元格有一組腳本操作——onmouseover和onmouseout——完成鼠標劃過的效果。當鼠標劃過時改變背景顏色。鼠標離開時恢復初始顏色。默認的背景色由從webcontrol繼承的background屬性指定。高亮顏色由新的屬性rollovercolor指定。
string color = string.format(contextmenu.onmouseover, colortranslator.tohtml(rollovercolor));
container.attributes["onmouseover"] = color;
color = string.format(contextmenu.onmouseout, colortranslator.tohtml(backcolor));
container.attributes["onmouseout"] = color;
你需要把.net的system.drawing.color值轉換成可用的html顏色。有意思的是，無論是color類的tostring方法還是它的name屬性都不能在所有情況下返回對應的html顏色字符串，不知是不是有意這樣的:(。name屬性基本可以實現這一功能，只有和種情況例外。當顏色不能和已知的顏色匹配時，這個屬性返回顏色的rgb組，外加alpha通道值。要得到當前的html顏色，你必須移除alpha通道值（通常是開頭的十六進制 ff 字符串）并使用#號替換它。幸運的是，system.drawing.colortranslator類可以自動完成這項工作:)。
(待續)
