FoilSim applet

Running an applet with CheerpJ

In this tutorial you will learn how to run a Java applet in a modern browser by integrating CheerpJ within your page.

For this tutorial we will use the FoilSim applet from NASA’s Beginner’s Guide to Aeronautics. This applet shows an interactive simulation of the aerodynamic forces of an aircraft’s wings. See more.

Prerequisites

Download the template project and unzip it
Node.js (>= 18)

The template project has the following structure:

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

1. Run a web server

To view the example, we need to host the files on a web server. Vite is a convenient tool for this, as it automatically reloads the page when the files change.

npx vite

Alternatively you can also use the http-server utility.

npm install http-server
http-server -p 8080

Open a browser tab pointing to your localhost such as http://127.0.0.1:8080/.

2. Creating a classic HTML document

The provided template contains the final index.html file. You can delete its content and start it from scratch to follow the next steps.

A basic HTML file would look like this:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>

  <body></body>
</html>

3. Add your applet content

The next step is to add the applet tag with its parameters, just like they used to be integrated on web pages. We will also add some titles, descriptions and styles.

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

  <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://labs.leaningtech.com/cheerpj3">CheerpJ</a> by
        <a href="https://leaningtech.com/">©Leaning Technologies</a>
      </h5>
    </div>
  </body>
</html>

Go to your browser and refresh the page. You will see the titles and text you just added. As expected, the applet will not be on display, instead there is the message Your browser cannot handle the applet tag!

4. Integrating CheerpJ

Integrating CheerpJ in your page is as simple as adding a <script> with the CheerpJ loader url. This will be placed within the document’s <head> tag. Next, we need to call cheerpjInit() in another script block.

Your document will look like this:

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

  <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://labs.leaningtech.com/cheerpj3">CheerpJ</a> by
        <a href="https://leaningtech.com/">©Leaning Technologies</a>
      </h5>
    </div>
    <script type="module">
      await cheerpjInit();
    </script>
  </body>
</html>

Refresh your page and now you will be able to see your applet running!

You can also replace the applet tag with <cheerpj-applet> to avoid potential conflicts with native Java

The result

Your final page will look like this:

Source code

Find the full source code in GitHub

Credits

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