Tuesday 6 November 2012

Real-time Programming C# WinForms Controls in VisualStudio's IDE (i.e. without using F5)

Here is an example of using the VisualStudio C# REPL - O2 Platform extension to update/fix an existing  WinForms control without going though the painful (and slow) process of VisualStudio GUI programming, which usually goes something like this:

  • Coding + Compiling + F5 + Wait for App to Load + Going to Control + Testing it + Stopping 
  • Coding + Compiling + F5 + Wait for App to Load + Going to Control + Testing it + Stopping 
  • Coding + Compiling  + ....

We start with the O2 Platform Solution loaded in VisualStudio 2010, with the projects from the O2.FluentSharp and O2.Platform.Projects repositories, and the VisualStudio C# REPL - O2 Platform extension installed (note the extra REPL menu)

From the REPL menu, chose the C# REPL - 'Hello World' menu option:

Which looks like this (it's a good idea to right-click on the code editor to open the context menu, and to select the show Log Viewer option:

Here is a small text change to show the C# REPL environment in action

Now here is the powerful part, this script:

Will create a new popup window with the ascx_Simple_Script_Editor WinForms Control (that was just dynamically compiled from the original source code (note: the ascx_Simple_Script_Editor Control is the one used to create the C# REPL environment))

What is happening is that the ascx_Simple_Script_editor.cs file (whose source code is shown in the background) was dynamically compiled and executed .... without leaving the VisualStudio's IDE.

Just to double-check that we are doing this in real time, lets make a small code change in the  ascx_Simple_Script_editor.cs source code (using VisualStudio's code editor).

The code shown below will create two MessageBox(es). The first was created using the normal .Net MessageBox call syntax,  and the 2nd uses O2's FluentSharp API (which should be easier to read)

Here is the 1st MessageBox:

Here is the 2nd MessageBox:

The ascx_Simple_Script_Editor WinForms Control will appear after the MessageBox(es):

Now that we've proven that we are able to change, compile and execute a C# WinForm's control in a REPL environment, let's do something more interesting.

Moving a ToolStrip Control

One of the O2 Platform user's feature requests that I have received for this control (the one that we are editing), is to move the ToolStrip Control  (the one with the New, Open and Save As buttons) from the bottom of the Control,  to the top (which is where usually ToolStrips are located).

Going back to the VisualStudio document with the ascx_Simple_Script_editor.cs source code, here is the addToolStrip method that 'inserts below' the commandsToExecute Control an ToolStrip Control (the rest of the addToolStrip method adds the TootlStrip items (3x Buttons, 1x Label and 1x TextBox)

To change the location of the ToolStrip Control, we will use the FluentSharp insert_Above Extension Method  (vs the originally used insert_Below Extension Method)  :

Once the change is saved, we can immediately see these changes in action, by using the REPL environment created via the gist script shown above..

Here is the updated version of the ascx_Simple_Script_editor Control with the ToolStrip Control at the top.

Note that I didn't use VisualStudio's Debug/Run capabilities to see the new changes in action. I was able to compile the modifed Source Code file, and using reflection, was able to  create a new instance of that WinForm's Control (with everything done inside VisualStudio's IDE).

Adding a new Button

As a final example, lets add a Run button to the ToolStrip Control.

Here is the updated source code (note the new add_Button line)

Once saved , complied and executed (not by VisualStudio), we can see that there is a Run button on the ToolStrip.

Here is the button being used to execute a test REPL script:

VisualStudio power is still all there

Another benefit of this technique/workflow is that we still have access to the powerful VisualStudio Intellisense and Error detection:

Compiling and executing the Solution

The final step is to compile the Solution file (with the changes made)

And run the O2 Platform executable (now using VisualStudio's F5).

Note how the O2 Platform's native C# REPL editor now has the changes made to the ToolStrip Control (it is above the code-editor and has an extra Run button)

This technique will change the way you code (once you got your head around it)

I can't underestimate how powerful, fast and efficient it is to be able to have this type of  REPL environment while coding (and how painful is the VisualStudio workflow in comparison).

In fact, this REPL environment is a curse, since once you tried it, there is no way back! :)

This is why I say that I develop O2 in O2 :)