- Forward


Creating "Nifty" Assignments for Java Programming Courses
and a Discussion of the Necessary Aspects of Java


Prof. David Bernstein
James Madison University

Computer Science Department
bernstdh@jmu.edu

Print

Purpose
Back SMYC Forward
  • Foundation/Background:
    • Some aspects of Java that you may not be familiar with
  • Application:
    • Using these aspects of Java to create "nifty" (i.e., engaging) programming assignments
A Quick Look Ahead
Back SMYC Forward
  • Foundation/Background:
    • The basics of GUI programming
    • The basics of 2-D graphics programming
    • The basics of animation
  • Application:
    • An assignment using arithmetic operators and functions to create an automobile dashboard (GUI)
    • An assignment using iteration to calculate wind-chill factors and display them on a map (Graphics)
    • An assignment using recursion to explore a building (Animation)
Part 1
Back SMYC Forward

Graphical User Interfaces

The Building Blocks of GUIs
Back SMYC Forward
  • Components/Widgets:
    • The parts of a GUI (e.g., buttons, sliders, text fields)
  • Containers:
    • "Screen real estate" that contains components/widgets
Some Top-Level Containers (i.e., Realizations of JRootPaneContainer )
Back SMYC Forward
  • JFrame :
    • A main "window" most commonly used by an application
  • JApplet :
    • Most commonly a portion of a WWW page (displayed in a browser)
Creating a JFrame
Back SMYC Forward
javaexamples/gui/JFrameDriver.java
 
Working with Top-Level Containers
Back SMYC Forward
  • The JRootPane :
    • JRootPaneContainer objects have a JRootPane that manages layers (if any), menus (if any), and content
    • Should not be used
  • The Content Pane:
    • A JRootPane has a Container called the content pane that manages all of the usable "screen real estate"
    • Accessed using the getContentPane() method
Some GUI Components
Back SMYC Forward
  • JButton :
    • button_windows
  • JCheckBox /JRadioButton :
    • radiobutton_windows
  • JTextField /JTextArea :
    • textfield_windows
  • JComboBox :
    • combobox_windows
  • JSlider :
    • slider_windows
GUI Layout
Back SMYC Forward
  • Organizing GUI components
  • Grouping GUI components
  • Positioning GUI components
Absolute Layout
Back SMYC Forward

The "Graph Paper" Approach

layout_absolute1
Absolute Layout in Java
Back SMYC Forward

The null LayoutManager

javaexamples/layout/NullLayoutFrame.java
 
An Example of a "Nifty" Assignment
Back SMYC Forward
  • The Important Concepts:
    • Simple arithmetic operators
    • Functions (i.e., static methods)
    • Integer arithmetic
  • The Setting - A Dashboard for U.S. Cars in Europe:
    • Convert the measured speed (in mi/hr) to km/hr
    • Convert the trip distance (in ft) to mi,ft and km
    • Convert the trip distance (in ft) and duration (in hr) to average trip speeds (in mi/hr and km/hr)
  • Making the Assignment More Engaging:
    • Instead of displaying the results on the console, display them on a GUI
    • nifty-dashboard_digital
The GUI for this "Nifty" Assignment
Back SMYC Forward

A Version that Assumes Students Understand Objects

javaexamples/nifty/objectoriented/Dashboard.java
 
Using the GUI for this "Nifty" Assignment
Back SMYC Forward

If Students Understand Objects

Dashboard dashboard; double currentKPH, tripKPH, tripMPH; dashboard = new Dashboard(); dashboard.setSpeed(currentKPH); dashboard.setTripSpeed(tripKPH, tripMPH);

If Students Don't Understand Objects (Using a Slightly Different Implementation)

double currentKPH, tripKPH, tripMPH; Dashboard.setSpeed(currentKPH); Dashboard.setTripSpeed(tripKPH, tripMPH);
Other Approaches to Layout (Not Considered Here)
Back SMYC Forward
  • Relative Layout:
    • Components are positioned relative to each other, rather than an absolute position
  • Template Layout:
    • Divide the container into sections and place one component in each section
  • Hierarchical Template Layout:
    • Subdivide the sections in a template layout
  • Constrained Template Layout:
    • Add constraints (e.g., doesn't expand) to sections of a template
Responding to GUI Components
Back SMYC Forward
  1. Determine what events the component generates
  2. Identify the interfaces that needs to be implemented
  3. Create a class that implements that interfaces
  4. Add "application logic" to the appropriate methods
Example: Responding to JButton Objects
Back SMYC Forward
  • The Event(s):
    • ActionEvent
  • The Interface(s):
    • ActionListener
  • The Method(s)/Message(s):
    • void actionPerformed(ActionEvent event)
Example: Responding to JButton Objects (cont.)
Back SMYC Forward
javaexamples/usinggui/ButtonFrame.java
 
Part 2
Back SMYC Forward

Two-Dimensional Graphics

Rendering Engines
Back SMYC Forward
  • Purpose:
    • Determine how to present graphics primitives on a visual output device
  • In Java:
    • The rendering engine is a Graphics2D object
Modeling Color
Back SMYC Forward

The (Linear) Color Cube

rgb-cube
Modeling Color (cont.)
Back SMYC Forward
  • The RGB Model:
    • Begin with black then add red, green, and or blue
    • An additive model
    • Often used for displays/monitors
  • The CMYK Model:
    • Begin with white then remove cyan, magenta, and/or yellow
    • A subtractive model
    • Often used for printing
Coordinate Systems
Back SMYC Forward
  • Coordinates:
    • Quantities (linear and/or angular) that designate the position of a point in relation to a given reference frame
  • In Java:
    • coordinates
Rendering with a Graphics2D Object
Back SMYC Forward
  • Geometric Shapes (see the Shape interface):
    • draw(Shape s)
    • fill(Shape s)
  • Strings/Text:
    • drawString(String s, float x, float y)
  • Images:
    • drawImage(Image i, int x, int y, null)
Classes that Implement the Shape Interface
Back SMYC Forward
  • 0-Dimensional:
    • Points (Point2D )
  • 1-Dimensional:
    • Lines (Line2D )
    • Curves (CubicCurve2D and QuadCurve2D )
  • 2-Dimensional:
    • Rectangles(Rectangle2D )
    • Polygons (GeneralPath )
    • Ellipses (Ellipse2D )
Stroking a Shape
Back SMYC Forward
  • Stroke:
    • The line "style" (see the Stroke interface)
    • Set using the setStroke method in Graphics2D
  • Color:
    • The line color (see the Color class)
    • Set using the setColor method in Graphics2D
Stroking a Shape (cont.)
Back SMYC Forward

Joins and Caps

stroke_caps

stroke_joins

Filling a Shape
Back SMYC Forward
  • Paint:
    • The fill "style" and color (see the Paint interface)
    • Set using the setPaint method in Graphics2D
  • Types:
    • Color
    • GradientPaint
    • TexturePaint
Rendering Text/Strings
Back SMYC Forward
  • Font:
    • The "glyphs" used for each character
    • Set using the setFont method in Graphics2D
  • Properties:
    • Name
    • Size (in points)
    • Style (plain, italic, bold)
Rendering Text/Strings (cont.)
Back SMYC Forward

Line Metrics

fontmetrics

The x and y passed to drawString(String s, float x, float y) are the left end of the baseline.

Rendering Text/Strings (cont.)
Back SMYC Forward
  • FontRenderContext
    • Keeps information about fonts
  • LineMetrics
    • Keeps information about font and line heights
Rendering Images
Back SMYC Forward
  • BufferedImage Class:
    • Extends the abstract Image class
    • Objects can be read from a file using the static read() method in the ImageIO class
  • The drawImage(Image i, int x, int y, null) Method:
    • x and y determine where the the upper-left corner of the Image will be rendered
What GUI Component To Use?
Back SMYC Forward
  • Motivation:
    • You need a GUI component to render in
    • You can extend any GUI component, you just need to override the public void paint(Graphics g) method
  • A Good Class to Extend:
    • JComponent which does very little in its paint() method
An Example
Back SMYC Forward
javaexamples/multimedia/Example.java
 
An Example: The Driver
Back SMYC Forward
javaexamples/multimedia/ExampleDriver.java
 
An Example of a "Nifty" Assignment
Back SMYC Forward
  • The Important Concepts:
    • Conditionals
    • Iteration
  • The Setting - A Wind Chill Calculator:
    • For several locations, convert the temperature and wind speeds to a wind chill value
  • Making the Assignment More Engaging:
    • Instead of displaying the results on the console, display them on a map
    • nifty-windchill
The GUI for this "Nifty" Assignment
Back SMYC Forward

A Version that Assumes Students Understand Objects

javaexamples/nifty/objectoriented/MapComponent.java
 
Another Example
Back SMYC Forward

The Dashboard Revisited

nifty-dashboard_analog
Part 3
Back SMYC Forward

Animation

Definitions
Back SMYC Forward
  • Animate:
    • To give life or motion
  • Animation:
    • A group of techniques that can make visual content appear to move
Techniques to Consider
Back SMYC Forward
  • Sampled Dynamics (a.k.a. Frame Animation)
  • Described Dynamics (a.k.a. Sprite Animation)
Sampling Dynamic Visual Content
Back SMYC Forward

An Illustration

dynamic-sampling
Terminology for Sampled Dynamics
Back SMYC Forward
  • Frame Rate:
    • The number of frames per unit time
  • Animate:
    • To give life or motion
  • Frame Animation:
    • The "play back" of sampled dynamic visual content
Some Observations
Back SMYC Forward
  • Each frame is thought of as a coherent whole
  • Each frame consists of static visual content
  • Each frame can be either sampled or described (and is completely independent of the time-based sampling)
Describing Dynamic Visual Content
Back SMYC Forward
  • The Concept:
    • Describe the way the visual "stream" changes over time
    • Start with a set of components (i.e., the "participants" in the "action") and then describe component-by-component changes
  • Analogy:
    • A play with a script, stage directions, actors, sets, and a stage
Terminology for Described Dynamics
Back SMYC Forward
  • Sprite:
    • Common Usage - an imaginary being or elf
    • Animation - a discrete piece of visual content that can respond to descriptions of changes
  • Stage:
    • The "component" that sprites act "on"
What's Involved?
Back SMYC Forward
  • A Timer object that sends actionPerformed() messages
  • An ActionListener on the Timer that updates state information each "tick"
  • A JComponent that renders itself using the state information
A Simple Example
Back SMYC Forward

An Animated Rectangle

javaexamples/multimedia/AnimatedRectangle.java
 
Another Simple Example
Back SMYC Forward

An Animated Curve

javaexamples/multimedia/AnimatedCurve.java
 
User Interaction
Back SMYC Forward
  • Mouse Events:
    • A JComponent can have both MouseListener and MouseMotionListener objects
  • Keyboard Events:
    • A JComponent can have KeyListener objects
An Example of User Interaction
Back SMYC Forward

Whack-A-Duke

javaexamples/multimedia/WhackADuke.java
 
A More Object-Oriented Example
Back SMYC Forward

A Fish Class

javaexamples/multimedia/Fish.java
 
A More Object-Oriented Example (cont.)
Back SMYC Forward

The FishTank

javaexamples/multimedia/FishTank.java
 
An Example of a "Nifty" Assignment
Back SMYC Forward
  • The Important Concepts:
    • Recursion
  • The Setting - A Robot Minesweeper/Vacuum:
    • Search for mines in a building/vacuum a building
  • Making the Assignment More Engaging:
    • Instead of displaying the results on the console, animate the robot
    • nifty-search_rooms
The GUI for this "Nifty" Assignment
Back SMYC Forward

The Abstract Class that Students Must Extend

javaexamples/nifty/objectoriented/Robot.java
 
Another Example of a "Nifty" Assignment
Back SMYC Forward
  • The Important Concepts:
    • Recursion
  • The Setting - People in Purple:
    • Search for aliens in and around JMU
  • Making the Assignment More Engaging:
    • Instead of displaying the results on the console, use animated crosshairs
    • nifty-search_planar
Part 4
Back SMYC Forward

Other Examples

A Fancier GUI
Back SMYC Forward
  • The Important Concepts:
    • Objects
  • The Setting:
    • Scoring dives in a diving competition
  • Making the Assignment More Engaging:
    • Instead of using the console use a scorebaord
    • nifty-scoreboard
Another Fancier GUI
Back SMYC Forward
  • The Important Concepts:
    • Designing classes
  • The Setting:
    • An air quality monitoring system
  • Making the Assignment More Engaging:
    • Instead of using the console use a visual report
    • nifty-airquality
Using Bitmap Images
Back SMYC Forward
  • The Important Concepts:
    • Two-dimensional arrays (i.e., arrays of arrays)
  • Making the Assignment More Engaging:
    • Add advertisiments to a television broadcast
    • nifty-field1
  • An Advanced Assignment:
    • Add line-of-scrimmage and first-down lines
    • nifty-field2
There's Always More to Learn
Back -