by David Blankenbeckler
Part IV, "Activating the Internet with Visual J++," discusses HTML, JavaScript, and VBScript. You might be wondering what all this stuff has to do with Java and Java applets. This chapter answers this question by introducing the <APPLET> and <OBJECT> tags. These tags are used to insert Java applets and objects (such as ActiveX controls) into your HTML documents.
The chapter begins with a description of the <APPLET> tag. It then demonstrates building a simple Java applet and inserting it into an HTML file. The example is extended to show how to pass parameters to the applet from within the HTML file.
The example is then expanded further to show how to use JavaScript and VBScript to access the applet's methods and variables. Finally, ActiveX controls are introduced to the example and everything is glued together with JavaScript and VBScript.
Embedding applets and objects into HTML is accomplished through the use of two tags, the <APPLET> tag and the <OBJECT> tag.
The <APPLET> tag is used to insert Java applets into an HTML document. The applet definition begins with <APPLET> and ends with </APPLET>. The following attributes are available:
ALIGN="LEFT"|"CENTER"|"RIGHT"-Aligns the applet either LEFT, CENTER, or RIGHT relative to the current line of text. The values are defined as follows:
LEFT-The object is positioned to the left and subsequent text is flowed past the right side of the object.
CENTER-The object is centered after the current line. Subsequent text begins on the line following the object.
RIGHT-The object is positioned to the right and subsequent text is flowed past the left side of the object.
ALT=textstring-Displays textstring on browsers that do not support Java.
CODE=applet-Specifies the Java applet, for example, myApplet.class.
CODEBASE=appletURL-Specifies a base URL for the applet if it is not in the same location as the calling HTML.
HEIGHT=value-Specifies the suggested height of the applet in standard units.
HSPACE=value-Specifies the horizontal space of the applet in standard units. This is the amount of space between the object and text before and after the object.
NAME=name-Provides the applet with a name so that other objects or applets can refer to it.
VSPACE=value-Specifies the vertical space of the applet in standard units. This is the amount of space above and below the object.
WIDTH=value-Specifies the suggested width of the applet in standard units.
In addition to the attributes, an applet can have parameters passed to it through the <PARAM> tag. The <PARAM> tag is used as follows:
<PARAM NAME=paramName VALUE=paramValue>
For example, if the applet has a parameter named myParameter and you wanted to pass the string "David" to it, you could use the following applet definition:
<APPLET CODE=myApplet.class WIDTH=50 HEIGHT=100> <PARAM NAME=myParameter VALUE=David> </APPLET>
The <OBJECT> tag is used to insert objects into an HTML document. An object can be a Java applet, an ActiveX control, an AVI file, and so on. Because the <APPLET> tag was introduced before the <OBJECT> tag, it is still generally used for adding applets. However, the <OBJECT> tag could also be used and actually has greater functionality.
The object definition begins with <OBJECT> and ends with </OBJECT>. The following attributes are available:
ALIGN="LEFT"|"CENTER"|"RIGHT"|"BASELINE"|"MIDDLE"|"TEXTBOTTOM"|"TEXTMIDDLE"|"TEXTTOP"-Used to align the object in the document. The values are defined as follows:
LEFT-The object is positioned to the left and subsequent text is flowed past the right side of the object.
CENTER-The object is centered after the current line. Subsequent text begins on the line following the object.
RIGHT-The object is positioned to the right and subsequent text is flowed past the left side of the object.
BASELINE-The bottom of the object is aligned vertically with the baseline.
MIDDLE-The middle of the object is aligned vertically with the baseline.
TEXTBOTTOM-The bottom of the object is aligned vertically with the bottom of the text.
TEXTMIDDLE-The middle of the object is aligned vertically halfway between the baseline and the x-height of the text. The x-height is the top of a lowercase x in the current font.
TEXTTOP-The top of the object is aligned vertically with the top of the text.
BORDER=width-When an object is defined as a hyperlink, this attribute specifies the suggested width of the border.
CLASSID=object-The URL that identifies the object implementation.
CODEBASE=objectURL-Used to specify a base URL for the object if it is not in the same location as the calling HTML.
CODETYPE=mediaType-Used to specify the Internet media type of the object specified by CLASSID. This is used by some browsers to speed network access.
DATA=dataURL-The URL that identifies the object's data, if necessary. If the object consists entirely of data, such as an AVI file, the browser can determine the media type from the TYPE attribute and load the appropriate object implementation. A CLASSID is not necessary in this case.
DECLARE-Indicates that the object should be declared but not instantiated. This can be used when you are referencing the object later in the document.
HEIGHT=value-Specifies the suggested height of the object in standard units.
HSPACE=value-Specifies the horizontal space of the object in standard units. This is the amount of space between the object and text before and after the object.
ID=idName-Used to specify an identifier that can be used inside the current document to refer to the object.
NAME=value-Used to provide a name for the object when it is used as part of a form.
SHAPES-Used to indicate that the object has hyperlinks associated with shapes on the object.
STANDBY=message-Used to specify a short message to display while the object is loading.
TYPE=mediaType-Used to specify the Internet media type of the data specified by DATA.
USEMAP=mapURL-Used to specify an image map.
VSPACE=value-Specifies the vertical space of the object in standard units. This is the amount of space above and below the object.
WIDTH=value-Specifies the suggested width of the object in standard units.
Like the applet, an object can have parameters passed to it. This is done using the same method as the applet, through the <PARAM> tag. The <PARAM> tag is used as follows:
<PARAM NAME=paramName VALUE=paramValue>
Now that you understand how to use the <APPLET> and <OBJECT> tags, you can put them to use. First, let's create a simple Java applet to use in the examples for this chapter.
This example demonstrates how to create a simple Java applet that draws a circle. The applet has three parameters that are used to control the color of the circle: R, G, and B, used to indicate the red, green, and blue components for the color of the circle. The valid range of values for each color component is 0 to 255.
First the applet is built using Visual J++. It is then integrated into HTML and the color of the circle set by passing parameters.
The first step is to run Applet Wizard to create a new applet. (See Chapter 11, "Building a Simple Java Applet with Visual J++," for a review of Applet Wizard.)
Create a new project workspace by selecting New from the File
menu. Name the project Circle and select Java Applet
Wizard for the type of project. Follow the steps in Table 29.1
as you run the wizard.
| What You Do | |
| Keep the defaults and select Next. | |
| Enter 60 for both the width and height and select Next. | |
| Turn off multithreading support and select Next. | |
| Enter three parameters of type int and call them r, g, and b. | |
| Select Finish. |
The generated code is shown in Listing 29.1. A few of the comments have been removed for simplicity.
Listing 29.1. Creating a new project.
//******************************************************************************
// Circle.java: Applet
//
//******************************************************************************
import java.applet.*;
import java.awt.*;
//==============================================================================
// Main Class for applet Circle
//
//==============================================================================
public class Circle extends Applet
{
//--------------------------------------------------------------------------
// Members for applet parameters
// <type> <MemberVar> = <Default Value>
//--------------------------------------------------------------------------
private int m_r = 0;
private int m_g = 0;
private int m_b = 0;
// Parameter names. To change a name of a parameter, you need only make
// a single change. Simply modify the value of the parameter string below.
//--------------------------------------------------------------------------
private final String PARAM_r = "r";
private final String PARAM_g = "g";
private final String PARAM_b = "b";
// Circle Class Constructor
//--------------------------------------------------------------------------
public Circle()
{
// TODO: Add constructor code here
}
// APPLET INFO SUPPORT:
// The getAppletInfo() method returns a string describing the applet's
// author, copyright date, or miscellaneous information.
//--------------------------------------------------------------------------
public String getAppletInfo()
{
return "Name: Circle\r\n" +
"Author: David Blankenbeckler\r\n" +
"Created with Microsoft Visual J++ Version 1.0";
}
// PARAMETER SUPPORT
// The getParameterInfo() method returns an array of strings describing
// the parameters understood by this applet.
//
// Circle Parameter Information:
// { "Name", "Type", "Description" },
//--------------------------------------------------------------------------
public String[][] getParameterInfo()
{
String[][] info =
{
{ PARAM_r, "int", "Parameter description" },
{ PARAM_g, "int", "Parameter description" },
{ PARAM_b, "int", "Parameter description" },
};
return info;
}
// The init() method is called by the AWT when an applet is first loaded or
// reloaded. Override this method to perform whatever initialization your
// applet needs, such as initializing data structures, loading images or
// fonts, creating frame windows, setting the layout manager, or adding UI
// components.
//--------------------------------------------------------------------------
public void init()
{
// PARAMETER SUPPORT
// The following code retrieves the value of each parameter
// specified with the <PARAM> tag and stores it in a member
// variable.
//---------------------------------------------------------------------
String param;
// r: Parameter description
//---------------------------------------------------------------------
param = getParameter(PARAM_r);
if (param != null)
m_r = Integer.parseInt(param);
// g: Parameter description
//---------------------------------------------------------------------
param = getParameter(PARAM_g);
if (param != null)
m_g = Integer.parseInt(param);
// b: Parameter description
//---------------------------------------------------------------------
param = getParameter(PARAM_b);
if (param != null)
m_b = Integer.parseInt(param);
//----------------------------------------------------------------------
resize(60, 60);
// TODO: Place additional initialization code here
}
// Place additional applet clean up code here. destroy() is called
// when your applet is terminating and being unloaded.
//------------------------------------------------------------------------
public void destroy()
{
// TODO: Place applet cleanup code here
}
// Circle Paint Handler
//--------------------------------------------------------------------------
public void paint(Graphics g)
{
g.drawString("Created with Microsoft Visual J++ Version 1.0", 10, 20);
}
// The start() method is called when the page containing the applet
// first appears on the screen. The AppletWizard's initial implementation
// of this method starts execution of the applet's thread.
//--------------------------------------------------------------------------
public void start()
{
// TODO: Place additional applet start code here
}
// The stop() method is called when the page containing the applet is
// no longer on the screen. The AppletWizard's initial implementation of
// this method stops execution of the applet's thread.
//--------------------------------------------------------------------------
public void stop()
{
}
// TODO: Place additional applet code here
}
The Java applet is almost complete. All you have to do now is add a few lines of code to draw a circle using a function in the java.awt.Graphics class. To use this class you must first import it into your source. Visual J++ has already done this with the following line at the beginning of the source:
import java.awt.*;
So all you have to do is add the code to set the color and draw the circle. (For more information about the java.awt.Graphics class, refer to Chapters 13, "The Standard Java Packages," and 14, "An Introduction to GUI Programming.")
Before drawing the circle you need to set the color using the setColor() method. Then simply draw the circle using the fillOval() method. Add these two lines to Circle's paint() method as follows:
public void paint(Graphics g)
{
g.setColor(new Color(m_r, m_g, m_b));
g.fillOval(10, 10, 40, 40);
}
Note that you can also remove the filler code that the wizard inserted into the paint() method. As you can see, the setColor() function will use the parameters that you passed for red, green, and blue to set the color.
You can now build the Java applet and view it in your Java-enabled Web browser. Use the Circle.html file that was created automatically by the Applet Wizard. The output should appear similar to Figure 29.1.
Figure 29.1 : The Circle applet.
The Applet Wizard automatically created an HTML file because you selected the option to do so. To learn more about the <APPLET> tag, you should review this HTML file. It appears as follows:
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code=Circle.class
id=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
The applet that you created, Circle, is included in the document by the <APPLET> tag. The code= attribute is used to specify the Circle class. In addition, you can see the initial height and width of the applet are set to 60.
The ID attribute that was automatically inserted by Applet Wizard is not a standard attribute for the <APPLET> tag. Instead the NAME attribute should be used. The ID or NAME attribute is used when referencing the applet elsewhere in the HTML file, such as in a script. Although the ID attribute will work properly for Internet Explorer 3.0, it will not work correctly with Netscape Navigator 3.0. Therefore, the ID attribute should be changed to NAME, which will work properly for both browsers. Change the ID attribute to NAME as follows:
<applet
code=Circle.class
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
The three parameters that you created-R, G, and B-were also automatically created in the HTML file by Applet Wizard. As you can see, all three of these were set to 0, which represents the color black.
To change the initial color of the circle, simply set the parameters to different values. For example, the following HTML code will create a green circle, because parameter G is set to 255 and the other two are set to 0:
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code=Circle.class
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=255>
<param name=B value=0>
</applet>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
Although this is useful for specifying the default color, it does not give you dynamic control over the color of the circle. To change the color of the circle dynamically, you must use a scripting language such as VBScript or JavaScript (or build that functionality into the Java applet itself). The next section explores the use of VBScript and JavaScript in controlling a Java applet.
Now you'll add buttons to the form so that the user can change the color of the circle. But first you need to add a method to the applet to provide access to the variables m_r, m_g, and m_b. These three variables are private variables that the applet sets to the values of the passed parameters, r, g, and b.
You could simply make the m_r, m_g, and m_b variables public. However, this is not good object-oriented programming practice. Instead, an accessor method should be used to change the values of these variables. Instead of creating three different accessor methods (one for each of r, g, and b), you can simply create a single method called setCircleColor:
public void setCircleColor(int red, int green, int blue)
{
m_r = red;
m_g = green;
m_b = blue;
}
You also need to create a means to make the applet repaint. Simply changing the member variables for the colors will not cause the circle to be repainted. This is easily accomplished, however, by adding a call to the repaint() method in the setCircleColor method. Here's an example:
public void setCircleColor(int red, int green, int blue)
{
m_r = red;
m_g = green;
m_b = blue;
repaint();
}
Since you have declared the setCircleColor method as
public, you can access it from a script in an HTML document. The
new version of the Circle applet can now be rebuilt.
| NOTE |
After rebuilding your applet you will most likely need to restart the Web browser since the old version will still be in the cache. |
With these changes you can now access the private member variables, m_r, m_g, and m_b, from the script using the accessor method (setCircleColor) you created. You will add three buttons to the HTML document to change the color to either red, green, or blue. You can add these buttons by placing the following form definition after the applet definition in Circle.html:
<FORM> <INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED"><P> <INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN"><P> <INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE"><P> </FORM>
This will create three buttons named cmdRED, cmdGREEN, and cmdBLUE. You now need an event handler script for the onClick event for each button. Each of the onClick event handlers will simply set the color variables to the appropriate values using the setCircleColor method that you created. For example, to handle the clicking of the red button you would use the following:
Sub cmdRED_onClick call document.Circle.setCircleColor(255, 0, 0) End Sub
As you can see, accessing the private variables of an applet through a public accessor method is fairly easy. While it is similarly easy to access the variables directly by defining them as public, this is generally not good programming practice. However, if it is desired, it is simply a matter of defining the variable with the public modifier. The variable can then be defined just like the method. Here's an example:
' DO NOT ADD THIS TO THE SCRIPT WE ARE BUILDING ' THIS IS JUST AN EXAMPLE OF ACCESSING PUBLIC VARIABLES OF AN APPLET Sub directVariableAccess document.Circle.m_r = 255 document.Circle.m_g = 0 document.Circle.m_b = 0 End Sub
Adding the event handlers for the green and blue buttons is accomplished in a similar manner, calling the setCircleColor method with the appropriate parameters. Listing 29.2 shows the modified HTML file after the addition of the buttons and their associated event handlers.
Listing 29.2. The modified HTML file for the Circle applet with VBScript.
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code="Circle.class"
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<SCRIPT LANGUAGE="VBScript">
Sub cmdRED_onClick
call document.Circle.setCircleColor(255, 0, 0)
End Sub
Sub cmdGREEN_onClick
call document.Circle.setCircleColor(0, 255, 0)
End Sub
Sub cmdBLUE_onClick
call document.Circle.setCircleColor(0, 0, 255)
End Sub
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED"><P>
<INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN"><P>
<INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE"><P>
</FORM>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
You can now view the changes to Circle.html in your Web browser. Clicking one of the three buttons changes the color of the circle. The output should now appear similar to Figure 29.2.
Figure 29.2 : The Circle applet with VBScript.
Controlling an applet with JavaScript is very similar to using VBScript; the only difference is related to the syntax of the language. The form definition for JavaScript is slightly different: You specify the event handler code in the form control tag. For example, the form definition would be as follows:
<FORM> <INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED" onClick="setRED()"><P> <INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN" onClick="setGREEN()"><P> <INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE" onClick="setBLUE()"><P> </FORM>
As you can see, the first button, named cmdRED, has an onClick event handler called setRED(). There are similar onClick event handlers for the green and blue buttons. The event handlers would then be added as follows:
function setRED() {
document.Circle.setCircleColor(255,0,0);
}
The setGREEN() and setBLUE() event handlers should be added in a similar fashion, changing the calling parameters appropriately. The complete HTML listing should now look as shown in Listing 29.3.
Listing 29.3. The complete HTML code for the Circle applet with JavaScript.
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code="Circle.class"
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<SCRIPT LANGUAGE="JavaScript">
function setRED() {
document.Circle.setCircleColor(255,0,0);
}
function setGREEN() {
document.Circle.setCircleColor(0,255,0);
}
function setBLUE() {
document.Circle.setCircleColor(0,0,255);
}
</SCRIPT>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED" onClick="setRED()"><P>
<INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN" onClick="setGREEN()"><P>
<INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE" onClick="setBLUE()"><P>
</FORM>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
This HTML document should now appear and work like the VBScript file in Figure 29.2.
Now that you have learned about the structure and parameters of the <OBJECT> tag, let's put it to use in our Circle.html document to add scrollbar controls for changing the three colors. You can use Microsoft's ActiveX controls for the scrollbars. Microsoft also provides a very useful tool to assist with inserting ActiveX controls into HTML documents called the ActiveX Control Pad. In the following example, you will use the VBScript HTML file that you developed earlier in this chapter.
The ActiveX Control Pad provides a nice user interface for inserting ActiveX controls and other objects into your HTML file. The following seven steps demonstrate the process of inserting the scrollbar control for red (refer to Figure 29.3 when performing the first four steps):
Figure 29.3 : Inserting an ActiveX control with the ActiveX Control Pad.
That's all it takes to add an ActiveX scrollbar control to your HTML file! All that's left is to add the event handler code to respond to the scrollbar events.
Repeat the instructions to insert two more scrollbars for control of green, sbGREEN, and blue, sbBLUE.
To clean things up a bit and provide captions for the scrollbars, add the following HTML code after each </OBJECT> tag:
   Red<P>
This will add two nonbreaking spaces and a color identifier followed by a paragraph break. Replace Red with Green and Blue for the other two scrollbar captions.
The resulting HTML file should now appear as in Listing 29.4.
Listing 29.4. The Circle HTML file with ActiveX controls.
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code="Circle.class"
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<SCRIPT LANGUAGE="VBScript">
Sub cmdRED_onClick
call Document.Circle.setCircleColor(255,0,0)
End Sub
Sub cmdGREEN_onClick
call Document.Circle.setCircleColor(0,255,0)
End Sub
Sub cmdBLUE_onClick
call Document.Circle.setCircleColor(0,0,255)
End Sub
</SCRIPT>
<P>
<OBJECT ID="sbRED" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Red<P>
<OBJECT ID="sbGREEN" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Green<P>
<OBJECT ID="sbBLUE" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Blue <P>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED"><P>
<INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN"><P>
<INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE"><P>
</FORM>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
The final task is to provide scripting to support the ActiveX controls you added. There are essentially two things to add for each control:
First, add the three event handlers to change the color of the circle when the scrollbar is changed. Actually, the only difference between these event handlers and the ones created for the buttons are that these modify only a single color because they allow for incremental adjustments of color. For example, the event handler for the Red scrollbar would look like this:
Sub sbRED_Change call Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
End Sub
This event handler will respond to changes to sbRED, which is the red scrollbar. When a change occurs the setCircleColor method is called with the current values of the red, green, and blue scrollbars. This will cause the m_r, m_g, and m_b variables in the Circle Java applet to be updated and the repaint() method called. The color of the circle will then change to reflect the new amount of each color specified by the scrollbars.
Add two similar functions to support the change event of the other two scrollbars, sbGREEN and sbBLUE.
Now modify the event handlers for the button's onClick events. Add three statements to each handler to update the current value of each of the scrollbars. For example, the cmdRED_onClick event handler should have the following three lines added to it:
sbRED.Value = 255 sbGREEN.Value = 0 sbBLUE.Value = 0
Now when the red button is clicked, the scrollbars will be updated to reflect the correct color of the circle. Similar statements should be added to the cmdGREEN_onClick and cmdBLUE_onClick handlers. The complete code listing is shown in Listing 29.5. The final screen output is shown in Figure 29.5.
Figure 29.5 : The final Circle applet with ActiveX controls.
Listing 29.5. The complete Circle applet.
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code="Circle.class"
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<SCRIPT LANGUAGE="VBScript">
Sub cmdRED_onClick
call Document.Circle.setCircleColor(255,0,0)
sbRED.Value = 255
sbGREEN.Value = 0
sbBLUE.Value = 0
End Sub
Sub sbRED_Change
call Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
End Sub
Sub cmdGREEN_onClick
call Document.Circle.setCircleColor(0,255,0)
sbRED.Value = 0
sbGREEN.Value = 255
sbBLUE.Value = 0
End Sub
Sub sbGREEN_Change
call Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
End Sub
Sub cmdBLUE_onClick
call Document.Circle.setCircleColor(0,0,255)
sbRED.Value = 0
sbGREEN.Value = 0
sbBLUE.Value = 255
End Sub
Sub sbBLUE_Change
call Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
End Sub
</SCRIPT>
<P>
<OBJECT ID="sbRED" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Red<P>
<OBJECT ID="sbGREEN" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Green<P>
<OBJECT ID="sbBLUE" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Blue <P>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED"><P>
<INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN"><P>
<INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE"><P>
</FORM>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
You should now be able to change the color of the circle by either pressing one of the three color buttons or changing one of the three color scrollbars. In addition, pressing the buttons should cause the scrollbars to be updated to reflect the current color of the circle.
This example could also be created using JavaScript instead of VBScript. Listing 29.6 shows this same example created with JavaScript.
Listing 29.6. The Circle applet, created with JavaScript.
<html>
<head>
<title>Circle</title>
</head>
<body>
<hr>
<applet
code="Circle.class"
name=Circle
width=60
height=60 >
<param name=R value=0>
<param name=G value=0>
<param name=B value=0>
</applet>
<SCRIPT LANGUAGE="JavaScript">
function setRED(){
Document.Circle.setCircleColor(255,0,0);
sbRED.Value = 255;
sbGREEN.Value = 0;
sbBLUE.Value = 0;
}
function sbRED_Change(){
Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
}
function setGREEN(){
Document.Circle.setCircleColor(0,255,0);
sbRED.Value = 0;
sbGREEN.Value = 255;
sbBLUE.Value = 0;
}
function sbGREEN_Change(){
Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
}
function setBLUE(){
Document.Circle.setCircleColor(0,0,255);
sbRED.Value = 0;
sbGREEN.Value = 0;
sbBLUE.Value = 255;
}
function sbBLUE_Change(){
Document.Circle.setCircleColor(sbRED.Value, sbGREEN.Value, sbBLUE.Value)
}
</SCRIPT>
<P>
<OBJECT ID="sbRED" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Red<P>
<OBJECT ID="sbGREEN" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Green<P>
<OBJECT ID="sbBLUE" WIDTH=104 HEIGHT=20
CLASSID="CLSID:DFD181E0-5E2F-11CE-A449-00AA004A803D">
<PARAM NAME="Size" VALUE="2752;529">
<PARAM NAME="Max" VALUE="255">
</OBJECT>   Blue <P>
<FORM>
<INPUT TYPE="BUTTON" NAME="cmdRED" VALUE="RED" onClick="setRED()"><P>
<INPUT TYPE="BUTTON" NAME="cmdGREEN" VALUE="GREEN" onClick="setGREEN()"><P>
<INPUT TYPE="BUTTON" NAME="cmdBLUE" VALUE="BLUE" onClick="setBLUE()"><P>
</FORM>
<hr>
<a href="Circle.java">The source.</a>
</body>
</html>
This chapter concludes Part IV. These chapters provide information about the glue that bonds your Visual J++ creations together into their final form: an HTML document. Although Visual J++ can be used to create standalone Java applications, it will most likely be used to create Java applets. Through the use of HTML and the two scripting languages, applets can be generalized and modularized. This is a powerful concept because it creates the opportunity for reusable modules.
As an example, consider the following: You are designing a Web document that requires graphing and database capabilities. You could approach this task in two ways. First, you could design everything into a Java applet. This would definitely work, but it doesn't create nice, clean generic modules that can be used again in future projects. Or you could create generic modules and glue them together using scripts. The graphing capability could be provided by a generic graphing ActiveX control. The database might be a custom applet that you design. These two components can then communicate with each other through a scripting language such as VBScript or JavaScript. When used in this way, scripting is a powerful concept.