SwingSet3
Porting a Swing application to the web
In this tutorial, we’ll run the SwingSet3 application in the browser.
View demoPrerequisites
- Download the template project and unzip it
- Node.js
(>= 18)
The starting point of this example is an empty HTML page, the SwingSet3 jar, and its dependencies:
.├── index.html├── SwingSet3.jar└── lib ├── AnimatedTransitions.jar ├── AppFramework.jar ├── Filters.jar ├── MultipleGradientPaint.jar ├── TimingFramework.jar ├── javaws.jar ├── swing-layout-1.0.jar ├── swing-worker.jar └── swingx.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
Visit the URL shown in the terminal and you should see a blank page. Leave Vite running in the background for the remainder of this tutorial.
2. Add CheerpJ to the document
Let’s add CheerpJ to the page by adding this script tag to the <head>
:
<script src="https://cjrtnc.leaningtech.com/3.1/cj3loader.js"></script>
3. Initialise CheerpJ and run the jar
Add the following script tag to the <body>
:
<script type="module"> await cheerpjInit(); cheerpjCreateDisplay(800, 600); await cheerpjRunJar("/app/SwingSet3.jar");</script>
This will initialise CheerpJ, create a 800x600 display, and run the SwingSet3 jar. We use type="module"
so that we can use top-level await.
What is /app/SwingSet3.jar?This is a virtual filesystem which represents the root of the web server.
Save the file and you should see SwingSet3 load and run in the browser. 🥳
4. Make the application take up the whole page
The application takes up a small portion of the page, but for many applications we want to take up the whole page.
To do this, we’ll add a new element to the <body>
:
<div id="container"></div>
NoteMake sure you add the container element before the script which calls cheerpjCreateDisplay.
And then add some CSS:
<style> html, body { margin: 0; }
#container { width: 100vw; height: 100svh; }</style>
Finally, update the script to use the container element:
<script type="module"> await cheerpjInit(); cheerpjCreateDisplay(-1, -1, document.getElementById("container")); await cheerpjRunJar("/app/SwingSet3.jar");</script>
Passing -1
as the width and height tells CheerpJ to use the full size of the container element, and listen for resize events.
View the page again, and you should see the application take up the entire window. Also notice that resizing the window resizes the application.