The blog of dlaa.me

Posts tagged "AJAX Control Toolkit"

Toolkit patching made easy [Announcing the AJAX Control Toolkit Patch Utility]

We've just made available the AJAX Control Toolkit Patch Utility, a simple ClickOnce application that makes it easy for *anyone* to contribute fixes to the AJAX Control Toolkit!

Background: We have a very active user community that's using the Toolkit in lots of ways we never imagined. Sometimes people come up with better ways of doing things and occasionally they bump into a new issue we didn't know about. When questions show up on the support forum, it's great to see someone follow up with a change to the Toolkit that resolves the issue. These community contributions are fantastic - we always try to add a pointer to the associated work item for the issue so we won't forget about it. However, there is a fair amount of effort involved in merging such fixes into the Development branch of the source code and that effort can delay the incorporation of proposed changes. The new Patch Utility is designed to streamline the process so it will be easier for people to contribute fixes and easier for the Toolkit team to incorporate them into the next release of the Toolkit. By making the process simpler and enabling the inclusion of more community fixes, everyone benefits by having a better Toolkit that they're less likely to have trouble with!

How patching works: The AJAX Control Toolkit Patch Utility Guide contains all the details - along with screenshots that walk through everything. The process itself is pretty simple. Once a Toolkit user identifies a problem, he/she runs the Patch Utility in "Create a Patch" mode which walks through the steps of downloading the latest Development branch of source code for the Toolkit. The user makes whatever changes to the Toolkit are necessary to fix the problem and alters the automated test cases to verify the new behavior. Then the user runs the Patch Utility again in "Prepare Patch for Submission" mode which collects the changes that were made, gives the user an opportunity to review them in a file differencing tool, and generates a compact ZIP archive containing the user's patch. The user attaches the ZIP file to the existing work item that corresponds to the issue he/she fixed and that's it!

What happens next: On the back end, we have a process running which periodically looks at outstanding work items for new patches. When a new patch is found, a set of "check-in-able" changes is automatically created for that patch. What that means for the Toolkit team is that it's easy for any of us to review the patch, merge it with the very latest version of code in the Development branch, test it on our machines, and check the patch in for inclusion with the next Toolkit release!

What changes make good patches: Bug fixes and minor enhancements to existing code make great patches because the overall amount of change is small and the effect of the change is fairly self-contained and easily testable. On the other hand, broad changes like the addition of an entirely new control or the refactoring of a significant chunk of code would not make good patches due to the widespread effects of such changes (we have a different process in place for such things; email us if you want to add a new control).

The Patch Utility enables anyone to make fixes to the Toolkit - if you're a Toolkit user and you've got a fix floating around on your machine, please use the AJAX Control Toolkit Patch Utility to submit it! And if you have any suggestions for things we can improve please send your feedback to us!

AutoComplete++ [How to: Create a multi-word auto-complete text box]

By default, the AJAX Control Toolkit's AutoComplete extender doesn't have a notion of "words" and will try to auto-complete whatever text is currently in the text box, treating what's there as a single "word". One request that has come up a few times was for the ability to auto-complete multiple words individually. According to the comments of that work item, it looks like someone's made a set of proposed changes to do just that! It's great to have such an involved user community!! (Please note: The work item comments suggest those changes don't work in all browsers.)

One thing I'd been meaning to do was write a quick sample of how to get reasonably good multiple-word auto-complete without making any modifications to the released AutoComplete extender. In other words, you can use the latest official Toolkit release (10301 in this case) and get some nice multi-word completion today. The key observation here is that the Web Service used to provide the list of candidate words has all the information it needs to do multi-word completion as well:

Multi-word auto-complete example

The complete code for the sample page is included below for anyone to look at or modify for their purposes. A few notes about the code:

  • The example was written to be simple, not efficient. The goal is to demonstrate the idea as plainly as possible, so there's no focus on performance.
  • The code works by auto-completing the last "word" of input and then populates the list of candidates with the resulting words and the preceding text.
  • All comparisons are case-insensitive so the user can type however they want.
  • In a real-world application, the list of candidate words would probably be retrieved from a helper function, a database, etc..

Here's the complete ASPX file:

<%@ Page Language="C#" %>

<%
@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>

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

<
script runat="server">
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.
ScriptMethod]
    
public static string[] GetCompletionList(string prefixText, int count)
    {
        
// Fetch and sort the list of available completion words
        string[] allWords = "AJAX Control Toolkit AutoComplete auto automatic".Split(' ');
        
Array.Sort(allWords);

        
// Split input into completed words and prefix characters for the current word
        // Match on the current word and return candidate list including completed words
        // Ex: "he" -> "" and "he..."
        // Ex: "hello there th" -> "hello there " and "th..."
        string completedWords = "";
        
string prefixChars = prefixText;
        
int lastSpace = prefixText.LastIndexOf(' ');
        
if (-1 != lastSpace)
        {
            completedWords = prefixText.Substring(0, lastSpace + 1);
            prefixChars = prefixText.Substring(lastSpace + 1);
        }

        
// Create the completion list by searching for prefix matches
        System.Collections.Generic.List<string> completionList =
            
new System.Collections.Generic.List<string>();
        
foreach (string word in allWords)
        {
            
if (word.ToUpperInvariant().StartsWith(prefixChars.ToUpperInvariant()))
            {
                completionList.Add(
string.Concat(completedWords, word));
            }
        }

        
// Return the completion list
        return completionList.ToArray();
    }
</script>

<
html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title>Multi-Word Auto-Complete</title>
</
head>
<
body>
    <form id="form1" runat="server" onsubmit="return false;">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:TextBox ID="TextBox1" runat="server" Width="300" />
        <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
            TargetControlID="TextBox1" ServiceMethod="GetCompletionList"
            MinimumPrefixLength="0" />
    </form>
</
body>
</
html>

Enjoy!

Toolkit talk two-fer! [Spoke at the ASP.NET Connections conference]

Earlier today I presented two talks about the AJAX Control Toolkit at the ASP.NET Connections conference in Orlando, Florida: AMS305: ASP.NET AJAX Control Toolkit: See How to Take Advantage of the ASP.NET AJAX Control Toolkit and AMS304: ASP.NET AJAX Control Toolkit Unleashed: Creating Rich Client-Side Controls and Components.

The content for these talks was based on stuff I've previously presented at TechReady4 in February and ASP.NET Connections in November of last year. However, this time around I was able to go into quite a bit more detail because I had over twice as much time to speak and do demos. The introductory AMS305 talk took the ImageFlix sample I've used before and expanded on it to demonstrate the Toolkit's new support for ASP.NET Skins/Themes and advanced animations followed by a quick walkthrough of what to do when things don't work like you'd expect (demonstrated here by adding a DropShadow to the popup panel). The more advanced AMS304 talk used an updated FontSize extender demonstration like the one that was demonstrated at the November ASP.NET Connections and included an overview of working with the Toolkit project, highlighting the automated testing framework and new localization support. Overall, there are about 15 completely new slides with fresh content, covering topics such as localization, automated testing, and more.

I've attached the slide decks and the demo content for both talks to this post so that anyone who's interested can have a look at the slides or play around with the demos.

I hope those of you who attended today enjoyed the talk and learned more about the Toolkit - it was great to have an opportunity to spend time with you!

[AspNetConnections200703-AMS305-AMS304-AjaxControlToolkit.zip]

Lost (Sk)in Translation [AJAX Control Toolkit update!]

A short while ago we made available the 10301 release of the AJAX Control Toolkit. With this release, we managed to add some great core functionality, a couple of new controls, and a bunch of bug fixes for popular issues (as identified by our user community in the support forum and online issue tracker).

The 10301 release includes two new controls:

  • ListSearch (by contributor Damian Mehers) - A handy enhancement to ListBox/DropDownList controls that allows the user to select items by typing the first few characters
  • SlideShow (by our own Kirti) - A visually pleasing slide show of automatically sized images and captions with optional automatic looping or manual control

We also managed to add three pieces of core functionality that users have been asking for:

  • Localization support - The Toolkit now has an infrastructure for localizing the text in JavaScript files using the standard ASP.NET/AJAX support for resource files. There are placeholder files for the following 14 languages: Arabic, German, English, Spanish, French, Hebrew, Hindi, Italian, Japanese, Korean, Portuguese, Russian, Chinese (Simplified), and Chinese (Traditional). Complete localization of all strings hasn't been done yet, but our most popular request by far is for the string "Today:" at the bottom of the Calendar's popup - and that has already been localized to all of the above languages. Just set your system/browser's language settings to one of the supported languages and visit the Calendar sample page for a demonstration.
  • JavaScript comment/whitespace stripping - People are always interested in keeping the download size of their pages as low as possible, and the Toolkit goes the extra mile to help. When compiled in "Release" mode (as the official releases on CodePlex always are), all of the JavaScript files in the Toolkit automatically have all comments and unnecessary whitespace removed. Ted, the author of this functionality, was careful to adhere to the ECMA-262 ECMAScript Language Specification, so the modifications are both safe and effective.
  • ASP.NET Theme/Skin support - Central control is usually best, so it's nice to be able to use ASP.NET's theme/skin support to specify properties for controls across an entire web site in one central location. Toolkit controls didn't used to be skinnable (i.e., support the SkinID property) but now they are, so go ahead and start skinning your site. In fact, we used this new ability to style the CollapsiblePanels that we use for descriptions/properties/known issues on every sample page.

And, with the help of our contributors, we fixed a bunch of bugs along the way...

We hope you like the new release!!

Recall that you can sample any of the controls right now (no install required). You can also browse the project web site, download the latest Toolkit, and start creating your own controls and/or contributing to the project!

If you have any feedback, please share it with us on the support forum (or email me)!

Toolkit talk, take two [Spoke at the TechReady4 conference]

Earlier today I presented the DEV304: ASP.NET AJAX Control Toolkit Unleashed: Creating Rich Client-Side Controls and Components session at Microsoft's TechReady4 conference here in Seattle. TechReady is a Microsoft-only conference that non-Redmond-based employees attend to get an opportunity to meet with product team members (typically Redmond-based) and catch up on all the new technology each year. Most of the session content is Microsoft-only, but because the presentation I gave today had no private information, I'm posting the (sanitized) slide deck and demos here for everyone to use (note: the attachment is at the bottom of this post).

If you saw the content for my ASP.NET Connections talk a few months ago, the slide content for today's TechReady4 talk was very similar. The first demo was identical and the second (new) demo was just a quick overview of the sample web site that comes with the Toolkit. However, the third demo was completely new and demonstrated how to encapsulate existing script into a new Toolkit control. For demonstration purposes, I took a simple web page with a WPF/E (February CTP) control (the use of which requires two <script>/src tags and a <script>/code block) and showed how to wrap that all into a single "one-liner" Toolkit component which can be more easily used/maintained/added to a page. Those of you who are paying close attention will realize that I took my inspiration from a similar effort by my manager, Shawn Burke - though I wrote all my demo code from scratch so I'd be more familiar with it. :) The final result is a pretty handy way of handling WPF/E controls and folks are welcome to use it however they want!

I hope those of you who attended today enjoyed the talk and learned more about the Toolkit - it was great to have an opportunity to meet with you!

PS - We're always looking for more contributors and additional control ideas, so please let me know if you want to contribute!

[TechReady4-DEV304-AjaxControlToolkit.zip]

Safely avoiding the "access denied" dialog [How to: Work around the access denied cross-domain IFRAME issue in the AJAX Control Toolkit]

Bertrand recently blogged "How to work around the access denied cross-domain frame issue in ASP.NET Ajax 1.0". Unfortunately, a similar issue exists in the AJAX Control Toolkit - with a similar workaround that's detailed in this post.

Background: The AJAX Control Toolkit attempts to use as much of the ASP.NET AJAX infrastructure as possible in order to keep things simple and benefit from the established architecture of ASP.NET AJAX. However, the ASP.NET AJAX 1.0 implementation of Sys.UI.getLocation was not accurate for IFRAME content with certain page layouts in IE6 - one of which was used by the Toolkit test harness. We couldn't have our automated tests failing - and the ASP.NET AJAX team wasn't able to include a fix in their 1.0 release - so we needed to address this somehow. Since we had developed our own getLocation implementation that was accurate in IE6, we decided to route all Toolkit calls to getLocation through our own wrapper function - which used our improved implementation for IE6 and called through to the ASP.NET AJAX implementation for everything else. This works pretty well - except that our version suffers from the same cross-domain permissions issue that the ASP.NET AJAX version suffers from (please refer to Bertrand's post for more details).

Fix: We've just checked in a fix to the Toolkit's Development branch to add the same try/catch wrapper that Bertrand suggests; this fix will be included with the next Toolkit release (in about a month). In the meantime, people who want the fix sooner are encouraged to apply the changes themselves. To do so, open AjaxControlToolkit.sln in Visual Studio, open the file AjaxControlToolkit\Common\Common.js, find the getLocation function, add the yellow, italic block below, and build the project to get a new AjaxControlToolkit.dll with the fix. The complete function definition with the fix applied is included here to make this as easy as possible:

getLocation : function(element) {
    
/// <summary>Gets the coordinates of a DOM element.</summary>
    /// <param name="element" domElement="true"/>
    /// <returns type="Sys.UI.Point">
    ///   A Point object with two fields, x and y, which contain the pixel coordinates of the element.
    /// </returns>

    // workaround for an issue in getLocation where it will compute the location of the document element.
    // this will return an offset if scrolled.
    //
    if (element === document.documentElement) {
        
return new Sys.UI.Point(0,0);
    }

    
// Workaround for IE6 bug in getLocation (also required patching getBounds - remove that fix when this is removed)
    if (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7) {
        
if (element.window === element || element.nodeType === 9 || !element.getClientRects || !element.getBoundingClientRect) return new Sys.UI.Point(0,0);

        
// Get the first bounding rectangle in screen coordinates
        var screenRects = element.getClientRects();
        
if (!screenRects || !screenRects.length) {
            
return new Sys.UI.Point(0,0);
        }
        
var first = screenRects[0];

        
// Delta between client coords and screen coords
        var dLeft = 0;
        
var dTop = 0;

        var inFrame = false;
        
try {
            inFrame = element.ownerDocument.parentWindow.frameElement;
        }
catch(ex) {
            
// If accessing the frameElement fails, a frame is probably in a different
            // domain than its parent - and we still want to do the calculation below
            inFrame = true;
        }

        
// If we're in a frame, get client coordinates too so we can compute the delta
        if (inFrame) {
            // Get the bounding rectangle in client coords
            var clientRect = element.getBoundingClientRect();
            
if (!clientRect) {
                
return new Sys.UI.Point(0,0);
            }

            
// Find the minima in screen coords
            var minLeft = first.left;
            
var minTop = first.top;
            
for (var i = 1; i < screenRects.length; i++) {
                
var r = screenRects[i];
                
if (r.left < minLeft) {
                    minLeft = r.left;
                }
                
if (r.top < minTop) {
                    minTop = r.top;
                }
            }

            
// Compute the delta between screen and client coords
            dLeft = minLeft - clientRect.left;
            dTop = minTop - clientRect.top;
        }

        
// Subtract 2px, the border of the viewport (It can be changed in IE6 by applying a border style to the HTML element,
        // but this is not supported by ASP.NET AJAX, and it cannot be changed in IE7.), and also subtract the delta between
        // screen coords and client coords
        var ownerDocument = element.document.documentElement;
        
return new Sys.UI.Point(first.left - 2 - dLeft + ownerDocument.scrollLeft, first.top - 2 - dTop + ownerDocument.scrollTop);
    }

    
return Sys.UI.DomElement.getLocation(element);
},

Sorry for the trouble - we hope this patch helps any people who might be running into this issue!

Updated at 6pm: Modified the getLocation implementation to return the correct value in all cases.

A quick update to address some top customer issues [AJAX Control Toolkit update!]

Just a few moments ago we made available the 10201 release of the AJAX Control Toolkit to address some of the most significant issues reported since the 10123 release last week. We chose these issues based on feedback from our users in our support forum and online issue tracker and tried to prioritize issues with widespread benefits while minimizing the risks of breaking anything.

In particular, we:

  • Fixed problems that occurred when using the new AutoComplete or Tabs controls inside an UpdatePanel
  • Improved the localization behavior of the Calendar so that it works better in other countries/time zones
  • Simplified and improved the implementation of the new "draggable popup" feature of ModalPopup
  • Addressed a TextBoxWatermark focus issue that was inconveniencing users

Recall that you can sample any of the controls right now (no install required). You can also browse the project web site, download the latest Toolkit, and start creating your own controls and/or contributing to the project!

If you have any feedback, please share it with us on the support forum (or email me)!

ASP.NET AJAX 1.0 is on the loose! [AJAX Control Toolkit update!]

Earlier today we made available the 10123 release of the AJAX Control Toolkit. We did this in parallel with the official release of ASP.NET AJAX v1.0 and added a bunch of good stuff along the way.

As I note in the release teaser, "This release of the AJAX Control Toolkit includes four new controls (AutoComplete (formerly in the Futures CTP), Calendar, MaskedEdit, and Tabs), fixes for over 75 issues reported by the community, and new functionality for ModalPopup, RoundedCorners, and the ExtenderBase framework." Additionally, we spent time making sure that all 32 Toolkit controls work well on the latest version of the Opera browser. Accepting that every browser has its little quirks, we now offer the same level of "pretty much everything works" support for Internet Explorer 6, Internet Explorer 7, Firefox 1.5, Firefox 2.0, Safari 2.0.4, and Opera 9.10. Those are the top six browsers on the Internet, so there's an very good chance that visitors to a Toolkit-enabled site will be running a supported browser.

Of note, three of the four new controls for this release were submitted by contributors! Ron Buckton wrote both Calendar and Tabs while Fernando Cerqueira wrote MaskedEdit. These are some very cool new controls and we're fortunate to have such great contributors helping out with the Toolkit! As a teaser, I created two little "movies" to show off Calendar and MaskedEdit in action - as well as our Opera support. :)

Calendar Demonstration

MaskedEdit Demonstration

Recall that you can sample any of the controls right now (no install required). You can also browse the project web site, download the latest Toolkit, and start creating your own controls and/or contributing to the project!

If you have any feedback, please share it with us on the support forum (or email me)!

Runnin' on the RC [AJAX Control Toolkit update!]

A few minutes ago we made available the 61214 release of the AJAX Control Toolkit. We did this in parallel with the release of the ASP.NET AJAX v1.0 RC in order to accommodate some breaking changes introduced in that release. Though we did not make any functional changes to the Toolkit in this release, we did take the opportunity to fix a handful of bugs that we'd found.

Recall that you can sample any of the controls right now (no install required). Then you can browse the project web site, download the latest Toolkit, and start creating your own controls and/or contributing to the project!

If you have any feedback, please share it with us on the support forum (or email me)!

Dynamic content made easy *remix* [How to: Use the new dynamic population support for Toolkit controls]

I previously blogged an update to my sample demonstrating how to use the AJAX Control Toolkit's dynamic population functionality with a data-bound ModalPopup. Someone asked privately what the C# page method would look like in VB, so I figured I'd post a small follow-up to show the straightforward translation to VB.

Here's the original C# code for reference:

<script runat="server">
[System.Web.Services.WebMethod]
[Microsoft.Web.Script.Services.
ScriptMethod]
public static string GetContent(string contextKey)
{
    
// Create a random color
    string color = (new Random()).Next(0xffffff).ToString("x6");
    
// Use the style specified by the page author
    string style = contextKey;
    
// Display the current time
    string time = DateTime.Now.ToLongTimeString();
    
// Compose the content to return
    return "<span style='color:#" + color + "; " + style + "'>" + time + "</span> ";
}
</script>

Translating that to VB is largely a matter of changing the syntactic elements from their C# versions to their VB versions. So "[" becomes "<", "}" becomes "End Function", and so on... Two things that tripped me up because I don't regularly use VB were the translation of the hexadecimal prefix "0x" to "&H" and the translation of "static" to "Shared" - but a quick look at the online documentation for VB sorted me out on both counts. After a short while, I ended up with this:

<script runat="server">
    <System.Web.Services.WebMethod()> _
    <Microsoft.Web.Script.Services.ScriptMethod()> _
    
Public Shared Function GetContent(ByVal contextKey As String) As String
        ' Create a random color
        Dim color As String = (New Random()).Next(&HFFFFFF).ToString("x6")
        
' Use the style specified by the page author
        Dim style As String = contextKey
        
' Display the current time
        Dim time As String = DateTime.Now.ToLongTimeString()
        
' Compose the content to return
        Return "<span style='color:#" + color + "; " + style + "'>" + time + "</span> "
    End Function
</
script>

I completed the translation by changing the sample page's Page/Language property from "C#" to "VB", ran the sample page, and verified that it worked just like it did before. Of course! :)