GUI App Widget

You may want to create window-based GUI applications in your course for learners. You can use the 'GUI App widget' to create the GUI applications.

We'll cover the following

This is what it looks like:

Press + to interact
Edit mode
Edit mode

What do I need to know?

  • Line Numbers: You can choose to hide or include line numbers in all files through this checkbox.

  • Hide Code: You may want learners to interact with the output application only. To hide the code, mark this checkbox.

  • Render Output Tab in Mobile View: You can enable this feature to view the application in mobile view.

  • Loaders: You can choose the loader of your choice from the available 2 frameworks:

    • Java - Swing

    • Python - tkinter

  • Add Hello World for <loader>: You can generate a simple application for the selected loader.

  • Code Height: You can specify the size of the coding window in pixels.

  • Output Height: You can specify the size of the output window in pixels.

  • Highlight lines: You can highlight important lines of code in any file. Open the file from the side panel and enter the line ranges. For example:
    1-3
5
    This will highlight lines 1-3 and line 5 of the selected file.

  • Hide File: You may find a file irrelevant to learners. Open the file from the side panel and mark this checkbox.

  • Mark current file as read-only: You may want learners not to alter a particular file. Open the file from the side panel and select this checkbox.

  • Disable Execution: Select this checkbox to make the program non-executable. By default, learners can run the code.

  • Mark as Primary File: You may want learners to view a particular file at first glance. Open the file from the side panel and mark this checkbox.

  • Upload File: You can upload a file locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • Upload Folder: You can upload a folder locally to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • New File: You can add a new file to your program. This button creates a file in the main directory, i.e., usercode folder at the backend.

  • New Folder: You can add a new folder to your program. This button creates a file in the main directory, i.e., usercode folder at the backend. Once a folder is created you can create another folder or file inside it.

Press + to interact

Example

Below, is an example of a default application with the Java Swing loader.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Main extends JFrame implements ActionListener {
	private JLabel labelQuestion;
	private JLabel labelWeight;
	private JTextField fieldWeight;
	private JButton buttonTellMe;
	public Main() {
		super("Water Calculator");
		initComponents();
		setSize(Toolkit.getDefaultToolkit().getScreenSize());
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}
	private void initComponents() {
		labelQuestion = new JLabel("How much water should a person drink?");
		labelWeight = new JLabel("My weight (kg):");
		fieldWeight = new JTextField(5);
		buttonTellMe = new JButton("Tell Me");
		setLayout(new FlowLayout());
		add(labelQuestion);
		add(labelWeight);
		add(fieldWeight);
		add(buttonTellMe);
		buttonTellMe.addActionListener(this);
	}
	public void actionPerformed(ActionEvent event) {
		String message = "Buddy, you should drink %.1f L of water a day!";
		float weight = Float.parseFloat(fieldWeight.getText());
		float waterAmount = calculateWaterAmount(weight);
		message = String.format(message, waterAmount);
		JOptionPane.showMessageDialog(this, message);
	}
	private float calculateWaterAmount(float weight) {
		return (weight / 10f) * 0.4f;
	}
	public static void main(String[] args) {
		new Main().setVisible(true);
	}
}
Water consumption calculator

Learners see a URL next to the "Run" button, which takes them to a seperate tab where they can see application.

You can see the code for 'Hello World' applications in Java and Python below.

Can I link my GitHub account?

It's very common to add our code repositories on GitHub.

  • Provide github token: You can access the code from your GitHub repository by adding your personal access token here.

  • Import code from Github: You can specify the repository path and import programs. The size of the project should be less than 750 KB. Otherwise, the SPA may not work as intended.

GitHub limits the number of times a code can be imported from a repository anonymously. Usually, this limit is not very high to avoid unnecessary spam/attacks. If the limit is reached, the code can not be imported. You can overcome this error by following certain steps. To begin, follow the steps below:

  • Step I: Sign in to your personal GitHub account and visit this page. It will open the page like below:

Press + to interact

  • Step II: In the “Note” field, add a note explaining why you need a token.

  • Step III: Next, you’ll see the “Select scopes” option. If you check any of the options, you’ll allow a third party to perform the chosen operations on your repository. So choosing the write or read key would allow a third party to read/write to your repository. When you scroll to the end of the page, you’ll see the “Generate token” button; click it. You’ll see a section like the one below.

The green section shows the token generated. Copy the token and save it somewhere since you won’t be able to see it again. Paste this token in the “Provide GitHub token” option. Now, go to the “Import code from Github” option and import the required code. This time, error 403 will not show up.

Personal tokens have a much higher import limit since GitHub can identify your account because you’re not anonymously importing; hence, the spam/attack security risk is considered relatively less.