[TUT] How to make a simple GUI

[Sebastian]

Sebastian's GUI Tutorial

 

Intro

Hi, and welcome to my guide on how to make a GUI. I want to make this thread because i couldn't find a tutorial on GUI's on the OSBot forums. Today we are going to make a GUI for a woodcutting script. Keep in mind that i only use woodcutting as an example. You can easily replace woodcutting with every other thing. In this tutorial we will use Java Swing. 

This tutorial is "noob" friendly but i assume that you know a little bit about Osbot scripting. If you don't, please follow Apae's tutorial on how to make your first script

We are creating a GUI with comboBox and a start button.

NOTE: English is not my first language so bear with me if i use any spelling mistakes in this tutorial.

General information

GUI stands for "Graphical User Interface". This is a box that will appear when you start your script. The user of your script can apply settings for your bot.

What do we need?

1. Basic Java knowledge
2. Eclipse or IntelliJ

Step 1: Creating the classes

The first thing we need to do is creating the classes. I decided to make 2 classes:

1. main
2. gui

First we create the gui class.

public class gui {

	public void run() {

	// Enter new code
	
	}
}

Now we want to connect the gui class with the main class. We can do that by typing "main main" into the public void run().

Example:

public class gui {

	public void run(main main) {

	// Enter new code
	
	}
}

To tell that the gui exists we need to write some code in the main class:

private gui gui = new gui();

Now the gui class is connected with the main class. We will come back to this later on in this tutorial.

To run the gui class on start we need to add "gui.run(this);" into our onStart() method in the main class.

Example:

public void onStart() {
		log("Starting script..");
		gui.run(this);
	}

Alright. We are done with creating the classes. Let's continue to the next step!

Step 2: Creating the jFrame

If you start your script now, nothing will appear. That's because we didn't make the GUI yet. We've only created the files to work with.

So, the first thing we need to do is creating the jFrame. Switch back to your gui class and paste the following into the "Public void run(main main)":

JFrame jFrame = new JFrame("OSBOT Tutorial GUI");

Cool! We've created our first jFrame! But.. We're not done yet. If you start your script now nothing will appear. That's because we haven't set the size and we didn't make it visible yet. That's what we're going to do now.

So, under the "JFrame jFrame = new JFrame("OSBOT Tutorial GUI");" we need to paste the following:

jFrame.setSize(300, 500);
jFrame.setResizable(false);

Alright, so now we've added the size and we've set the setResizable to false because we don't want users to resize the gui. The gui is still not visible yet but we're getting somewhere. Let's move on to the next step.

Step 3: Creating a JPanel

To make the gui a bit more beautiful we are going to add a panel. We will call this panel the "settings" panel. Inside this panel all our settings will be displayed. 

Paste the following code into the gui run void:

JPanel settingsPanel = new JPanel();
TitledBorder leftBorder = BorderFactory.createTitledBorder("Settings");
leftBorder.setTitleJustification(TitledBorder.LEFT);
settingsPanel.setBorder(leftBorder);
settingsPanel.setLayout(null);
settingsPanel.setBounds(5, 200, 280, 180);
jFrame.add(settingsPanel);

This will add a panel to our jFrame. This seems like a lot of code so let me break it down to you.

JPanel settingsPanel = new JPanel();

This will create the settingsPanel.

TitledBorder leftBorder = BorderFactory.createTitledBorder("Settings");

This creates a titled border with the word "Settings" in it.

jFrame.add(settingsPanel);

This will add the settingsPanel to our jFrame.

Alright, your code should look like this:

public class gui {

	public void run(main main) {
		
              JFrame jFrame = new JFrame("OSBOT GUI Tutorial");
              jFrame.setSize(300, 500);
              jFrame.setResizable(false);

              JPanel settingsPanel = new JPanel();
              TitledBorder leftBorder = BorderFactory.createTitledBorder("Settings");
              leftBorder.setTitleJustification(TitledBorder.LEFT);
              settingsPanel.setBorder(leftBorder);
              settingsPanel.setLayout(null);
              settingsPanel.setBounds(5, 200, 280, 180);
              jFrame.add(settingsPanel);

	}
}

We also need to create a start panel. This is only to make the gui a bit more beautiful.

JPanel startPanel = new JPanel();
startPanel.setLayout(null);
startPanel.setBounds(5, 350, 70, 20);
jFrame.add(startPanel);

Now it's time to get to the next step; adding the comboBox.

Step 3: Adding the label & combobox

First, we need to create a label. A label can be made like this:

JLabel treeSelection = new JLabel("Select a Tree:");

Second, we need to set some bounds and we need to add the Label to our settingsPanel.

treeSelection.setBounds(10, 40, 95, 20);
settingsPanel.add(treeSelection);

Alright. We've added our first label into our settingsPanel! Now we need to create the comboBox:

JComboBox<String> treeList = new JComboBox<String>(new String[] { "None", "Tree", "Oak", "Willow", "Yew", "Magic tree"});

Next, open your main class and create a public string called tree:

public String tree = "";

Once you've done that you need to go back to your gui class. To check what tree you have selected we need to add an eventlistener:

treeList.addActionListener(e -> main.tree = (String) treeList.getSelectedItem());

This will set the public String tree in your main class to the selected tree. For example: If i selected Oak, the script will make the public String tree like this:

public String tree = "Oak";

So now the script knows what tree you'd like to chop :).

Alright, next thing we need to do is setting the bounds and add it to our settingsPanel.

treeList.setBounds(160, 40, 110, 20);
settingsPanel.add(treeList);

Ok. So far we've created a jFrame, added the settings & start panel, added a Label and added a working comboBox. Your gui class should look like this:

public class gui {

	public void run(main main) {
		
                JFrame jFrame = new JFrame("OSBOT GUI Tutorial");
                jFrame.setSize(300, 500);
                jFrame.setResizable(false);

                JPanel settingsPanel = new JPanel();
                TitledBorder leftBorder = BorderFactory.createTitledBorder("Settings");
                leftBorder.setTitleJustification(TitledBorder.LEFT);
                settingsPanel.setBorder(leftBorder);
                settingsPanel.setLayout(null);
                settingsPanel.setBounds(5, 200, 280, 180);
                jFrame.add(settingsPanel);

                JPanel startPanel = new JPanel();
                startPanel.setLayout(null);
                startPanel.setBounds(5, 350, 70, 20);
                jFrame.add(startPanel);

                JLabel treeSelection = new JLabel("Select a Tree:");
                treeSelection.setBounds(10, 40, 95, 20);
                settingsPanel.add(treeSelection);

                JComboBox<String> treeList = new JComboBox<String>(new String[] { "None", "Tree", "Oak", "Willow", "Yew", "Magic tree"});
                treeList.addActionListener(e -> main.tree = (String) treeList.getSelectedItem());
                treeList.setBounds(160, 40, 110, 20);
                settingsPanel.add(treeList);
          }
    }

Step 4: Adding the start button

We're almost done! The only thing we still need to do is:

1. Adding the start button
2. Making the start button work with an actionlistener

First, in our main class we need to add a lock. This will prevent the script from starting when the gui is still open. Go to your main class and insert the following code:

Object lock = new Object();

Because we call the gui class on start, this will lock the script from running.

Next we need to create a button:

JButton startButton = new JButton("Start");

Second, create an actionlistener so when the button is pressed, the script will start.

startButton.addActionListener(e -> {
synchronized (main.lock) {
        main.lock.notify();
        }
        jFrame.setVisible(false);
});

This will unlock the script and the jFrame will dissapear. In other words: your script will start.

Third, we need to add some bounds and make the button visible:

startButton.setBounds(5, 390, 70, 20);
startPanel.add(startButton);

And last but not least, set the jFrame to visible otherwise you won't see anything when you start your script.

jFrame.setVisible(true);

Alright! We are done! Go export your script and check it out. The gui should look like this:

Whole GUI Class:

public class gui {

	public void run(main main) {
		
              JFrame jFrame = new JFrame("OSBOT GUI Tutorial");
              jFrame.setSize(300, 500);
              jFrame.setResizable(false);

              JPanel settingsPanel = new JPanel();
              TitledBorder leftBorder = BorderFactory.createTitledBorder("Settings");
              leftBorder.setTitleJustification(TitledBorder.LEFT);
              settingsPanel.setBorder(leftBorder);
              settingsPanel.setLayout(null);
              settingsPanel.setBounds(5, 200, 280, 180);
              jFrame.add(settingsPanel);

              JPanel startPanel = new JPanel();
              startPanel.setLayout(null);
              startPanel.setBounds(5, 350, 70, 20);
              jFrame.add(startPanel);

              JLabel treeSelection = new JLabel("Select a Tree:");
              treeSelection.setBounds(10, 40, 95, 20);
              settingsPanel.add(treeSelection);

              JComboBox<String> treeList = new JComboBox<String>(new String[] { "None", "Tree", "Oak", "Willow", "Yew", "Magic tree"});
                treeList.addActionListener(e -> main.tree = (String) treeList.getSelectedItem());
                treeList.setBounds(160, 40, 110, 20);
                settingsPanel.add(treeList);

                JButton startButton = new JButton("Start");
                startButton.addActionListener(e -> {
                synchronized (main.lock) {
                main.lock.notify();
                }
                jFrame.setVisible(false);
                });
                startButton.setBounds(5, 390, 70, 20);
                startPanel.add(startButton);

                jFrame.setVisible(true);
	}
	
}

The end of this tutorial

I hope you liked my tutorial on how to make a simple GUI for your script. Go play around with it and become better with Java Swing. 

If you have any questions please ask.

Edited August 20, 2017 by Sebastian

[Explv]

Sorry to be a hater but using null (absolute) layout, and setting fixed sizes for everything  is very bad practice. You should be using a layout manager.

Class names should start with a capital letter.

Instead of passing a reference to your main class, you should just have getters in your GUI to return desired values.

Edited August 20, 2017 by Explv

[Sebastian]

4 minutes ago, Explv said:

Sorry to be a hater, but using null (absolute) layout is very bad practice. You should be using a layout manager.

Class names should start with a capital letter.

Instead of passing a reference to your main class, you should just have getters in your GUI to return desired values.

Oh, you are not a hater!

I love critisizm so i can improve myself :). Thanks for the feedback.

[Vilius]

I would say the same thing as @Explv said, but also Swing is sadly not threadsafe and it should be passed to the EDT, read more about it here: http://javarevisited.blogspot.lt/2013/08/why-swing-is-not-thread-safe-in-java-Swingworker-Event-thread.html

[shaba123]

On 8/20/2017 at 6:12 PM, Explv said:

Sorry to be a hater but using null (absolute) layout, and setting fixed sizes for everything  is very bad practice. You should be using a layout manager.

Class names should start with a capital letter.

Instead of passing a reference to your main class, you should just have getters in your GUI to return desired values.

Hey what do you mean by using getters in your GUI to return desired value? Id be really grateful if you could explain this or give an example, thank you.

[alkku15]

Yo great gui tut bro but i dont think the lock works... i did everything like you did... and added the lock code to the main.java too but nope, when i choose something from the combobox = the string turns into the selected thing = script starts... Do i need to use the lock in the code (for example) right now im using

if (hide == blackdhide) {
tan the hides blah blah blah
}

do i need to check if the lock is on / off? and if so, how? Thanks!