The RSS Reader Project - Building the UI

The RSS Reader Project - Building the UI

Start: 00:00:08

In this video we will start working on our RSS reader application, which is the culmination of everything that we have learned up to this point in time so far with Visual C# 2005 Express Edition.

We will start by looking at the first two snapshots of our development effort. Now what is a snapshot? We talked about this in the previous lesson. Basically, a snapshot is a distinct period in time where stop it what I'm doing, save it off into a different folder, and then talk about what it is that I did for the past hour or two hours or so. And so this way, you can get several different perspectives on the progression of the software development, and I will go through and say, "This is what I did in this snapshot. You can see . . and we will walk through each of the pieces that I worked on during that hour or two. And it is also helpful to you, you can download each snapshot, take a look at them on your own, and if you are trying to follow along and build the application on your own at the same time, then you can use it as kind of a reference or if there was something that was not explained very clearly and you want to investigate it on your own, set some breakpoints and walk through the code, you are certainly welcome to do that. So make sure that you download the sample code for each of the snapshots from the same location where you downloaded this video.

So let's jump right in and start talking about snapshot number one. In this first snapshot, I took some of the very basic steps of getting started, created a new project called RSS Reader; you can see this loaded in the solution explorer, and I created three forms, the mainform.cs, which is loaded in the main area, and we will talk about each of the elements of that form in just a moment, and we will come back later and talk about the folderdialogue.cs and the channeldialogue.cs.

(Start: 00:00:02 End: 00:01:53)

Now if you r 10410x237k ecall from our discussion on designing the UI from lesson number twelve, we talked about our preference to use an explorer type interface, but maybe we did not have the skills necessary to start there. So as you can see I have kind of gone to a similar paradigm, but it is not using a tree control. Instead we will select a single folder, and when we select a folder we will able to view all the channels, or all the RSS feeds rather, that are associated with this folder, so a folder is merely just a way for us to organize our channels, our feeds, and then when we select one feed, all of the news items that have already been collected from that feed will be displayed then in this news items box at the bottom.

When selecting a single news item, then we will able to see the details of that news item on the right-hand side, so again think of the explorer view where we will see the details over here on the right-hand side. The title of the description, the date it was posted or collected from the internet, and then we will have a little bit of a browser view, a window, that allows us to view the actual page where this entry, this article, or blog posting, or what have you, can be found, and if we want to see that in a full window in internet explorer, we can click this expand link. So we will come back to this in just a moment.

Let's start up by talking about the controls and how I proceeded through the development of this. The first thing that I did was that I added what is called, and if you click somewhere here in the gray background near the properties window, a tool strip container. So if you go to the toolbox and you scroll down to "menus & toolbars," you will notice this control called a "toolstripcontainer," the description, as it pops open, says it provides panels on each side of the form that can contain one or more tool strip or menu strip or status strip controls.

(Start: 00: 01:53 End: 00:03:53)

So what does it really do? Let's go ahead and run our application. It is easier to show you than to really explain at this point. So as you can see I have got my menu here and my toolbar. We will come back to these in just a moment. I have got a status strip down here, but if you have ever looked at some of the office applications, for example, they are very customizable, so you can move the menu around to a different part of the user interface. Or you can take the toolbars, for example, and move them along the side, move them to the bottom, move them over to the right side, and so this toolstripcontainer allows you to customize the UI and move things around.

Let's see if we can do that. I'm not sure we can do that yet with the menu or the status strip, but it is definitely useful for moving around and docking our toolbar controls, and if we have multiple toolbars this comes really in handy, and so it is just an easy way for our users to play around with our application, customize it, so they can find the things that they need to do with the application very quickly. So that is why we chose to use the toolstripcontainer right off the bat. Then I started placing things in the toolstripcontainer.

You can see on each of the sides of the form where the toolstripcontainer is docked, these little bars with chevrons, and if you click on the chevron you can see that it opens in area where we can drag and drop controls into. So then basically I created some space and drag and dropped a menu strip control. So by selecting it here in the little designer tray at the bottom of our form designer, you can see that it selects it as well appear at the very top, and then I was able to customize the entry.

So in order to use the menu control, all you need to do just select one of the type here spaces and start typing and adding things in. So for example, if I wanted to add some more menu entries to the file menu, for example, or to the new sub menu, all we need to do is start typing. So, "This is a test," and you can see that it would then appear in our menu, and if I double-click it will create an event handler for that menu item, so that when somebody clicks it, I can respond to that and write some code to work with it.

(Start: 00: 03:53 End: 00:06:15)

Now if I want to work with this in more of a property menu sort of way, I can merely select it, go to the property menu, and then select the items property, and now I have an items collection editor that allows me to work with each of the individual menus. Now you see this is hierarchical. So the menu strip contains at this point the file tool strip menu item and the help tool strip menu item.

If I want to see the items that are below the file tool strip menu item, I will have to go over and look at its item collection as well, which pops open a second version of this item collection editor. So now for this specific menu, the file menu, I can see there is a new, there is a separator, and then there is the exit, and then there is just one that I just created. This is a test tool strip anyway. I'm just going to delete it for right now and click the "OK" button.

Now the neat thing about the menu strip that is new to Visual Studio 2005 is the use of this insert standard item, so when I click this it will add all the usual menu items that you see in most applications: file, edit, view, window, help, and so on.

I guess I can go ahead and do this right now. I will not hurt anything. I will just not save my changes, and you can see when I click that it added the file, edit, tools, and help menu, and I can go through, you can see that even come complete with the little keyboard shortcuts, as well as little icons that are listed on the side. Now it is up to you to implement all this functionality. That does not come standard out-of-the-box. You will have to actually implement the cut, the copy, the paste, and the select all, and the customizing the options. This merely just sets them up on the menu system for you. So that is the greatness of the menu strip.

(Start: 00: 06:15 End: 00:08:14)

Now let's move on the tool strip, which works very much in the same way. If I want to add a new item to the tool strip, there are a number of different ways I can go about it. As you can see over here, I have this little dropdown and I'm going to select it, and I can select to add to this tool strip either a button, a label, a split button, and several others: separator, combo box, progress bar. So you have a lot of functionality wrapped up in this tool strip and the menu strip controls.

Now up to this point I have only been using buttons, and you can see that I have already defined seven buttons. Now how did I get my little neat icons there with the folder plus edit and delete, and then the channel plus edit and delete, as well as this RSS refresh icon? Well, there is a set of icons that I had a graphic artist create for me for this purpose for developing this RSS Reader application, and those are included in the download for this video, so make sure when you download the source code that you also get the icons for it as well, and what I did was simply right-click on a given button and select "set image." This allows me then to select either a local resource that is on my hard drive, or to select a resource that has been added to the resource.resx file.

Now let's not worry about that too much. You can simply just go "local resource," click the "import" button, and then find gif, jpeg, bitmap, png file, whatever it is. In this case I believe they are all gif files or bitmaps. Find them and then select them, and then hit the "open" button. I'm going to go ahead and click "cancel" here, but I did that for each of the buttons on my toolbar.

(Start: 00: 08:04 End: 00:10:01)

So just like the menu, even though I have got these neat little icons here, they really do not do anything yet. So we will still have to write some code behind each one of them. Let's talk about that in just a moment.

Now moving on to the main area, you can see that we have this folder combo box, and notice also for all the things and all the controls that I have added, I have given them very distinct names. Notice that I followed a standard naming convention where I have used the, I guess you would say the noun or the purpose for this particular control, so in this case it is the folder, and then the type of control combo box afterwards. So using some sort of standard naming convention helps you whenever you go to develop the application so that you can say, "I want to want to work with that channel list box," and then I can find it in code, so to speak. Whenever I'm typing I have some confidence, because when I named things I was so meticulous about naming things correctly that I do not have to spend a lot of time thinking about, "What did I name that control?" Here I can just say, Oh yah, it was a channel list box," just like I would call it if I was speaking with you in plain English.

So find a naming convention that works for you. Other people have other naming conventions. Sometimes it is a three letter acronym, or contraction, for the type of control, so LST would be a list box for example, the combo box would be CBO or CBX I have seen it, textbox would be TXT title. In this case, I have preferred to spell everything out: title textbox, description textbox, date posted should be textbox on the end there. So you can see maybe I was not completely thorough with my naming convention, but sometimes that happens and I will have to go back and correct that.

(Start: 00: 10:01 End: 00:11:57)

Also here I have got a web browser control that has been added to the design surface. Let me show you where to find that. If you look in the comment control section of the toolbox at the very bottom you can see it is a web browser, and this is basically just an implementation of internet explorer that allows you to view web pages in here. So if we wanted to actually show a web page, we would have to set the URL that we want the application to browse to, and we can do that in code. And you can see here I will need to click the chevron up so it shows everything correctly.

So I spent some time lining things up, you know, using the little align tools to make sure that everything pops in line, and had to think about the width of the boxes and things of that nature. I'm still not 100% satisfied. I may want to come back and revisit this sometime in the future to allow resizing to make the application respond whenever the user tries to make it full-screen, that the controls will actually move out properly. I did not have enough time for that in this first iteration, not even sure that we're going to able to be to get to it by the last iteration, but as we continue through the snapshots maybe in another set of videos or whatever those are things that we can add to the process.

Also one thing of note here: you see here that I have used a label control that I have named "expand label," and my intent is that when somebody clicks this label, that it will pop open internet explorer, and with this particular item, whatever is being displayed here in this window in a full-screen internet explorer browser. To do this I used a label control. Now you might be thinking, "Well don't you have a link label control available?" The reason I did not use the link label is because it did not give me the event that I needed. A link label is great if you known the URL ahead of time, however I did not have that. It did not give me the properties and the methods that I really needed to do it the way that I wanted to. So I had to basically just use a regular label control and then change the forecolor property to blue and the underline property, as you can see here, to true as well.

(Start: 00: 11:57 End: 00:14:16)

So finally, I have at the very bottom a status strip, and the status strip is used to give your users some feedback about the application. For example, whenever we're going through and pulling down news items from all of the RSS feeds, the channels that we have subscribed to, then we want a little progress bar to let the user know how things are faring, you know, if we have got a lot channels, a lot of news items to bring down then it will progress fairly slowly. If we have only one or two it will pop through very quickly, and then also not visible here, but right next to this progress bar is a label control.

So let's do this: Let's just select our status strip and do like we did with menu, and go to the items collection. Look at the items collection editor for our status label. Notice that we have a status label. So I'm sorry, I had it on the wrong side. It is actually in front. We will want to change that before we're completely finished with the application, but in the status label it is basically just a label control, and we're going to output some text based on the success or the failure of the various operations that the user has undertaken within the application.

So for example, if somebody says that they want to add a new channel, for example. If the channel adds successfully, we're not going to pop open a message box. That's very disruptive to the workflow of the user. Instead we might just write something out to the status label at the very bottom of our application that says that the new channel was added successfully. If they cancel the operation by clicking the "cancel" button on one of the dialogues, which we will look at in just a moment, we may want to say that the add channel operation was canceled by the user, just to let the user know what was just accomplished or not accomplished within the tool.

(Start: 00: 14:16 End: 00:16:05)

We will have more to say about this in snapshot number nine when we actually implement the progress bar and the status label within our application. So I'm just going to click "cancel" for now. Now before I leave this I have already a kind of tried to stress the importance of the naming convention, but at this point also, before I leave this, I may want to go through and set the tab properties, or the tab order, for my user interface. If I have not already not done so;

Let's see if we've taken the time to do that. So as you can see our combo box has a tab index of one. You can see here that the channel has a tab index of five, so I have not taken the time to do that. I could go through each one of these boxes from the left column, top to bottom, and then on the right column, top to bottom, and assign them a sequential tab index number. Also, do you remember how we did this from the lessons? Really early on we talked about how to use the little tab order button section on the toolbar here, tab order, which allows us to take a look at each of the controls and then click on the next one. So here we will start here by clicking going one, two, three, four, five, six, and I think that is about it. So let's go ahead and click that off and now if we run our application, a user can use only the keyboard in order to navigate through each of the controls on their form.

(Start: 00: 16:05 End: 00:18:01)

I just thought of one other thing I wanted to point here, before we move on: description textbox. I think this is something we talked about. We want it to display on more than one line, so what I did was enter the multiline property and set it equal to true. Additionally, I wanted to allow the little scroll bars to appear whenever too much text was entered in this textbox, and so I set the scroll bars equal to vertical. So this makes it now able to accommodate quite a bit of text and allows the user to be scroll through it if they need to, in order to view it all.

So moving on, let's take a look briefly at the folder dialogue. Our intent for this is whenever somebody selects either the "add" or the "edit folder" buttons from our toolbar, then we would want to pop open this folder dialogue. So if they are trying to add a new folder, all that we need to do is type in the name for that folder, select the "OK" button, and then it will be displayed in this list a folders in our combo box. We can add channels to it and so on. This is a very simple concept.

We can use that same dialogue box, the same form for the edit functionality, so whatever folder is selected in our combo box, when we select the "edit folder," it will pop open the folder dialogue, it will have the folder id and the name of the folder, and we can change it in any way you want to, select the "OK" button, or select "cancel" if we've changed our mind and wanted to leave it named that. And then it will make the appropriate change.

Same is true for the selected channel. We can either add a new channel or edit a selected channel from the list that is in the channel list box. And by doing so, we will able to select which folder this channel belongs in, give it a title, and give it a URL as well, select the "OK" or "cancel" button. If we're editing, we can make the changes from the selected channel that was selected before the button was clicked to open up this channel properties, and then click the "OK" or "cancel" button to make the appropriate change.

(Start: 00: 18:01End: 00:20:18)

We have not implemented any of that functionality yet. What have we done in terms of code? Well not much. You can see that if I double-click, I have stubbed out all of the code for each of the menu items, the tool bar buttons, and even I think the main form itself. Now what is stubbing out? "Stubbing out" is simply just creating some code that reminds us what we need to do before we can say our application is finished, so I do not have time to, for example, create the new folder functionality right now. I may need to take a break, go home for the evening, whatever the case might be, but I want to remind myself that this functionality is not complete. So I create a "to do" item, and then create a comment with appropriate text, and give myself a little message box to display this to myself and anybody who might be using my application while I'm testing it. This is just a way of reminding yourself that this functionality is not complete. We will talk about this to do item in one of the later snapshots, and we will see how these become very helpful as we're trying to tie up all the loose ends in our application development. So we do not forget something that we always intended to do, but never found the time because we needed to move on something else. That pretty much wraps up this first snapshot. Let's continue to work on the application. I think what we will do next is just make sure that from our main form we can click on our buttons here and it will simply open up either the folder dialogue or the channel dialogue respectively. So that is what we will work on next.

(Start: 00: 20:18 End: 00:22:04)

So after about forty-five minutes or so we have snapshot two, and let's just demonstrate very quickly what the end result of this snapshot was. If you click on "new folder" or "edit folder," or if you click on "add channel" or "edit channel," it will pop open one of the property forms. Notice that whenever the folder properties dialogue is available, I cannot switch back over to the RSS reader application. It is what is called non-model or rather a dialogue. If I was able to switch back and forth between these two forms, then they would be both known as model forms. However in the non-model, this requires the user to taken an action on this form before they can continue using the rest of the application. So that little tidbit of information will become very important in just a moment.

Next, I wanted to make sure that I'm able to communicate back to my main form. What button the user clicked, whether they clicked the "OK" button or the "cancel" button. We will talk about how we do this in just a moment, but just to prove the point, whenever you click the "OK" button, I simply pop open a little test message box. We will remove this in the future. Don't worry. For example, when I click the "edit" and I click the "cancel," then you can see "The user selected 'cancel'" button. Same thing is true whenever working with the channel properties, and both in add and edit mode. So what did I do here, and why did I do it? Well first of all, I just wanted to make sure that I get some of the easy things out of the way. I want to make sure that my form can communicate, and so this really is helpful. If I have were to have somebody over at the house right now, I could explain to them, "Well this is what I'm doing," and I can kind of walk them through the application. It also gives me a sense of confidence that this is going to flow, and it helps me kind of work through the application in my own mind. "Is the flow right? Is this convenient for the users?" Did I have to do this next? No, but it is something that I would have eventually needed to be done, and I just decided to tackle it right now.

(Start: 00: 22:04End: 00:24:18)

So sometimes you just have to make judgment calls on what you are going to work on next. Typically, if I'm working on the UI, I want to get many things associated with the UI kind of worked out and ease into the development process. Then I might turn my focus on to some of the more complex aspects of the application to get those out of the way next, so just a little bit of a confidence builder. Now how do I do it? That is the big question. So let's go ahead and double-click on any of our buttons. We will start off with the "add folder" button, and you can see here that I have some code. I'm first of all creating a new instance of that folder dialogue.cs. So I have not really used a very good naming convention here. I have just plucked out something off the top of my head. I called it F. We will revisit this in the future.

Typically you want to be a little more careful about how you name things, but I know that I'm going to come back to this in a few moments and probably rename a bunch of things. The next line of code, line eighty-two, I create an instance of a dialogue result object called "result," and I will put into that result object the result of the show dialogue method of our new F object, the folder dialogue. So whenever you want to pop open another window, you will either use the show method or the show dialogue method. If we use the show method, then you put your windows in a model way of working. So there will be the ability to work with one form or the other and have them both display at the same time, and you can switch back and forth between the two of them. With a dialogue, or rather using the show dialogue, the user will have to work with the folder dialogue in this case before, and to hit either "OK" or "cancel" or close down the form before they can start working again with the main form.

(Start: 00: 24:18 End: 00:26:18)

So that is the difference. I wanted to use show dialogue because I want to get feedback from the user about what they accomplished, so that I can accurately reflect that and update the main form. So that is why I used show dialogue. Now the cool thing is that show dialogue will tell us whether the user clicked the "OK" or the "cancel" button. Now based on that we're going to check, did the user click the "OK" button? If so, we will take a certain action. If they click the "cancel" button or any other button that we might have, then we will, say in this case, just pop open a message box that says that the user selected cancel.

Then finally we're going to set a null reference to our folder dialogue, essentially taking it out of memory. So now in order to get this to work, we had to do something special with our folder dialogue. So let's open that up and take a look at the "OK" and "cancel" buttons. So I'm going to here to the properties window, and I had to set a special property in order to get this whole system to work. I have to make sure that the dialogue result property is set for both my "OK" and "cancel" buttons. If it is not set, then I'm not going to get the results that I want. Also notice that there are number of other dialogue results that we could add. So if we had abort, retry, ignore, yes, or no. Those are other dialogue results that we can track for by using this show dialogue method.

So hopefully this is all making sense. I'm going to open up the dialogue based on whether the user clicks "OK" or "cancel." We will grab that result, check it against the list of enumerations. So in this case dialogue.result.ok. You can see here we will do this just really quickly: cancel, abort, all those possibilities that we saw whenever we looked at that list of dialogue results for the given control, the command button, in the folder dialogue.cs. In this case we want to make sure it is okay. Based on that we will take two separate actions.

(Start: 00: 26:18 End: 00:28:18)

So basically, I have done that for the add folder tool strip button and for the edit folder tool strip button. Let's see what else we have here. For the add channel something very similar, channel dialogue F equals new channel dialogue. That is the only thing that is really different, everything else is pretty much the same. Same thing would be true then with the edit channel tool strip button click event; essentially the exact same code. So we have worked about an hour and a half so far. We have set up our project. We have got all of our controls in place that we're going to use. We're able to open up the dialogues and we will implement those more fully in the next several snapshots.

Now in the next video what we want to do is start implementing some more of the more difficult functionality, and the reason why I'm turning my attention to that at this point in time, the more difficult functionality, is because I want to take the biggest risk and address that first. This is just my style of coding. Some people might put this off to the very end. Some people might tackle it before they even tackle the UI. In my particular case, I wanted to get the UI looking good and standardized, and then I'm going to take on the biggest unknown, and that is, how am I going to retrieve data from the internet, specifically xml data in the form of the RSS specification? I want to see if I can just grab all that data down and display it on screen in some way. I'm not going to worry about saving it in a database just yet. I just want to make sure that I can at least do that next step. So at least in my mind, I have my next goal for my next snapshot, and I will meet you in the next lesson. Thank you very much.

(Start: 00:28:18 End: 00:30:08)