CS 209 Spring, 2006 Lab 9: Applets Instructor: J.G. Neal Objectives: To gain experience with: 1. Programming Java applets and the HTML page within which an applet is embedded. 2. The passing of parameters to an applet. 3. Using additional GUI components. 4. Ways to execute and test an applet. Notes: 1. This lab exercise correlates with Chapter 14 of the textbook. 2. Applets are designed to be embedded in HTML pages for display in web browsers. The Applet or Object tag is used to embed an applet in a web page. 3. Applets should be deployed in a JAR file on a web server for remote or local access. This topic, however, is outside of the scope of this current exercise. 3. There are several ways to run an applet, including the following, which we will do: (1) One way is to use the simple Appletviewer tool which only displays the applet and not the HTML page. This tool can be run either from within an IDE such as NetBeans or from the command line. We will use the Appletviewer from within NetBeans. (2) A second way is to use your web browser to display the HTML page containing the applet. Normally the HTML page would be downloaded from a remote web server in response to a request from you via your browser. However, if the page and applet are on your local machine, then you can view the page with its embedded applet, directly (without being deployed on a web server). We will also use this method of testing and viewing applets. Lab Instructions: 1. This Lab Exercise builds on your completed project from Lab Exercise 8. 2. In this Lab Exercise, you will create an applet version of your program from Exercise 8. 3. Create a JApplet in your project for this Lab Exercise. In NetBeans, select menu File>New File. Then in the New File dialog select Java Classes in the left-side Categories pane, and select JApplet (not Applet) in the right-side File Types pane. Click the Next button. Enter the name EmployeeAryAppletEx for the applet in the Class Name text field. Click the Finish button. The new JApplet should be listed in the left-side Project pane of your NetBeans project. Copy the contents of your EmployeeAryApplicEx file (from Exercise 8) and paste the text into the Java JApplet class/file that you created. Change all occurrences of the name EmployeeAryApplicEx to EmployeeAryAppletEx. Check the first line of the declaration of the new class to ensure that the new class is a subclass of JApplet. The first line should read: public class EmployeeAryAppletEx extends JApplet Eliminate the main method from the new class/file. Eliminate the statement: super( GUI Demonstration ); Save your work (save your files). If you created a new Project for this Exercise, be sure that all four of your employee classes/files are in the project. Page 1 of 7
4. Compile the JApplet. In the left-side Project pane, right-click on the JApplet file and select Compile File from the pop-up menu. Correct any compile errors. 5. The required HTML file containing Applet tag is automatically created by NetBeans. Remember that an applet must be embedded within an HTML page to run in a real application. When you run a JApplet within NetBeans, the HTML file for the JApplet will be automatically created by NetBeans and placed within the build folder. The HTML file will contain the required Applet tag. Run the applet as instructed in the next step. Then check the build folder in the Files tab pane to see that the HTML file is created and within the build folder. 6. Run the applet using the Appletviewer within NetBeans. As mentioned above, there are several ways to execute an applet. First we will use the Appletviewer that is part of NetBeans. Note that the Appletviewer tool, which is part of the basic JDK toolset from Sun Microsystems, only displays the applet, not the HTML page containing the applet, as shown in the figure below. However, the name of the HTML page is passed as a parameter to the Appletviewer, so that the Appletviewer has access to the information within the HTML file in the Applet tag element (e.g., codebase, parameters, etc.). In the left-side Project pane, right-click on the EmployeeAryAppletEx.java file and select Run File from the pop-up menu. This will bring up the applet in the Appletviewer tool. You should be able to interact with the applet and use all its capabilities. Page 2 of 7
7. Run the applet using web browser from within NetBeans. As a second way to run your applet, you will now run the HTML page with embedded applet in your web browser from within NetBeans. In the left pane of NetBeans, select the Files tab. Open the build folder in the Files tab. Right-click on the file named EmployeeAryAppletEx.html, and select View from the pop-up menu. This will bring up your web browser and display the HTML page and the embedded JApplet. See below for a window capture of the HTML page and embedded JApplet. Enter data on several employees. You should notice that there is definitely a problem with this applet that we must fix. Be sure that you can state what the problem is. We will fix it in a subsequent step of this exercise. 8. Run the applet using your web browser without using NetBeans. Now you will run the HTML page (with embedded applet) in your web browser without using NetBeans. To bring up the HTML file in your web browser, use one of the following methods: a. Method 1: Navigate to the HTML file using Windows Explorer and then double-click on the file to open it in your browser. Alternatively, you can right-click on the file and select your browser as the tool to use to open the file. b. Method 2: Bring up your browser and then use the menu File>Open to open the Page 3 of 7
HTML file from within your browser. In either case, you should see the HTML page with the applet embedded within the page. You should be able to interact with the applet and use all its capabilities. 9. In the next steps, you will modify and extend the applet and the HTML page. 10. Copy the HTML page to your top level project folder. Copy (or move) the HTML page from the build folder to the Project folder. We are moving the HTML file for two reasons: a. To demonstrate how to get the file to work correctly in a folder location of our choosing (instead of where NetBeans wants to place the file). b. To avoid having the file overwritten by NetBeans when it automatically generates a new HTML file for an applet. In the left-side Files pane, double-click on the HTML file that you moved to your Project folder. As a result, its contents should be displayed in the edit pane of NetBeans. 11. Modify the new HTML page to adjust the size of the applet. In the left-side Files pane, double-click on the HTML file that you copied into your top level Project folder. As a result, its contents should be displayed in the NetBeans edit pane. Change the value of the height attribute in the Applet tag element so as to change the height of the displayed applet. Change the value to something that will show the entire applet within the HTML page, including the list of user-entered employees. Use something like 550 for the height. Reload the HTML page and be sure that the applet has been resized. 12. Modify the new HTML page to use relative codebase path. We need to be sure to use only relative paths in the codebase attribute so that the HTML page with embedded applet will work on any machine and web server. Change the codebase attribute to: codebase=./build/classes/ As stated above, be sure that the height attribute is large enough to display the entire applet; use something like 550. Save the file and test it. To test it, right-click on the HTML file, select View, and be sure that the HTML page is displayed in the web browser and the applet is displayed and works correctly. 13. Modify the JApplet and HTML page so that a parameter is passed to the applet. Open the HTML page for editing in the NetBeans edit pane. Add a parameter named TextAreaTitle in the Applet tag element of the HTML file. As the value of the parameter use the text string: Abelson-Baker-Chen Company Employee List. The additional tag should consist of the following. This tag must be nested within the Applet tag element, all on one line: <param name = "TextAreaTitle" value = "Abelson-Baker-Chen Company Employee List"> Open the Java applet file for editing. Add an init() method to the JApplet class/file and add code within the init() method body that will get the applet parameter named TextAreaTitle that you added to the Applet tag element in the HTML file. An empty init method would consist of the following: public void init() { } You need to fill in the method body with appropriate code including a statement that calls the getparameter method: getparameter( TextAreaTitle ) Page 4 of 7
Note: The applet s getparameter method can only be invoked after an instance of the applet has been created. So this method cannot be invoked in the constructor, but instead should be invoked in the init() method. Assign the value returned by the getparameter method to a member variable in your applet class named textareatitle. The variable should have class scope. Move the statement that sets the TitledBorder on the JTextArea. This statement should be moved to the applet s init() method, after the method call to get the parameter. Change the statement so that it uses the value of the textareatitle variable to set the text of the TitledBorder. Do not use a hardcoded literal string to set the title on the TitledBorder as we did previously. See the following sections of your textbook for relevant information: a. Section 14.4 for details on the HTML Applet tag. b. Section 14.5 for details on the specification of parameters in the HTML Applet tag element. c. Section 14.5 of textbook for details on how to get the parameters in the JApplet code. 14. Modify the JApplet and HTML page to pass a second parameter to the applet. In the HTML file, add a parameter named MaxNumberOfEmployees in the Applet tag element. As the value of the parameter use the text string: 75. In the Java JApplet class file, as you did in the above step for the textareatitle parameter, add code to the init() method that will get the applet parameter named MaxNumberOfEmployees, from the context of the HTML page. Also in the init() method, add code to assign the value returned by the getparameter method to the existing final member variable in your applet class named MAX_EMPLOYEES. This variable should be used to declare the size of the Employee array. The value of this variable is also displayed as part of the first JLabel on the applet, when displaying the maximum number of employees. Use the settext method from the JLabel class to set the new text for the JLabel. The code that creates the employee array and allocates memory for the array must be moved into the init() method. The array cannot be created until after the parameter has been obtained using the getparameter method. 15. Modify the JApplet by adding a JScrollPane to the GUI. Create an instance of the JScrollPane class. When invoking the JScrollPane constructor, pass the JTextArea object as parameter to the constructor so that the JTextArea is a component on the JScrollPane (the JScrollPane holds the JTextArea as its content). Then add the JScrollPane to the JPanel instead of the JTextArea. This addition of the JScrollPane should automatically provide scroll bars when needed in the JTextArea. 16. Modify the HTML page to add three header lines. Bring up the HTML page in NetBeans for editing. Delete the existing default header line(s) on the HTML page, if any. Add a heading on the HTML page, above the applet. Use the h3 tag. The heading should display the following: "Program: Java JApplet Example". The new HTML element should look like the following: <h3>program: Java JApplet Example</h3> Add another heading on the next line that displays: "Purpose: To demonstrate an interactive JApplet". Make this second header line look like the one created above. Page 5 of 7
Add another heading on the next line using an h4 tag that displays "Author: " followed by your name. 17. Recompile, execute, and debug your JApplet program. Test your program using a variety of data to make sure that it works for all cases. Make sure that you can run the program using either the Appletviewer or a Web browser. The program should function just as it did as a stand-alone JFrame-based program. 18. Run the program and make window captures displaying all the capabilities of your program. 19. See the window captures below for example input/output displays for the completed program. 20. Create ReadMe file. Using Microsoft Word, create a file named ReadMe. In this document, insert your name at the top, and on the next line insert the assignment number (e.g., Exercise #9 ). Then enter any comments regarding the assignment. Your comments might include any difficulties encountered, suggestions for improvement of the assignment, etc. Then insert at least two window captures of your JFrame window showing the inputs and output from the execution of the program. o The first window capture should be captured when you have entered data on the 4 th employee; it should show the data in the JTextFields and the selected items in the JComboBoxes. o The second window capture should show the updated list of employees in the JTextArea that is the result of hitting the Enter key in one of the JTextFields for this new 4 th employee. If you did the extra credit part of the assignment, be sure to state this in your ReadMe file. (The extra credit portion of the exercise is specified below.) Also, include additional window captures that demonstrate the execution of the extra credit version of your program and its extra capabilities. Be sure the ReadMe document file is in your top level project folder. 21. Zip the project folder and all its contents. Create a zip file that contains the entire contents of your NetBeans project folder, including all sub-folders and files. Your project folder should contain your ReadMe file and batch file, as for previous project assignments. Change the name the zip file so that its name consists of your name along with the assignment number, as follows: JohnJones-09.zip. Do not use spaces in the name of the file, use hyphens instead. 22. Extra Credit: Convert to a dual-mode program: Modify the main Java class(es) so that the program can be run as either a JFrame standalone application or as a JApplet that is embedded within an HTML page. The program must run either way with no modification. Consult textbook Chapter 14, Section 6, for information on how to do this. TO RECEIVE CREDIT FOR YOUR ASSIGNMENT: Submit the following for credit to Angel Drop Box for Exercise 09: a. The zip file containing your entire NetBeans project folder with all subfolders & files. Page 6 of 7
b. You must have an HTML file to run your program without using NetBeans, and the HTML file must be in your top level project folder. It must use a relative path for the codebase. c. You must have a ReadMe file that contains your name at the top, the lab number, any comments regarding the assignment, and window captures to show the program execution. The ReadMe file must be in the top level project folder. d. You must submit your zip file to the Lab09 Drop Box for this CS 209 course in Angel DUE DATE: Friday, March 31. EXAMPLE OF JAPPLET PROGRAM EXECUTION: Page 7 of 7