TuneTown Lab Instructions

Transcription

1 TuneTown Lab Instructions Purpose: Practice creating a modal dialog. Incidentally, learn to use a list view control. Credit: This program was designed by Jeff Prosise and published in MSDN Magazine. However, the code there was for a beta version of.net and the code presented here has been modified to work with the current version of.net by Dr. Beeson. 1. Create a new C# Windows Application project. Name it TuneTown. Set the Text property of your form totunetown. TuneTown enables a user to organize their CD collection by displaying a list of (title, artist, comment) data items. A modal dialog allows the user to add, remove, or edit such items. 2. In the forms editor, add a list view control (available in the Toolbox under the Common Controls tab) and three push buttons. Set their properties as shown in the instructions below the picture. The picture shows what you will see after setting the properties as explained below.

2 How to set the properties: Set the Text property of the form itself to TuneTown. For the list view control: FullRowSelect to True GridLines to True View to Details Multiselect to False HideSelection to False Sorting to Ascending TabIndex to 0 (which it will be already if you added this first) Name to TuneView Columns: edit the columns collection to add three columns: one whose Name is TitleHeader, Text is Title, Width is 100. one whose Name is ArtistHeader, Text is Artist, Width is 100. one whose Name is CommentHeader, Text is Comment, Width is 200. Anchor to top, left, and bottom, but not to right For the buttons: Text is &Add, &Edit, &Remove, respectively Name is AddButton, EditButton, RemoveButton, respectively. TabIndex should be 1,2,3. Anchor to the right only Check that you can build and run. 3. In this step we ll add a modal dialog. In.NET, the word form means top-level window or dialog, so what we want to do is add a new form. From the Visual Studio menu choose Project Add Windows Form Windows Form. Don t click OK yet! Select (on the left) the category Visual C# items Windows Forms and on the right under Visual Studio Installed Templates, select Windows Form. In the Name box, type AddEditForm.cs. Now click OK. This will be your modal dialog. 4. Use the form design editor to add three labels, three text boxes, and two buttons. After setting the properties as specified below the picture, your form will look like this (the picture is on the next page).

3 Here is how to set the properties: For the labels: Text should be &Title, &Artist, &Comment respectively. Name should be TitleLabel, ArtistLabel, CommentLabel. TabIndex should be 0,2,4 respectively. For the text boxes: Text should be empty (blank). Name should be TitleBox, ArtistBox, CommentBox. TabIndex should be 1,3,5. Multiline should be False, False, True. For the OK button: Text should be OK Name should be OKButton TabIndex should be 6 DialogResult should be OK For the Cancel button: Text should be Cancel Name should be NotOKButton DialogResult should be Cancel Text should be Cancel. TabIndex should be 7 For the form itself: Text should be Add or Edit FormBorderStyle should be FixedDialog AcceptButton should be OKButton CancelButton should be NotOKButton MaximizeBox and MinimizeBox should be False ControlBox should be False ShowInTaskbar should be False

4 4. Now for the code. Open AddEditForm.cs and add the shaded code: public class AddEditForm : System.Windows.Forms.Form public string Title get return TitleBox.Text; set TitleBox.Text = value; public string Artist get return ArtistBox.Text; set ArtistBox.Text = value; public string Comment get return CommentBox.Text; set CommentBox.Text = value; This is how you define getters and setters for a public property in C#. These are called automatically when code referencing these properties is executed. 5. Scroll down a bit to InitializeComponent. Click the light-gray plus sign at the left to show the code generated by the form designer. This is the result of your work with the form designer. In principle you could have typed this code in yourself instead of using the form designer. It declares the controls, initializes their properties and the properties of the form, and calls Add on the form s Controls collection to attach those controls to the form. After inspecting this code, you can hide it again. 6. Go to the form designer window with your main form in it. Add a handler for the Add button (by double-clicking the button in the design window). Here is where we want to bring up our modal dialog. This is the plan: We instantiate our AddEditForm class, then call its ShowDialog method The return value of ShowDialog will be DialogResult.OK or DialogResult.Cancel. If the result is DialogResult.OK, then you have to change the data in your listview. Here is the code to use:

5 private void AddButton_Click (object sender, EventArgs e) AddEditForm dlg = new AddEditForm (); if (dlg.showdialog() == DialogResult.OK) ListViewItem item; item = new ListViewItem(new string[] dlg.title,dlg.artist,dlg.comment); TuneView.Items.Add(item); item.focused = true; Build your program and test it. You should be able to add data and see it in the main form. You re up to B level now. 7. Add a handler for the Edit button. Note that now we need to initialize the dialog member variables so that the data to be edited will come up in the dialog. private void EditButton_Click (object sender, EventArgs e) if (TuneView.Items.Count == 0) return; // can t edit if no items ListViewItem item = TuneView.FocusedItem; if (item!= null) AddEditForm dlg = new AddEditForm (); dlg.title = item.subitems[0].text; dlg.artist = item.subitems[1].text; dlg.comment = item.subitems[2].text; if (dlg.showdialog () == DialogResult.OK) TuneView.FocusedItem.SubItems.Clear(); TuneView.FocusedItem.Text = dlg.title; TuneView.FocusedItem.SubItems.Add(dlg.Artist); TuneView.FocusedItem.SubItems.Add(dlg.Comment); Test this button. When it works you ve earned an A. 8. For an A+, implement the Remove button without being given the code. This button is supposed to remove the focused item. If there is no focused item, it should do nothing. In that case TuneView.FocusedItem will be null. (null is a keyword in C#). Deleting an item from the list is not the same as replacing the contents with an empty string; to see the difference, be sure to test this by deleting an item which is not the bottom item in the list. The removal should not leave a blank item in the list.