Demo Applet & Application

Click to start applet
 
 
 

Source Code

Download tar.gz, zip
Documentation
 

Using Java applets and applications portably

Part 3: Creating applet launch buttons with CSS

Oracle's web applet deployment framework (deployJava.js) only allows the Web Start application button to be customized with an image. As described earlier, it doesn't provide a button based launch mechanism for applets at all. Ideally, one would like both applets and applications to be launched with CSS styled buttons (or even HTML5 button elements). The latter solution plays well with browsers and search engines. This is because CSS scales well and the text of the buttons can be easily indexed by a search engine.

HTML & Javascript elements of launch buttons

The applet and application launch buttons for the demo on the right are implemented as combination of HTML, CSS elements and Javascript. The HTML element for the applet launch button is very straightfoward and is shown below:

<div class="button-css">
  <a href="javascript: createApplet('applet0')">Launch Applet</a>
</div>

The Javascript magic needed to launch the applet is embedded in the anchor (<a>) link reference. It isn't executed until the button is clicked, thereby delaying the launch of the applet until it is explicitly requested by the user.

The HTML element for the application launch button has a slightly more complex structure. The anchor element in the applet is replaced by a script element that generates the button url and the anchor tag on page load. The anchor tag in turn invokes the application launch when the button is pressed. The code that does this shown below.

<div class="button-css">
  <script type="text/javascript">
    var js = deployJava.webStartLaunchButtonJS(
    jnlpapplication_url, version);
    document.write(
      '<a href="' + js
      + '" onMouseOver="window.status=\'\'; '
      + 'return true;">Launch Application</a>');
  </script>
</div>

CSS to render launch buttons

Notice that the 'buttons here are acutally just link(anchor (<a>) elements inside <div> elements. Without any CSS they appear as simple links. The CSS class button-css renders the <div> and anchor (<a>) elements to resemble a button. The HTML5 button element could have been used for the same purpose, but would not be as backward compatible with older browsers that don't support HTML5. The CSS that does this is given below.

div.button-css {
  margin-top: 4pt;
  margin-bottom: 4pt;
}

div.button-css a:link {
  padding-top:2pt;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2pt;
  background: #A0A090;
  color: beige;
  box-shadow: 2px 2px 4px #365350;
  text-decoration: none;
  font-size: 9pt;
}

div.button-css a:visited {
  padding-top:2pt;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 2pt;
  background: #A0A090;
  color: beige;
  box-shadow: 2px 2px 4px #365350;
  text-decoration: none;
  font-size: 9pt;
}

div.button-css a:hover {
  padding-top:2pt;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2pt;
  background: #A0A090;
  color: white;
  text-decoration: none;
  box-shadow: 2px 2px 4px #365350;
  font-size: 9pt;
}

div.button-css a:active {
  padding-top:2pt;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 2pt;
  background: #A0A090;
  color: beige;
  text-decoration: none;
  box-shadow: 0 0 0;
  font-size: 9pt;
}

The CSS above achieves the 'click' effect of a button by changing the shadow of the anchor when it is pressed.

The Complete Source Code and Documentation

You can find a description of the Javascript invoked in second article in this series, while the first article describes the Java code of the actual applet and application themselves. You can read the documentation or download the entire source code for the demo applet and application, including the CSS, HTML, Javascript and Java code, as a tar.gz or zip archive. Happy hacking!