Pages

Thursday, January 19, 2012

Java GUI Tutorial 2 - Basic JPanel Attributes

JPanel methods can be used to access, or alter the visual content of the GUI.
GUI, for refreshers means Graphical User Interface and is often pronounced as "Gooey." Same sound as the name Stewie, but with a G instead of an 'S' and 'T.' The GUI ("gooey") is an important piece of any program because it allows the user to understand what the program is doing, in a visual manner! Could you imagine trying to play angry birds if all you heard was a voice explaining what is happening, or if a program  would not print an error but instead say "error." Visually we can interact with programs with ease (most of the time).
   ... long description...
In short, Graphical user interfaces need to be user-friendly, simple, and effective for your programs to succeed!
Now let's decorate the "GUI" (really just a window) we created in the last tutorial using Java code.

If you missed the previous tutorial click here (Tutorial 1). Let's start where we last ended:

import javax.swing.JFrame;
import javax.swing.JPanel;
/**
* W7R.blogspot.com 
* GUI Tutorial Part 1: JFrame and JPanel
*/
 class Example{
   public static void main(String[] args){
      //Create a JFrame named frame1 with a title of "Frame Name" 200 by 200 pixels
     JFrame frame1 = new JFrame("Frame Name");
     frame1.setSize(200,200);
      //Create a JPanel names panel1 with no parameters
     JPanel panel1 = new JPanel();
     frame1.add(panel1);
     frame1.show();
   }
}


Our example class from the previous tutorial is so basic that we cannot really call it a GUI yet. This will change! Let's begin by giving our JPanel, panel1 a background color. This requires the setColor method. I will set my JPanel to be blue, but I will include a comment with the other color choices. I will also change the name of the frame (the window border that holds the JPanel) to be "W7R Java GUI Tutorial 2."

**NOTE: To use the Color class you must import java.awt.Color You can type this above the other imports or copy it from here.
import java.awt.Color;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
 * W7R.blogspot.com 
 * GUI Tutorial Part 2: JPanel Appearance
 */
class Example{
    public static void main(String[] args){
        //Create a JFrame and JPanel
        JFrame frame1 = new JFrame("W7R Java GUI Tutorial 2");
        JPanel panel1 = new JPanel();
        //set size of JFrame to be 200 x 200 pixels
        frame1.setSize(200,200);
        //Set background color of JPanel (panel1) to be blue.
        //Other color types: Color.red, Color.orange, Color.yellow, 
        //Color.green, Color.blue, Color.purple, Color.white, Color.black, Color.gray
        panel1.setBackground(Color.blue);
        //Add panel1 to our JFrame (frame1)
        frame1.add(panel1);
        //Make frame1 visible to user
        frame1.setVisible(true);
    }
}
Now, it is safe to say that we have a more appealing window, but not necessarily a GUI. So, lets add a button to it! This will add functionality to our program. For starters the button will just be pushable; no action yet. Later we will do more complex things with the JButton.
import java.awt.Color;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
/**
 * W7R.blogspot.com 
 * GUI Tutorial Part 2: JPanel Basics
 */
class Example {
    public static void main(String[] args){
        //Create a JFrame and JPanel
        JFrame frame1 = new JFrame("W7R Java GUI Tutorial 2");
        JPanel panel1 = new JPanel();
        //Create JButton names button1 with the label "Push me!"
        JButton button1 = new JButton("Push me!");
        //button1 will be pushable, but will not do anything, yet.
        //this will allow the button to be controlled with the space bar too
        button1.setFocusable(true);
        //set size of JFrame to be 200 x 200 pixels
        frame1.setSize(200,200);
        //Set background color of JPanel (panel1) to be blue.
        //Other color types: Color.red, Color.orange, Color.yellow, 
        //Color.green, Color.blue, Color.purple, Color.white, Color.black, Color.gray
        panel1.setBackground(Color.blue);
        //add button to JPanel
        panel1.add(button1);
        //Add panel1 to our JFrame (frame1)
        frame1.add(panel1);
        //Make frame1 visible to user
        frame1.setVisible(true);
    }
}


No comments:

Post a Comment