C212 Lab 9
Hello, dear friend, you can consult us at any time if you have any questions, add WeChat: daixieit
C212 Lab 9
Objectives
● Interfaces
● Event Handling
● GUI
● Drawing
Lab Submission
Organize all java source files in one folder, compress them as a .zip file and submit the .zip file on Canvas. Alternatively, zip your project folder and submit that. Make sure that your submission has all the correct files (we suggest downloading your submission to verify). Submitting incorrect files will result in loss of grade. Note: Be sure to review the Grading Rubric available on Canvas.
Lab Instructions
This week you'll be completing a poll tracking GUI-based program, a data visualization
GUI-based program, and – optionally for extra credit – a school demographics display program.
We highly recommend referencing the lecture slides, as well as linked Java documentation pages to complete this assignment.
Work on and complete the following exercises:
1. GUI, Event Handling, and Interfaces: Poll Tracking
This part of the program involves creating a GUI window that allows users to cast a vote in a poll on a topic of your choice. For example, you could have the poll ask "What's your favorite ice cream flavor?" with options such as "Vanilla", "Chocolate", etc, which get their own dedicated buttons, and finally a text field for custom votes to be entered and cast. You only need to have two pre-made choices, but are welcome to have more.
Create a class PollTracking that will hold your main method, which runs the program for Part 1 and Part 2.
● The main method should do the following:
○ Create a JFrame
○ Give the frame appropriate dimensions (please view the example layout below)
○ Give the frame a title based on the kind of poll you are hosting.
○ Instantiate a JPanel called mainPanel that you will add to the JFrame.
○ Instantiate exactly three JPanels - votingPanel, labelPanel and createGraphPanel that you will add to the mainPanel
○ Create at least two JButtons and one JTextField. If you want you can have another button to submit the text in the JTextField and add them to the
votingPanel
■ Otherwise you will need to find a way to get the JTextField to accept the input when the Enter button is pressed.
○ Add ActionListeners for the buttons - functionality described later.
○ Create at least 3 JLabels - pollOption1Label, pollOption2Label, pollOtherLabel and add them to labelPanel.
■ These will display the number of votes for each category so far and should update in real-time.
■ The "other" label will display all Strings entered by the users who voted for a non-predefined option, as well as the number of users who voted for that same "other" String, all on one line. So, it may appear as something like "Peanut Butter: 4, Pistachio: 1, Cotton Candy: 2"
○ Create a JButton to display the graph described in Part 2. Add the JButton to createGraphPanel. Create an ActionListener for the same. When this action is performed, disable all buttons and text inputs in the original JFrame.
○ Display the frame to the user.
○ End program when user closes the JFrame.
● The class should have two ArrayLists belonging to the class it builds up over time: one for category titles as Strings, one for category vote counts as Integers.
● The class should have inner static classes Option1ButtonListener, Option2ButtonListener, … , CreateGraphButtonListener, (optionally) OptionOtherButtonListener, which all implement the ActionListener interface.
○ When the option buttons' actions are performed, the vote count in memory for that category should be incremented, and the labels on the GUI should be updated
○ When the other option button is pressed, the text in the text field should be collected, incremented in the vote totals in memory if it already exists or newly added with a value of 1 otherwise, and the text in the text field should be cleared out. The other label needs to display all the user-entered votes as well as their counts on the same line, one after the other.
○ When the create graph button is pressed, all interactions should be disabled. Then, call the display method in Part 2, as described below, with the three arguments: the title as a String and the two ArrayLists.
You need not worry about the formatting of the different panels and elements so long as all elements are clearly visible in the starting frame dimensions and not obstructing each other.
2. GUI and Drawing: Stacked Bar Chart
This part of the program involves making a program that can, given a title, category labels, and category integer counts, create a stacked bar chart to visualize that data. Notice that even though Part 1 was about vote polls, this program operates agnostically with respect to the problem domain – meaning, we could give it any data of a title, category labels, and integer category counts, and it would still display that information properly. This is important for Part 3.
Create a class StackedChartDisplay that will hold a method called display, with three parameters, to do the following:
● Create a JFrame
● Give the frame some appropriate dimensions
● Give the frame a title, which is passed in as one of the parameters
● Create a StackedChart JComponent and add it to the frame.
○ Since it has a constructor, as described below, give it the appropriate arguments: the two ArrayLists, which also come from the parameters to display
● Display the frame to the user
● Do NOT end the program when the user closes the JFrame.
Create a class StackedChart that extends JComponent. Within the class, do the following:
● Have a constructor that takes in the necessary parameters to draw the graph as described below.
● Provide a void method paintComponent(Graphics g). This method uses the Graphics object provided as its argument to draw different shapes in the JComponent, which happens automatically.
● You should draw your graph using a combination of Graphics methods in paintComponent, including but not necessarily limited to (see the links for more):
○ g .fillRect(int x, int y, int width, int height)
○ g .setColor(Color c)
○ g .drawString(String str, int x, int y)
● The StackedChart will look similar to the graphs below, and may include the following design considerations:
○ A maximum size of the bar, in pixels, should be hardcoded into the program
○ For each category, a color should be assigned to that portion of the graph
■ You only need to support 6 categories being displayed at once, and may assume that no more than 6 categories will be inputted
○ Then, you should programmatically decide the number of pixels that that category's portion of the bar should have, based on the proportion of votes for that category
○ The bar should be accompanied by lines marking percentage thresholds, such as 25%, 50%, and 75%, along with text giving these percentages
○ Off to one side, the graph should display a color legend: several small colored boxes corresponding to a category color on the graph, and the name of the category alongside them
○ You are NOT required to display the whole numbers of votes, etc. for each category, or display their percentages as text. You also do not need labels for the axes of the graph.
● You don’t need to worry about resizing the graph if the user resizes the window once the graph is drawn.
● Since the GUI window from Part 1 cannot be edited once this window is shown, it should not update once it is created.
3. Optional Extra Credit: Luddy Demographics
This part of the assignment is about creating a program which contains some demographic data on the Luddy student body and, based on what information the user wants to see, will display that demographic information using your work in Part 2. Remember that this part is optional, though of course we recommend that you attempt it to further your understanding of the course objectives from this week as well as learn about gender underrepresentation in our school. You may receive full or partial extra credit for your work here. Ultimately, if you have a good grip on the first two parts, this should end up being fairly easy to complete!
Create a class LuddyDemographics that will hold your main method, which can be used to run the program for Part 3.
● The main method should do the following:
○ Create a JFrame
○ Give the frame appropriate dimensions
○ Give the frame a title appropriate for the program
○ Instantiate a JPanel called mainPanel that you will add to the JFrame.
○ Instantiate a JComboBox, which is a kind of drop-down list, and add it to mainPanel.
■ The JComboBox should contain 7 elements: the empty string or simply the string "Choose …", "Computer Science", "Cybersecurity and Global Policy", "Data Science", "Informatics", "Intelligent Systems Engineering", and "All Undergraduate Degrees".
■ Hint: If you add "" or "Choose …" to the JComboBox first, it should be the first thing selected in the JComboBox when the program starts
○ Instantiate and add one JLabel to the mainPanel, with any reasonable name, that displays some short text telling the user how to use the program.
○ Add an ItemListener for the combo box - functionality described later.
○ Display the frame to the user.
○ End program when user closes the JFrame.
● The class should have an inner static class DegreeSelectedListener, which implements the ItemListener interface.
○ This event should be recognized and triggered when an option from the combo box is selected.
○ For all degree types in the combo box (i.e. not the empty string/"Choose …" item), the event should display an appropriate graph, similar to what you did in Parts 1 and 2, which shows the gender breakdown (categories of male and female, since that's the data we have) for that degree type.
○ It's up to you to find and implement the appropriate method from the ItemListener interface that is triggered when a new option is selected.
○ Once you find the gender demographics, you should hard-code these into the program – specifically, hard-code them as part of the event listener that displays the graph. See more on this directly below.
● The Luddy Office of Diversity and Inclusion, or LODI, publishes a yearly report on student body demographics across several identities and backgrounds. The gender data you need for this part can be found in that most recent report, which is here: (https://luddy.indiana.edu/about/diversity/student-demographics/index.html). Notice that we are only concerned here with the Female and Male percentages, not the Underrepresented percentage, and we only need to display the undergraduate statistics.
○ Since these are given as percentages and our Part 2 program needs integers, you should multiply the percentages by the enrollment for that major and round to a whole number.
Reference Images:
Another example for graph:
2022-04-07