34 replies to this topic

[An Alien]

Okay, learning GUI is extremely difficult for me. Even the oracle tutorials, I can't understand them. There's just so many things that depend on each other so if you learn one thing, you won't fully understand it until you learn 5 other things which depend on other stuff. I haven't really used the API that much either. Just used to basic java so this is really a challenge for me.

I'd like someone to help me create a simple GUI program and then add logic to it.

Basically, I was thinking of a simple program that displays a circular shape with the colors representing traffic signal lights. They change when a user clicks on the JButton named "Change Signal". So, if you click on the button, the circular shape will change colors to 1:red, 2:yellow, or 3: green.

Things I'll need:
A JFrame to hold everything
A Jbutton - Once clicked on, the shape changes colors
A listener that listens for the buttons being pressed
A JPanel
3 Shapes aligned vertically on top of each other - The light activated will have a brighter color than the rest
A layout - WimDC says use GridLayout.
Light Class for creating a Light component. Extending JComponent and overriding the paint(Graphics g) method.

That's all I know. This is a basic list of things I have identified to get started. I know I've probably missed a lot of things, so before I begin, I want you guys to help me complete the list of things I'll need. Then, once we get everything down, we can start the actual coding.

Edited by An Alien, 02 November 2011 - 05:56 AM.

[wim DC]

If you want it to look like a traffic light (3 lights vertically) you will also need a JPanel with either a GridLayout of 1 column, or a Vertical FlowLayout.

Depending on wether your lights will be drawn using the Graphics class and fillOval(int x, int y, int width, int height)
You should create your own "Light" class. which keeps its color, and is able to paint itself.

If you use images, you can put them on JLabel using setImageIcon();
That requires an ImageIcon object, which has a constructor that takes an Image object.
Getting your Image will be done using the ImageIO class' read(..) method.

[An Alien]

I think it would be more helpful to me if I draw it using swing instead of using an image. You're right actually. I'd like three circles. The light that is activated will be a brighter color than the rest.
Also, for the layout. I will research now the differences between flow and grid layouts.

So, I've updated the original post with the things you've told me. Anything else?

[wim DC]

Okay, then you need -like I said - a Light class. I suggest you make it extend "JComponent" and override the paint(Graphics g) method.
Then you can use it like any other swing component as such:

Light light = new Light(Color.GREEN);
myJPanel.add(light);

I think that's all you need.

[An Alien]

Currently learning how GridLayout works. So far, I've learned that it is a grid of cells that are the same size. You place components in the cells by first creating the layout using the constructor:

GridLayout Layout = new GridLayout(4,1); //1 column and 4 rows needed for button and 3 lights

I'll add components to the layout. First the button, then under it will come three graphics representing the traffic lights.

 

        layout.add(new JButton("Change Signal"));

        layout.add(new Light(153, 0, 0)); //red light

        layout.add(new Light(255, 255, 102)); //yellow

        layout.add(new Light(102, 204, 52)); //green

I'm not sure if the light components I'll make will have a constructor like that, but I'm just guessing it'll be something like that.

[wim DC]

Note that the constructor of gridLayout is (Column, Row), not (Row, Column)

Assuming compsToExperiment is a JPanel with that gridLayout, yes, it should be something like that.
Note that you can pass "0" as 1 of the 2 parameter of the GridLayout constructor, then it means "undefined".

new GridLayout(0,4); //4 rows, undefined columns, it will add an extra column if the first column is full and you .add() more

[An Alien]

Well, I used this page: How to Use GridLayout (The Java™ Tutorials > Creating a GUI With JFC/Swing > Laying Out Components Within a Container) to learn about the grid layout.

According to it, it says that the constructor is: GridLayout(int rows, int cols)
See the last table at the bottom of the page.

Also, I'm not sure if I'll need a JLabel for all four of the components or what. I was thinking that since the lights are similar, they could all fit into 1 JLabel. But after seeing GridLayout, I'd actually need a JPanel for all four components including the text. Is that true?

I copied the code from the gridlayout in my last post from oracle. Forgot to change the "compToExperiment" name to "layout".

[wim DC]

Aye, you're correct. I got confused by your comment saying col before rows.

Quote

new GridLayout(4,1); //1 column and 4 rows needed for button and 3 lights

I knew that was wrong, so I made the response, then looked at your code instead, and told it otherwise.
AAaaaanyway, it's (Row, Col) ^^.

About what text are you talking about?

[An Alien]

Sorry, I meant the button which will be clicked on to change the signal, not text.
So, I will need a JPanel for each of these components. That makes four JPanels.

And the JPanel will be added to the GridLayout first, or will the components be added?

I just don't really know what JPanel is really used for.

The hierarchy really confuses me. We need a JFrame with JPanel on top which will be set to the ContentPane. I'm really confused by all these different layers.

[wim DC]

No no, the JPanel has the gridLayout, and the 4 components (button & 3 lights) will be added to that jpanel:

JPanel panel = new JPanel(new GridLayout(4,0));
panel.add(new JButton("clicky clicky");
panel.add(new Light(..));
panel.add(new Light(..));
panel.add(new Light(..));

frame.add(panel);

frame.add will internally do:

frame.getContentPane().add(panel);

You can also write this yourself, but it's longer so why would you do that? :p

[An Alien]

Okay, I get it now.

Now we need to work on the Light class. For that, I'm not sure where to begin.
Edit: I thought about it some more and this is what I've come up with so far:

import java.awt.Color;

import javax.swing.JComponent;



public class Light extends JComponent {

Color colors;

	public Light(int r, int g, int b){

		colors = new Color(r, g, b);

	}

	

}

Not sure if we'll need the color object, but I just added it cause I saw it somewhere being used in some swing program.

[wim DC]

Make it extend JComponent and override this method:

@Override

public void paint(Graphics g){

    

}

Then look at the Graphics class' methods and see what you can pump out ;)
Graphics (Java 2 Platform SE v1.4.2)
You can also cast the Graphics 'g' variable into a Graphics2D Object for more methods:
Graphics2D (Java 2 Platform SE v1.4.2)