AJAX Control Toolkit 5月13日更新介绍及分析

前言

5月13号,AJAX Control Toolkit 发布了新的release,其中包含了三个新的控件:HTMLEditor 、ComboBox 和 ColorPicker 作用和用法如下:

AJAX Control Toolkit Release Notes - May 2009 Release
Version 3.0.30512


New controls

此版本包括了一下三个重要的新控件:

  • HTMLEditor

    就是我们日常所用的所见即所得HTML编辑控件(HTML在线编辑器29个). 而这个控件则是Obout出品的,目前开放源码,并入AJAX Control Toolkit. 

  • ComboBox

    顾名思义,尽管样子做的比较粗糙,但ASP.NET总算有了官方支持的复合式下拉列表控件。

  • ColorPicker

    类似于CalendarExtender,这个空间也作为Extender附着在TextBox上,以弹出DIV的形式,为我们提供经常用到的客户端颜色选取功能。

其中,ComboBox 和 ColorPicker 与原有的AJAX Extender差不多,其源文件也是继承自ExtenderControlBase的一个c#类以及相应的Behavior.js。

 

新控件的使用

使用方式分别如下:

   <asp:TextBox runat="server" ID="Text" />
    
<ajaxToolkit:ColorPickerExtender runat="Server" BehaviorID="ColorPicker" TargetControlID="Text" />



    
<ajaxToolkit:ComboBox ID="ComboBox1" runat="server" DropDownStyle="Simple">
        
<asp:ListItem>&amp;</asp:ListItem>
        
<asp:ListItem>a</asp:ListItem>
        
<asp:ListItem>A</asp:ListItem>
        
<asp:ListItem>AA</asp:ListItem>
        
<asp:ListItem>AaA</asp:ListItem>
        
<asp:ListItem>b</asp:ListItem>
        
<asp:ListItem>bc</asp:ListItem>
        
<asp:ListItem>bcd</asp:ListItem>
        
<asp:ListItem>bd</asp:ListItem>
        
<asp:ListItem>c</asp:ListItem>
        
<asp:ListItem>ee fff</asp:ListItem>
    
</ajaxToolkit:ComboBox>

 

而HTMLEditor则是一个相对独立的控件,支持多种配置,比较复杂,一般配置的使用方式如下:

<HTMLEditor:Editor runat="server" Id="editor" Height="300px" AutoFocus="true" Width="100%" />

 

也可以根据需要配置成其它模式:

<customEditors:Lite runat="server" id="editor" Height="400px" Width="500px" />

<customEditors:LiteNoBottom runat="server" id="editor" Height="400px" Width="500px" />

 

也可以从客户端添加,示例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Displaying HTMLEditor in an htm page</title>
    
<script src="Script/MicrosoftAjax.debug.js" type="text/javascript"></script>
    
<script src="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>
    
<script src="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>
    
<script src="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.ClientSideEditor.js" type="text/javascript"></script>
    
<script src="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" type="text/javascript"></script>
    
<link href="AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/Editor.css" rel="stylesheet" type="text/css" />
    
<style type="text/css">
           a 
{
                   font
:11px Verdana;
                   color
:#315686;
                   text-decoration
:underline;
           
}
           a:hover 
{
                   color
:crimson;
           
}
    
</style>
</head>
<body>
    
<href="../HTMLEditor.aspx">< Back to <strong>HTMLEditor</strong> page</a>
    
<br /><br />
    
<form action="ToolkitTest.htm">
         
<textarea id="editor" style="width:100%; height:600px;"><span style="font-weight: bold;">Hello world</span> </textarea>
    
</form>
    
<script type="text/javascript">
        
//<![CDATA[
        Sys.Application.add_init(function() {
            $create(AjaxControlToolkit.HTMLEditor.ClientSideEditor,
                {
                  
//content:        "Another <span style=\"font-weight: bold;\">Hello world</span> ",
                  //width:          "100%",
                  //height:         "700px",
                  imagesPath:     "AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Images/",
                  popupCss:       
"AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/AttachedTemplatePopup.css",
                  designPanelCss: 
"AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/DesignPanel.css",
                  documentCss:    
"AjaxControlToolkit/3.0.20820.16598/3.0.20820.0/AjaxControlToolkit.HTMLEditor.CssAndImages/Css/Document.css"
                },
                
nullnull, $get("editor"));
        });
        Sys.Application.initialize();
        
//]]>
    </script>
</body>
</html>

 

与多数HTML编辑控件类似,读写的两个方法也是:

$find("<%= editor1.ClientID %>").get_content();

$find(
"<%= editor1.ClientID %>").set_content("hello");

 

 

重大更新?

如果只是这些,也算不上是“重大更新”,真正令AJAX Control Toolkit 使用者们感到震惊的是:此次发布的AJAX Control Toolkit 是release版,而非以往的debug版!

也就是说所有的js源代码都经过压缩,并且使用了简单的变量名混淆!打开js一看只有乱糟糟的一行!

这有可能是AJAX Control Toolkit 结束开源的一个征兆(之前2009 .net技术大会上曾有微软内部消息说AJAX Control Toolkit 要并入ASP.NET 4.0,结束开源

 

结束语:

作为技术支持人员,我们知道AJAX Control Toolkit还遗留着众多的BUG,很多应用还需要对源代码做进一步的定制和修改。

在国内,AJAX Control Toolkit并没有得到广泛的应用,多归咎于其效率较低(可参考ASP.NET AJAX Advance Tips & Tricks (4) ASP.NET AJAX Performance Improvement ),而微软此举会把AJAX Control Toolkit引向何途呢?让我们拭目以待...

 

=================================================================

勘误!勘误!

很抱歉,其实这次发布的AJAX Control Toolkit包含了debug版的源码!不过没有包含在VS解决方案里而已:

太囧了。。。o(╯□╰)o

 

 

posted @ 2009-05-18 11:46 LanceZhang 阅读(...) 评论(...) 编辑 收藏