Fifth GUI – Solo Version

Fifth GUI – Solo Version.

Suggested Pace

  • Commit “model” to your branch – April 20
  • Commit “view” to your branch – April 22
  • Commit “controller” to your branch – April 24
  • Bug testing and final submit – April 27 (This is well ahead of the actual due date – especially if you choose this as the base for your final project.

Objectives

After this assignment, the student will be able to

  1. Understand the MVC (model-view-controller) concept in UI design
  2. Implement an MVC application using knowledge gained in this (and previous) classes
  3. Create a new window in WPF

This version will be much easier than the Pair version, because it will not require merging two different branches together. While there will be a Pitching button, you will not need to implement that functionality.

If you have questions at any time, don’t hesitate to send me an e-mail or stop by my virtual office.

Forking the base repository

Follow the instructions for forking the repository as in previous GUI assignments but use the following link to create and join a team with just you on it.

After cloning and opening the solution, you should be able to run the program immediately. You will be able to see a user interface with four buttons, Batting, Pitching, Managing, and Quit. I finished part of Managing, and Quit works, but it’ll be your job to develop the batting user interface.

When loading the project, you may notice that the solution is called SeventhGUI. We’re doing fewer GUI assignments this semester than last semester, because of COVID-19. Don’t worry about the numbering.

When loading the project, you may notice that the solution is called SeventhGUI. We’re doing fewer GUI assignments this semester than last semester, because of COVID-19. Don’t worry about the numbering.

Before we continue, some definitions are in order. A “model” is a class that is used to store information that will be displayed on a user interface. The “view” is the user interface itself, while the “controller” is a program that controls information flowing between the model and the view. We will be creating all three for this assignment.

Add a Batter Model

Create a new class called Batter in the “models” folder that will store batter information.

  1. Create four instance variables that are inaccessible to other classes:
    — id – a string
    — firstName – a string

— lastName – a string
— battingAverage – a double

  1. Create 4 properties that will allow other classes to read, but not write to these instance variables.
  2. For the BattingAverage property, return a string that displays the battingAverage with 3 numbers after the decimal point.
  3. Create a constructor that takes 5 arguments – playerID (a string) firstName (a string), lastName (a string), hits (an unsigned integer) and at bats (an unsigned integer). In the constructor, you should calculate the batting average and store it into the appropriate variable.
  4.  — The batting average is calculated in the following way:
          — Batting Average = Total number of hits divided by the total number of at bats
  5. Create a ToString method that will display the player’s first name, a space, then their last name.

You can look at the “Manager” class in the models folder if you don’t recall how to do this but try to do it by memory first – you won’t always have a nice template to work from!

Commit and push your changes before moving on to the next step – creating the view.

Creating the Batting View

First, you need to create a new window. Perform the following steps:

  1. Right click on your project (SeventhGUI) in the Solution Explorer.
  2. Select Add | New Item
  3. Select WPF from the left-hand side and Window on the right-hand side
  4. Change the name of the window – Call it BattingUI.xaml

After creating the window, you should have access to the XAML file. In that file, create a gridded view that is 300 pixels wide by 300 pixels tall. The title should be ‘Lifetime Batting Average’. There should be 6 rows in the grid. The first two rows should be exactly 24 pixels tall, the 3rd, 5th, and 6th rows should be set to be automatically sized based on their content, and the 4th row should take up all the rest of the available space. There should be two columns in the grid. The first column should take up 1/3 of the available area, and the second column should take up the rest of the available area.

See the screenshot below for the actual contents. There are buttons on rows 3, 5, and 6, there are labels in the first column of rows 1 and 2, and textboxes in the second column of rows 1 and 2. Row 4 contains a ListBox.

You can use the Manager.xaml as a model but try to create it from scratch to solidify your understanding.

Commit and push your changes before moving on to the next step – creating the controller.

Creating the Batting Controller

Finally, we need to create the controller – which will use the model to interact directly with the view.

In BattingUI.xaml

  1. Add an event listener attached to the search button called SearchButtonClick. You can do this by double clicking on the Search button in the XAML Designer view. (Create the other event listeners by doing the same)
  2. Add an event listener attached to the get batting average button called GetBattingAverageButtonClick
  3. Add an event listener attached to the go back button called BackButtonClick

Open BattingUI.xaml.cs (i.e. the controller) and do the following:

  1. Create a new instance variable called batterList. It should be a list of Batter objects (NOT a list of strings, like in the previous assignment.
     — The Batter class is in a different namespace, so you’ll need to include it.
  2. Initialize the instance variable in the constructor.
  3. Copy the SearchButtonClick, BackButtonClick, SearchSQLString, and ExecuteSQL methods from Manager.xaml.cs and put them into the file.
  4. Create a new PopulateList method based on the PopulateList method in Manager.xaml.cs, but use Batter objects instead of Manager objects
  5. Add code to the GetBattingAverageButtonClick method using the Manager GetWinningPercentageButtonClick as a reference. Read the TODO comments carefully for hints. You should rename some of the variables and fix some of the error message boxes in this method as well.
  6. Try to compile the program at this point and fix any bugs that appear.
  7. Modify the SearchButtonClick method to create new Batter objects and add them to the batterList you created (See the TODO comment).
  8. Modify the SearchSQLString method (see the TODO comment) to create an SQL query that returns the following:
    “Write an SQL query to display information about Batters. The query should display the player’s playerID, the player’s first name, the player’s last name, the number of hits the player hit throughout their entire career and the number of at bats the player had throughout their career. See the following web page for a description of the fields in the Master and Batting table: http://www.seanlahman.com/files/database/readme2012.txtAlso, the query should use the first name and last name the player entered, but as a search string where, if they type the first few letters, it will return all players that start with those letters.
  9. To test your functionality, if you search for Kirby Puckett, he should show a batting average of 0.318. You should also be able to use K as the first name and P as the last name and see a list of players, not just Kirby Puckett.

BONUS: When hitting Enter, the search function automatically executes. I’m not going to give you instructions on how to do it, but the information is out there. This is a slightly better user interface than just forcing the user to click.

BONUS 2: The user should be able to start typing immediately upon opening the window, rather than needing to tab to the first text box. Again, this is a better UI choice than forcing the user to click.

Commit and push your changes. All that’s left is submitting to Blackboard

Submitting to Blackboard

That’s it for this one! Go into Blackboard under Assignments. Click the FifthGUI link. Type in your GitHub username, so I can match your contributions with the repositories. Congratulations on creating your first MVC application!

The post Fifth GUI – Solo Version appeared first on My Assignment Online.

Fifth GUI – Solo Version

Posted in Uncategorized