This edition of techblog is the continuation of the articles series on Java programming. In this post, I will show to how to work with the Java AWT package elements and how to draw 2D objects using this.

AWT (Abstract Window Toolkit) is the one which enables you to do  platform-independent windowing if you are a Java programmer (we have already seen how to handle wxWidgets if you are using C++).

Let me show you the code first:

package grid;

/**
*
* @author vinayak
*/

import java.awt.*;

class Grids extends Canvas {
  int width, height, rows, columns;

  Grids(int breadth, int length, int rowNo, int columnNo) {
    setSize(width = breadth, height = length);
    rows = rowNo;
    columns = columnNo;
  }
    @Override
    public void paint(Graphics mygrid) {
    width = getSize().width;
    height = getSize().height;
    int heightOfRow = height / (rows);
    for (int i = 0; i < rows; i++)
      mygrid.drawLine(0, i * heightOfRow , width, i * heightOfRow );

    int widthdOfRow = width / (columns);
    for (int i = 0; i < columns; i++)
      mygrid.drawLine(i*widthdOfRow , 0, i*widthdOfRow , height);
  }
}

public class Main extends Frame {
  Main(String gridTitle, int breadth, int length, int rows, int columns) {
    setTitle(gridTitle);
    Grids grid = new Grids(breadth, length, rows, columns);
    add(grid);
}
public static void main(String[] args) {
    new Main("Drawing Grids: A tutorial from Techblog", 250, 250, 5, 5).setVisible(true);
  }
}

Explanation of the code:

As you can see in this code we are using AWT package library for drawing the grid (see the import statement). Then we extend (to Grid class) the Canvas class, which actually is a blank area where the application can draw things using the functions provided by the 2D library. You can also receive inputs from users if you use this class.

In the next line we pass-on four parameters to the class that we have extended  – breadth, length, rowNo and columnNo. Then we use the setSize() function to set the size of the canvas that we are creating and we pass the width and height details to the function. Now, we need to specify the number of rows and columns in the canvas. If you miss these lines, your Canvas will be empty!

The next step is the overriding of the Paint function which is used to specify the colour patterns that we use for drawing the grid. As you can see we are also using the getSize() function to get the size and height. The paint function takes in the name of the Graphics object (mygrid) that we are using in this code.

The next part is to beautify the look of the grid. In order to have a homogeneous look for all cells in the grid, we define

heightOfRow = height / (rows)

widthdOfRow = width / (columns)

This will cause the application to resize the grid cells if you manually resize the canvas. Then we use the drawLine() function to specify the start point and endpoint of the cell boards (height and width of each cell).

In order to put this grid properly into the Canvas we need a Frame (which is nothing but window with title and defined border). Inside this class, we create an object of the Grid class that we created earlier and instantiate the object and pass the four parameters – breadth, length, rows and columns. Then, we add this object to the frame using add() function.

Finally, using the main method and instantiate the Main object we created in the previous stage and set its visibility to true.

If you run the code, a new window will popup and will display the grid.