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

Adding the Controls
You will learn more about the details of the control a bit later. For now, drag a SqlServerSyntaxHilightTextBox onto your form, add a DataGridView for showing SQL output, and a standard Button control as well, to complete the basic form (see Figure 7). The demo project also includes a SplitContainer so users can adjust the relative sizes of the two panes at runtime.

Figure 7. Completed Form: The completed form includes a SqlServerSyntaxHilightTextBox at the top and a DataGridView at the bottom, plus a button to connect the input to the output.

Figure 8. SqlServerSyntaxHilightTextBox Properties: The "Miscellaneous" category of the SqlServerSyntaxHilightTextBox contains all the properties specific to this control. All the other properties are inherited from the base RichTextBox class.

Customize Input Pane Properties
Select the SqlServerSyntaxHilightTextBox and then scroll through the Properties pane.

Tip: Select the sort-by-category button on the Properties pane (the leftmost button) rather than the sort-alphabetically button (the second button). That way, you will see all the custom properties for this control in one miscellaneous category (see Figure 8).

If the AutoHilight property is set to False, change it to True. That property controls whether the control performs syntax highlighting automatically (True) or manually (False).

Generate a Connection String for Your Database
In Visual Studio's Data Sources pane, add a connection to the database of your choice. I include a small database with this demo application (called simpleDB) for your convenience. Adding the connection creates a DataSet in the Data Sources pane (see Figure 9).

Figure 9. Add Database Connection: Adding a connection to a data source creates a DataSet in the Data Sources pane.

Figure 10. Settings File and Connection String: Adding a connection to a data source also adds a Settings file (if you did not have one already) and inserts a connection string for your newly created data source.

Adding the connection also generates a new settings file and inserts a specific connection setting (see Figure 10). The database is then accessible from code.

Connecting the Input to the Output
Now that you have a connection string accessible from your code, you simply need to connect the input to the output. Here's the entire program:

   namespace SyntaxHilightAndEditDemo
   {
      public partial class Form1 : Form
      {
         public Form1()
         {
            InitializeComponent();
         }
   
         private void executeButton_Click(object sender, EventArgs e)
         {
            DataTable dataTable = new DataTable();
            SqlDataAdapter tableAdapter = new SqlDataAdapter(
               hilightTextBox.SelectedOrAllText,
               Properties.Settings.Default.simpleDBConnectionString);
            try { tableAdapter.Fill(dataTable); }
            catch (SqlException ex) { MessageBox.Show(
               ex.Server+": "+ex.Message); }
            dataGridView1.DataSource = dataTable;
         }
      }
   }

Figure 11. Running the Sample Program: A trial run of the finished program shows that the application correctly highlights both SQL keywords and comments.

Build and execute the program. Enter a simple query such as that shown in Figure 11. Notice that as you type, the control highlights the SQL keywords in blue (unless you changed the KeywordColor property in the designer). Notice also the comment turns green as soon as you close it. Press the Execute button and you'll see the results appear in the bottom pane.

My recent article "Exploring Secrets of the .NET DataGridView" examines the code in this application's Execute event handler in great detail, plus quite a bit more, so I won't cover it further here. I encourage you to review that article for further techniques for working with a dynamic DataGridView.

Previous Page

Next Page