RSS Feed for This PostCurrent Article

Develop a .NET Desktop Application using HTML for the GUI

Download Source Code

Occassionally I need to develop some simple desktop applications. Most often the GUI has to go through iterations of changes to be finalized.

After some time I got bored up to drag and drop all the form elements, compile and deploy the code again and again. At the end I decided to use HTML for the GUI. What I did is that I embed the WebBrowser control in my Windows Form, and then use HTML for the GUI. Any changes to the GUI only need to change the HTML document.

Below is an example of how I did it.

Suppose I have a simple HTML document, as show below.

<html>
<head>
<script language=”javascript”>
function validate(form) {
window.external.ValidateApplication();

}
</script>
</head>

<body>
<div align=”center”>
<form method=”post” name=”main_form”>
<table border=”0″ cellpadding=”1″ cellspacing=”1″>
<tr>
<td>Name</td>
<td><input type=”text” id=”name” size=”50″></td>
</tr>
<tr>
<td>Country</td>
<td>
<select id=”country”>
<option value=”country A”>country A</option>
<option value=”country B”>country B</option>
<option value=”country C”>country C</option>
</select>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” onclick=”validate(this);” value=”Test it out”>
</td>
</tr>
</table>
</form>
</div>
</body>

</html>

The HTML document contains 2 elements, 1 text box and 1 com box. When user clicks on the button, a Javascript function is invoked, which in turn use window.external function to call function in my C# application.

In my C# application, I have a form which contains only the WebBrowser control. The code is shown below

namespace BrowserApp
{
[ComVisibleAttribute(true)]
public partial class MainForm : Form
{
public MainForm()
{
InitializeComponent();
}

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{

}

private void MainForm_Load(object sender, EventArgs e)
{
webBrowser1.ObjectForScripting = this;
webBrowser1.Navigate(Application.StartupPath + @”\app.html”);
}

// This function is called from the browser
public void ValidateApplication()
{
HtmlElementCollection forms = webBrowser1.Document.Forms ;
HtmlElement form = forms[0];
String name = form.Document.GetElementById(“name”).GetAttribute(“value”) ;
String country = form.Document.GetElementById(“country”).GetAttribute(“value”);

MessageBox.Show(“Your name is ” + name);
MessageBox.Show(“Your country is ” + country);
}

}
}

In the class, I need to declare it to be ComVisible so that the WebBrowser can be used for scripting. Note the “webBrowser1.ObjectForScripting = this

Procedure ValidateApplication is called from the embedded browser. In the procedure, I display the HTML document element values, which are the textbox and combox value.

Simple, isn’t it !!


Trackback URL


RSS Feed for This Post2 Comment(s)

  1. shirou | Dec 30, 2007 | Reply

    i want to ask !! can we put flash file (.swf) to .net desktop application.. thanks before

  2. Jigar | Feb 5, 2009 | Reply

    I found your article interesting and useful.
    But can you show me how to write value back to form? Lets say you processed value and want to display new value back to screen, how are you going to do it?

Sorry, comments for this entry are closed at this time.