Command Panel in Right Edge
AWT

Prepare Command Panel: AWT Drawing – Part 1

1. Command Panel and GridLayout

The example we create need a command panel towards the right of the Java AWT frame window. So, we will create a Panel with a GridLayout and add Six AWT components to it. We can use a grid layout which contains 6 cells in a single column. Three AWT Buttons denote each drawing modes Line, Rectangle and Free-Hand.

All these three AWT Buttons will register with the ActionListener and in the handler, we will set the drawing mode. Since, click event of all the buttons goes to the same handler method, to know which button is producing the event, we will assign an action command to each button. After constructing the buttons, we use setActionCommand to assign an action command string. Inside the handler, the getActionCommand with tell us the source of the click event.

In this part of the example, we will prepare our command panel and set the drawing mode when the user clicks the drawing buttons. The label towards the bottom of the panel tells what Drawing Mode the user turned ON.

2. Implement Listener Interfaces

The AWT Drawing we are coding requires listening for Mouse and button clicks. Button clicks registers the drawing mode. The user will use the mouse to perform the drawing in the AWT Frame. So, we need to implement the ActionListener for button clicks and MouseListener & MouseMotionListener for the mouse tracking. Below is the code:

3. Rectangle Drawing – Point P1, Width and Height

First let us look at the AWT Graphics’ need for drawing the Line and Rectangle. Have a look at the below picture:

AWT Line and Rectangle
AWT Line and Rectangle

Line requires two points P1 and P2. This can be anywhere in the AWT Frame Window. We will use the Mouse to get these two points from the user and draw the line connecting them.

For drawing the Rectangle, we need a point (say p1) and width and height of the rectangle. The above picture shows how a rectangle is defined using point P1, width and height. Once P1 is defined, width and height locate the second point p2. In our case, we still get P1 (Top-Left) and P2 (Bottom-Right) from user by mouse and calculate the width and height to draw the rectangle.

We need the below member variables for our example.

The member variable DrawMode holds the current drawing mode. FirstPoint and SecondPoint instances will store the mouse points required for the drawing need. We will use them to draw the Line, Rectangle, and the Free-Hand drawing. AWT Label Member lblModeDisplay will display the current Drawing Mode to the user. The AWT Checkbox instance is to enable Rubber-Banding while user performs line or rectangle drawings.

4. Preparing the Command Panel with AWT Components

Our example requires command panel on the right side of the AWT Frame Window. So, we create a panel with GridLayout to lay the controls in one column and 6 rows. We also set a background color for the panel so that the user can distinguish between the drawing area and command panel.

Command panel requires Three buttons and one Checkbox to get the user’s choice. We also enroll the command buttons with the ActionListener via addActionListener method. Since all the buttons route the event to same handler, we set action string to the command button by calling the setActionCommand method. In the handler, these command strings tell the event source. Below is the code:

To show the current drawing mode, we need two labels. The static label displays the string “Mode” and other label shows current drawing mode to the user. Based on the button click, we set the drawing mode and the label shows what drawing mode user picked.

All these 6 Java AWT Components go into the Panel via the add method. Finally, we add this panel which holds 6 controls in it to the AWT Frame window. Note, the panel is added to the EAST of the BorderLayout so that panel will be displayed in the right side of the AWT Frame.

At this stage, the panel will look like this in the Frame Window:

Command Panel in Right Edge
Command Panel in Right Edge

5. Set Drawing Mode and Show it

Now, we need to show the current Drawing Mode below the Mode label. Whenever user shifts the drawing mode, we will update the label below the Mode. We already have the skeleton code for actionPerformed handler. Inside, we get the action command from the ActionEvent. The getActionCommand tells which button sends the event. In our case, we just retrieve the command string and assign that to the AWT Label via setText method. Also, we initialize the Points to 0,0 which is top-left corner of the Frame Window.

Let us say, user clicked the Free Hand drawing button from the command panel. The actionPerformed handler will update label to shows the current drawing mode as shown below:

Drawing Mode Shown to User
Drawing Mode Shown to User

After setting the drawing mode, the user can draw in the plain Area of the Frame Window. We will see that in the coming examples Article.

6. Watch AWT Drawing Part 1 – Youtube Video

Do you like this Example? Please comment about it for others!!

This site uses Akismet to reduce spam. Learn how your comment data is processed.