First GUI

This is mostly just a test to make sure the new feature of Codespaces I found actually works for us.

Go to your Github repo

Go to your Github repo and click the green Code button

Open Codespace tab

From there click the “Codespaces” tab.

Make a new Codespace

If you see something like this, click the big green button. Otherwise see the next slide.

If you don’t see that

If you’ve already created codespaces you won’t see the “Create codespace on main” button. In that case click the + icon.

Open a terminal

In the file explorer find the file make-project and right click on it and choose “Open in Integrated Terminal”

Run make-project

In the terminal type:

./make-project gui

This will create a folder named gui under the projects folder.

Make a new file

Click on gui in the file explorer and then click the new file button at the top of the page:

Name the file

In the box that pops up type GUI.java and hit return.

Copy some code

Copy and paste the code from here into GUI.java

Click “Ports”

Open port in browser

Find the line that starts with 6080 and over over the “Forwarded Address” column. Some icons should appear. Click the globe.

Connect to noVNC

In the new browser tab click the Connect button.

Enter password

It will ask for a password. Enter vscode

Run the code

Back in your codespace tab, in the GUI.java editor click the play button at the top of the page.

Switch to desktop tab

Assuming you don’t get any error, switch back to the other tab and you should see a simple GUI.

Experiment

Go back to the code and try changing things and rerunning. Can you add some more buttons? How about more labels? Can you move things around? What is that BoxLayout anyway? Can you make a UI for a tic tac toe game? Go nuts!