|
|
for December 2, 1996: LiveConnect: The Adventure Continues
All of the examples use the dynamicText applet, written by yours truly, to be displayed. But, everything else is done in JavaScript. The scrolling of the text, the fading of the letters, the sizing of the fonts; all done in JavaScript. With LiveConnect, you don't even have to know Java to use it effectively and uniquely . Since I'm not in the business of giving Java tips, I'm just going to give you the source; straight. But, I will explain how the JavaScript side of it works, and how to use it. The point of this tip is not so much to show you how to use the dynamicText applet, but more to show you how Java and JavaScript can coexist. Making both programmer's and designer's lives easier. Think of it as an extenstion of the language. To show you how easy it is, I've embedded dynamicText in this page, and connected it to JavaScript using a simple form. Enter some text, then press setText.
<APPLET NAME = "dynamictextApp" CODE = "dynamictext.class" WIDTH = 200 HEIGHT = 25>
<PARAM NAME = "x_pos" VALUE = "2">
<PARAM NAME = "y_pos" VALUE = "15">
<PARAM NAME = "center" VALUE = "0">
<PARAM NAME = "fontface" VALUE = "TimesRoman">
<PARAM NAME = "fontsize" VALUE = "16">
<PARAM NAME = "fontcolor" VALUE = "0,0,0">
<PARAM NAME = "bgcolor" VALUE = "255,255,255">
</APPLET>
The name of the dynamicText class file, while contains the compiled Java code, is "dynamictext.class". The dynamicText app has eight initial parameters; all must be included for it to work. The first two, "x_pos" and "y_pos" control the placement of the text (in pixels) in relation to the upper left hand corner of the applet. The next, "center", determines if the text will be centered. Setting this to "1" will center the text, anything else will just be ignored.
The next three; "fontface", "fontsize", and "fontcolor", speak for themselves. The only thing that you should note is that the color of the font is done in RGB, as opposed the hex (00, FF etc.). The values for each color, which are between 0 and 255, must be in this form: "rrr, ggg, bbb". For instance, if I want straight blue text, I'd use this RGB color in the "fontcolor" parameter : "0,0,255". The same rule applies to the "bgcolor" parameter, which controls the color of the applet's background. Now on to the fun part: controlling the applet throught JavaScript. Referring to an applet in JavaScript is very easy, just use its name (The name paramter in the APPLET tag specifies the name). In this case, I can referr to the dynamicText applet like this: "document.dynamictextApp". The dynamicText applet has a group of Methods, which are very similar to functions, that allow JavaScript to control what's happening in the applet. The first and foremost is the setText() Method, which allows you to change the text that the applet is displaying. To do this, simply pass setText() a string of text:
document.dynamictextApp.setText("Some Text");
This would display "Some Text" in the dynamicText applet window. There are a number of other things that can be changed on the fly using JavaScript, and here they are:
Font Size: must be an integer. This would be size 12 pt:
document.dynamictextApp.setfSize(12);
Font Color: must be in the RGB format. This would be red:
document.dynamictextApp.setfColor("255,0,0");
Height and Width positioning: This would be 10 pixels down, 10 pixels over left:
document.dynamictextApp.setXY(10,10);
In the future, you will see more options, but for now I'm sure these will suffice. How about a few more for practice? Let's make the font color a light grey, change the font size to 24, and make the text say, "I am the text.":
document.dynamictextApp.setfColor("190,190,190");
document.dynamictextApp.setfSize(24);
document.dynamictextApp.setText("I am the text.");
Alone this may seem only slightly interesting, but I used these same functions (or Methods) to do all those whiz-bang examples. To find out how I did it and how you can too, read on to part 2.
|
| ||||||||||||||||||||
