65.9K
CodeProject 正在变化。 阅读更多。
Home

ASP.NET Web控件 for Yahoo! 用户界面库

Luke Foust
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.62/5 (9投票s)

2007年5月23日

3分钟阅读

viewsIcon

79387

downloadIcon

1032

为YUI Javascript控件创建 ASP.NET 包装器

Screenshot - YuiNet.png

引言

Yahoo! 用户界面库 (YUI) 是一个客户端 Javascript 控件库，用于解决许多常见场景，例如日历输入、浮动面板和菜单。 这些控件的文档非常出色，因此我不会花太多时间详细介绍每个控件。 为了使这些控件在 ASP.NET 环境中良好运行，创建一个自定义 Web 控件是一个有用的练习，这可以方便地将这些控件放到任何 ASP.NET 页面上。 目前，支持以下 YUI 控件

使用代码

首先，您必须为您要添加控件的页面注册标签前缀

<%@ Register TagPrefix="YUI" Assembly="Web.YUI" Namespace="Web.YUI" %>

这允许您在页面上使用 YUI 前缀进行控件。 为了在页面上使用它们，您必须在其上有一个YahooScripManager 控件。 这将管理每个控件所需的所有脚本 (.js) 和样式 (.css) 引用。

<YUI:YahooScriptManager ID="manager" runat="server" />

接下来，您可以将控件添加到页面。 例如，日历控件将如下所示

<YUI:Calendar id="cal" runat="server" />

关注点

Screenshot - YuiNetClassDiagram.png

每个控件都实现了一个名为IYahooContol的接口。 此接口的定义是

interface IYahooControl
{
    string LoadScript { get;}
    YahooScript[] ScriptDependencies { get;}
    YahooStyleSheet[] StyleDependencies { get;}
}

这允许控件指定其依赖的 Javascript 文件、其依赖的 .css 文件以及初始化控件所需的 Javascript。 YahooScriptManager 也使用此接口来告诉页面控件中的哪些 YUI 命令，应该记住这一点。 请注意，作为 YUI 一部分的 Javascript 和 .css 文件由 YahooScriptManager 管理，可以由 Yahoo! 托管在其服务器上（默认情况下），或者它们可以托管在您的服务器上。 为了在您自己的服务器上托管它们，您必须使用 LocalBasePath 属性指定 YUI 代码的根路径。

您可以使用 ScriptType 属性控制脚本类型（Minified、Standard 或 Debug）。 HostLocation 属性指定文件是否托管在 Yahoo! 上或本地托管在您自己的服务器上。 如果文件托管在 Yahoo! 的服务器上，您可以使用 ScriptVersion 属性指定特定版本。 如果您要在多个页面上使用 YahooScriptManager，并且希望在中心位置配置它，您可以使用 Web 项目中 web.config 文件的 appSettings 部分。 设置将如下所示

<appSettings>
    <add key="YahooScriptManager.HostLocation" value="Yahoo"/>
    <add key="YahooScriptManager.ScriptType" value="Minified"/>
    <add key="YahooScriptManager.LocalBasePath" value="/YUI/"/>
    <add key="YahooScriptManager.ScriptVersion" value="2.2.2"/>
</appSettings>

在大多数情况下，我尝试尽可能地匹配 YUI Javascript 类的对象模型。 但是，有一些例外情况。 我决定在有意义的时候让某些属性的功能更像大多数 ASP.NET 控件。 例如，YUI Button 控件有一个名为 "Disabled" 的属性，其默认值为 false。 相比之下，ASP.NET 倾向于使用 "Enabled" 并将其默认为 true。 大多数这些更改应该相当小。 我试图将大多数面板控件封装到一个名为 FloatPanel 的类中。 可以将此控件设置为可拖动和可调整大小，这将自动更改实现此功能的实际 YUI 类。

结论

到目前为止，我构建的控件的最大弱点是它们没有真正提供一种简单的方法来插入丰富的 YUI 事件模型。 我尚未决定如何处理这个问题，因此欢迎任何反馈。 我已将代码放在 CodePlex 上，希望我可以产生一些兴趣，并让其他一些开发人员为该项目做出贡献。 请查看源代码，如果您有任何反馈意见，请告诉我。

历史

  • 2007年5月21日 - 初始发布
© . All rights reserved.