Run a Java Applet in the Browser (FoilSim)

Running an applet with CheerpJ

This tutorial runs a Java applet in a modern browser by adding CheerpJ to the page that hosts it.

The tutorial uses the FoilSim applet from NASA’s Beginner’s Guide to Aeronautics. The applet is an interactive simulation of the aerodynamic forces on an aircraft wing. See more.

Prerequisites

• Node.js (>= 18)
• A copy of the tutorial repository

  git clone https://github.com/leaningtech/cheerpj-meta.git

• Go to the projectTemplate directory of the FoilSim-Applet example:

  cd examples/FoilSim-Applet/projectTemplate

The template project has the following structure:

projectTemplate/
├── index.html
└── FoilSim.jar

1. Run a web server

CheerpJ loads the applet from a web server, so the files must be served over HTTP. Vite works well during development because it reloads the page when the files change.

npx vite

Open the URL shown in the terminal. The page is blank. Leave Vite running for the rest of this tutorial.

Alternatively, use the http-server utility:

npx http-server -p 8080

Then open http://127.0.0.1:8080/ in the browser.

Note

The server must support HTTP Range requests, and the page cannot be opened from file://. Python’s http.server does not support Range requests. See basic server setup.

2. Open index.html and add your applet content

The template is a minimal HTML page. Replace its content with the code below, which adds the applet tag with its attributes, as it would appear on a page written for the Java plug-in, along with a title, credits and some styles.

The page uses <cheerpj-applet> rather than <applet>. CheerpJ handles both, along with <object> and <embed>, and their cheerpj- prefixed versions. The prefixed tag stops a Java plug-in, if one is installed, from trying to run the applet instead of CheerpJ.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FoilSim applet (CheerpJ)</title>
    <style>
      div {
        max-width: 1000px;
        margin: auto;
        text-align: center;
      }
      h1 {
        margin-bottom: 50px;
      }
      h5 {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div>
      <h1>Applet example with CheerpJ</h1>
      <div>
        <cheerpj-applet
          archive="FoilSim.jar"
          code="Foil.class"
          height="450"
          width="950"
        >
          Your browser cannot handle the applet tag!
        </cheerpj-applet>
      </div>
      <h5>
        The applet shown in this example belongs to the NASA's
        <a href="https://www.grc.nasa.gov/WWW/K-12/airplane/"
          >Beginner's Guide to Aeronautics</a
        >
        and it is available at their
        <a href="https://github.com/nasa/BGA/tree/main">GitHub repository</a>.
      </h5>
      <h5>
        Applet is running with
        <a href="https://cheerpj.com/">CheerpJ</a> by
        <a href="https://leaningtech.com/">©Leaning Technologies</a>
      </h5>
    </div>
  </body>
</html>

Refresh the page. The title and credits are shown, but the applet is not. In its place is the fallback text Your browser cannot handle the applet tag!

3. Add CheerpJ

Add a <script> tag with the CheerpJ loader URL to the <head>, then call cheerpjInit() in a second script at the end of the <body>. CheerpJ finds the applet tags on the page and runs them.

The page looks like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>FoilSim applet (CheerpJ)</title>
    <script src="https://cjrtnc.leaningtech.com/5.0/loader.js"></script>
    <style>
      div {
        max-width: 1000px;
        margin: auto;
        text-align: center;
      }
      h1 {
        margin-bottom: 50px;
      }
      h5 {
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <div>
      <h1>Applet example with CheerpJ</h1>
      <div>
        <cheerpj-applet
          archive="FoilSim.jar"
          code="Foil.class"
          height="450"
          width="950"
        >
          Your browser cannot handle the applet tag!
        </cheerpj-applet>
      </div>
      <h5>
        The applet shown in this example belongs to the NASA's
        <a href="https://www.grc.nasa.gov/WWW/K-12/airplane/"
          >Beginner's Guide to Aeronautics</a
        >
        and it is available at their
        <a href="https://github.com/nasa/BGA/tree/main">GitHub repository</a>.
      </h5>
      <h5>
        Applet is running with
        <a href="https://cheerpj.com/">CheerpJ</a> by
        <a href="https://leaningtech.com/">©Leaning Technologies</a>
      </h5>
    </div>
    <script type="module">
      await cheerpjInit();
    </script>
  </body>
</html>

Refresh the page. The applet runs in place of the fallback text.

Java applets and Java 8

cheerpjInit runs Java 8 when no version is set. Applets run on Java 8 only, so do not set version to 11 or higher on a page that runs an applet.

The result

The finished page looks like this:

Source code

View full source code on GitHub

Credits

The applet used in this tutorial belongs to NASA’s Beginner’s Guide to Aeronautics and it is available at their GitHub repository.

Further reading

• Run a Java applet
• Runtime API reference