The goal of today's lesson is to understand the "init" and "makeButton" methods in the Interface class, and the entire CardImage class.  Before proceeding, you should experiment with the Color Belot applet that appears at the bottom of this page.  Then, familiarize yourself with the variables at the bottom of the "Interface" class.   Can you figure out the purpose of each one used in the "init" and "makeButton" methods?  If you can't, they are explained at the end of lesson 12.

Let's look at the "Interface" class first.  The program begins by including four libraries.  The "awt" library is the "abstract windowing toolkit" library and includes most methods that are needed for making a user interface.  The "net" library supports networking capabilities (such as following URLs from a user interface).  The "event" library supports event handling (e.g. the user clicks the mouse).  The "applet" library supports the program being run as an applet off of a web page.

Notice that the "Interface" class implements four interfaces.  The "ActionListener", "MouseListener", and "ItemListener" all support event handling.  The "BelotConstants" interface provides a set of useful constants to the interface.

Look at the variables in the "init" method.  (Recall that the "init" method is the first method called when the applet is loaded.)  The "tracker" and "trackerID" variables allow the applet to keep track of the status of images.  To make the interface look nice, all images need to be loaded before the interface is drawn.  (Would you like to learn more about working with  images?)  The "url" variable is set to be the code base of the applet.  For this particular applet, this is where all of the images that the applet needs are located.  The "imageName" and "image" variables are needed to work with the current image.  The "suits" and "ranks" array will be used to reconstruct the names of the image files that need to be loaded.  The variable "f" is the font that is used as the default font for the user interface.

A new "belotGame" is instantiated.  Then the current display messages are set to "Welcome to Belot!"

The null layout manager is selected.  The background and foreground colors are set.  Information about the font metrics (the height and width of the font) is retrieved so that messages can be displayed nicely.  The height and the width of the applet are retrieved so that the user interface can be custom designed to fit the display surface.

Next up in the "init" method is a double "for" loop.  Within the body of the loop, the name of a "gif" file is reconstructed.  The file is loaded and tracked.  Finally, the image is associated with its corresponding card.  (For example, the picture of an ace of spades, "as.gif", is stored in the ace of spades card.)

Following the double "for" loop, the image of the back of a playing card is loaded and tracked.  The "try"/"catch" sequence waits until all of the images are fully loaded before the applet proceeds.   This ensures that the applet won't display cards that have only been half loaded.   This looks bad!

Another "for" loop initializes the "cards" of the player that will be displayed on the interface.  Initially, these images are set to be the back of a card.  Do you understand why?

"cardOne" is the last card that the player played, "cardTwo" is the last card that the player's opponent played, "cardThree" is the card that is currently turned over.  Does it make sense that the images for these three cards are all initially the back of a card?

A mouse listener is added to the user interface, so that mouse events can be detected.

Several buttons are created (see the "makeButton" method belot).  The "joinButton" and "rulesButton" are buttons that are displayed on the initial interface.  The other buttons will appear and disappear at various other times during the life of a game of Color Belot.

Finally, two "Choice" menus ("acceptTrumpChoice" and "makeTrumpChoice") are created, although they are not initially displayed.  Notice that an item listener must be installed for each one to detect events related to selecting choices from the menus!

The "makeButton" method is an easy one.  The purpose of this method is to help automate the process of creating a button.  The button is first created with a label.  Next, it is added to the interface.  The "placeComponent" method gives it the proper position and size within the user interface.  The button is then hidden via the "hide" method so that it does not appear on the user interface (we don't want all of the buttons to be visible all of the time).  An action listener is added so that events related to buttons can be detected.  Finally, the button that was created is returned.

The "CardImage" class constructor calculates the coordinates of the top left corner of the image and its width and height.  It sets the "image" to the "imageName" passed in and sets "display" to be true.

The "inImage" method returns a "true" if a particular x,y coordinate is in the image and a "false" otherwise.  The method can be used to determine if the user clicked on a particular card during the course of a game.

The "setImage" and "setDisplay" methods are writer methods for variables in the "CardImage" class.

The "getImage", "getDisplay", "getTopLeftX", "getTopLeftY", "getXExpanse", and "getYExpanse" methods are reader methods for variables in the "CardImage" class.

Finally, the instance variables are declared.  They are all straight forward with the exception of "display".  This variable is true if a particular card should be displayed and false otherwise.