Beginner’s C# Part 3: GUI Days

It is all good to have the basics of a program working on the console, but we can do better than that. Today we shall add a graphical user interface (GUI) to our keyword checker.

Let us start a new project like we did in part one, only this time choose Windows Forms Application as the project type. This will allow us to add an interface with clickable buttons. Once the project is ready, we will have a number of components that can be drag and dropped from our toolbox (shown below) to our form (the user window).

Add the following components to the form as follows:

Component typeNameText content

The resulting form should look as shown here below. We have two text controls so that our users can enter the Url and keywords, a button that will trigger the search process, a label to show a snippet of the website content with the selected keywords, and a web browser to show a short preview of the page that the user is searching. There is no doubt that once finished, this interface will look better than the console application that we had before.

Now we need to convert the code from our console application to make it work with our new form. The code should run when the user clicks the button. We create a handler for the button by double clicking on the button and the editor will wire the necessary handler for us. When running the application, handlers make sure that the correct code is executed when particular events are triggered, in the case the click event of the Check button. Here is the code that goes in the btnCheck_Click(...) method that was just created for us, followed by the explanation:

var client = new WebClient();
var url = txtUrl.Text;
url = !string.IsNullOrEmpty(url) && Uri.IsWellFormedUriString(url,
UriKind.Absolute) ? url : "";
var keywords = txtKeywords.Text;
keywords = !string.IsNullOrEmpty(keywords) ? keywords : "final fantasy";
var pageContent = client.DownloadString(url);
var keywordLocation = pageContent.IndexOf(keywords,
StringBuilder sb = new StringBuilder();
if (keywordLocation >= 0)
sb.AppendFormat("{0} are talking about {1} today.", url, keywords);
sb.Append("\n\nSnippet:\n" + pageContent.Substring(keywordLocation,
sb.Append("Keyword not found!");
lblResult.Text = sb.ToString();

As usual, first we create a web client instance that will be used to fetch the results. Then comes the new part. Instead of reading the user’s input from the console, we read the url from the form’s textbox. This is done by using the textbox’s name (txtUrl) and reading its Text value (which holds the user’s input), and assigning it to the url variable. We then check if the url is valid, and use the default one otherwise (to understand how this works, take a look at the previous tutorial). We do likewise with the keywords textbox. As we also did previously, then we read the results from the page, check if the required keywords exist, and display the results on the user’s screen.

One difference this time is that we use the StringBuilder class to prepare the output before displaying it (by copying it to lblResult.Text), as opposed to directly writing each part of the result to the console.

The other difference is that now that we have a graphical interface, we can embed a preview of the page inside our form. This can be achieved quickly by using the browser component from our toolbox and pointing it to the selected url (simply done by using the Navigate method). We will improve this in a future tutorial.

Running the project and entering some url and keywords will look as shown here:

Again, a full version of the code is also available on github here.

Buy me a coffee Buy me a coffee


Add your comments