Modern Java
http://www.modernminds.com
E mailBar Demo

 The EMailDirectory demo allowed you to send email by selecting a recipient name from a list. When a name was pointed to, the demo displayed a picture of the recipient, and when the name was clicked, the email client was launched. The EMailBar demo reverses this procedure and allows you to select an email recipient by pointing to a picture.

NOTE: Because of the demands this demo places on the Java Virtual Machine, users of Netscape Navigator 3.x might experience poor performance. This is not an applet bug, but rather a limitation of Navigator 3.x (Navigator 4 and higher should work fine).

A pplet Tag

 The applet tag for the EMailDirectory applet is shown below.
<APPLET CODEBASE="../../Java"
  WIDTH="231" HEIGHT="100"
  CODE="WildViewApplet.class">
<PARAM NAME="loadMsg"
  VALUE="Opening the bar...">
<PARAM NAME="background"
  VALUE="DocExamples/EMailBar/EMailBarBackground.JPG">
<PARAM NAME="panelSet1"
  VALUE="DocExamples/EMailBar/EMailBar.TXT">
</APPLET>
P anel Set File

The panel set file used by the EMailBar demo is shown below.
<PANEL name=Faces module="WVPanelImage"
  hidden=true w=50 h=50
  image="DocExamples/EMailBar/EMailBarPeople.JPG"
  loadTrigger=init>

<PANEL name=text module="WVPanelText"
  x=10 y=67 w=211 h=24
  background=clear font="Courier"
  fontSize=14 fontStyle=bold
  fontColor=c1eff4 justify=center
  align=middle>
EMail Directory Bar

<PANEL name=url module="WVPanelURL"
  x=10 y=6 w=219 h=50
  enable=false>

<PANEL name=Reset module="WVPanelTrigger"
  x=6 y=6 w=219 h=50>
<TRIGGER event=mouseEnter
  panel=url enable=true>
<TRIGGER event=mouseExit
  panel=url enable=false>
<TRIGGER event=mouseExit
  panel=text fontColor=c1eff4
  text="EMail Directory Bar">

<PANEL name=fx1 module="WVPanelFx"
  x=6 y=6 w=50 h=50
  clock=80 frames=4
  sourcePanel=Faces>

<PANEL name=fx2 module="WVPanelFx"
  x=63 y=6 w=50 h=50
  clock=80 frames=4
  sourcePanel=Faces>

<PANEL name=fx3 module="WVPanelFx"
  x=120 y=6 w=50 h=50
  clock=80 frames=4
  sourcePanel=Faces>

<PANEL name=fx4 module="WVPanelFx"
  x=175 y=6 w=50 h=50
  clock=80 frames=4
  sourcePanel=Faces>

<PANEL name=init module="WVPanelTimer"
  initWait=Faces loop=1>
<TRIGGER panel=fx1 sourceX=0 sourceY=0
  sourceW=50 sourceH=50
  effect=none filter=gray>
<TRIGGER panel=fx2 sourceX=50 sourceY=0
  sourceW=50 sourceH=50
  effect=none filter=gray>
<TRIGGER panel=fx3 sourceX=100 sourceY=0
  sourceW=50 sourceH=50
  effect=none filter=gray>
<TRIGGER panel=fx4 sourceX=150 sourceY=0
  sourceW=50 sourceH=50
  effect=none filter=gray>

<PANEL name=Face1 module="WVPanelTrigger"
  x=6 y=6 w=54 h=50>
<TRIGGER event=mouseEnter panel=text
  text="Joey Jones"
  fontColor=ff2020>
<TRIGGER event=mouseEnter panel=url
  url="mailto:jjones@modernminds.com">
<TRIGGER event=mouseEnter panel=fx1
  effect=fade filter=none>
<TRIGGER event=mouseExit panel=fx1
  effect=fade filter=gray>
<TRIGGER event=buttonDown panel=fx1
  effect=none filter=red>
<TRIGGER event=buttonUp panel=fx1
  effect=zoom filter=none>

<PANEL name=Face2 module="WVPanelTrigger"
  x=60 y=6 w=55 h=50>
<TRIGGER event=mouseEnter panel=text
  text="Stevie Smith"
  fontColor=ff2020>
<TRIGGER event=mouseEnter panel=url
  url="mailto:ssmith@modernminds.com">
<TRIGGER event=mouseEnter panel=fx2
  effect=fade filter=none>
<TRIGGER event=mouseExit panel=fx2
  effect=fade filter=gray>
<TRIGGER event=buttonDown panel=fx2
  effect=none filter=red>
<TRIGGER event=buttonUp panel=fx2
  effect=zoom filter=none>

<PANEL name=Face3 module="WVPanelTrigger"
  x=115 y=6 w=55 h=50>
<TRIGGER event=mouseEnter panel=text
  text="Sir Charles Whoteris"
  fontColor=ff2020>
<TRIGGER event=mouseEnter panel=url
  url="mailto:cwhoteris@modernminds.com">
<TRIGGER event=mouseEnter panel=fx3
  effect=fade filter=none>
<TRIGGER event=mouseExit panel=fx3
  effect=fade filter=gray>
<TRIGGER event=buttonDown panel=fx3
  effect=none filter=red>
<TRIGGER event=buttonUp panel=fx3
  effect=zoom filter=none>

<PANEL name=Face4 module="WVPanelTrigger"
  x=170 y=6 w=55 h=50>
<TRIGGER event=mouseEnter panel=text
  text="Tanya Beninomy"
  fontColor=ff2020>
<TRIGGER event=mouseEnter panel=url
  url="mailto:tbeninomy@modernminds.com">
<TRIGGER event=mouseEnter panel=fx4
  effect=fade filter=none>
<TRIGGER event=mouseExit panel=fx4
  effect=fade filter=gray>
<TRIGGER event=buttonDown panel=fx4
  effect=none filter=red>
<TRIGGER event=buttonUp panel=fx4
  effect=zoom filter=none>

Notes
  • To convert the color images to grayscale when the EMailBar is initially displayed, a WVPanelTimer panel is used to send triggers to each WVPanelFx panel to apply a gray filter to each color image (the transition effect is "none" so a direct cut is performed). Note that the loop attribute for the WVPanelTimer panel is set to 1 (one) so that the WVPanelTimer panel does not loop, and also notice that the WVPanelTimer panel waits (initWait=Faces) until the WVPanelImage panel has completely loaded the image file (loadTrigger=init) before it begins sending the triggers.

  • The WVPanelFx panels do not use the preRender attribute. This is because if the preRender attribute is set to true, then there will be a delay while each frame of the animation is rendered before the transition animation begins. The user is probably expecting something to happen right away when the mouse is moved over a photo and if there is a significant delay before the animated transition begins, then the user might assume that something is not working correctly.

  • To increase the responsiveness when the mouse is moved over or off of a button, you could make a modification so that a direct cut to the color or grayscale image is performed rather than a fade. A direct cut would eliminate the computational time required to create the frames of animation.
I mage Files

The image files used by the EMailBar demo are shown below:

EMailBarPeople.JPG

EMailBarBackground.JPG
Copyright © 1997 by Modern Minds, Inc.