01-11-2012, 03:37 PM
Graphical User Interface
Graphical User.PPT (Size: 81.5 KB / Downloads: 21)
How this program works
Caveat:
You may implement your own design
There are three graphical components
The score area, the status area, and the playing area
They are arranged with the help of the Border Layout manager
A mouse handler associated with the playing area is responsible for input
Output shows up in the other three areas
The Score Area Responsibilities
What does this do?
This field gets modified when there is a winner.
Determining a winner to be discussed later
Since there is no need to accept input from the user, this field should be read-only and needs no associated handler.
What does it need?
Needs to know the score to display
A static string or sub-strings with the scores inserted
When to be modified
The Score Area
What graphical components may apply here?
A canvas or panel with drawString() text ?
Possible, but takes some work to keep up with changing applet size and aspect ratio
A Label ?
A good choice because it is read-only for user
A TextArea ?
Possible, but don't need the multi-line features
A TextField
It's what's provided, easy to change text, can be read-only
The Playing Area Graphical Components
A single Canvas or Panel ?
A Canvas is sufficient
Divide the area into thirds and draw the lines (done)
Nine Canvas or Panel items laid out in a grid?
We can make a single container for the center
It can have it's own layout manager
Could create three kinds of specialized Canvases
Which draw it's appropriate symbol: X, O, or blank
Only blanks are registered with the mouse listener
They replace themselves with the appropriate symbol canvas
Program States
There are a fixed number of things that can happen:
While there are empty squares
Respond to player O's mouse click
Check for winning condition to exit loop
Respond to player X's mouse click
Check for winning condition to exit loop
Start a new loop for next game
Programs having and transitioning to known states is a common programming issue