Lets have a bit of fun with our CA Plex / WebClient application – lets change the panel background to a snow storm. This will be done with a bit of javascript, and adding a triple “myfunction is a SnowShell”. We will use the javascript example posted at this URL http://javascript.about.com/library/blsnow2.htm.

First download this zip containing HTML/Javascript and snowflake images. You will use these files in the exercise.

Steps

1. Create a SnowShell web template shell function

Most Plex developers are familiar with this concept. Enter two triples like the screen print below.

2. Inherit from the new function

 Here is a very simple example.

3. Create a web template file

Switch over to Eclipse/Rational and insert a new template into your project. For simplicity we will add directly to the WebClient template folder, but typically you will add this to a new project folder with your WebClient customizations. To add the new template, copy the SnowShell-page.wcli file into this folder. This template is very simple.

Two bits of html/javascript are required, highlighted in red:

/(!CSSInit)
@import "/wxpcourse60web/CSS/standard.css";
/(!CSSInit)

/(!HeadArea)
<script src="/(!WsRes)/js/snow.js" type="text/javascript">
</script>
/(!HeadArea)
/(!MainArea)

<table border="0" width="100%" height="48px">
<tr>
<td valign="top">
<img src="/(!WsRes)/images/snowflake.gif"></img>
</td>
<td align="right"
<a href="#">My WebClient i+ Application</a> | <a href="#">Logout</a> | <a href="#">Preferences</a> |<a href="#">Help</a>
</td>
</tr>
</table>
<div>
<div style="position: relative;">
/(!AttachPoint:name=MainArea)
</div>
</div>
<script type="text/javascript">
startSnow();
</script>
/(!MainArea)

4. Copy the supplied Image, CSS, and js files

Copy the supplied images, CSS, and JS into your WebContent folder, into subdirectories by these names.

5. Gen and build, and view results

Happy Holidays!