ASP.NET Outlook 样式工具栏控件

分享于 

7分钟阅读

Web开发

  繁體 雙語

Sample Image - aspnetoutlooktoolbar.jpg

介绍

本文介绍如何开发复杂的Outlook 样式工具栏作为 ASP.NET 服务器控件。 过去,我看到许多类似的控件,但是它们不容易使用或者没有提供我想要的功能。 所以我决定自己来。

工具栏的功能

工具栏模拟 Outlook 样式工具栏。 工具栏由各种工具栏组组成。 每个工具栏组都包含标题标题和标题后面的按钮。 而且,在任何给定时间只能有一个组处于活动状态。 可以通过单击扩展组的标题,从以前的活动组中获取组的活动。

工具栏中的按钮的特征是图片和标签。 通常,工具栏的任何按钮都可以通过工具栏组和按钮索引对进行标识。

当活动工具栏组中的按钮数目超过屏幕区域 i.e. 时,这里工具栏控件的滚动不足:

#Buttons in active group * Height of each button> 
 Toolbar Height - ToolbarGroupTitleHeight * Number of Total Groups.

这是因为没有关于web组件维度的运行时知识。 也许,有人可以引导我。

另一个要记住的是,只有当容器页面没有在网格模式下设计时,工具栏才会下降。

代码构造

制定服务器控制计划时,我有两个主要的考虑事项。 首先,服务器控件应该在运行时进行配置。 其次,它应该是一个子元素来修改元素样式和悬停/取消悬停样式元素。 首先,我痛恨服务器控件( 管理不容易)的JavaScript依赖。

第一个需求是通过使用 XML Schema 和配置文件实现的。 工具栏服务器控件公开了 ToolbarDefinitionFileName 属性,可以更改该属性以重新配置工具栏配置。 或者,可以更改相同的配置文件,以反映下一页刷新/postback的更改。 Toolbar控件根据该文件的架构验证该文件的XML内容。

下面是工具栏的架构:

<?xmlversion="1.0"encoding="utf-8"?><xs:schemaid="Toolbar"targetNamespace="http://tempuri.org/Toolbar.xsd"elementFormDefault="qualified"xmlns="http://tempuri.org/Toolbar.xsd"xmlns:mstns="http://tempuri.org/Toolbar.xsd"xmlns:xs="http://www.w3.org/2001/XMLSchema"><xs:complexTypename="ToolbarButtonDef"><xs:sequence><xs:elementname="Caption"type="xs:string"nillable="false"/><xs:elementname="ImagePath"type="xs:string"nillable="false"/><xs:elementname="Alt"type="xs:string"/></xs:sequence></xs:complexType><xs:complexTypename="ToolbarGroupDef"><xs:sequence><xs:elementname="Caption"type="xs:string"nillable="false"/><xs:elementname="ToolbarButton"type="ToolbarButtonDef"/></xs:sequence></xs:complexType><xs:elementname="Toolbar"><xs:complexType><xs:sequence><xs:elementname="ToolbarGroup"type="ToolbarGroupDef"/><xs:elementname="ScrollUpImagePath"type="xs:string"default="images/scrollup.gif"/><xs:elementname="ScrollDownImagePath"type="xs:string"default="images/scrolldown.gif"/></xs:sequence></xs:complexType></xs:element></xs:schema>

下面是一个通过验证检查的示例XML文件:

<?xmlversion="1.0"encoding="utf-8"?><Toolbar><ToolbarGroupCaption="WebService"><ToolbarButtonCaption="Upload File"ImagePath="Images/4_47.gif"Alt="Upload Test File"/><ToolbarButtonCaption="Download File"ImagePath="Images/4_47.gif"Alt="Download Test File"/><ToolbarButtonCaption="Update Line"ImagePath="Images/schedule.gif"Alt="Update Line"/></ToolbarGroup><ToolbarGroupCaption="Group2"> 
 <ToolbarButtonCaption="Button3"ImagePath="Images/test.gif"Alt="Test Button"/><ToolbarButtonCaption="Button4"ImagePath="Images/test.gif"Alt="Test Button"/></ToolbarGroup></Toolbar>

使用CSS样式表文件,并将CSS类名绑定到各种工具栏元素,以提供运行时可以配置样式/鼠标悬停事件。 对于悬停元素,<Element>Normal<Element>Hover CSS类之间的switch 状态,其中 Element 表示元素类型。

例示工具栏

在IIS下提取工具栏项目。 要在web窗体上使用工具栏,请按如下所示包含CSS样式表:

<LINKhref="Shared/Styles/Toolbar.css"type="text/css"rel="Stylesheet">

首先,我建议使用下载中提供的示例 CSS。

接下来,在wwwrootCustomWebControls文件夹中添加工具栏控件的引用,然后将工具栏放到web窗体上。

<customwebcontrols:toolbarid="Toolbar1"runat="server"></customwebcontrols:toolbar>

接下来,创建工具栏的XML配置文件,并通过 Page_Load 将它的提供给工具栏控件,如下所示:

privatevoid Page_Load(object sender, System.EventArgs e)
{
 if (!IsPostBack)
 { 
 Toolbar1.ToolbarDefinitionFileName = "~/Toolbar.xml";
 }
 Toolbar1.OnToolbarButtonClicked +=new 
 CustomWebControls.ToolbarButtonClicked(Toolbar1_OnToolbarButtonClicked);
}

上面 代码将XML内容( 粘贴为上面的示例) 附加到工具栏。 最后一部分是从工具栏接收通知并处理它们。 这是通过处理 ToolbarButtonClicked 事件( 我们已经在 Page_Load 事件中附加了它) 来完成的。

privatevoid Toolbar1_OnToolbarButtonClicked(int Group, int Button)
{
 // Toolbar Groupswitch (Group)
 {
 case0:
 // Toolbar Button Within Groupswitch (Button)
 {
 case0:
 // Do Somethingbreak;
 }
 }
}

为便于方便,下载中包含了 Toolbar.css,以便在项目中作为CSS样式表,因这里 SampleToolbar.xml ( 示例配置) 也是如这里。 就是这样我们已经完成了。 任何建议随时欢迎。

Kaila


tool  控制  asp  asp-net  style  OUT  
相关文章