Instructions for Crossword Assignment CS130 Purposes: Implement a keyboard interface. 1. The program you will build is meant to assist a person in preparing a crossword puzzle for publication. You have to already know what words you want to put in the crossword; this program helps you to make it look right for printing in the newspaper. Call your program Crossword and make the text in the title bar be Crossword. Here s a screenshot of the finished program (after the keyboard interface has been implemented and user has used the program):
The first few steps have already been done in a previous lab. Some typos in the lab instructions have been fixed here. 2. Start by choosing Project Add Windows Form and add a new User Control. Call it CrosswordControl. The reason for doing this is the same as in the Sudoku example discussed in the notes. All the keyboard interface will be in this control. Declare these variables in your class. Point m_focus; // keep track of which square has the focus m_focus.x = m_focus.y = -1; // no square has the focus int m_nrows = 6, m_ncolumns = 6; You will have to make the constructor of CrosswordControl take two integers, like this: public CrosswordControl(int rows, int columns) 3. Put one CrosswordControl object into your Form1. If it shows up in your Toolbox you can drag it onto your form. It doesn t seem to reliably show up in the Toolbox thought. If it does not, you can do it very simply by writing some code in your Form1 class: CrosswordControl m_thepuzzle; public Form1() { InitializeComponent(); m_thepuzzle = new CrosswordControl(m_nRows,m_nColumns); m_thepuzzle.location = new Point(10, 10); this.controls.add(m_thepuzzle); } Generally if any entry has the focus, it will be entries[m_focus.x,m_focus.y]. A Point variable is just a convenient way to store a pair of integers, it doesn t have to represent a geometric point. You can compile and run, but of course won t see anything special yet, as we didn t put in any code. 4. The first thing a puzzle designer will need to decide is the number of rows and columns in the puzzle. So we need a menu, with a Puzzle entry on the menu bar, and a Size entry under Puzzle. When the user chooses Size, it brings up a modal dialog that lets them choose the number of rows and columns. That data will be kept in two integer variables m_nrows and m_ncolumns, which are defined in the Form1 class. (It took me nine minutes to design and implement that dialog you should be able to do it in that time too!) Use masked text boxes, that can accept at most two digits. Don t bother to implement the Validating event to force the numbers to be positive. Here s a screen shot of the dialog.
Even though your dialog is correctly implemented, you can t see that the data is coming back correctly, because we haven t put any code in the Paint event in the CrosswordControl class. Before we do that we have to think about the data structures required. 5. We are going to invent a class Entry to represent one square of a crossword puzzle, and then use a double array of Entry to represent the puzzle. Remember how to add a class: Project Add Class. The following is the code I used to define the class, in the file that Visual Studio created for me: class Entry { public String data = ""; // the letter in that square public String number = ""; // some squares have a small number // in the upper left public Rectangle r; // where to draw this entry Color background = Color.White; // Black for square where // no letter can go. Color outline = Color.Gray; Boolean visible = true; // false for squares that are not in // the puzzle at all Font f = new Font("Times New Roman", 20); // font to use Boolean focus = false; // true if this entry has keyboard focus Color focuscolor = Color.Gold; // show when this has the focus } The constructor of Entry takes a Rectangle and sets r equal to the rectangle passed in. 6. Now finally we re ready to put some code in the CrosswordControl class. It will need a double array of Entry and a constructor that initializes that array using the two
variables passed in. You also need to keep the number of rows and columns in that class as well as in Form1: Entry[,] entries; int nrows, ncolumns; public CrosswordControl(int rows, int columns) { nrows = rows; ncolumns = columns; static maxcolumns = 60; static maxrows = 60; InitializeComponent(); // Here add code to initialize the entries array // Always make the puzzle maxcolumns by maxrows, // not just ncolumns by nrows, as the use may increase // the size. // you need to call new Entry passing an appropriate // rectangle so the rectangles form a grid. } 7. Now add a method to the Entry class to draw an entry. Start with void draw(graphics g) and add code that fits the following comments: // create a pen in the outline color // create a brush in the background color // fill the rectangle using the background brush // outline the rectangle with the outline color, if focus == false, // or in focuscolor, if focus == true; // you can fill instead of outline to show focus if you prefer. // write the data string in the rectangle with a black brush 8. In CrosswordControl. Put code in the Paint handler to loop through the entries array and have each entries[i,j] draw itself using the method you wrote in the previous step. You should get an empty puzzle with no numbers, no black squares, something like this :
10. Add a MouseDown handler, and make it find out if the user clicked in one of the rectangles of the entries and if so, set the focus of that entry to true, and set m_focus appropriately. But before you change m_focus, you have to check if its X field was non-negative, and if so, that means some entry had the focus before, so you have to set the focus field of that entry back to false, and invalidate its rectangle. So now when you click on an entry, it should be outlined in gold. (This is a lot like what you did in the Pterodactyl program to check for a red word.) Now this program is prepared for adding a keyboard interface. The rest of the instructions tell how to do that. 11. Add a KeyPress handler. Follow the example in the Sudoku program, but in that program, we were only typing in digits. Now we are allowing the user to type in letters, either upper case or lower case, but not digits or other characters, except that we do accept the blank character (so that you can erase a character by typing the space bar). If you modify your Entry.draw code by adding a StringFormat, setting the properties of it correctly, and then using it in DrawString, the letters the user types will come out centered in the rectangles, as shown below. (Be sure to put the DrawString call after the background fill when the entry has focus, so the fill doesn t overwrite the letter.) To type, though, at this point you have to click with the mouse on each square before you can type in that square. The screen shot is from an early version that used an outline rather than a fill to show the focus as you can see, it s too hard to see which square has the focus if you only use an outline.
12. In preparation for making the arrow keys work, we need to be able to capture those key events. As discussed in the course notes, that is done by this line of code: protected override bool IsInputKey( Keys keydata) { return true;} 13. Add a KeyDown handler in your CrosswordControl class. Imitate the code used in the Sudoku example to handle the arrow keys. When you have it working, you should be able to use the arrow keys to change the focus from one square to the next one left, right, up, or down, and also the arrow keys should wrap around from top to bottom, left to right, etc. That is, when you go off the the board to the right you come back on at the left, etc. 14. Now give the user the ability to turn a square completely black, by pressing the Del key when that square has the focus. To do that, just set the entry s background color to black. You might need to make background public in your Entry class to do that. A user might want to undo such a change, so make the Ins key turn the background white. 15. Now we re ready for the tiny numbers that appear in the upper left of some squares of a puzzle. I added another variable numbercolor to my Entry class because I thought it would be cool to have the numbers in red. Then I just used an Arial 10 point font and
wrote the numbers in the entry s rectangle without any special formatting they came out in the upper left looking fine. But of course, you can t see them until after the next step. 16. Since numbers can t be typed in as puzzle entries, we can just accept numerical key values as being intended for the number field. But there s a problem because these numbers can be two digits; you can have 17 across or 33 down in a crossword puzzle. So we need to accept one or two digit keys. The third key press, if any, is interpreted as meaning that the first two were not what is wanted, and should be discarded, i.e. the user is starting over on the number. Thus, if we get key presses 173, the result should be the same as if we just got 3. Here we are talking about key presses received without a change of focus. If the user types 17 in one square and then goes to another square and types 3, of course the 17 should not be affected. Modify the code that receives letters to also accept numbers, but instead of setting data as you do with letters, set the string number in the Entry class. The trick is to decide whether to replace the old number or to append the new digit to the end of the existing number. No doubt there are lots of ways to do that; here s one. You could add a new variable in the Entry class, say Boolean freshfocus. Set it to true when that square first gets the focus (i.e. when you set focus). Set it to false when you get a digit while it s true. Set it to true when you get a digit while it s false. When it s false and you get a digit, append that digit to number, and when it s true and you get a digit, replace number. On the next page is a screen shot of the final program in use. You can see it would have been better to have used 16 point Times New Roman instead of 18 point, as my numbers slightly overlap the letters. But I was too lazy to make this big crossword puzzle again. Grading: A: All features described above working is an A. (The A+ level is described below.) B: All features working, except for some problems with entering numbers. C+: Can use the mouse and arrow keys to change the focus and can type in characters as required, and Ins and Del work as specified. C: Can use the mouse and arrow keys to change the focus and can type in characters as required. If you use this program you ll soon think of improvements; for example, having the focus automatically shift to the right after you type a character. That is the A+ level on this assignment. (It does not have to wrap around.) Yet another improvement (not required for the A+) would be to have the focus shift down if you have just typed two letters in a row vertically. Also, we never used the visible field; that was intended to permit making puzzles that are not necessarily rectangular in shape; in other words some of the entries just don t appear, which is different from being blacked out.