Thread: GUI Exercise

hello guys,

I hop you are all well,

I have an exercise in how to build GUI primitive, and I hop any can help with it.

You are required to build a GUI interface MyFrameMain to be able to input the required
values to draw an oval or a rectangle, select the colour and the number of repeated
shapes. The GUI interface should appear as in Figure 1 below, according to the
following specifications:
• Set its size to 700x500.
• Set its title "Drawing shapes"
• The frame has Border Layout. It consists of three main JPanels, North, Centre,
South

• The North JPanel, user can do the following:

The user can draw the outline of an oval using the current colour. The
result is a circle or an ellipse that fits within the rectangle whose top lefthand
corner is specified by the first two arguments, whose width is given by
the third argument and whose height is specified by the final argument. The
values will be filled in using four JTextFields. The oval will be displayed
once the user clicks on Add Oval JButton.

The user can draw the outline of the specified rectangle using the current
colour. The top left-hand corner of the rectangle is defined by a pair of x
and y-coordinates. The final two arguments give the width and height. The
values will be filled in using four JTextFields. The Rectangle will be
displayed once the user clicks on Add Rectangle JButton.

The user can select one of the three colours using JRadioButton group.
Red is the default, with green and blue available as well.

The user can select the number of repeated shapes up to 10 from the
JList. The code repeats drawing the shape many times by adding a fixed
number to the values of x and y to shift the position of the new shape.

The user can draw the two shapes by filling the values of the two shapes
and then clicking on Add Both JButton


• The Centre JPanel is the drawing area where the required shapes will be
displayed.


• The South JPanel contains two JButtons

Clear button which clears all values in all JTextFields once the user clicks
on it.

Exit Button which terminates the program once the user clicks on it.
• An appropriate event listener should be used and the buttons should implement
the listener objects for all buttons.
• paint() and repaint() methods should be implemented to be invoked to draw the
shapes.
• The class should have a main method to instantiate the Frame.



thank you all,

how to put the element, such as JButton, on a specific position?

in the question, he asked me to create three JPanel north, centre and south.
how can I create sub panel inside the north JPanel.

thank you Norm,

I want to build a three sub panel inside one JPanel and the JPanel be in the north.
figure below will show you what I mean
Screen_Shot_2014_05_02_at_5_13_26_PM.png

thank you again,

 
package myframemain;
import java.awt.*;
import javax.swing.*;
 
public class MyFrame extends JFrame {
 
    JLabel lblOval;
    JLabel lblX;
    JLabel lblY;
    JLabel lblWidth;
    JLabel lblHeight;
    JLabel lblRectangle;
    JLabel lblX1;
    JLabel lblY1;
    JLabel lblX2;
    JLabel lblY2;
    JLabel lblColor;
    JLabel lblNumberOfShapes;
 
    JTextField txtX;
    JTextField txtY;
    JTextField txtWidth;
    JTextField txtHeight;
    JTextField txtX1;
    JTextField txtY1;
    JTextField txtX2;
    JTextField txtY2;
 
    JButton btnAddOval;
    JButton btnAddRectangle;
    JButton btnAddBoth;
    JButton btnClear;
    JButton btnExit;
 
    JRadioButton radRed;
    JRadioButton radGreen;
    JRadioButton radBlue;
 
    JComboBox cboNumber;
 
 
    JPanel northPanel;
    JPanel centrePanel;
    JPanel southPanel;
 
    public MyFrame()
    {
         setSize(700, 500);
         setTitle("Welcome");
         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
         GridBagConstraints gbc = new GridBagConstraints();
         gbc.insets = new Insets(5,5,5,5);
 
          lblOval = new JLabel("Oval");
          lblX = new JLabel("X");
          lblY = new JLabel("Y");
          lblWidth = new JLabel("Width");
          lblHeight = new JLabel("Height");
          lblRectangle = new JLabel("Rectangle");
          lblX1 = new JLabel("X1");
          lblY1 = new JLabel("Y1");
          lblX2 = new JLabel("X2");
          lblY2 = new JLabel("Y2");
          lblColor = new JLabel("Color");
          lblNumberOfShapes = new JLabel("Number of shapes");
 
          txtX = new JTextField("",5);
          txtY = new JTextField("",5);
          txtWidth = new JTextField("",5);
          txtHeight = new JTextField("",5);
          txtX1 = new JTextField("",5);
          txtY1 = new JTextField("",5);
          txtX2 = new JTextField("",5);
          txtY2 = new JTextField("",5);
 
          btnAddOval = new JButton("Add Oval");
          btnAddRectangle = new JButton("Add Rectangle");
          btnAddBoth = new JButton("Add Both");
          btnClear = new JButton("Clear");
          btnExit = new JButton("Exit");
 
          radRed = new JRadioButton("RED");
          radGreen = new JRadioButton("GREEN");
          radBlue = new JRadioButton("BLUE");
 
          cboNumber = new JComboBox();
 
 
          northPanel = new JPanel(new GridBagLayout());
          centrePanel = new JPanel();
          southPanel = new JPanel();
 
 
 
         cboNumber.addItem("1");
         cboNumber.addItem("2");
         cboNumber.addItem("3");
         cboNumber.addItem("4");
         cboNumber.addItem("5");
         cboNumber.addItem("6");
         cboNumber.addItem("7");
         cboNumber.addItem("8");
         cboNumber.addItem("9");
         cboNumber.addItem("10");
         cboNumber.setSelectedItem("1");
 
         northPanel.add(lblOval, gbc);
         gbc.gridx = 0;
         gbc.gridy = 0;
         northPanel.add(lblX, gbc);
         gbc.gridx = 1;
         gbc.gridy = 0;
         northPanel.add(txtX, gbc);
         gbc.gridx = 2;
         gbc.gridy = 0;
         northPanel.add(lblY, gbc);
         gbc.gridx = 3;
         gbc.gridy = 0;
         northPanel.add(txtY, gbc);
         gbc.gridx = 4;
         gbc.gridy = 0;
         northPanel.add(lblWidth, gbc);
         gbc.gridx = 5;
         gbc.gridy = 0;
         northPanel.add(txtWidth, gbc);
         gbc.gridx = 6;
         gbc.gridy = 0;
         northPanel.add(lblHeight, gbc);
         gbc.gridx = 7;
         gbc.gridy = 0;
         northPanel.add(txtHeight, gbc);
         gbc.gridx = 8;
         gbc.gridy = 0;
         northPanel.add(btnAddOval, gbc);
         gbc.gridx = 9;
         gbc.gridy = 0;
         northPanel.add(lblRectangle, gbc);
         gbc.gridx = 0;
         gbc.gridy = 1;
         northPanel.add(lblX1, gbc);
         gbc.gridx = 1;
         gbc.gridy = 1;
         northPanel.add(txtX1, gbc);
         gbc.gridx = 2;
         gbc.gridy = 1;
         northPanel.add(lblY1, gbc);
         gbc.gridx = 3;
         gbc.gridy = 1;
         northPanel.add(txtY1, gbc);
         gbc.gridx = 4;
         gbc.gridy = 1;
         northPanel.add(lblX2, gbc);
         gbc.gridx = 5;
         gbc.gridy = 1;
         northPanel.add(txtX2, gbc);
         gbc.gridx = 6;
         gbc.gridy = 1;
         northPanel.add(lblY2, gbc);
         gbc.gridx = 7;
         gbc.gridy = 1;
         northPanel.add(txtY2, gbc);
         gbc.gridx = 8;
         gbc.gridy = 1;
         northPanel.add(btnAddRectangle, gbc);
         gbc.gridx = 9;
         gbc.gridy = 1;
         northPanel.add(lblColor, gbc);
         gbc.gridx = 0;
         gbc.gridy = 2;
         northPanel.add(radRed, gbc);
         gbc.gridx = 1;
         gbc.gridy = 2;
         northPanel.add(radGreen, gbc);
         gbc.gridx = 2;
         gbc.gridy = 2;
         northPanel.add(radBlue, gbc);
         gbc.gridx = 3;
         gbc.gridy = 2;
         northPanel.add(lblNumberOfShapes, gbc);
         gbc.gridx = 4;
         gbc.gridy = 2;
         northPanel.add(cboNumber, gbc);
         gbc.gridx = 5;
         gbc.gridy = 2;
         northPanel.add(btnAddBoth, gbc);
         gbc.gridx = 6;
         gbc.gridy = 2;
 
         getContentPane().add(northPanel, BorderLayout.NORTH);
 
         centrePanel.setBackground(Color.BLUE);
 
         add(centrePanel, BorderLayout.CENTER);
 
 
 
         southPanel.add(btnClear);
         southPanel.add(btnExit);
 
         add(southPanel, BorderLayout.SOUTH);
 
 
    }
 
}

and now I have this output.
I don't know what is the wrong!
Screen_Shot_2014_05_02_at_5_42_23_PM.jpg

as you can see, the elements not arranged well.

this is a Class.
I invoked it at the main() method. this is no problem.

I want to arrange the elements and if you see the attached screen shot, you will see:
-label "oval" is over "X" label
-I want to put the label Rectangle in the second line.
-there is no space in the text fields.
- etc.

here is the main() method

package myframemain;
 
public class MyFrameMain {
 
    public static void main(String[] args) {
 
        MyFrame fm = new MyFrame();
        fm.setVisible(true);
 
 
    }
 
}

you just answer me about these:
-label "oval" is over "X" label
-I want to put the label Rectangle in the second line.
-there is no space in the text fields.

and I will handle the rest.
I just want to understand the concept.

thank you norm
I appreciate your cooperation.

I have solved the problem and another problem appeared.

How can I handle several ActionListener?
there is a several buttons and each button has an action.

thank you norm, I appreciate your help.

I chose separate actionlistener for each button.

The "Add Rectangle" button should draw a rectangle based on:

- the x, y, width and height.
- the colors from the radio buttons.
- the numbers of rectangle from the combo box

I did the first two, and I am stuck in the third one.

there is my code

 public class Action implements ActionListener
          {
        private Graphics g;
 
 
              public void paint(Graphics g)
              {
 
                      g = centrePanel.getGraphics();
                      int int1 = Integer.parseInt(txtX1.getText());
                      int int2 = Integer.parseInt(txtY1.getText());
                      int int3 = Integer.parseInt(txtX2.getText());
                      int int4 = Integer.parseInt(txtY2.getText());
 
 
 
                      if (radRed.isSelected()) {
                             g.setColor(Color.red);
                          }
                      else
 
                      if (radGreen.isSelected()) {
                             g.setColor(Color.GREEN);
                      }
                      else
 
                      if (radBlue.isSelected()) {
                               g.setColor(Color.BLUE);
                          }
 
 
 
 
 
                       g.drawRect(int1, int2,  int3, int4);
              }
 
               public void actionPerformed(ActionEvent a)
               {
 
                  paint(g);
 
                }
 
 
 
 
             }

how can I select the number from the combo box "such as 3" and then draw a three shifted rectangle ?

hahaha man I am beginner in java and your words big for me. However, my code right now is working and give me what I want except the value from the combo box.

I want to ask you, what is the different between paint() method and repaint() method?