Java Tutorial: A Frame-based Japanese Flashcard Applet
Following our September 1996 article on Java in Japan, we received a lot of valuable feedback from readers who had visited our website and tried the kanji-learning game. Our sincere thanks to all who sent mail; your kudos and comments are greatly appreciated.
In addition to suggestions about the game itself, many readers requested that we include more actual source code and make target the explanations more toward beginning programmers. With that in mind, this month contributing editor Steven Myers takes you through a shorter and slightly less-involved (but nonetheless useful) Java applet one that makes use of HTML frames to create sets of "kanji flashcards" for help in learning new vocabulary expressions.
by Steven Myers
Frames are one of the more interesting and powerful of the HTML extensions introduced by Netscape. Frames can be used to split a webpage into several different windows, each of which can display its own individual webpage. When combined with Java applets, the capability of frames allows a whole new dimension of control that can be used to provide an easy-to-use interface for interactive pages.
You could, for example, present a list of clickable animation titles in one frame, and actually display the animations in another frame. Clicking on a new title would automatically stop the current applet and loads a different page containing the new one.
To gain a better understanding of how this process works, let's begin by exploring with something simple. Rather than starting up an animation on each click, we'll create a method to display a different "flashcard" image. The intent is to show how Java applets can be integrated with frames and standard GUI elements, such as scroll lists. In the process, we'll take a look at how these mechanisms can be used to quickly build enjoyable and useful quiz-type application that can take some of the drudgery out of jobs that require a lot of memorization like -kanji study.
Making an HTML page
To start with, we'll need to create a set of kanji image files. As described in the September 1996 article, this task is relatively simple and can be done using a simple paint program like PaintShop Pro J. Just create a small frame for each expression, then copy the text and save the file. Next, make a series of short HTML pages for the images, like the one shown in figure 1.
Figure 1. eisei.html
<HTML>
<BODY>
<IMG SRC="eisei.gif"><BR>
<b>eisei</b>
</BODY>
</HTML>
Note how the romaji reading for the expression (<b>eisei</b>) is given just below the image (<IMG SRC="eisei.gif"><BR>). Each time the user clicks on one of the English expressions in the left frame, the corresponding "Japanese page" will be displayed in the right frame.
Another HTML page we'll need to make is a master page, called "vocab.html," that will hold the two frames (figure 2). The <FRAMESET COLS="320,*"> tag specifies that the first frame will be 320 pixels wide, while the second frame will take up the remainder of the space. Observe how each frame is given a NAME and an SRC parameter, along with the name of a specific file that will be displayed in the frame. MARGINHEIGHT and MARGINWIDTH allow us to set the margins to a certain number of pixels, and NORESIZE prevents the frame from being resized by the viewer.
Figure 2. vocab.html
<HTML>
<HEAD>
<TITLE>Vocabulary Flash Cards</TITLE>
</HEAD>
<FRAMESET COLS="320,*">
<FRAME NAME="left" SRC="lframe.html" MARGINHEIGHT=2 MARGINWIDTH=2
SCROLLING = "no" NORESIZE>
<FRAME NAME="right" SRC="rframe.html" MARGINHEIGHT=2 MARGINWIDTH=2
SCROLLING = "yes" NORESIZE>
</FRAMESET>
</HTML>
Now let's look at the HTML page for the lframe.html (figure 3). In addition to the <APPLET> tag, which calls the .class file, note the ten <PARAMETER> tags. Each of these tags designates the English expression for a vocabulary item that will be displayed in the scroll list.
The rframe.html page (figure 4) is plain by comparison, consisting only of a simple descriptive header. This is where the "flashcard answers" will be displayed.
Figure 3. lframe.html
<HTML>
<TITLE>Vocabulary Practice</TITLE>
<BODY>
See if you know the Japanese definition for the English terms listed on
the left, then check yourself by double-clicking on each term to see the answer.
<P>
<APPLET CODE="vocab.class" WIDTH=290 HEIGHT=100>
<PARAM NAME=term1 VALUE="intersection">
<PARAM NAME=term2 VALUE="insurance">
<PARAM NAME=term3 VALUE="engagement">
<PARAM NAME=term4 VALUE="satellite">
<PARAM NAME=term5 VALUE="rumor">
<PARAM NAME=term6 VALUE="preparation">
<PARAM NAME=term7 VALUE="statistics">
<PARAM NAME=term8 VALUE="budget">
<PARAM NAME=term9 VALUE="propaganda">
<PARAM NAME=term10 VALUE="facilities">
</APPLET>
</BODY>
</HTML>
Figure 4. rframe.html
<HTML>
<HEAD><TITLE>
Flash Cards
</TITLE></HEAD>
<BODY>
The Japanese definitions will be displayed here.
</BODY>
</HTML>
The Java code
The complete Java source code for the flashcard applet is shown below in figure 5. Let's look first at the init() method.
After setting the layout style to BorderLayout, we add a scroll list called vocabList. Note that vocabList is declared at the bottom of the .java file as a List object. The while loop is used in conjunction with a counter variable(i) to get all of the parameter strings from the HTML page, then add them to the scroll list using the addItem() method for List objects.
The event handler for this applet is represented by the action(Event, Object) method. This method is called anytime there is a double-click from within the applet. The "if" statement checks to see if the double-click occurred within the scroll list. The getAppletContext() method of the AppletContext class is then used to give us a handle on the applet's browser environment. After instantiating an AppletContext object called "ac" from the current environment, we can use showDocument() to display the flashcard pages in the right frame.
Notice that, in the constructor for the URL object, we have added the filename to the end of the URL path. Remember that "arg" is passed as a parameter to the event handler, since whenever the user double-clicks on an item in a List object, the currently selected item is passed to the action() method. This value is cast to a String and appended to the path in order to create the full URL for the document to be shown.
Figure 5. vocab.java
import java.awt.*;
import java.applet.*;
import java.net.*;
import java.io.*;
public class vocab extends Applet implements Runnable
{ public void init()
{ setLayout(new BorderLayout());
add("Center", vocabList);
int i = 1;
String s;
while ((s = getParameter("term" + i)) != null)
{ vocabList.addItem(s);
i++;
}
}
public boolean action(Event evt, Object arg)
{ if (evt.target == vocabList)
{ try
{ AppletContext ac = getAppletContext();
URL u = new URL("http://www.cs.duke.edu/~myers/java1/" + (String)arg + ".html");
ac.showDocument(u, "right");
} catch(Exception e)
{ showStatus("Error " + e); }
}
else return super.action(evt, arg);
return true;
}
private List vocabList = new List(3, false);
}
Extending the Flashcard Applet
Now that you've seen the basics of manipulating frames from within a Java applet, why not try applying these techniques to other applications? Remember, the HTML pages called from your "master" applet don't have to be static; they can call other applets.
Webpages can have more than one applet running simultaneously, and if you remember to give NAME tags to all your applets, they can communicate with each other using the getApplet(String) method of the AppletContext class. By combining frames with multiple applets in this way, you can easily add a whole dimension of creativity to your Web presentations.
