- GUIs in the Modern Age
- Creating a Simple GUI
- GUIs and Different Views
- Improving the GUI Code
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
GUIs and Different Views
One of the most powerful design facilities in Microsoft Visual C# 2008 Express Edition is the ability to switch between Designer view and Code view. Designer view allows you to see the visual elements as they appear in the finished GUI. Code view, on the other hand, allows you to drill down and see the underlying C# code behind the GUI. This capability is very useful, as you'll soon see.
Building a GUI
Let's examine how you actually go about building such a GUI. Microsoft Visual C# 2008 Express Edition provides extensive examples (including videos) of building C# programs, so be sure to take a look at the reference material for your specific needs. The GUI we're discussing in this article is based on the Help topic "How to: Create a C# Windows Forms Application." The tutorial is excellent, so I won't detail all the same steps here. Rather, I'll focus on the bigger picture and on a few minor areas that the tutorial doesn't cover.
To build your own GUI application, just follow these steps as detailed in the tutorial:
- Click File > New Project.
- In the New Project dialog box, select Windows Forms Application as the required project type.
- Change the name of the application to whatever you like. For example, you might name the application My Web Browser.
- Click OK.
This procedure creates a new folder for the C# project with a name that matches the project title. After this, you'll see the new Windows Form, entitled Form1 in Designer view. As mentioned earlier, it's a simple matter to switch between Designer view and Code view—just right-click the design surface or code window and then click View Code or View Designer, as appropriate.
When in Designer view, you can drag-and-drop the required controls (visual elements such as menus, buttons, and so on) onto the newly created form. In this context, Designer view is named very well; it lets the GUI designer see how the visual elements will look in their finished form. As yet we have no code behind the GUI, but once you place a control on the form, Microsoft Visual C# 2008 Express Edition works behind the scenes to create the required C# code.
I'll assume that you followed along through the remaining steps of the tutorial, filling in all the gaps. If all has gone well, you should now be able to run the GUI application and produce something like the result illustrated in Figure 1 (of course, you may have chosen different URLs).
One thing I noticed about the GUI was that the Go button didn't seem to update the web browser control. In other words, if I selected a URL different from the one at the top of the ComboBox control—changing from http://www.yahoo.com to http://www.microsoft.com, for instance—the Go button didn't change the website displayed. I've often noticed that GUI programming is sometimes a little opaque! To resolve this issue, we need to see what's happening behind the scenes. How do we do this?
A Simple Tool to Help Build a GUI
One of the greatest difficulties with getting started on GUI development is seeing what's happening behind the scenes. However, help is at hand in the form of the humble MessageBox class—an invaluable tool for anyone starting out with GUI development. Let's place a few calls to MessageBox in a few strategically selected locations in the file Form1.cs, as illustrated in Listing 1.
Listing 1—Some debug output from Form1.cs.
public Form1()
{
InitializeComponent();
MessageBox.Show("Form1 initialized");
}
private void goButton_Click(object sender, EventArgs e)
{
MessageBox.Show("Value of selection " + comboBox1.SelectedItem.ToString());
webBrowser1.Navigate(new Uri(comboBox1.SelectedItem.ToString()));
}
private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
{
MessageBox.Show("Hello from comboBox1_SelectedIndexChanged " + comboBox1.SelectedItem.ToString());
}
To make the changes in Listing 1, you'll have to switch from Designer view to Code view. Then locate the file Form1.cs, add the changes, and click the green arrow in the toolbar (or press F5). When you run the program again, you might notice that the method goButton_Click() never seems to be invoked. Why is this (not) happening?
Let's look a little more deeply. Open the file called Form1.Designer.cs and look at the section in Listing 2, which is an excerpt from the method.
Listing 2—An excerpt from InitializeComponent().
private void InitializeComponent()
{
// MORE CODE HERE
//
// goForwardToolStripMenuItem
//
this.goForwardToolStripMenuItem.Name = "goForwardToolStripMenuItem";
this.goForwardToolStripMenuItem.Size = new System.Drawing.Size(152, 22);
this.goForwardToolStripMenuItem.Text = "Go Forward";
this.goForwardToolStripMenuItem.Click += new System.EventHandler(this.goForwardToolStripMenuItem_Click);
//
// goButton
//
this.goButton.Location = new System.Drawing.Point(291, 77);
this.goButton.Name = "goButton";
this.goButton.Size = new System.Drawing.Size(75, 23);
this.goButton.TabIndex = 1;
this.goButton.Text = "Go";
this.goButton.UseVisualStyleBackColor = true;
// MORE CODE HERE
}
Notice that the goButton component is missing an EventHandler registration. To fix this problem, add the following line of code at the end of the goButton section:
this.goButton.Click += new System.EventHandler(this.goButton_Click);
Then rerun the program. Now the Go button will respond to changes in the selected URL. You also should see the MessageBox output from the goButton_Click() handler, as shown in Figure 4.
){kind=small}
Figure 4 The event handler is finally invoked!
Once the event handler is invoked, as illustrated in Figure 4, you should see the web page change to the desired URL. The simplest debugging tool (in this case, MessageBox) has helped to find a minor omission in the generated GUI C# code.