Saturday, January 5, 2008

Tutorial Number One

Alright, time for my first tutorial. It is on how to set up a swing window, to program all your shit in (this tutorial is also for kids. Parents, they'll hear the word shit somewhere, so it might as well be from me). I will tell you how to mess around with it, too. I'll give two or three examples of layouts you can use, and the advantages and disadvantages of each.

All code is written in NetBeans 3.5.1 (Yeah, that's oldschool, but I love it).

Okay, so welcome to the wonderful world of swing (well... not wonderful, but extra credit, yeah). First thing is first. I want ya to set up a new Java main class thingy-ma-jingy. I will call mine tutorialOne. In my IDE, it looks like this:

/*
* tutorialOne.java
*
* Created on January 5, 2008, 11:32 PM
*/

/**
*
* @author Sean Williams
*/


public class tutorialOne {

public tutorialOne()
{
}

public static void main(String[] args)
{
}
}


As you can see, there's the main method, and a line that reads public tutorialOne(). This is where you add stuff to your window. Now, I will create the basic window. All that will show up is the three buttons (min, max, close), because I will have only created a window, not given it size. So, here's the code, and I will explain it.

/*
* tutorialOne.java
*
* Created on January 5, 2008, 11:32 PM
*/

/**
*
* @author Sean Williams
*/
import javax.swing.*;

public class tutorialOne extends JFrame
{

public tutorialOne()
{
}

public static void main(String[] args)
{
tutorialOne window = new tutorialOne();
window.setVisible(true);
}
}


Alright, as you can see, there are a couple of changes here. I have added the import javax.swing.*; This gives the program access to the swing commands without doing a lot of typing (as long as you're not just starting out programming, I'm sure you've imported packages). So, move down to the line that reads "public class tutorialOne extends JFrame." I have added the extends JFrame. This means that when you create the swing window, you refer to tutorialOne, but the program knows that you really mean a JFrame, so it treats tutorialOne like a JFrame, which is what you want.

The largest change is these two lines (yes, that was grammatically correct):

tutorialOne window = new tutorialOne();
window.setVisible(true);

Like I said, tutorialOne, because JFrame is extended, is treated as a JFrame. You create one called window. Next, you set it to be visible. I don't know why it must be done here, and not later. Java is weird.

Now! On to messing with the window. If you run your program now, you'll see this:



You may notice that tiny little bank of buttons up in the upper left corner. That is precisely what I told you will happen. There are no arguments changing things up. Well, let's change that.

What I am going to do is change the size of the window. I will make it... oh, I don't know, maybe 500 by 500 pixels. Also, I'll move the window to the center of the screen. Next, I'll add a variable to decide whether the window is resize able or not. And lastly, I'll add a fun little thing to make sure the program stops using resources when you quit. Here's the code:

/*
* tutorialOne.java
*
* Created on January 5, 2008, 11:32 PM
*/

/**
*
* @author Sean Williams
*/
import javax.swing.*;

public class tutorialOne extends JFrame
{

private boolean isResizeable = false;

public tutorialOne()
{
setSize(500, 500);
setLocationRelativeTo(null);
setResizable(isResizeable);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

public static void main(String[] args)
{
tutorialOne window = new tutorialOne();
window.setVisible(true);
}
}


So, most notable is the several lines I have added. SetSize(500, 500) is pretty self explanatory. It is setting the size using an X and a Y measurement. SetLocationRelativeTo(null) means you are setting the location of the window relative to another component, in this case, a null value. That sticks the window right in the center of the screen. This is an improvement over how I used to do it, which involved getting the screen size, and taking half of that minus half of the X value for the window. This is much easier.

You should notice the line that reads "private boolean isResizable = false." I can't remember exactly what the private does (let's face it, I'm not a good programmer), but stick it there. This is a global variable, and can be used anywhere in this class, and can also be reset anywhere in this class. You can see where I already use it to say that the setResizable variable is false, meaning you cannot drag the window smaller or larger. You can set the boolean to true, which means you can do resize it.

Lastly, you see where it says setDefaultCloseOperation. That, just like it says, sets the default close operation. When you close the window, this tells the program what to do. In my case, it exits on close, closing all running processes and really ending the program.

So, what you learned is how to set the size, location, if it's resize able or not, and how to properly end the program. Keep in mind that unlike the setVisible command, these are inside the tutorialOne() method, so they don't need to be called using window.whatever. They can just be typed, and Java does the rest.

My next picture shows you what you get when you listen to me:



If you didn't listen to me, you get something like this:



Now, I add the contentPane. This is the layer of the window you draw stuff on. You reference the contentPane when adding components to the table.

/*
* tutorialOne.java
*
* Created on January 5, 2008, 11:32 PM
*/

/**
*
* @author Sean Williams
*/
import javax.swing.*;
import java.awt.*;

public class tutorialOne extends JFrame
{

private boolean isResizeable = false;

public tutorialOne()
{
Container contentPane = getContentPane();

setSize(500, 500);
setLocationRelativeTo(null);
setResizable(isResizeable);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}

public static void main(String[] args)
{
tutorialOne window = new tutorialOne();
window.setVisible(true);
}
}


See the line where I add the contentPane. Also note that I had to import another package up top. The awt is the high level GUI package, not like it's little bitch called swing.

So now... what other false promises did I make? Oh yeah, layouts. That's the last thing I'm doing today. There are two different... no, four different layouts I'll show you. They are Flow, Border, Grid, and Null.

Adding a layout is done by referencing the contentPane. So, the four I'll do here are, in order, contentPane.setLayout(null), contentPane.setLayout(new FlowLayout()), contentPane.setLayout(new BorderLayout()), and contentPane.setLayout(new GridLayout(X, Y)).

I'll do null first, since it is easiest to explain. It is exactly what it sounds like. There is no layout. That means you have to explain explicitly where everything goes, either through setting the location, or a bounding box, which is pretty annoying. This is definitely not recommended, as when you resize, none of your components shift to accommodate. You get a retarded window with a lot of free space. That's why real layouts are used, since Java automatically moves the components to fit the new window while conforming to the layout.

Flow layout is simple. You toss in some components, and Java throws them around wherever the first available spot is. It shrinks the stuff to fit the space (though I do not think it will expand most items). This is a good layout if you just don't give a shit.

Border layout is my favorite. This splits the screen into five areas. They are North, South, East, West, and Center. Components in the North and South slots will expand left and right to fit their spots. East and West will fill up and down. Center expands in all directions. YOu must specify which region you are adding a component to. That will look something like: contentPane.add(whatever, BorderLayout.CENTER). Replace center with whatever you want.

Lastly is the Grid layout, not may favorite, but useful in some cases. You basically create a grid, by giving X and Y measurements in the creation of the layout, and add compnents. These components are added to the grid in the order they are declared. You can also add a blank spot, or skipping a grid space, by adding simply: contentPane.add(new JLabel("")); And there you have it.


Well, it's late (early, actually), and I have work tomorrow. This is something of a half-assed, half finished tutorial, but it's the best you'll get out of me in my fatigued state. Next, I'll show you guys some color, as well as some basic components to add. I'll also get a little more into the layouts, including pictures of the layouts in action. Till then, don't bother me.

Im joking of course, I won't get that into it. Don't bother me.

No comments: