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:
|
1 2 3 4 5 |
//Sample 01: Implement the Listeneres public class FrameWin extends Frame implements WindowListener, ActionListener, MouseListener, MouseMotionListener { |
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:
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.
|
1 2 3 4 5 6 |
//Sample 02: Member Variables String DrawMode = ""; Point FirstPoint = new Point(0,0); Point SecondPoint = new Point(0,0); Label lblModeDisplay; Checkbox chkDragMode; |
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.
|
1 2 3 |
//Sample 03: Prepare Command Panel Panel CommandPanel = new Panel(new GridLayout(6,1)); CommandPanel.setBackground(new Color(240, 240, 240)); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
//3.1 Prepare Button & Checkbox Button btnDrawLine = new Button("Draw Line"); Button btnDrawRect = new Button("Draw Rect"); Button btnFreeHand = new Button("Free Hand"); btnDrawLine.setActionCommand("LineD"); btnDrawRect.setActionCommand("RectD"); btnFreeHand.setActionCommand("FreeH"); btnDrawLine.addActionListener(this); btnDrawRect.addActionListener(this); btnFreeHand.addActionListener(this); chkDragMode = new Checkbox("Rubber Band"); |
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.
|
1 2 3 4 5 6 7 |
//3.2 Prepare Labels Label lblMode = new Label("Mode"); lblModeDisplay = new Label(); Font f1 = new Font("Verdana", Font.PLAIN, 20); lblMode.setFont(f1); lblModeDisplay.setFont(f1); lblModeDisplay.setForeground(Color.BLUE); |
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.
|
1 2 3 4 5 6 7 8 |
//3.3 Pack the Panel & give to Frame CommandPanel.add(btnDrawLine); CommandPanel.add(btnDrawRect); CommandPanel.add(btnFreeHand); CommandPanel.add(chkDragMode); CommandPanel.add(lblMode); CommandPanel.add(lblModeDisplay); add(BorderLayout.EAST, CommandPanel); |
At this stage, the panel will look like this in the Frame Window:
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.
|
1 2 3 4 5 6 7 |
public void actionPerformed(ActionEvent e) { //Sample 04: Set the Draw Mode DrawMode = e.getActionCommand(); lblModeDisplay.setText(DrawMode); FirstPoint.setLocation(0, 0); SecondPoint.setLocation(0, 0); } |
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:
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
Categories: AWT
Tags: ActionEvent, ActionListener, getActionCommand, setActionCommand
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.