Java Swing with GitHub Codespace

Due to the limitation imposed by repl.it, I had to find another alternative for creating a web interface for developing Java Swing applications.  Through my research and experimentation, I was able to get Java Swing (Graphics) working.  As a computer science teacher, this became an important resource for my students, especially those needing a web interface for writing such a program.  I hope this resource serves you well.

This technique involves connecting a GitHub codespace to have a graphical output via port designated for graphics.  Add-ons include Java, VNC via Desktop lite, and a x11 Docker called OpenBox.

Get a GitHub account if you haven't already.  Create a repository for this after logging in.  Create or upload at least one file in there (e.g Runner.java). Commit the changes.

Then, go to https://github.com/codespaces and create a new codespace.  Use the repository you created for this.  For machine type, select the higher cores for better performance.  Create the codespace.

Then click the text field at the very top center, and select Show and Run Commands.

Then type in "Add Dev Container…" and select "Codespaces: Add Dev Container Configuration Files"

Select Create a new configuration.

Select JAVA devcontainers.  Chose the default options.  It may ask you to rebuild your codespace but you can do this later.

Use the default

Leave everything else unchecked and click OK for all the following prompts.

Go to the file Manager on the left pane.

Modify the devcontainer.json file to have the following.

{

    "name": "Java",

    "image": "mcr.microsoft.com/devcontainers/java:1-21-bullseye",

    "build": {

        "dockerfile": "Dockerfile"

    },

    "features": {

        "ghcr.io/devcontainers/features/java:1": {

            "version": "none",

            "installMaven": "false",

            "installGradle": "false"

        },

        "ghcr.io/devcontainers/features/desktop-lite:1": {

            "password": "vscode",

            "webPort": "6080",

            "vncPort": "5901"

        }

    }

}

Create a Dockerfile in the .devcontainer folder in the file manager on the left hand side.

Edit the Dockerfile and add the following code. (Source: https://github.com/orgs/community/discussions/118415)

# Start from the universal image

FROM mcr.microsoft.com/devcontainers/universal:2

# Install openbox

RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \

    && apt-get -y install --no-install-recommends openbox

# Set openbox to start automatically

RUN echo 'openbox-session &' >> ~/.xinitrc

Rebuild the container.  Click the text field at the very top center, and select Show and Run Commands. Type in Rebuild and select "Codepsaces: Rebuild Container".  This can take a long time.

Now we need to set up the ports to display the graphical output.  Select PORTS tab at bottom panel.  Click on Forward a Port.

Click Add Port and under Port add in 6080.

Hover your mouse cursor over Forwarded Address and click Open in Browser.  This should open a new browser tab where you can view the Graphical outputs from your Java program.

Select Connect in this tab.

Modify your Runner.java with the following test code.

import javax.swing.*;

import java.awt.*;

public class Runner {

    public static void main(String[] args) {

        //Create the frame.

        JFrame frame = new JFrame("Test");

        JPanel canvas = new JPanel();

        canvas.setPreferredSize( new Dimension( 800, 600 ) );

        frame.add(canvas);

        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        frame.pack();

        frame.setVisible(true);

    }

}

Then compile and run the Runner.java file in TERMINAL.

Switching over to the tab where the graphics are displayed. You should see this.  You may be to reconnect in the noVNC graphical tab.

Hope this helps you and/or your students!