In the last tutorial we learned about the general concept behind component orientation on the JPanel. We experimented with the default layout and the BorderLayout. Click Here for GUI Tutorial #3
In this tutorial we willl create a Graphical User Interface (GUI) with the GridLayout.
GridLayout is a layout manager that will divide your jpanel into as many rectangles as you tell it too. Each component you add will be fitted into the corresponding rectangle. When comparing GridLayout with the BorderLayout of the last tutorial (link to tutorial #3), you can see it has more control and will be more useful for JPanels that need to include more than 5 components.
With the GridLayout you specify the number of divisions (invisible rectangles) via the two integer parameters, rows, and columns. The row and column are both integer values to be used in order to give your window easier and agile sections where different components can be placed.
This time, instead of putting all of our code in the main method we will use a more preferred approach to Graphical (GUI) Programming: an object-oriented programming (OOP or OOD). We will create three classes to create our GUI: Application.java, Runner.java, and BestPanel.java. We will be designing an Options Window for the popular game Tetris.
I will begin the coding from the inside out, or in other words in small parts which will be integrated together at the end. This is often referred to as top-bottom programming.
What our JPanel, BestPanel will include: +links to Oracle site
class BestPanel extends JPanel{ /*code for BestPanel*/ };
This main purpose for this post was to establish the idea of inheritance and how the GridLayout works. Keep a look out for Java GUI Tutorial 5 where I will have another post using GridLayout.
In this tutorial we willl create a Graphical User Interface (GUI) with the GridLayout.
The GridLayout
GridLayout is a layout manager that will divide your jpanel into as many rectangles as you tell it too. Each component you add will be fitted into the corresponding rectangle. When comparing GridLayout with the BorderLayout of the last tutorial (link to tutorial #3), you can see it has more control and will be more useful for JPanels that need to include more than 5 components.
With the GridLayout you specify the number of divisions (invisible rectangles) via the two integer parameters, rows, and columns. The row and column are both integer values to be used in order to give your window easier and agile sections where different components can be placed.
This time, instead of putting all of our code in the main method we will use a more preferred approach to Graphical (GUI) Programming: an object-oriented programming (OOP or OOD). We will create three classes to create our GUI: Application.java, Runner.java, and BestPanel.java. We will be designing an Options Window for the popular game Tetris.
- Runner.java will "run" the program (start it)
- Application.java will control the physical parts of our GUI, the JFrame and the BestPanel.
- BestPanel.java be the location for our GUI's components which can include JButtons, JPanels (Yes, JPanels can hold other JPanels), JTextFields, JComponents, JLabels, and more.
I will begin the coding from the inside out, or in other words in small parts which will be integrated together at the end. This is often referred to as top-bottom programming.
What our JPanel, BestPanel will include: +links to Oracle site
- BestPanel will extend JPanel
- BestPanel needs JLabels and JCheckBoxes
- We will include a drop down menu for fun
- And why not a JSlider
Our Mini-Project and Inheritance
We will start by creating a JavaProject called "W7RTutorials." In W7RTutorials we will create a our first class, BestPanel as so: class BestPanel extends JPanel{ /*code for BestPanel*/ };
The BestPanel class inherits every method JPanel has such as paintComponent(Graphics g) and repaint() and paint(). This allows us to specialize or override methods of JPanel we desire to change to our own versions of the method (methods is same as a function) inside the BestPanel class body (between curly brackets) while keeping other methods of BestPanel identical to JPanel. JPanel is now considered the super class to BestPanel. So, BestPanel looks up to JPanel for guidence like a little boy would to his father. The class that has been extended (inherited) can be called the "parent" class and the class that extended, the "child" class.
That concept is known as Inheritance, which I will definitely cover on W7R (by the time you read this there may already be posts on inheritance). Moving on..
That concept is known as Inheritance, which I will definitely cover on W7R (by the time you read this there may already be posts on inheritance). Moving on..
Snippet #1: First Draft of BestPanel
/*
* W7R.blogspot.com
* Brian R.H.
*/
public class BestPanel extends JPanel {
//class variables (What we want BestPanel to have control of locally)
JLabel label1 = new JLabel("Display Options");
JLabel label2 = new JLabel("Playing Options");
JSlider gameSpeedSlider = new JSlider();
//Constructor BestPanel (what executes when a instance of BestPanel is created).
public BestPanel(){
//Sets the layout to be GridLayout
//3 rows and 2 columns
this.setLayout(new GridLayout(3,2));
this.setBackground(Color.BLUE);
this.setForeground(Color.CYAN);
add(label1);
add(label2);
add(new JLabel("1"));
add(new JLabel("2"));
add(new JLabel("3"));
add(gameSpeedSlider);
// this.setVisible(true);
}
}
About Snippet #1: The BestPanel constructor holds the majority of the code we will use for our small project because the BestPanel constructor is a called (executed) upon creating an instance of BestPanel which will be in our Application class. Sadly, the Application which will hold our JFrame is needed before we can run tests of the BestPanel class.
Snippet #2: The complete Application class
import javax.swing.JFrame;
//complete Application class
public class Application {
//class variables
JFrame frame;
BestPanel panel;
//Constructor for Application class
Application(String title){
//set up frame
frame = new JFrame(title);
frame.setSize(600,400);
buildGUI();
frame.setVisible(true);
}
public void buildGUI() {
panel = new BestPanel();
frame.add(panel);
}
}
About Snippet #2: The Application class relies on its constructor (which will be called by the Runner class) to run the necessary code to set up the GUI. The set up includes creating an instance of BestPanel (which has been done in the buildGUI() method. The BestPanel is not completely finished as far as specifications go, but can be used to get a feel for where the program is heading. All we need is a class to run it... The Runner.java class!
public class Runner {
public static void main(String[] args) {
//create an instance of the Application which
//will start the program by itself by means of the constructor
Application app = new Application("Tetris Options!");
}
}
Once you have saved those 3 java class files into your workspace, you should be able to run the GUI to browse at our progress so far. You can see that the GridLayout we used organized the components of BestPanel into a specific region according to the order I added them to the panel. The order you add the components to GridLayout controls where each one is placed on the gridded BestPanel. That is an important aspect of the GridLayout class.This main purpose for this post was to establish the idea of inheritance and how the GridLayout works. Keep a look out for Java GUI Tutorial 5 where I will have another post using GridLayout.
No comments:
Post a Comment