From Today's post and for several Posts now, we will take a look at how we create an GUI in Java. We will start out with the first java library java.awt (Abstract Window Toolkit) and talk about the different kinds of Objects there are and create a little GUI from scratch using Code that does nothing, but looks pretty decent :P So, without further do let's get started!
Le Library:
Let's first start out talking about the Library awt and the features it gives us. To find more information you can visit this link from the java doc. I will talk about the basics today and afterwards each time we will get more advanced by doing more stuff that gets more complicated. So, using this library we can now go away from the Console and create an GUI. An GUI (Graphical User Interfaces) is some kind of Window that will contain different kinds of things like Labels, Buttons, Listboxes and TextAreas. Those things that I listed out are the so called Components of an GUI and those will be inserted into Containers that are also Components. Every one of those Components is extending (inheriting) the aspects of the Container class. So, the hierarchy looks like this:
This library doesn't give us only visual stuff, but also a way of controlling the way a GUI handles and what it does when pressing a Button, putting Text inside a TextField and so on, using the so called Events and Actions. We will talk about them some other day tho.
One last thing I wanted to point out is that this library also contains a way of sorting the Components using the so called LayoutManager and Layouts. We use the same Layouts from the awt libraty even when using the newer library swing that does many of the same things that awt does. And finally this library and it's counterpart swing contain also a class for creating Applets for the Browser (we will talk about them some day).
So, after this big introduction let's now take a look at some of this stuff more deeply. We will talk about the Components, Containers and the Layouts today.
Components:
As I already told you, Components are Graphical Objects that the GUI will contain. The Component Class from which all the other inherit, contains variables and functions that are very useful. You can take a look at all of them here. As always you can simply press the "." to see all of the functions that any Component can use and there will also be a documentary that helps you out even more.
So, let's take a look at some pretty useful ones:
- add(Component c), that inserts a component into this component (useful for the containers)
- setTitle(String title), that set the title of the component (useful for containers)
- setName(String name), that sets the name of the component
- setSize(int width, int height), that sets the dimentions of the component
- setLocation(int x, int y), that sets the location to new (x, y) point
- setLocationRelativeTo(Component c), that sets the location of this component relative to Component c
- setBounds(Rectangle r), that moves and resizes this component to conform to the new bounding rectangle r
- setLayout(LayoutManager m), that defines the LayoutManager for the component
- setAlignment(int align), that sets the alignment for the layout used to an static value that can mean CENTER, NORTH, RIGHT and other things
- setVisible(boolean status), that changes the visibility of our component (default is false)
- setEnabled(boolean status), that enables/disables the Component (default is true)
- setBackground(Color c), that defines the background Color using an Object of type Color
- setForeground(Color c), that defines the foreground Color
- setLocationByPlatform(boolean status), that sets if it should appear at the default location for the native windowing system or at the current location the next time the Window is made visible (we will make it true so that it doesn't start at our mouse location)
and various Listener methods, for the Action and Event stuff that we will talk about later on...
Now let's take a look at Components that are available:
- Button, that is for getting click input
- Checkbox, that is for getting checkbox input in form true/false (on/off)
- Choice, that represents a pop-up menu for getting a choice from a list
- Label, that displays Text that cannot be changed directly from the user and only by the programm
- List, that represents a list of items where the user can choose one or multiple ones
- Scrollbar, that embodies an scroll bar that lets the user select from a range of values like an slider
- TextField, that allows getting single line text input from the user
- TextArea, that allows getting input from an multi-line region of text.
- Canvas, that lets you draw into its area and get input events from the user.
Containers:
The Containers are Components that contain other Components. We will do stuff on them using functions we already talked about in the Component Part, cause the Containers inherit from the Component Class. Not all of those Containers will make sense to contain Components. Some will include Containers for making more advanced stuff. You can read about more stuff here.
Let's take a look into some Containers:
- ScrollPane, that implements automatic horizontal and/or vertical scrolling for an child component
- Panel, that provides space for attaching Components and even other Panels using a Layout
- Applet, that is a small programm that runs embedded inside another application (we will talk about them some more another time)
- Window, that is the top-level window with no borders and no menubar and it must have a frame, dialog or another window defined as its owner when constructed (we will not use it directly)
- Frame, that inherits from Window, has a title and a border, but doesn't need an owner and so it can stand by its own (we will use it as a base for every GUI)
- Dialog, that is a top-level window with a title and a border that is typically used to take some form of input from the user.
- FileDialog, that inherits from Dialog and displays a dialog window from which the user can select a file
- JDialog, JWindow, JComponent and many others, that are the Components used in the swing library (we will talk about them next time)
Layouts:
There are several Layouts that can be used for layering out our Components and Containers inside a GUI. I will talk about how they to the Layering and we will use some of them in our Coding over time. If you want to know how to use all of them, here a link that shows you how to implement them.
So, let's take a look into them:
- BorderLayout, that is the default one for most GUI Objects and splits the Area into 5 called Center, East, West, North and South.
- BoxLayout, that stacks the Objects on top of each-other or puts them in a row
- CardLayout, that lets the user choose between the components by using a combo box, the same way a tabbed pane works
- FlowLayout, that is the default one used by swing Objects and puts the Objects one after another sized at their preferred size
- GridBagLayout, that places the Objects in an Rectangle Grid that contains cells of different sizes (one of the most difficult ones to use)
- GridLayout, that places the Object inside of a Grid with cells of the same size
- GroupLayout and SpringLayout that should only be used with GUI Builders, cause the coding is pretty difficult
Simple GUI Code:
Now lastly let's make a simple GUI that contains a Label, a TextField and a Button. All these will be put inside of a Panel, that will be put inside of a Frame.
Here our Code:
import java.awt.*;
public class MyWindow{
public static void main(String[] args) {
// set up frame
Frame frame = new Frame();
frame.setSize(500, 500);
frame.setTitle("MyWindow");
frame.setBackground(Color.CYAN);
frame.setLocationByPlatform(true);
// set up panel
Panel panel = new Panel();
// set layout to 3x1 grid layout
panel.setLayout(new GridLayout(3,1));
// set up label
Label label = new Label("Hello World!");
label.setAlignment(Label.CENTER);
// set up text field
TextField textfield = new TextField();
textfield.setText("Write what you want...");
// set up button
Button button = new Button();
button.setBackground(Color.CYAN);
button.setLabel("Press me!");
// add components to panel
panel.add(label);
panel.add(textfield);
panel.add(button);
// add panel to frame and make it visible
frame.add(panel);
frame.setVisible(true);
}
}
For Closing the Application you have to terminate it inside of your IDE or using the TaskManager. We will fix this when going into swing GUI next time. :)
So, Bros and Sisters, this was the end of today's Introduction into GUI in Java. Tomorrow we will go and take a look at the swing library (we know already the most stuff)
Hope you found this stuff article/post useful. Thanks for reading :)