.NET Building Blocks: Build a RichTextBox-Based Syntax-Highlighting Editor and IDE

ow difficult do you think it would be to create a SQL tool like Query Analyzer or SqlServer Management Studio? How about a programming and execution framework for VBScript? Or how about a dual code-and-WYSIWYG editor for HTML—or a development IDE for creating and testing XSLT transformations? And why would you bother programming your own tool when there are many fine commercial products in each of these categories?

It turns out there are several reasons. For example, you may want to incorporate such a tool as an integral component of your product. Or perhaps you just have a favorite tool that you find mostly adequate, but that you'd prefer to be able to customize to your own specifications. In this article, I'll show you tools and techniques that will facilitate building such applications.

It's important to realize that all the tools I've mentioned so far use a common model—the classic input-process-output model illustrated in Figure 1.

However, this high-level system description is applicable to a much broader range of applications than the ones already listed, and—indeed—in many systems besides software. Figure 2 shows a more refined model that fits the types of tools under consideration more closely. That is, all these tools fundamentally provide an interactive editor control for input and a textual, tabular, or graphical control for output. I submit that any of the four tools I mentioned could essentially make use of the same type of interactive editor control. Consider Visual Studio's own built-in editor, which performs keyword highlighting, automatic block indentation, word completion (Intellisense), and much more, for a variety of languages. I will give you ideas on how to start creating your own such editor here. I am not going to cover everything that the Visual Studio editor can do, but I shall provide a complete component solution for keyword highlighting for an arbitrary language of your choice, block commenting and indenting, external compilation and execution, and other useful features. Then, I'll walk you through the process of incorporating that component into an elementary integrated development environment (IDE) using two different application types: a SQL query tool and a VBScript execution framework.

Figure 1. Classical Process Model: The classic high-level model accepts input, performs some processing on that input, and delivers some output.

Figure 2: IDE-Tailored Model. Building an IDE requires an interactive editor for input, a processing engine (which may be internal or external), and a way to render the resulting output.

Application One: An IDE for SqlServer
The code download that accompanies this article includes source code for a demo SyntaxHilightAndEditDemo project that you'll build during this article. The project uses an external library. The necessary library components are already included with the demo project but the source for those components is not; however, you can download the source code for the library components from my open source web site.

One of the library components is a control called a SyntaxHilightTextBox, based on a RichTextBox. The SyntaxHilightTextbox is my core user editor control. You'll see how to use it in the first walkthrough.

To begin, create a new Visual Studio project using the Windows Application template. You'll need to add some controls to your toolbox. Right click on the toolbox in the visual designer and select "Choose Items…" That brings up the dialog shown in Figure 3. The checked items are already added to your toolbox.

The component you're looking for won't appear in the list, though, so click the Browse button, and then navigate to the CleanCodeControls.dll file ( see Figure 4) that you'll find in the downloadable code accompanying this article. Select the file, and then click the Open button.

Figure 3. Choosing Toolbox Items: The context menu for the toolbox allows you to customize what is displayed in your toolbox.

Figure 4. Adding Toolbox Items: Selecting Browse from the toolbox items dialog lets you access libraries of your choice—in this case, the CleanCodeControls library.

When you click the Open button, Visual Studio adds the controls from the CleanCodeControls library to the list of available items and automatically checks them (see Figure 5).

Figure 5. New Controls: After selecting the library file, Visual Studio adds controls in the library to the list and checks them.

Figure 6. CleanCodeControls Added to the Toolbox: The new controls appear at the bottom of the toolbar on the left. The enlargement in the middle of the screen shows the items clearly.

Click OK to close the dialog and update your toolbox. You'll find the CleanCode controls at the bottom of the toolbox, including two subclasses of the SyntaxHilightTextBox, one for SqlServer and one for Oracle (see Figure 6).