Version 2007.2 of Web.UI brings with it two new controls: Editor and SpellCheck. In this post, I will provide a brief overview of SpellCheck, describing its abilities and the design philosophy behind it. SpellCheck, as its name suggests, is an ASP.NET control used for facilitating spellchecking on a web page. SpellCheck can be used to check the spelling of any textual content on a page, whether in an input field, text area, or any other element. It uses AJAX techniques to communicate efficiently with its server-side logic, and exposes a rich and versatile client-side API for controlling the checking process. Dialog-based Checking The most common way that people interface with spelling checkers is via a pop-up dialog. The dialog guides the user through the checking process, going through the errors in order and bringing up suggestions for each. When the process is done, the dialog closes. For an example of this UI, check out our dialog-based SpellCheck demo . SpellCheck’s client-side API includes an array of methods and events which were designed to facilitate such interaction, while imposing absolutely no restrictions on the nature of the dialog or its layout or styling. Methods like dialogBegin, dialogChange and dialogIgnoreAll were designed to be invoked by buttons commonly found on spellchecking dialogs. Generic methods like getSuggestions are also used to move the process along. In our own example, we use this API to interface with SpellCheck using our own Dialog control. However, the same can be accomplished using any control or mechanism which invokes the dialog-related public methods. In-place Highlighting with Context Menus When the target being checked is a DOM element other than a form-field, checking can be done using in-place highlighting. This means that SpellCheck will actually intervene in the markup being targeted and highlight the words that are spelled incorrectly. When the user clicks on such a word, a context menu is displayed, offering a list of suggested words to replace the mistake. Since the context menu (a ComponentArt Menu, naturally) is populated on the client as needed, it can be styled in any way in its server-side definition, and simply pointed to using SpellCheck’s ContextMenuId property. This mechanism is often seen as more convenient than a dialog-based one, and requires no external code to put together. You can see an example of this UI in our context-based SpellCheck demo . Client-side API The above examples are only the most common ways the spell checking process is organized. Since SpellCheck exposes all the key components of the process via its client-side API, it should support any novel interface that is envisioned. With methods like check, getSuggestions, change, ignore and addToDictionary, there are very few limitations to the kind of experience that can be designed around them. Up next: more on SpellCheck's client-side API. Stay tuned. Share this post: email it! | bookmark it! | digg it! | reddit!
