Make a window in Java is easy. Unfortunately, to put the components into the window is not as easy as making
Know Your Swing components
In section 1, has discussed how to display a window using Swing in Java. In this second part, we will learn to Swing lay various components in the window. Some of the most common components used are:
a. JLabel, is used to display labels or text in the window
b. JTextField, is used to receive from the user enter text in the form
c. JButton, used as a button that can trigger an event when the click
d. JCheckBox, used as an option that can be checked
e. JComboBox, used as an option in the dropdown form that lets users choose to type or click one of the options available
f. JList, used to give the user a list of options
g. JPanel, used to group several components or can also be used as a canvas area to draw geometric shapes. JPanel component is not a component that can accept input from the user, but only serves as a container for accommodating other components
Some components easy to use, but a few more (like JTable) requires a slightly complicated management
Placing Components
Java is object-oriented programming language, so that all components of the object, to put the components into a window, we need to declare the first component, then we call the Add method to put the object (component) is. Not placed directly on the window, the object of Lay on a content pane, which is a layer of the window or frames that has been made. This concept will be a bit confusing, but we will try to see how the actual philosophy behind the laying of these components.
As a component to JFrame and display screen, we will see a window that seems to be very easy to put components in it (button, textfield, label, or other components), but in fact behind these frames, there is the layer above it called Root Pane. Root Pane itself has four parts:
1. Layered Pane.
2. Content Pane.
3. Glass Pane.
4. Optional Menu Bar.
The following illustration shows how the layer structure of a frame. Each layer has its own function:
• Layered Pane, a layer that can accommodate overlapping components. When we add components to Layered Pane, then we also need to determine the depth or normal termed Z-Order (sequence) component is to determine the order of stack components.
• Content Pane, a visible layer by default and used to accommodate the components, including the menu bar. If we want to add menu bar to the application, then the menu bar will be placed on the Content Pane. For examples of the next program, all components will be placed on this Content Pane.
• Glass Pane, an outer layer and hidden by default. If Glass Pane is displayed, then this layer will cover the layers beneath. Glass Pane is useful if we want to show the components placed on other components (or also to capture an event)
For example, we will make a how to put a button component on the Content Pane. The steps are as follows:
1. Create a frame / window to accommodate the components
JFrame frame = new JFrame ();
2. Declare an object components (eg labels)
JLabel label = new JLabel ( "This is text");
3. Add object (component) is in the Content Pane (because they could not be added directly to the frame). To add to the Content Pane, we need to get active pane then using the getContentPane method. Content Pane of the reading results is accommodated in an object of type Container:
/ * Declare an object of type Container for accommodating Content Pane * /
Container content = new Container ();
/ * Get the Content Pane of the time frame is active, and stored in content object * /
content = frame.getContentPane ();
4. Add the components in the content pane through objects that have been prepared in step 3 by using the method add
content.add (label);
5. Last is the display to determine the size of the frame with the method setSize, show the frame with setVisible method and stop the program when the close icon is closed
frame.setSize (400, 400);
frame.setVisible (true);
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
For more listings are as follows:
/ * Listing 1 - GUI2.Java * /
1. import java.awt .*;
2. import javax.swing .*;
3.
4. public class GUI2 {
5. public static void main (String [] args) (
6. JFrame frame = new JFrame ( "Demo Component");
7.
8. / * Declare an object of type Container for accommodating Content Pane * /
9. Container content = new Container ();
10. / * Get the Content Pane of the time frame is active, and stored in the object
content * /
11. content = frame.getContentPane ();
12. JLabel label = new JLabel ( "This is text");
13. content.add (label);
14.
15. frame.setSize (400, 400);
16. frame.setVisible (true);
17. frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
18. }
19. }
Set the layout for laying Components
After putting the components into a window / frame, does not mean everything is easier. The next challenge is how to manage if there is more than one component that would appear (in fact, in a graphical application, it will always be more than one component)? If you just add the method calls in the call many times to put more than one component? Which will be placed on those components? Will be sorted from left to right? Will be arranged from top to bottom? Or would be stacked?
This question will be answered with the layout. Layout is a key component of how to put the components into the frame (or window) that exist. Each pane has the default layout. For example, if a frame is placed on a button, then the default button will meet all existing frames. For example, if we add the following line to the 12 and 13 in listing 1 (GUI2.java) becomes:
So view obtained is as follows:
Button will cover the existing text in the frame. To overcome this in, Java Swing layout provides 4 models that can be used to organize the components, namely:
1. FlowLayout. As its name implies, this type of layout will drain all the components from left to right. If the frame is not sufficient, then the component will be put under. Use of this Flowlayout suitable for simple applications that do not require a lot of components.
2. BorderLayout. This type of layout has five division areas, namely north, south, east, west, and central
3. GridLayout. Divide the window into the grid area / table with a number of specific rows and columns.
4. GridBagLayout. Similar to GridLayout, but the size of each grid can not match. Use GridBagLayout is very helpful to put the components with more custom, but a little complicated way of use.
How to apply the layout of the 4 top models in the program?
We need a method called setLayout which to set a layout in a container. Container itself can be obtained through the method getContentPane as exemplified in listing 1
A simple example to put the 4 button in a window by using the FlowLayout layout is as in listing 2 (Flow.java)
The resulting display is as follows:
If we do resize the window, then the components will continue to follow the flow from left to right, then down just below
By default, the alignment for the components are arranged in the middle. We can set this alignment through the constructor the first time declared a layout. There are three alignments that can be given to this arrangement with FlowLayout, namely FlowLayout.LEFT, FlowLayout.CENTER (default), FlowLayout.RIGHT. For example, if line 15 is converted to:
15. content.setLayout (new FlowLayout (FlowLayout.RIGHT);
Then all components will be placed right average width of the frame following the
The distance between the components can also be arranged through the constructor when declaring FlowLayout object. For example, if we want to set the horizontal distance between the components of 20 pixels and a vertical distance of 5 pixels betwen componen, then in line 9 can be converted into
9. content.setLayout (new FlowLayout (FlowLayout.RIGHT, 20, 5));
View obtained is as follows:
The simplest of all forms of regulation is FlowLayout. Consequently not much can be done if we want more flexibility in managing positions.
Layout of the 2, which is BorderLayout provide a more sophisticated setting, namely by dividing the window into five areas, namely north, south, west, east and center. 5 areas to be determined at the time of calling Add method to put the components
As an example of the BorderLayout, consider Listing 3
/ * Listing 3 - Border.Java * /
View is obtained as follows
Like Flowlayout, BorderLayout can also set the horizontal and vertical distances of each component. This setting is placed on the constructor when declaring BorderLayout object. For example, if the horizontal and vertical distances to change to 10 pixels, then the declaration on line 16 was changed to:
content.setLayout (new BorderLayout (10, 10)
And the resulting display is as follows:
If FlowLayout and BorderLayout are less satisfactory, we can try to GridLayout. Assuming that the frame / window arranged in tabular form (consisting of rows and columns), the settings component position can be easier.
For example if we want four buttons arranged in a 2x2 table. Although the resize frame, but both are still arranged in 2x2 formation. This of course can not be done by using a BorderLayout and FlowLayout.
We will make these formations, as in Listing 4
/ * Listing 4 - Grid.Java * /
Display becomes as follows:
Line 15
content.setLayout (new GridLayout (2, 2));
Indicates the settings in the form of rows and columns. Meanwhile, to set the spacing between the vertical and horizontal components can be done in the constructor. For example:
content.setLayout (new GridLayout (2, 2, 10, 5));
Will provide the horizontal distance between the components of 10 pixels and a vertical distance of 5 pixels components
Exploiting Panel to Manage Layout
So far, insight a frame or window is only possible to use just one type of layout. What if we want to label and the textfield is set by using FlowLayout layout, and to Button set by using FlowLayout?
The answer is using the JPanel. JPanel is a blank area that can be used for:
• On the contents of other components
• Draw a graph or geometric shapes
Components are placed on JPanel can be set using a particular type of layout, then JPanel can be placed on a frame by using a different layout
As an example we want to make a set of buttons placed on the bottom of the window. If we use a BorderLayout with the South's position, then what happens is Button 1 will be stacked by Button 2, Button 2 will be stacked by and Button 3 Button 3 Button will be stacked by 4. The result is shown in the frame is just button 4.
In this case, we can use JPanel. In JPanel, we can fill in the Button 1, Button 2, Button 3, and 4 Button using FlowLayout. Then we put it on the frame JPanel with BorderLayout in south position.
5 Consider the following listing:
/ * Listing 5 - Panel.java * /
Line 10, we define an object type is then set JPanel using FlowLayout layout (line 17) At the panel, added button as many as 4 pieces that will flow from left to right.
After the panel on the contents of the button, the next is putting the panel by using BorderLayout (line 23) and placed in the SOUTH position (line 24). Display of Listing 5 is as follows:
Once we know how to put the component on a frame, the next section we shall understand more deeply for each component, and how to do event handling of these components .We will discuss the Graphical User Interface in Java Part 3
Know Your Swing components
In section 1, has discussed how to display a window using Swing in Java. In this second part, we will learn to Swing lay various components in the window. Some of the most common components used are:
a. JLabel, is used to display labels or text in the window
b. JTextField, is used to receive from the user enter text in the form
c. JButton, used as a button that can trigger an event when the click
d. JCheckBox, used as an option that can be checked
e. JComboBox, used as an option in the dropdown form that lets users choose to type or click one of the options available
f. JList, used to give the user a list of options
g. JPanel, used to group several components or can also be used as a canvas area to draw geometric shapes. JPanel component is not a component that can accept input from the user, but only serves as a container for accommodating other components
Some components easy to use, but a few more (like JTable) requires a slightly complicated management
Placing Components
Java is object-oriented programming language, so that all components of the object, to put the components into a window, we need to declare the first component, then we call the Add method to put the object (component) is. Not placed directly on the window, the object of Lay on a content pane, which is a layer of the window or frames that has been made. This concept will be a bit confusing, but we will try to see how the actual philosophy behind the laying of these components.
As a component to JFrame and display screen, we will see a window that seems to be very easy to put components in it (button, textfield, label, or other components), but in fact behind these frames, there is the layer above it called Root Pane. Root Pane itself has four parts:
1. Layered Pane.
2. Content Pane.
3. Glass Pane.
4. Optional Menu Bar.
The following illustration shows how the layer structure of a frame. Each layer has its own function:
• Layered Pane, a layer that can accommodate overlapping components. When we add components to Layered Pane, then we also need to determine the depth or normal termed Z-Order (sequence) component is to determine the order of stack components.
• Content Pane, a visible layer by default and used to accommodate the components, including the menu bar. If we want to add menu bar to the application, then the menu bar will be placed on the Content Pane. For examples of the next program, all components will be placed on this Content Pane.
• Glass Pane, an outer layer and hidden by default. If Glass Pane is displayed, then this layer will cover the layers beneath. Glass Pane is useful if we want to show the components placed on other components (or also to capture an event)
For example, we will make a how to put a button component on the Content Pane. The steps are as follows:
1. Create a frame / window to accommodate the components
JFrame frame = new JFrame ();
2. Declare an object components (eg labels)
JLabel label = new JLabel ( "This is text");
3. Add object (component) is in the Content Pane (because they could not be added directly to the frame). To add to the Content Pane, we need to get active pane then using the getContentPane method. Content Pane of the reading results is accommodated in an object of type Container:
/ * Declare an object of type Container for accommodating Content Pane * /
Container content = new Container ();
/ * Get the Content Pane of the time frame is active, and stored in content object * /
content = frame.getContentPane ();
4. Add the components in the content pane through objects that have been prepared in step 3 by using the method add
content.add (label);
5. Last is the display to determine the size of the frame with the method setSize, show the frame with setVisible method and stop the program when the close icon is closed
frame.setSize (400, 400);
frame.setVisible (true);
frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
For more listings are as follows:
/ * Listing 1 - GUI2.Java * /
1. import java.awt .*;
2. import javax.swing .*;
3.
4. public class GUI2 {
5. public static void main (String [] args) (
6. JFrame frame = new JFrame ( "Demo Component");
7.
8. / * Declare an object of type Container for accommodating Content Pane * /
9. Container content = new Container ();
10. / * Get the Content Pane of the time frame is active, and stored in the object
content * /
11. content = frame.getContentPane ();
12. JLabel label = new JLabel ( "This is text");
13. content.add (label);
14.
15. frame.setSize (400, 400);
16. frame.setVisible (true);
17. frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE);
18. }
19. }
Set the layout for laying Components
After putting the components into a window / frame, does not mean everything is easier. The next challenge is how to manage if there is more than one component that would appear (in fact, in a graphical application, it will always be more than one component)? If you just add the method calls in the call many times to put more than one component? Which will be placed on those components? Will be sorted from left to right? Will be arranged from top to bottom? Or would be stacked?
This question will be answered with the layout. Layout is a key component of how to put the components into the frame (or window) that exist. Each pane has the default layout. For example, if a frame is placed on a button, then the default button will meet all existing frames. For example, if we add the following line to the 12 and 13 in listing 1 (GUI2.java) becomes:
So view obtained is as follows:
Button will cover the existing text in the frame. To overcome this in, Java Swing layout provides 4 models that can be used to organize the components, namely:
1. FlowLayout. As its name implies, this type of layout will drain all the components from left to right. If the frame is not sufficient, then the component will be put under. Use of this Flowlayout suitable for simple applications that do not require a lot of components.
2. BorderLayout. This type of layout has five division areas, namely north, south, east, west, and central
3. GridLayout. Divide the window into the grid area / table with a number of specific rows and columns.
4. GridBagLayout. Similar to GridLayout, but the size of each grid can not match. Use GridBagLayout is very helpful to put the components with more custom, but a little complicated way of use.
How to apply the layout of the 4 top models in the program?
We need a method called setLayout which to set a layout in a container. Container itself can be obtained through the method getContentPane as exemplified in listing 1
A simple example to put the 4 button in a window by using the FlowLayout layout is as in listing 2 (Flow.java)
The resulting display is as follows:
If we do resize the window, then the components will continue to follow the flow from left to right, then down just below
By default, the alignment for the components are arranged in the middle. We can set this alignment through the constructor the first time declared a layout. There are three alignments that can be given to this arrangement with FlowLayout, namely FlowLayout.LEFT, FlowLayout.CENTER (default), FlowLayout.RIGHT. For example, if line 15 is converted to:
15. content.setLayout (new FlowLayout (FlowLayout.RIGHT);
Then all components will be placed right average width of the frame following the
The distance between the components can also be arranged through the constructor when declaring FlowLayout object. For example, if we want to set the horizontal distance between the components of 20 pixels and a vertical distance of 5 pixels betwen componen, then in line 9 can be converted into
9. content.setLayout (new FlowLayout (FlowLayout.RIGHT, 20, 5));
View obtained is as follows:
The simplest of all forms of regulation is FlowLayout. Consequently not much can be done if we want more flexibility in managing positions.
Layout of the 2, which is BorderLayout provide a more sophisticated setting, namely by dividing the window into five areas, namely north, south, west, east and center. 5 areas to be determined at the time of calling Add method to put the components
As an example of the BorderLayout, consider Listing 3
/ * Listing 3 - Border.Java * /
View is obtained as follows
Like Flowlayout, BorderLayout can also set the horizontal and vertical distances of each component. This setting is placed on the constructor when declaring BorderLayout object. For example, if the horizontal and vertical distances to change to 10 pixels, then the declaration on line 16 was changed to:
content.setLayout (new BorderLayout (10, 10)
And the resulting display is as follows:
If FlowLayout and BorderLayout are less satisfactory, we can try to GridLayout. Assuming that the frame / window arranged in tabular form (consisting of rows and columns), the settings component position can be easier.
For example if we want four buttons arranged in a 2x2 table. Although the resize frame, but both are still arranged in 2x2 formation. This of course can not be done by using a BorderLayout and FlowLayout.
We will make these formations, as in Listing 4
/ * Listing 4 - Grid.Java * /
Display becomes as follows:
Line 15
content.setLayout (new GridLayout (2, 2));
Indicates the settings in the form of rows and columns. Meanwhile, to set the spacing between the vertical and horizontal components can be done in the constructor. For example:
content.setLayout (new GridLayout (2, 2, 10, 5));
Will provide the horizontal distance between the components of 10 pixels and a vertical distance of 5 pixels components
Exploiting Panel to Manage Layout
So far, insight a frame or window is only possible to use just one type of layout. What if we want to label and the textfield is set by using FlowLayout layout, and to Button set by using FlowLayout?
The answer is using the JPanel. JPanel is a blank area that can be used for:
• On the contents of other components
• Draw a graph or geometric shapes
Components are placed on JPanel can be set using a particular type of layout, then JPanel can be placed on a frame by using a different layout
As an example we want to make a set of buttons placed on the bottom of the window. If we use a BorderLayout with the South's position, then what happens is Button 1 will be stacked by Button 2, Button 2 will be stacked by and Button 3 Button 3 Button will be stacked by 4. The result is shown in the frame is just button 4.
In this case, we can use JPanel. In JPanel, we can fill in the Button 1, Button 2, Button 3, and 4 Button using FlowLayout. Then we put it on the frame JPanel with BorderLayout in south position.
5 Consider the following listing:
/ * Listing 5 - Panel.java * /
Line 10, we define an object type is then set JPanel using FlowLayout layout (line 17) At the panel, added button as many as 4 pieces that will flow from left to right.
After the panel on the contents of the button, the next is putting the panel by using BorderLayout (line 23) and placed in the SOUTH position (line 24). Display of Listing 5 is as follows:
Once we know how to put the component on a frame, the next section we shall understand more deeply for each component, and how to do event handling of these components .We will discuss the Graphical User Interface in Java Part 3
Comments
Post a Comment