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事件处理方法(或者，你也可以使用导航直接转到一个特定的网页去)：

< 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事件的编码是象这样的：

     Public Sub  Menu_OnClick( ByVal  sender  As Object ,  ByVal  e  As  MenuEventArgs)
        MessageLabel.Text  =  "You selected "  & e.Item.Text &  "."
         e.Item.Selected  = True
    End Sub

在运行时，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 文件里包含了如下所示的简单的标识，允许你指定哪个控件适配器应该用在哪个控件上：

< 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 >

如果需要，你可以针对不同的浏览器定制不同的控件适配器，或者定义这些控件适配器为“默认(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

href="http://blog.joycode.com/scottgu/Services/Pingback.aspx" rel="pingback" />