14: GUIs and Testing

What We Will Cover


Illuminations

Questions from last class or the Reading?

Homework Questions?

STEM Counselor Survey

Final Boss Event Approaching

  • Final Examinations Schedule
  • Final exams must be taken at the scheduled time
  • If you need the proctoring center, schedule it two weeks early

14.1: Buttons, Labels and TextFields

Learner Outcomes

At the end of the lesson the student will be able to:

  • Write code to add buttons to scenarios
  • Write code to add labels to scenarios
  • Write code to add text fields to scenarios
  • Write code that responds to action events

14.1.1: Adding GUI Components to Scenarios

  • A Graphical User Interface (GUI) allows users to interact with a program through graphical icons and other visual indicators
  • GUI components, like buttons and text fields, are typical in a GUI system
  • Java provides GUI components through libraries for buttons and text fields
  • However, we cannot directly display these GUI components in a Greenfoot scenario window
  • Instead, we would have to create a separate GUI window which is cumbersome
  • To get around this limitation, your instructor created a GUI library that runs in Greenfoot Click for link

Introducing GreenGUI

  • The Green GUI scenario shows how to fully utilize buttons and labels
  • Notice the rollover and pressed effects on the buttons
  • Also, notice how we can ask the user for information

GUI Organization

  • Each component is in its own class:
    • Button: Constructs and handles buttons
    • Label: Constructs and handles text labels
  • The user input text field is from the ask() method of the Greenfoot class
  • The button and label components allows many options like changing font sizes, foreground and background colors, and changing the text
  • The GUIWorld class has many examples of how to install the components
  • The ButtonChecker class shows examples of how to use the various features
  • We will look at how to use individual components in the following sections

Exercise: Install the GUI Components (3m)

  1. Download the Green GUI scenario and save it to a convenient location like the Desktop and then double-click to open the gfar file.

    Scenario file: GreenGUI.gfar

  2. Use your existing platform code unless you had problems.

    If you had problems then download the following scenario file, save it to a convenient location like the Desktop, and double-click to open the gfar file.

    Scenario file: platformer7.gfar

  3. Copy the images from the Green GUI scenario to the Platformer scenario's images folder.

    You may skip copying the person.png image file.

  4. Next copy the following source code files from the GreenGUI scenario to the Platformer scenario:
    • Button.java
    • Label.java

    If you have problems, ask a classmate or the instructor for help as needed.

  5. If the Platformer scenario is running, then exit the scenario.
  6. Start (or restart) the Platformer scenario and compile it to verify you copied the component classes correctly.

    If you have problems, ask a classmate or the instructor for help as needed.

  7. In addition, verify the Button and Label classes appear underneath Actor.
  8. Be prepared to answer the following Check Yourself questions when called upon.

Check Yourself

  1. GUI stands for G________ U________ I________.
  2. True or false: we cannot add Java's GUI components to a scenario's window.
  3. Of the following, ________ is not a component provided by GUI World.
    1. Button
    2. Dialog
    3. Label
    4. TextField
  4. True or false: to use a GUI component (like Button) we must include all the component files (like Label) in our scenario.

14.1.2: Creating a Label Component

  • A Label is an Actor with an image containing text that we may add to a scenario
  • To construct a label we must include the Label class in our scenario

Constructing a Label

  • To create a label, we write code like the following:
    Label myLabel = new Label("Some text");
    
  • To add the label to a scenario, we use the addObject() method of World
  • For example:
    addObject(myLabel, 115, 50);
    
  • As we can see below, Label has several constructors and methods that let us choose how the label looks
  • For instance, if we want a label with larger blue text we write:
    Label colorful = new Label("Some text", 24, Color.BLUE);
    addObject(label, x, y);
    
  • We can see the list of constructors in the following table

Constructors and Methods of the Label Class

Constructor Description
Label() Constructs a label with a default message and settings.
Label(textString) Constructs a label with the specified text using default settings.
Label(textString, textSize) Constructs a label with black text of the specified text size on a clear background.
Label(textString, textSize, colorObj) Constructs a label of the specified size and text color on a clear background.
Label(textString, textSize, textColorObj, bgColorObj) Constructs a label with text of the specified size and color on a background of the specified color.
String getText() Returns the text for this label.
void setText(textString) Sets the text to be displayed.
void setBackgroundColor(colorObj) Sets a new background color for this button.

Getting and Setting Text

  • We may construct a Label with specified text like:
    Label label = new Label("Label 24", 24);
    
  • To change the text we set new text using code like:
    label.setText(answer);
    
  • We can retrieve the current text of a label using getText() like:
    String text = label2.getText();
    System.out.println(text);
    
  • Using getText() may be useful when trying to find a specific label:
    String answer = "42";
    List<Label> labels = getWorld().getObjects(Label.class);
    for (Label label : labels)
    {
        if (label.getText().equals("Label"))
        {
            label.setText(answer);
        }
    }
    

Setting a Background Color

  • The default background color for a Label object is clear (transparent)
  • We may change the background color to a new color by calling setBackgroundColor() like:
    label.setBackgroundColor(Color.GREEN);
    

Mutliple-Line Labels

  • We can specify labels with multiple lines of text
  • To manually break lines, we use the "\n" character
  • For example, this code creates a three-line label:
    Label label = new Label("Lines\nwrapped\nwith \\n");
    
    That looks like this:

    Multiple line label

  • Notice how we are printing a "\n" character by escaping the "\n" with an extra "\"
  • The backslash is known as an escape character

Exercise: Make a Label (5m)

  1. Start Greenfoot and open the platformer scenario from the last exercise.

    If you did not keep the scenario, then complete Exercise: Install the GUI Components now and then continue with these instructions.

  2. Open the editor for the starting world (like Map1).
  3. Add the following Label object to the world at the end of the constructor.
    Label label = new Label("Exit \u2192", 18, Color.BLUE);
    addObject(label, 400, 50);
    

    Note that \u2192 is a right arrow in unicode.

  4. Compile the scenario to see the label.

    Experiment with different label possibilities by making changes to the text, text size, and colors.

  5. Save your updated scenario as we will be adding to it as the lesson continues.
  6. Be prepared to answer the following Check Yourself questions when called upon.

Check Yourself

  1. Enter the code to construct a Label object with the text, "Java rules!" in a red color.

    (an answer)

  2. To add a label object to a scenario, call the ________ method of the World class.
  3. True or false: we may construct a text image with GreenfootImage, but we always need a Label or other Actor object to add the image to a scenario.
  4. To cause a new line in the text of a label use the character sequence ________.
    1. ln
    2. \n
    3. \r
    4. newLine

14.1.3: Creating a Button Component

  • A Button is a GUI component that responds to mouse clicks
  • To construct a button we must include the Button class in our scenario

Buttons States

  • A button has three different images it presents depending on the mouse
  • The following are the images for the default Style.RECTANGLE:

    Button up Button hover Button down
    Button up Button hover Button down

  • To make use of these images, we place them in our scenario's images folder

Constructing a Button

  • To create a Button, we write code like:
    Button button = new Button("Click me");
    
  • To add the button to a scenario, we use the addObject() method of World
  • For example:
    addObject(button, 350, 50);
    
  • As we can see below, Button has several constructors and methods that let us choose how the button looks
  • For instance, if we want a button with larger blue text we write:
    Button btn = new Button("Click me", 24, Color.BLUE);
    addObject(btn, x, y);
    
  • Look at the list of constructors and methods in the following tables

Constructors of the Button Class

Constructor Description
Button() Constructs a button with no set text or image.
Button(textString) Constructs a button with the specified text using default settings.
Button(textString, textSize) Constructs a button with black text of the specified text size.
Button(textString, textSize, textColorObj) Constructs a button of the specified size and text color.
Button(textString, textSize, textColorObj, style) Constructs a button with text of the specified size and color on a button object of the specified style.

Some Commonly Used Methods of the Button Class

Method Description
String getText() Returns the text for this button.
void setText(textString) Sets the text to be displayed.
void setBackgroundColor(colorObj) Sets a new background color for this button.
boolean isPressed() Returns true if this button is currently down (pressed), otherwise returns false.
int getID() Gets the identifier number of the component.
void setID(idNumber) Sets the identifier number of the component.

Button Methods

  • The Button class methods work like the Label methods of the same name
  • However, the button has a few extra methods that the label does not
  • For example, isPressed() tests if the button is currently down (pressed)
  • We call the isPressed() method to see if we need to respond to a button press
    if (button.isPressed())
    {
        // do something
    }
    
  • We may use the getID() and setID() methods to identify a particular button in the scenario
  • By calling setID(), we can set a unique id number
    button.setID(42);
    
  • Later, we may test the id number to see if it is the button we are looking for
    if (button.getID() == 42)
    {
        // do something with this button
    }
    

Button Styles

  • The current styles supported by the Button class are: RECTANGLE, ROUNDED, CIRCLE
  • Thus there are nine images needed to use the Button class
  • To select a style write: Style.X, where X is one of the styles
  • For example, to select the ROUNDED style write the code:
    Style.ROUNDED
    

Exercise: Make a Button (5m)

  1. Continue with the scenario from the last exercise.

    If you did not keep the scenario, then complete Exercise: Make a Label now and then continue with these instructions.

  2. Open the editor for the starting world (like Map1) and add the following instance variables to the class:
    private Button button;
    
  3. Locate the constructor and add the following code at the end of the constructor:
    button = new Button("Choose level");
    addObject(button, 85, 28);
    
  4. Compile and run the scenario to see the button.

    Notice how the button changes when the mouse moves over it and when pressed.

  5. Experiment with different button options by making changes to the style, text and colors.
  6. Add the following act() method to the starting world (like Map1).
    public void act()
    {
        if (button.isPressed())
        {
            System.out.println(button);
        }
    }
    
  7. Test your act() method by running the scenario and pressing the button.

    Each button click will show a message in the terminal window.

  8. Save your updated scenario as we will be adding to it as the lesson continues.
  9. Be prepared to answer the following Check Yourself questions when called upon.

Check Yourself

  1. True or false: we can adjust the way a button looks using the same options as a label.
  2. Enter the code to create a button with the text, "Click for Java".

    (an answer)

  3. The visual states of a button press are ________.
    1. 1
    2. 2
    3. 3
    4. 4

14.1.4: Collecting Player Input as Text

  • The Greenfoot class has a method named ask() that collects player input:
    String ask(String prompt)
    
  • The method freezes the scenario and asks the user for a value
  • For example if we wrote the following code in an act() method:
    String map = Greenfoot.ask("Enter the name of the map:");
    
    we would see at the bottom of the world:

    ask method call

  • Once the user types in a value and presses the Enter key, the scenario resumes
  • We will explore how to use this technique in the following exercise

Exercise 14.1: Changing Worlds (8m)

In this exercise, we add world selection to the platformer scenario.

Specifications

  1. Make sure you have already completed the following exercises from this lesson:
  2. Open the editor for the starting world (like Map1) and locate the act() method added in the last exercise
    public void act()
    {
        if (button.isPressed())
        {
            System.out.println(button);
        }
    }
    
  3. Replace System.out.println(button); with the following statements shown in bold.
    public void act()
    {
        if (button.isPressed())
        {
            String map = Greenfoot.ask("Enter the name of the map:");
            System.out.println(map);
        }
    }
    
  4. Test your code by running the scenario, pressing the button, typing in text and pressing the Enter key.

    Notice that the information typed by the user in the text box is displayed in the Terminal window.

  5. We now want to let the user enter a map to read from a file. Replace System.out.println(map); with the following statements shown in bold.
    public void act()
    {
        if (button.isPressed())
        {
            String map = Greenfoot.ask("Enter the name of the map:");
            if (map.contains("map1"))
            {
                Greenfoot.setWorld(new Map1());
            }
            else if (map.contains("map2"))
            {
                Greenfoot.setWorld(new Map2());
            }
        }
    }
    
  6. Test your code by running the scenario, pressing the button, typing in the other map file: map2.txt

    The scenario should load a new map. If you have problems, please ask a classmate or the instructor for help.

  7. Save your platformer7 scenario to submit to Canvas as part of the Final Lab.

As time permits, read the following sections and be prepared to answer the Check Yourself questions in the section: 14.1.5: Review.

14.1.5: Review

  • A Graphical User Interface (GUI) allows users to interact with a program through graphical icons and other visual indicators
  • GUI components, like buttons and text fields, are typical in a GUI system
  • Java provides GUI components through libraries for buttons and text fields
  • However, we cannot directly display these GUI components in a Greenfoot scenario window
  • To add a GUI, your instructor created a GUI library for Greenfoot
  • Each component has its own class:
    • Button: Constructs and handles buttons
    • Label: Constructs and handles text labels
  • To use any component, we must include the class for the component
  • The GUIWorld class has many examples of how to use the various features

    Scenario file: GreenGUI.gfar.

  • For instructions on installing GUI Components into a scenario, see Exercise: Install the GUI Components

Constructing Label's

  • A label is an image with text that we can add to a scenario
  • To create a label, we write code like the following:
    Label myLabel = new Label("Some text");
    
  • To add the label to a scenario, we use the addObject() method of World like:
    addObject(myLabel, x, y);
    
  • We can construct labels with various settings as described in section 14.1.2: Creating a Label Component

Creating Button's

  • A button is a GUI component that responds to mouse clicks
  • To create a Button, we write code like:
    Button btn = new Button("Click me");
    
  • To add the button to a scenario, we use the addObject() method of World like:
    addObject(btn, x, y);
    
  • We can construct buttons with various settings as described in section 14.1.3: Creating a Button Component
  • To detect button presses we call the isPressed() method of the Button class.

Creating TextField's

  • A text field is a GUI component that allows the user to enter a single line of text
  • Text input is provided by Greenfoot.ask()

Answer these questions to check your understanding. You can find more information by following the links after the question.

  1. GUI stands for G___________ U_________ I___________. (14.1.1)
  2. True or false: we cannot add Java's GUI components to a scenario's window. (14.1.1)
  3. What are two GUI components provided by GUI World? (14.1.1)
  4. True or false: to use a GUI component (like Button) we must include all the component files (like Label) in our scenario. (14.1.1)
  5. Write a statement to create a label with the text, "Java rules!" in a red color. (14.1.2)
  6. Write the code to construct a label with the text, "Java rules!", in a large blue font color on a yellow background. (14.1.2)
  7. What special character sequence will cause a new line in the text of a label? (14.1.2)
  8. True or false: we can adjust the way a button looks using the same options as a label. (14.1.3)
  9. Write code to create a button with the text, "Click for Java". (14.1.3)
  10. Write the code to ask the player for their name. (14.1.4)

14.2: User Testing

Learner Outcomes

At the end of the lesson the student will be able to:

  • Provide feedback on other student' scenarios
  • Review feedback on your own scenario

14.2.1: About User Testing

  • The user-testable prototype is a complete and useable scenario
  • Some final touches, like opening screens, may be absent
  • However, the scenario is playable and testable
  • During testing, we have the opportunity to provide the developers with important feedback
  • With the feedback, they can improve the quality of the scenario before submitting the final project

User-Testable Prototype Developer Instructions

  1. Load your guild's project prototype onto at least three classroom computers
  2. Be prepared to let other students come and test your project
  3. Place written instructions next to each computer
  4. Open a browser with a link to the online form (see below)
  5. After the testing session is complete, view the feedback online (see below)

Testing the Scenario

  • Do not discuss the game with a developer until after your play testing is complete.
  • Read the instructions for the game and then play the game through at least once.
  • Fill out the online form to record your observations (see below).
  • Make certain to correctly spell both your avatar name and the guild name to ensure credit.
  • Also make sure the instructor knows your avatar name

Instructor Evaluation of Project

  • During user testing, the instructor will also be evaluating projects
  • Because time is tight, please come and demo your project if your name is called
  • The instructor must see your subsystem in action to assign a score
  • Instructor feedback will be reported in Canvas

14.2.2: Steer Clear of the Dark Path

  • Even if you enjoy talking trash with friends, do not indulge during the review
  • Avoid ridicule or dismissive language
    • NO: "The feeling was Meh. The ball of light was uninspiring."
    • NO: "I can't see around that ridiculous ball of puke-colored light."
    • YES: "The concept is good but the light around this character obstructs the view and is an unpleasant shade of yellow."
  • Do not use irony and sarcasm
    • NO: "The art for that makes me want to gouge out my eyes."
    • NO: "I'm so amazed by that effect, I just want to quit my job and worship the developer."
    • NO: "The fire effect is super impressive. It's the most amazing fire I've ever seen. Really."
    • YES: "The fire effect is good but would be more impressive if it was larger and if it shimmered more."
  • Do not make it personal
    • NO: "If you can't see how this isn't fun, then you're stupid."
    • YES: "The scenario would be more enjoyable if I did not die every time I started."
    • NO: "Whoever coded this [particular feature] deserves to fail."
    • YES: "The player takes off like a rocket when falling and then dies."
  • The NO comments like those above may see funny, but hurting others is never funny
  • Treat scenario creators with courtesy and respect
  • We will explore how to give constructive feedback in the next section

14.2.3: How to Give Constructive Scenario Feedback

  • The goal of reviewing a student's scenario is to help them improve
  • While they may want to improve, people are generally sensitive to criticism
  • We want to phrase our feedback so that it is valued by the recipient
  • Here are some suggestions on how to give constructive scenario feedback

Review as you want to be reviewed

  • Most people want the same thing: to have people enjoy their scenarios
  • Make sure your feedback is courteous and thoughtful
  • Review other scenarios as you would want other people to review your scenario
  • Avoid antisocial comments

Bundle suggestions with compliments

  • Overall, give at least as much positive feedback as you do negative
  • Start with a positive observation before offering a criticism
  • Make sure you follow criticism with a suggested solution
  • After the solution, offer a positive observation again
  • The courtesy of placing some praise before and after a suggestion for improvement makes receiving the criticism easier to take

Be specific

  • Describe specifically what you have observed
  • Where in the scenario did you observe something and what were you doing?
  • For example, "I was playing _____ and I tried _____ when ____ happened."
  • Describe how you reacted to what you observed

Put the feedback in perspective

  • Describe whether your criticism or suggestion is major or minor
  • When you are sending a message, make sure the tone of your words is appropriate

Starter Phrases for Giving Feedback

  • "I thought you did a good job with/of _____."
  • "One area I thought could be improved was _____."
  • "The core mechanic was _____. It made it fun to _____."
  • "The visual design was _____ and it made me think/feel _____."
  • "I was playing _____ and I tried _____ when ____ happened."

14.2.4: Forms and Feedback Results

Reading Feedback

  • Determine whether the comment is legitimate. Don't waste time if the comment is just to bully or offend you.
  • Pick out useful information. If someone is alerting you to a problem with your scenario that you were not aware of, then read it carefully.
  • Decide which points you agree with. Think about whether your scenario would be better if you followed the reviewer's advice. Your scenario may be better left unchanged.
  • Keep track of aspects you want to fix.
  • Think about what you are doing right.
  • Take note of highly praised concepts or techniques that should be extended or repeated.

Wrap Up

Due Next:
Lab 14: Final Lab (12/3/19)
Q14: Final Project (12/5/19)
  • When class is over, please shut down your computer
  • You may complete unfinished lesson exercises at any time before the due date.
Last Updated: November 25 2019 @21:51:09