The APPLET Tag
The APPLET tag for DynamicBillboard is fairly easy to configure. You name the main class in the code parameter and specify the width and height, as with most applets:
<applet code=DynamicBillboard width=392 height=72>
There are several parameters that must be specified for the applet to function properly. Without them the applet does nothing. Also, you will notice that if you make any mistakes naming files and such, the behavior is a little unfriendly: either nothing happens or some of your billboards will be blank. The following parameters are specified as:
<param name=parameter_name value="your value here">
- bgcolor This parameter is used to set the background color of the appletbe fore the first image loads. You can use this to get rid of the gray applet square quickly.
- delay This parameter specifies the number of milliseconds between each billboard. Typically, it’s a number like 5000 or 10000, meaning five or ten seconds.
- billboards This parameter specifies the number of billboards you wish to cycle through.
- bill# This is shorthand for bill0, bill1, bill2, and so on, up to one less than the number of billboards you’ve specified. (Robert is a typical programmer who starts counting at 0.) You will have as many of these as you specified in the billboards parameter. The value of each of these bill#s will be a pair of strings separated by a comma. The first one is the image name to display for this billboard. The second is the URL of where to go when the user clicks on this billboard. Here is an example:
<param name="bill0" value="sample.jpg,http://www.example.com/">
- ■ transitions This is a list beginning with the number of items in the list as an integer, followed by the list of Transition subclass names. Here is an example:
<param name="transitions" value="2,TearTransition,SmashTransition">
Here is an example of a complete APPLET tag with all of the transitions discussed in this chapter:
<applet code=DynamicBillboard width=392 height=72>
<param name="bgcolor" value="#ffffff">
<param name="delay" value="5000">
<param name="billboards" value="5">
<param name="bill0"
value="board1.jpg,http://www.someURL">
<param name="bill1"
value="board2.jpg,http://www.someURL">
<param name="bill2"
value="board3.jpg,http://www.someURL">
<param name="bill3"
value="board4.jpg,http://www.someURL">
<param name="bill4"
value="board5.jpg,http://www.someURL">
<param name="transitions"
value="5,ColumnTransition,FadeTransition,TearTransition,
SmashTransition,UnrollTransition">
</applet>
Robert Temple is a software engineer who has designed several highly used applets. His work includes the ESPNET SportsZone “HitCharts” and “Batter vs. Pitcher” applets. One of his most impressive applets is DynamicBillboard, which he wrote while he was at Embry-Riddle Aeronautical University in Florida.
The DynamicBillboard applet displays a sequence of images by repeatedly changing the image on the screen to another after a period of time. The transition between one image and the next is done with one of a variety of special effects. One example of a transition is the SmashTransition, where the new image drops down from above the old image and appears to smash the old image out of place. The applet links to other pages through a URL associated with each image. When the user presses the mouse button with the cursor over the applet, the browser will go to the new page associated with the current image. The DynamicBillboard applet provides web sites with an elegant way to rotate ads, banners, or billboards on a single static page.
Robert has included many interesting optimizations. This applet would not be
functional without the careful changes that he crafted. There are enough tips and tricks
in this source code to help you make your applets really fly.
Dynamic Code
Robert has shown us how to create interactive high-performance graphics by working around many of the apparent limitations in Java. He shows how to use System.arraycopy( ) to effectively shuffle pixel data around. He shows how to properly use cooperative multithreading to do computation and network transfers in the background while the user isn’t waiting. Robert proves that high-performance direct pixel manipulation algorithms can be efficiently written in Java if you are careful.
In addition to containing interesting code, DynamicBillboard is a very compelling applet for nonprogrammers and users alike. It is easily configured by HTML editors, extensible by Java programmers, and entertaining to web users. In this age of advertising rates being driven by “click-through,” where advertisers only want to pay for transfers from a content site to their site, Robert’s applet can be used to increase traffic and ultimately increase revenue.
Image-Based Web Menu
The ImageMenu applet is a simple program that presents an image-based menu with an arbitrary number of choices in a vertical list. When the user moves the mouse cursor over these choices, the one under the cursor changes appearance, indicating that it can be clicked on. When the user clicks on a choice, the web browser changes to a new document specified for that choice. ImageMenu was created by David LaVallée, the creator of several interesting applets.
ImageMenu uses the showDocument( ) function in AppletContext to make the hypertext leap to the new pages. The novelty of ImageMenu is that it uses different portions of a single source image to draw the menu on the screen. Basing a menu on an image rather than on text frees you to design menus that use any font or image you desire. You can also provide various types of selection feedback. You no longer need to rely on the AWT’s limited rendering functions.
The ImageMenu applet was inspired by an applet called Navigation, created by top-notch Java programmer Sean Welch. The difference between Navigation and ImageMenu is efficiency in bandwidth and applet tag specification. The Navigation applet uses a source image that is the applet’s width times the number of possible selections wide to display all of its states. Both applets download a single image, which is much more efficient over the Internet than loading multiple files. A menu of seven choices for the Navigation applet (100×140 pixels) would require a source image of 700×140. The applet described here, ImageMenu, uses a source image that is two times the applet width, or 200×140. Most web designers hate typing when they don’t have to, which leads to the second significant difference between Navigation and ImageMenu: abbreviated applet parameters.
While ImageMenu is many times more efficient, using a smaller source image and fewer bytes of parameters, Welch’s Navigation has one inimitable trait—it can display individually selected “states” that bleed over into the space of the next menu item. The ImageMenu applet requires that each menu item be self-contained in a rectangular area that cannot overlap with adjacent items. This would prohibit, for example, ascending letters (like h) from overlapping descending letters (such as j) in the line above.
The Source Image
While you won’t see the code for Navigation here, looking at its GIF image shows clearly what it does. The source image for Navigation in Figure 30-2 shows seven columns, each of which provides a visual representation of a possible selection. However, each selectable item only has two states, so each row has five redundant copies of the unselected state.
Given this image, it is simple to render any of the seven possible states of a six-choice menu. First, drawImage( ) displays the left half of the source image. This is the state where no items are selected. If any of the items is selected, then the clipping rectangle is simply set to the bounds of the selected item, and drawImage( ) is used to display the right-hand side. This will paint just the selected cell through the clipping rectangle.
No comments:
Post a Comment