Custom embedding using CodeRush

It happened that I had to embed plenty of asp.net elements into tables, i.e:

<table>
    <tr>
        <td>
            <asp:Label ... />
            <asp:TextBox ... />
        </td>
        <td>
            <asp:Label ... />
            <asp:TextBox ... />
        </td>
        ...
    </tr>
</table>

Basically I had to put every Label/TextBox pair into its own table. The outcome has to be something like this:

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td>
                        <asp:Label ... />
                    </td>
                    <td>
                        <asp:TextBox ... />
                    </td>
                </tr>
            </table>
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        <asp:Label ... />
                    </td>
                    <td>
                        <asp:TextBox ... />
                    </td>
                </tr>
            </table>
        ...
    </tr>
</table>

And there were plenty of such pairs. So I was facing tedious manual repetitive work every decent developer tends to avoid at all costs. My first though was that it might be done with [CodeRush]. After all it has embedding functionality. Not only it comes with predefined set of embeddings – [CodeRush] allows you to easily create your own embeddings easily. But first let take a look how embeddings are accessible. There are two main ways. First way is through context menu in Visual Studio editor after selecting one or more lines:

As you can see there are plenty of embeddings out of the box. There is another way to trigger embedding functionality: through shortcuts (i.e. CTRL+3 in my VS triggers method embedding – embeds the method where caret is located in #region [MethodName] … #endregion block. Actually I use this embedding heavily. Note also that embedding availability is based on language of the file where caret is positioned (i.e different embeddings are available for asp.net files and c# or vb.net files) and on the context (when invoking through shortcuts). But back to my problem. I actually needed two embeddings that would do:

1. Wrap selection into <table><tr>…</tr></table> block
2. Wrap selection into <td>…</td> block

Here is the how you add those two embeddings.

Click DevExpress/Options… menu to open Options window, expand the tree on the left to click on Embedding node.

Since these embeddings will work on asp.net files pick HTML as Language in combobox on the bottom of the form.

Click on the big green plus sign to add first custom embedding.

Assign name Tabloid and caption the same. Next select proper embedding style by clicking the first icon in Style row.

The final step is to type lines <table><td> above the special line Selected Text and </tr></table> lines below this special line. These lines will form embedding header and footer. That’s it. It should look like this:

Repeat the same steps for the table cell embedding (named Celloid with caption Table Cell in my case):

We are done. Now let’s try it on my example. First select all lines that have to be embedded into table (Label and Textbox in my case) and right click to show context menu.

There they are my two embeddings – FYI there are no predefined ones thus only mine are showing up. Here is the result after Tabloid embedding:

Do the same with Celloid embedding.

The result is a good one, too. Exactly what I was looking for.

So far this is a great time saver and annoying typing repellent. But [CodeRush] can be of more help. It is able to fire embeddings (and other stuff) through custom defined shortcuts. Mouse is great however it is not as fast as keyboard is.

Lets create the shortcuts. The goal is to bind key t to Tabloid and key d to Celloid embeddings. Open [CodeRush] options again but this time select Shortcuts tree node.

Click on New Keyboard Shortcut icon

In the Key 1 field type t (shortcut)in Command combo box pick Embed (action) and as Parameter type the name of embedding which is Tabloid in my case.

The shortcut is almost ready and the only thing left is to specify the context where the shortcut fires. If you don’t set the context the embedding will fire each time you type key t wherever you are. This might be not the desired behavior. Set that the following conditions that have to be met: Selection should span Multiple Lines (one or more lines) and it should contain Whole Line. Also, the shortcut should fire only when editing in HTML View:

That’s it. When you select one or more lines in HTML code (which includes ASP.NET) and then press key t the action Embed/Tabloid will be fired and your lines will be captured to a table.

Almost same steps are required to create Celloid shortcut on key d. Except for the context settings. Since context is the same in both cases a copy/paste operation can be performed on context. Right click anywhere in the Tabloid’s context window and pick Copy Context.

Go back to Celloid, right click anywhere in the context window and pick Paste Context. Context is then copied and you avoid re-clicking all of the conditions (there might be plenty of them).

That’s really it. I can go now through asp.net code, selecting lines and pressing t or d to embed elements.

Trust me, if you have many pages with many embeddings to perform you’ll love this embedding feature of [CodeRush]. Now you can create all sorts of embeddings you want. Enjoy.

Thanks to Mark and Dustin for guidance.