Comments

Saturday, November 19, 2011

Java Graphics Tutorial - 1

Posted by on Saturday, November 19, 2011 Read our previous post
As we all know that we can make games with the help of java libraries that provide us with the graphics needed for making them. So today I will be starting a very new section on Java Graphics. I had earlier made posts on How to make an income tax calculator.

To start with here are some prerequisites :

-You should have fair idea about java syntax because I am not going to teach that. Graphic Design College is a good educational resource in learning more about Java. 
-You should have Eclipse downloaded (anyone will do i.e Indigo, Galileo, Ganymede etc.)
- You should Download acm.jar file and include it into your project as an external jar file.




NOTE : If you can either download Eclipse or execute from Command Prompt. If executing from Command Prompt then don't forget to enter the path of acm.jar to Environment Variable -> CLASSPATH, otherwise it will throw an error.


The AWT (Abstract Window Toolkit) provides the GUI components that can be used in Java applets, but here we will also be using acm.jar library.

The java.awt package and acm.*/acm.program.* package contains the GUI components.

Now we should describe the components that you will be using to build a GUI.

Canvas :

Canvas (in java.awt)/ GCanvas (acm.*) is a class that provides a canvas at the background for adding the object over it. This is created automatically by the Graphics program.

Some of the methods of GCanvas are :

add( object ) : Adds the object onto the canvas.

add( object, x, y ) : Adds the object in the position (x,y) specified. 

add( object, position ) : Adds the object in the position (SOUTH, NORTH,         EAST, WEST) specified. 

remove ( object) : Removes that particular object

removeAll() : Removes all objects from the canvas.

setBackground ( color ) : Sets the background of the Canvas.

To know more about GCanvas methods click here.

To know about Canvas methods click here.

Containers :

You add GUI components to the container using the add method.


There are two types of containers Window and Panel.

Window :

A Window is a container which is independent of other containers. There are two types of window : Frame and Dialog. A Frame is a window with a title and corners that can be resized, whereas a Dialog is a simple window. We can move a Dialog but cannot resize it.

Panel :

A Panel must be contained inside another container or a web browser window. You must place the Panel into a Window to be displayed.

Positioning and Sizing Components :


The position and size of a component in a container is determined with the help of a layout manager. A container has an instance of the layout manager. Whenever the container need to resize or reposition the component inside it it call the layout manager and does the needful.

There are different methods defined in the Layout Manager class for achieving re-positioning and re-sizing.

Frames :

A Frame is a subclass of Window. Frame inherits its properties from Container class so you can add components to a Frame using the add method. 

The default layout of Frame is BorderLayout, thought this can be changed with the help of setLayout method.

The constructor Frame(String ) creates a new invisible Frame object with the title specified by the String. 

Example : 


//Program using the acm library
import javax.swing.*;
import java.awt.*;
import acm.program.*;

public class FrameExample extends GraphicsProgram{
    private JFrame f;
    public FrameExample(){
        f = new JFrame("Code 2 Learn");
    }
    public void launchMyFrame(){
        f.setSize(300,300);
        f.setBackground(Color.blue);
        f.setVisible(true);
    }
    public void init(){
        FrameExample fe=new FrameExample();
        fe.launchMyFrame();
    }
}


//Program using the w/o acm library
import java.awt.*;

public class FrameExample{ 
    private Frame f;
    
    public FrameExample(){
        f = new Frame("Code 2 Learn");
    }
    
    public void launchMyFrame(){
        f.setSize(300,300);
        f.setBackground(Color.blue);
        f.setVisible(true);
    }
    public static void main(String args[]){
        FrameExample fe=new FrameExample();
        fe.launchMyFrame();
    }
}

Panels :

A Panel, like Frame, provides the space for you to attach GUI component. Each Panel can have its own layout manager.

After creating a Panel we must add it to a Window or Frame. This can be achieved using the add() method.

Example :

//Program using the acm library
import javax.swing.*;
import java.awt.Color;
import acm.program.*;

public class FrameExample extends GraphicsProgram{
    
    private JFrame f;
    private JPanel p;
    
    public FrameExample(){
        f = new JFrame("Code 2 Learn");
        p=new JPanel();
    }
    
    public void launchMyFrame(){
        f.setSize(300,300);
        f.setLayout(null); //Override the default layout manager
        
        p.setSize(300, 50);
        p.setBackground(Color.BLACK);
        f.add(p);
        f.setVisible(true);
    }
    
    public static void main(String args[]){
        FrameExample fe=new FrameExample();
        fe.launchMyFrame();
    }
}


//Program using the w/o acm library
import javax.swing.*;
import java.awt.*;

public class FrameNPanel{
    
    private Frame f;
    private Panel p;
    
    public FrameNPanel(){
        f = new Frame("Code 2 Learn");
        p=new Panel();
    }
    
    public void launchMyFrame(){
        f.setSize(300,300);
        f.setLayout(null); //Override the default layout manager
        
        p.setSize(300, 50);
        p.setBackground(Color.BLACK);
        f.add(p);
        f.setVisible(true);
    }
    
    public static void main(String args[]){
        FrameNPanel fe=new FrameNPanel();
        fe.launchMyFrame();
    }
}



NOTE :  This is the first tutorial on Java Graphics, to read more tutorial on the same or on other, Subscribe to us (--> right sidebar).

© 2010 Code 2 Learn