C# Array - Applications
Password Keeper - Analysis
There is a lot more to arrays but right now we have learned enough to build a sophisticated application. This one is called the Password Keeper. It does just what it says. It keeps your passwords for you.
Basically, via an add function, the program allows you to enter a company or web site name along with your login ID and password. It then stores that information on disk. But it goes beyond that. It’s search mechanism lets you locate the web site or company you’re interested in and returns your login ID and password. The delete function lets to totally remove a record. The Edit function lets you make changes to the company name, login ID and password. And you could easily add other fields to this application if you are interested.
There is no security on this application. We aren’t there yet. But in the near future I’ll show you how to encrypt your data and password protect your program. For now, this is just a useful application that will let you gain experience with panels, arrays, list boxes, binary search, sorting and more. In fact, one thing you will learn doing this application is how to analyze the problem and solve it. I’ll step you through the process of determining what you know and what you don’t know about the application. This in turn will help us discover just what it is we a missing to make this application work.
Password Keeper - Form Design
Once you have done your analysis work it’s time to design the form. The more work you did in analysis, the more complete your form is going to look. For beginning programmers this is difficult. Much of this comes with experience. Still, scratching out a picture of what your application is going to look like helps you in the programming end of things. And remember. This does not have to be perfect. As you code you can make all the changes you like. A good form design, however, will minimize the number of changes you will have to make.
In this video we are going to use the hierarchy chart to create our form in the way we think it will work best. There’s a good chance we’ll end up changing the hierarchy chart as we go through this. There’s just as good a chance that we’ll end up changing our form, as well, when we get to the programming steps.
Password Keeper - Form Load and Exit
Coding…, Programming, needs to be done logically. Think of your buttons - the Add, Search, Exit, and the others - as separate programs. In a sense they are. Each button is charged with doing a specific task. And in this video, we’ll take a look at coding Form_Load and the Exit button.
Up to now coding the Exit button has been nothing more than closing the application. Not anymore. This application uses a tab delimited text file. When the program is started the text file is read into the array. Once the text file is read, the program has multiple functions that can alter or add to the array. Consequently, the array will need to be saved every time the program is exited. What better place to do it than in the exit button itself. An automatic save.
And Form_Load needs to be looked at as well. When this application is first used there is no text file. There can’t be. We don’t know what login IDs and Passwords we’ll be saving. So, when Form_Load reaches out to open the file, first time through the file won’t exist.
That’s okay. There’s a technique we can use to handle this situation.
Password Keeper - Add Button
According to our hierarchy chart the add button takes data from the text boxes and possibly stores them the arrays. I say possibly, because we have to let the user change his or her mind once they press add. So, the add button will take us to a screen where we can cancel the operation or actually process the data that is entered.
It also says we will sort the array. Well, the data does have to be sorted but perhaps not here. Having the data in alphabetical order is more likely needed in the search function, not add. So, we will probably change our design. But that’s why we sketch things out. Sorting needs to be done but in a different area.
Watch this video and see how we can let the user decide to update or cancel what they are doing.
Password Keeper - Search Button
When we coded the Add button, we eliminated the sort. During design time it made sense but when it was time to code it made sense no more. Turns out Edit, Delete and just a simple Search all rely on the records being in sequence. It makes more sense to make the sort a part of the Search operation.
And since Search is so important it means that the record found in the search operation needs to be retained so the other operations can act on it. Delete needs to be able to delete it. Edit needs to be able to change it. So, you’ll see our global area being updated to handle that.
Key elements making up the Search function will be the sort and the binary search.
Password Keeper - Delete Button
Warning! Design change coming.
This is typical. We spent some time designing our application but when we actually start writing the code we often see things that were not apparent during the design process. What wasn’t apparent was just how useful Search would be for both the Delete and the Edit processes. We originally thought we would need to search in our delete window to find the record we needed to delete. In effect all we needed to do was save the pointer in the normal search function and make it available to both delete and edit. And by doing that the Delete process is pretty easy.
Take a look at the following video and I think you will agree.
Password Keeper - Edit Button
Editing the data is probably the easiest piece. Just like delete, the search function has already identified the record in question. When we go into edit, we simply populate the text boxes on the form with three pieces of data from the three arrays. The user can then change any or all of the text boxes. The operation can be cancelled, or the user can proceed and replace the data in the array.
Just like delete, where we place the last record into the open spot in the array, edit replaces the new data into the same array location. No problem it the data is not in alphabetical order, the next time Search is used the data is automatically sorted to its proper order.
Password Keeper - Cosmetics
It doesn’t take too much to pretty-up an application and make it attractive to the user. Usually a nice graphic or a touch of color does the trick nicely. You don’t want to go overboard on this, but you do want the application to sort of standout pleasantly.
In this video we are going to add one more panel to the form. This panel will do nothing more than hold a graphic of a small safe. Since this application holds password information a safe makes a nice cover for our application. And that’s how it will function. When the program is not in use the graphic will be the focal point. While the application is in use the graphic will disappear and not get in the way.
While it is easy to place the graphic on the form, getting it to come up when you want it to and go away when you want it to, can be a little challenging. Nothing serious, but you do have to take care when implementing this feature.
Tic-Tac-Toe Simulator - Part 1
This Tic-Tac-Toe Simulator is an excellent example of handling a 2-dimensional array. There’s the set of nested loops that populate a Tic-Tac-Toe board with X’s and O’s. In addition, we will examine the contents of each array element separately and apply either an X or an O to a matching label on a form. There is a great example of how to use Booleans effectively. Here we’ll need to interrogate the contents of the labels holding the X’s and O’s to see if we have any three in a row. This is not like the regular game here. We can have a tie! We can even have a board of all X’s.
Naturally we’ll use methods to make efficient use of our code.
The following video will set the stage for what we are going to create.
Tic-Tac-Toe Simulator - Part 2
The Tic-Tac-Toe Simulator form consists of a set of nine labels that will directly correspond to a 2-dimensional array in code. We’ll end up naming these labels with names that use the array coordinates as part of the name. This makes it tons easier when referring to the labels in code.
Other than that, this is a fairly easy form to design. Shouldn’t take long at all.
Tic-Tac-Toe Simulator - Part 3
Since we have a good design, we can just go ahead and code the New Game button. Part of that programming will consist of calls to methods that will do quite a bit of the work. We’ll also add a few things to the global area. Up there we will establish the Boolean variables and the integer array.
The key piece that will be coded here is the evaluation of the Boolean values. Either X will win, O will win, or we’ll have a tie. The tie could be that both win, or no one wins. Not exactly your standard tic-tac-toe game.
Many new programmers have a hard time dealing with Boolean values. This technique should clear it up for anyone who is having that difficulty.
Tic-Tac-Toe Simulator - Part 4
GenerateGame is the first method we will tackle. Here we use a set of nested loops and a random number generator to place either a 0 or 1 in each element of the three-by-three array.
Next, we take each of the elements in the array, check to see if the value is a zero or one and based on that value place an X or a Y in a label that corresponds to the array element. This is where the naming of our labels makes a big difference.
Tic-Tac-Toe Simulator - Part 5
This is our final method. And this one would be used in the standard game as well. Here we check each column, each row, and both diagonals for the existence of three X’s. We all check each column, each row, and both diagonals for the existence of three O’s. If we find either, we set the corresponding Boolean to true. That really all we have to do. The code to determine a winner was already coded back in the New Game button.
Caution is advised here, however. It’s easy to slip up and check up the wrong label. Easy to do.
Once you are done it’s a matter of testing the demo for all four possible conditions.
Building a 4-D Array App - Part 1
If you watched the “Multi-Dimensional Arrays” lesson, you have a pretty good idea how 3-D and 4-D arrays can be put to actual use. And very good actual use.
The lesson was simplified to an application that displays data in three rows and four columns. Looking at that, you could easily visualize a budget screen showing 30 rows and 12 columns of all kinds of assets, income, and expenses across a twelve-month period. Of course that would make the app more complicated. And that’s the problem with multi-dimensional arrays. They can get out of hand easily. And that lesson explained how to tackle the multi-dimensional array one step at a time to eliminate much of the confusion.
The following set of videos replicates that lesson by stepping you through the building of that application starting with the 2-D array that is used to display the data. Once the application is running the third and fourth dimensions are added to complete the application.
Pay attention to the hierarchy chart. It’s important that most of the methods and events are used to build the initial application. Adding 3-D and 4-D becomes a relatively easy process.
Building a 4-D Array App - Part 2
In this video we will activate the Save button. And this will give us a chance to test the load button with data that was actually saved. And in this video, you see how easy it is for a problem to occur. And they always do. It’s part of programming. But our programming errors are easily corrected when we test early and often.
Well, once the bugs are removed from our program we add the math component. A bit of testing and we’ll find that this thing is ready for the multi-dimensional pieces.
Here’s how this is done:
Building a 4-D Array App - Part 3
This is the video where it will become very obvious that preparing the app as a 2-D array makes the addition of the 3rd dimension possible. Without taking this step by step you really could have a mess on your hands.
There are a lot of minor changes to make in this program. Wherever the 2-D array was used now has to be modified to work with the 3-D array. Still this is much easier now because we have the 2-D array working. That won’t change. All we need to do is accommodate the third dimension.
This is a lot easier to view so let’s take a look at the video:
Building a 4-D Array App - Part 4
This video will complete the 4-D application. And it’ll add a few surprises as well.
Adding the fourth dimension to the array is very similar to adding the third dimension. It’s just another level of complexity to get the company piece working. But once it’s complete you have access to all the data for each company, for all ten years easily displayed on the 3 by 4 grid.
What’s also interesting is that we change up the save routine a bit, make it a method on its own, and add it to the exit button. Turns out, in the end, we have no need for the Load and Save buttons. All we need is the Grid lock and unlock buttons as well as the exit button.
Here’s how we do that:
The List Application - Part 1
Okay, let’s put this List application together.
The Anything Database (List Version) is going to be very similar to the Speed Track version of this application. And that was way before we knew anything about lists and arrays for that matter. We used a list box. And even that was something new for most of you.
The application looked something like this. There was a list box, a text entry area, a count of records and a bunch of buttons that allowed the user to add, edit, delete, load, save and so on. All those buttons were separate functions and the top-down design looked something like this.
The buttons all had work to do. In many cases methods were employed as they could be used by several of the buttons. There was no navigation employed since the list box itself allowed the user to move up and down the data at will.
The List version of this Anything Database looks cleaner as you can see. The list box is gone and it is replaced by a series of navigation buttons. The data entry area is still there. And all the usual buttons are present with the addition of the Search button. You also might notice that in addition to the record count there is also an indicator that displays the index of the current active record.
If we look at the top-down design of this application, you’ll notice that it is a little more complex. Search has been added and there is also the addition of navigation buttons. Much of the way this application works, however, is very similar to the list box version.
This next series of videos builds this application. What’s interesting is how search is implemented. Turns out it’s a very simple addition. Navigation is also straightforward and is very similar to how actual databases are navigated. In fact, back in my consulting days, I used this same navigation technique with virtually all of my clients.
Well, seeing how it is done is how we learn. So, let’s get to it.
The List Application - Part 2
This is part two of the List application.
We’re going to program the navigation buttons first. They are easy. It’s really just moving a pointer along the list. If the list index is zero, we are at the beginning of the file. Add one to the pointer and we’ve moved forward along the file. Subtract 1 from the list and we are moving backward. If we need to go directly to the end of the list, we just have to go one less from the list record count.
Now we don’t want to go beyond the bounds of the list. Less than zero or greater than the number of records would cause our program to blow up. Smoke would billow from the machine. It wouldn’t be pretty. But a simple “IF” statement can avoid that problem.
In this video you will also find that every time we launch the program, we have to re-enter the data. Well, that’s no fun. So, it’s time to code the save and load routines.
Here’s how we do it:
The List Application - Part 3
This is part three of the List application.
The Clear button gets updated.
Delete is the process of simply removing the current record.
When working with edit, the Search function is necessary, especially if you have thousands of records. You don’t want to navigate, one by one, through a long list just to edit one record. Much better to Search for the record.
And once you have activated the record you wish to edit it is a matter of deleting the current record in the position it is in and inserting its replacement. Really two steps. Smoke and mirrors. Editing is really deleting and adding.
The List Application - Part 4
This is part four of the List application.
This video covers how we make the application presentable to the user. Most of the buttons on the form cannot be used until there are actual records in the List. For example, if the user presses Edit before we load any records the application will blow up. If the user clears the List Edit and the navigation buttons should not be available to the user. How we turn these specific buttons on and off is shown to you here.
Communication with the user is also strengthened here. Every action performed by the user needs acknowledgment from the application that the action was taken. You delete a record the application needs to tell the user that the record has been deleted. We, as programmers, know this has happened, but the user may not. Communication is extremely important.
Watch: