CSS 控件适配器工具包新版发布

【原文地址】CSS Control Adapter Toolkit Update
【原文发表日期】Friday, September 08, 2006 6:53 PM

今天，我们发布了ASP.NET 2.0的CSS控件适配器的更新版本，内中包含了bug fixes，用户建议的的功能，以及对新控件的支持。你可以免费下载，马上开始使用它们，来给予下列ASP.NET控件用纯粹的CSS优化过的标识(markup)：:

• Menu
• TreeView
• GridView (新)
• DetailsView
• FormsView
• DataList
• Login(新)
• ChangePassword (新)
• CreateUser (新)
• PasswordRecovery (新)
• LoginStatus (新)

在CSS控件适配器第一次发行时，我曾写帖子说明过，这些控件适配器使用了ASP.NET 2.0中一个新的内置的扩展机制，叫做“控件适配器(control adapters)”。控件适配器允许你将其接入(plug-in)任何ASP.NET 服务器控件，然后它就会覆盖，修改或细调( tweak)那个控件的显示输出逻辑。

控件适配器很酷的地方是，它们不要求页面开发人员对一个新的控件编程，或修改控件编程模型的semantics，即，跟以前一样，你仍旧使用同样的控件属性，方法，事件和模板。建造页面的开发人员可以完全忘却使用了控件适配器，控件适配器模型使得注册和封装这样的支持非常干净。

快速入门示范

在免费的Visual Web Developer或Visual Studio 2005中使用CSS控件适配器工具包，按下列步骤做：

第一步：安装CSS控件适配器工具包:

下载和安装CSS 控件适配器工具包到你的机器上。点击这里下载一个Visual Studio的.VSI 模板项目，它会生成一个配置了CSS控件适配器的可以运行的项目模板。这是个安全的下载，它不会修改VS或ASP.NET中的任何文件或设置，所以你不要担心它是否会对现有编码造成问题。

第二步：创建一个注册了CSS控件适配器的新网站:

在Visual Web Developer或VS 2005中，在菜单里选择文件->新网站。这会打开“新网站”对话框。选择你的编程语言，然后选择新安装的“CSS友好网站(CSS Friendly Web Site)”项目模板：

这会为你创建一个新的网站项目，它的app_code目录里已经包含了CSS控件适配器的源码。它也包含了一些默认的CSS样式文件，其中有为你预先定义好了的样式类的名称(class name)，你可以用它们来定制你需要的任何CSS标识(CSS markup)：

第三步：试一些CSS样式控件例子:

要看控件适配器是如何改变服务器控件的标识的话，研究一下默认添加到新项目中的walkthrough子目录

例如，在下图中，SimpleMenu.aspx网页静态地定义了一个菜单控件，该控件连到了一个OnClick事件处理方法(或者，你也可以使用导航直接转到一个特定的网页去)：

<!-- Code Insert -->

< asp:Menu ID ="EntertainmentMenu" runat ="server" Orientation ="Horizontal" onmenuitemclick ="Menu_OnClick" CssSelectorClass ="SimpleEntertainmentMenu">
< Items >
< asp:MenuItem Text ="Music">
< asp:MenuItem Text ="Classical" />
< asp:MenuItem Text ="Rock">
< asp:MenuItem Text ="Electric" />
< asp:MenuItem Text ="Acoustical" />
</ asp:MenuItem >
< asp:MenuItem Text ="Jazz" />
</ asp:MenuItem >
< asp:MenuItem Text ="Movies" Selectable ="false">
< asp:MenuItem Text ="Action" />
< asp:MenuItem Text ="Drama" />
< asp:MenuItem Text ="Musical" />
</ asp:MenuItem >
</ Items >
</ asp:Menu >

在code-behind里，Menu_OnClick事件的编码是象这样的：

<!-- Code Insert -->

PublicSub Menu_OnClick( ByVal sender AsObject , ByVal e As MenuEventArgs)
MessageLabel.Text = "Youselected" &e.Item.Text& "."
e.Item.Selected =True
EndSub

<!-- End Code Insert -->

在运行时，CSS控件适配器会导致菜单输出使用了<li>和<ul>元素的CSS样式化了的的标识，而不是表格，当我们应用一个CSS样式表到页面时，我们将得到一个好看的分层的下拉式菜单：

在看这些样本例子时，你也许要看一下CheckBoxTreeView 这个例子。它示范了如何用CSS来样式化<asp:treeview>控件以使用行内( inline)的复选框：

那么CSS控件适配器是如何工作的呢？

控件适配器是些继承了System.Web.UI.Adapters.ControlAdapter基类的类，实现了绘制/渲染(rendering)方法，这些方法允许控件适配器完全定制一个单独的控件显示的标识。当你使用CSS友好网站项目模板创建一个新的网站项目时，11个预建的与CSS友好的控件适配器的源码就被自动地加到你的app_code目录中了：

你可以原本不动地使用这些控件适配器类，不需要改变编码，就能得到与CSS友好的输出，或者你可以对它们进行细调，假如你需要对显示输出做任意定制的话。

控件适配器是通过在当前项目的应用程序根目录的直接子目录，/App_Browsers里，添加一个.browser文件，来与 ASP.NET注册的。.browser 文件里包含了如下所示的简单的标识，允许你指定哪个控件适配器应该用在哪个控件上：

<!-- Begin Code -->

< browsers >
< browser refID ="Default">
< controlAdapters >
< adapter controlType ="System.Web.UI.WebControls.Menu" adapterType ="CSSFriendly.MenuAdapter" />
< adapter controlType ="System.Web.UI.WebControls.TreeView" adapterType ="CSSFriendly.TreeViewAdapter" />
< adapter controlType ="System.Web.UI.WebControls.DetailsView" adapterType ="CSSFriendly.DetailsViewAdapter" />
< adapter controlType ="System.Web.UI.WebControls.FormView" adapterType ="CSSFriendly.FormViewAdapter" />
< adapter controlType ="System.Web.UI.WebControls.DataList" adapterType ="CSSFriendly.DataListAdapter" />
< adapter controlType ="System.Web.UI.WebControls.GridView" adapterType ="CSSFriendly.GridViewAdapter" />
< adapter controlType ="System.Web.UI.WebControls.ChangePassword" adapterType ="CSSFriendly.ChangePasswordAdapter" />
< adapter controlType ="System.Web.UI.WebControls.Login" adapterType ="CSSFriendly.LoginAdapter" />
< adapter controlType ="System.Web.UI.WebControls.LoginStatus" adapterType ="CSSFriendly.LoginStatusAdapter" />
< adapter controlType ="System.Web.UI.WebControls.CreateUserWizard" adapterType ="CSSFriendly.CreateUserWizardAdapter" />
< adapter controlType ="System.Web.UI.WebControls.PasswordRecovery" adapterType ="CSSFriendly.PasswordRecoveryAdapter" />
</ controlAdapters >
</ browser >
</ browsers >

<!-- End Code -->

如果需要，你可以针对不同的浏览器定制不同的控件适配器，或者定义这些控件适配器为“默认(Default)”，这样就会对访问你的应用的所有的浏览器都默认应用这些适配器。

做完这些配置后，就算搞定了，之后，你就可以使用标准的CSS样式表来定制所有的样式信息了。

如有疑问或要汇报任何bug或问题的话，请访问http://forums.asp.net网站的CSS Control Adapters 论坛。上面的CSS控件适配器在VS 2005网站项目模型(Web Site Project Model)和VS 2005 Web应用项目模型(Web Application Project Model)两者中都可使用。而且，CSS控件适配器有VB和C#两个版本你可以用。

在这里我要提起Russ和Heidi，为他们在创建CSS 控件适配器和样本例子方面的出色工作表示特别的感谢！

谢谢，

Scott

标签：ASP.NET, .NET, Tips and Tricks

(思归译)

发表于 2006年9月10日 3:20

<link href="http://blog.joycode.com/scottgu/Services/Pingback.aspx" rel="pingback"> <!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="http://blog.joycode.com/scottgu/archive/2006/09/10/82964.aspx" dc:identifier="http://blog.joycode.com/scottgu/archive/2006/09/10/82964.aspx" dc:title="CSS 控件适配器工具包新版发布" trackback:ping="http://blog.joycode.com/scottgu/services/trackbacks/82964.aspx" /> </rdf:RDF> -->