How to display a GUI component in a customized way ?

In a previous article I have shown how to display a image in a JLabel.

A JButton can be associated with a image using a similar approach.

However, this article is not talking about button and label.

We are going to make a JPanel that paints itself in a fully customized way.

Normally, a JPanel is a GUI container that contains GUI components such as buttons and labels.

It is usually rectangular in shape and its default paint method only fills a rectangular region with a background color.

We are going to override the paintComponent() method such that we can draw anything on it.

This technique can be used in applications that display animations. It is also useful in game programming.

1. To start, we create a sub-class of JPanel :
   
   

   class GraphicsPanel extends javax.swing.JPanel
   {
   }
   

2. Create a getInstance() method to get a instance of this panel.
   
   

   //
     public static GraphicsPanel getInstance()
     {
       GraphicsPanel panel=new GraphicsPanel();
       panel.setBackground(new java.awt.Color(255,255,128));
       panel.setPreferredSize(new java.awt.Dimension(200,200));
       return panel;
     }
   

3. Override the paintComponent() method to paint the component in our customized way.
   
   

   // override the paint method
     public void paintComponent(java.awt.Graphics graphics)
     {
       super.paintComponent(graphics);  // paint background 
   
       // get panel dimemsion
       int w=getWidth();  // should be 200
       int h=getHeight(); // should be 200
   
       // create a Graphics2D object for drawing shape
       java.awt.Graphics2D gr=(java.awt.Graphics2D) graphics;
      
       gr.setStroke(new java.awt.BasicStroke(5));  // set pen width to 5 pixels
       gr.setColor(new java.awt.Color(255,0,0));   // set Color to RED
       gr.drawLine(0,0,w,h);  // draw diagonal
       gr.drawArc(0,0,w,h,0,360); // draw circle
     }
   

4. Finally, create a main() method to open a window that display the GraphicsPanel.

Full runnable sample below :

/******************************************************************************
* File : GraphicsPanel.java
* Author : http://java.macteki.com/
* Description :
*   Draw line and circle in a panel.
* Tested with : JDK 1.6
******************************************************************************/


class GraphicsPanel extends javax.swing.JPanel
{
  public static GraphicsPanel getInstance()
  {
    GraphicsPanel panel=new GraphicsPanel();
    panel.setBackground(new java.awt.Color(255,255,128));
    panel.setPreferredSize(new java.awt.Dimension(200,200));
    return panel;
  }

  // override the paint method
  public void paintComponent(java.awt.Graphics graphics)
  {
    super.paintComponent(graphics);  // paint background 

    // get panel dimemsion
    int w=getWidth();  // should be 200
    int h=getHeight(); // should be 200

    // create a Graphics2D object for drawing shape
    java.awt.Graphics2D gr=(java.awt.Graphics2D) graphics;
   
    gr.setStroke(new java.awt.BasicStroke(5));  // set pen width to 5 pixels
    gr.setColor(new java.awt.Color(255,0,0));   // set Color to RED
    gr.drawLine(0,0,w,h);  // draw diagonal
    gr.drawArc(0,0,w,h,0,360); // draw circle
  }

  public static void main(String[] args) throws Exception
  {
    // create frame
    javax.swing.JFrame frame=new javax.swing.JFrame();
    frame.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);    

    frame.setTitle("Macteki Sample");

    // create graphics panel and add it to the frame
    GraphicsPanel panel=GraphicsPanel.getInstance();
    frame.add(panel);  // panel size is 200x200, see getInstance()
    frame.pack();  // this will correctly set the size of frame 
                   // so that it is big enough to hold the panel

    frame.setVisible(true); 
  }
}

Thanks for reading. Comments are welcome.