Leveraging The Windows Forms WebBrowser Control (For The Win)
I’ve been working on a little utility to experiment with the XMPP protocol. The idea was to write a tool that would allow me to send, receive, and display the XML stream and XML stanza messages at the core of XMPP.
Of course, I could have implemented it using a simple multi-line text box for the XML entry, but that would mean that I wouldn’t have nice things like syntax highlighting (for XML) and nice (auto) indentation.
On the desktop, I’m not familiar with any free Windows Forms editor controls that are capable of syntax highlighting. But on the web side, there are several free, open source script libraries at our disposal. For example, CodePress, EditArea, and CodeMirror.
I chose CodeMirror for this application as it was the simplest library that met my needs.
There really aren’t any tricks to this aside from getting the URL correct. In this case, I have my static HTML content in a directory in my project:
And I set the content files to “Copy always” in the properties pane for the files so that they get copied to the output directory of the project. To set the correct path, I find the executing directory of the application and set the URL properly:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<FONT face="lucida console"><FONT color=#0000ff>protected override void </FONT><FONT color=#000000>OnLoad(</FONT><FONT color=#808000>EventArgs </FONT><FONT color=#000000>e)</FONT> <FONT color=#000000>{</FONT> <FONT color=#0000ff>if </FONT><FONT color=#000000>(!DesignMode)</FONT> <FONT color=#000000>{</FONT> <FONT color=#0000ff>string </FONT><FONT color=#000000>path = </FONT><FONT color=#808000>Path</FONT><FONT color=#000000>.Combine(</FONT> <FONT color=#808000>Environment</FONT><FONT color=#000000>.CurrentDirectory, </FONT> <FONT color=#ff00ff>"HTML/input-page.html"</FONT><FONT color=#000000>);</FONT> <FONT color=#000000>path = path.Replace(</FONT><FONT color=#ff00ff>'\\'</FONT><FONT color=#000000>, </FONT><FONT color=#ff00ff>'/'</FONT><FONT color=#000000>);</FONT> <FONT color=#000000>_inputBrowser.Url = </FONT><FONT color=#0000ff>new </FONT><FONT color=#808000>Uri</FONT><FONT color=#000000>(path);</FONT> <FONT color=#000000>}</FONT> <FONT color=#0000ff>base</FONT><FONT color=#000000>.OnLoad(e);</FONT> <FONT color=#000000>}</FONT></FONT> |
Note that I check if the control is in design mode (the designer throws an error if you don’t do this since the path points to Visual Studio’s runtime directory instead of your applications output). Now all that’s left is to get the script and style references correct in your HTML page:
|
1 2 |
<FONT face="lucida console"><FONT color=#0000ff><script </FONT><FONT color=#ff0000>src</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"../HTML/CodeMirror/js/codemirror.js" </FONT><FONT color=#ff0000>type</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"text/javascript"</FONT><FONT color=#0000ff>></script></FONT> <FONT color=#0000ff><link </FONT><FONT color=#ff0000>rel</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"stylesheet" </FONT><FONT color=#ff0000>type</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"text/css" </FONT><FONT color=#ff0000>href</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"../HTML/CodeMirror/css/docs.css" </FONT><FONT color=#0000ff>/></FONT><FONT color=#000000> </FONT></FONT> |
And in your script:
|
1 2 3 4 5 6 7 8 9 10 11 |
<FONT face="lucida console"><FONT color=#0000ff><script </FONT><FONT color=#ff0000>type</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"text/javascript"</FONT><FONT color=#0000ff>></FONT> <FONT color=#0000ff>var </FONT><FONT color=#800000>editor = CodeMirror.fromTextArea(</FONT><FONT color=#ff00ff>'code'</FONT><FONT color=#800000>, {</FONT> <FONT color=#800000>height: </FONT><FONT color=#ff00ff>"210px"</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>parserfile: </FONT><FONT color=#ff00ff>"parsexml.js"</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>stylesheet: </FONT><FONT color=#ff00ff>"../HTML/CodeMirror/css/xmlcolors.css"</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>path: </FONT><FONT color=#ff00ff>"../HTML/CodeMirror/js/"</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>continuousScanning: </FONT><FONT color=#800080>500</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>lineNumbers: </FONT><FONT color=#0000ff>true</FONT><FONT color=#800000>,</FONT> <FONT color=#800000>textWrapping: </FONT><FONT color=#0000ff>false</FONT> <FONT color=#800000>});</FONT> <FONT color=#0000ff></script></FONT></FONT> |
The final part is getting your Windows forms code talking to the Javascript in the browser. In this case, I’ve written some simple Javascript that interacts with the editor control:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<FONT face="Lucida Console"><FONT color=#0000ff><script </FONT><FONT color=#ff0000>type</FONT><FONT color=#0000ff>=</FONT><FONT color=#ff00ff>"text/javascript"</FONT><FONT color=#0000ff>></FONT> <FONT color=#0000ff>var </FONT><FONT color=#800000>$g = </FONT><FONT color=#ff0000>document</FONT><FONT color=#800000>.getElementById;</FONT> <FONT color=#0000ff>function </FONT><FONT color=#800000>resize(height) {</FONT> <FONT color=#0000ff>var </FONT><FONT color=#800000>textArea = $g(</FONT><FONT color=#ff00ff>"code"</FONT><FONT color=#800000>);</FONT> <FONT color=#008000>// Get the iframe.</FONT> <FONT color=#0000ff>var </FONT><FONT color=#800000>editor = textArea.nextSibling.firstChild;</FONT> <FONT color=#800000>editor.style.height = (height - </FONT><FONT color=#800080>1</FONT><FONT color=#800000>) + </FONT><FONT color=#ff00ff>"px"</FONT><FONT color=#800000>;</FONT> <FONT color=#800000>}</FONT> <FONT color=#0000ff>function </FONT><FONT color=#800000>reset() {</FONT> <FONT color=#800000>editor.setCode(</FONT><FONT color=#ff00ff>""</FONT><FONT color=#800000>);</FONT> <FONT color=#800000>}</FONT> <FONT color=#0000ff>function </FONT><FONT color=#800000>addContent(data) {</FONT> <FONT color=#0000ff>var </FONT><FONT color=#800000>code = editor.getCode();</FONT> <FONT color=#800000>editor.setCode(code + data);</FONT> <FONT color=#800000>editor.reindent();</FONT> <FONT color=#800000>}</FONT> <FONT color=#0000ff>function </FONT><FONT color=#800000>setContent(data) {</FONT> <FONT color=#800000>editor.setCode(data);</FONT> <FONT color=#800000>editor.reindent();</FONT> <FONT color=#008000>// Scroll to bottom.</FONT> <FONT color=#800000>editor.selectLines(editor.lastLine(), </FONT><FONT color=#800080>0</FONT><FONT color=#800000>);</FONT> <FONT color=#800000>}</FONT> <FONT color=#0000ff>function </FONT><FONT color=#800000>getContents() {</FONT> <FONT color=#0000ff>return </FONT><FONT color=#800000>editor.getCode();</FONT> <FONT color=#800000>}</FONT> <FONT color=#0000ff></script></FONT></FONT> |
From the application code, we can call these script functions using the InvokeScript method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<FONT face="Lucida Console"><FONT color=#0000ff>private void </FONT><FONT color=#000000>AddStreamMessageInternal(</FONT><FONT color=#0000ff>string </FONT><FONT color=#000000>data)</FONT> <FONT color=#000000>{</FONT> <FONT color=#0000ff>if </FONT><FONT color=#000000>(_streamBrowser.Document != </FONT><FONT color=#0000ff>null</FONT><FONT color=#000000>)</FONT> <FONT color=#000000>{</FONT> <FONT color=#008000>// Get the contents</FONT> <FONT color=#0000ff>string </FONT><FONT color=#000000>code = (</FONT><FONT color=#0000ff>string</FONT><FONT color=#000000>) _streamBrowser.Document.InvokeScript(</FONT> <FONT color=#ff00ff>"getContents"</FONT><FONT color=#000000>, </FONT><FONT color=#0000ff>new object</FONT><FONT color=#000000>[] {});</FONT> <FONT color=#000000>code = code + data;</FONT> <FONT color=#000000>code = code.Replace(</FONT><FONT color=#ff00ff>"><"</FONT><FONT color=#000000>, </FONT><FONT color=#ff00ff>">\r\n<"</FONT><FONT color=#000000>);</FONT> <FONT color=#000000>_streamBrowser.Document.InvokeScript(</FONT> <FONT color=#ff00ff>"setContent"</FONT><FONT color=#000000>, </FONT><FONT color=#0000ff>new object</FONT><FONT color=#000000>[] {code});</FONT> <FONT color=#000000>}</FONT> <FONT color=#000000>}</FONT> <FONT color=#0000ff>private void </FONT><FONT color=#000000>AdjustSize()</FONT> <FONT color=#000000>{</FONT> <FONT color=#008000>// Call a resize method to change the HTML editor size.</FONT> <FONT color=#0000ff>if </FONT><FONT color=#000000>(_streamBrowser.Document != </FONT><FONT color=#0000ff>null</FONT><FONT color=#000000>)</FONT> <FONT color=#000000>{</FONT> <FONT color=#000000>_streamBrowser.Document.InvokeScript(</FONT> <FONT color=#ff00ff>"resize"</FONT><FONT color=#000000>, </FONT><FONT color=#0000ff>new object</FONT><FONT color=#000000>[] {_streamBrowser.ClientSize.Height});</FONT> <FONT color=#000000>}</FONT> <FONT color=#000000>}</FONT> <FONT color=#0000ff>public void </FONT><FONT color=#000000>RefreshBrowserContents()</FONT> <FONT color=#000000>{</FONT> <FONT color=#0000ff>if </FONT><FONT color=#000000>(_streamBrowser.Document != </FONT><FONT color=#0000ff>null</FONT><FONT color=#000000>)</FONT> <FONT color=#000000>{</FONT> <FONT color=#000000>_streamBrowser.Document.InvokeScript(</FONT> <FONT color=#ff00ff>"reset"</FONT><FONT color=#000000>, </FONT><FONT color=#0000ff>new object</FONT><FONT color=#000000>[] {});</FONT> <FONT color=#000000>}</FONT> <FONT color=#000000>}</FONT></FONT> |
Awesome! You can see that I can both pass arguments into the Javascript functions and read the return data from the Javascript function as well. The big win is that now you can take advantage of your favorite Javascript utilities in your Windows Forms applications.
