FlowLayouts

Introduction. When we develop a GUI form we need some way to organize the components on the form. The easiest way to do this is just add them to the form one after the other. In swing this is called a FlowLayout. They definitely aren't going to give the developer much, if any, control over the overall appearance of the GUI. But they do provide something.

In this webpage we will also develop GUIs using both an applet and an application. Developing GUIs with applications is slightly more difficult than it is for applets. This is because the basic concept of an applet has it configured to run within a web browser which has all kinds of built-in GUI capabilities.

Neither of these programs will have the capacity to respond to any user inputs other than when they click on the close button of the GUI. The capabilities to respond to other important user inputs is something we will develop in the next webpage. Presently, I want to demonstrate a GUI layout to help you work towards developing your own more elaborate layouts.

Our first program is an applet called InTheFlow.java.

import javax.swing.*;
import java.awt.*;

public class InTheFlow extends JApplet
{

// graphical user interface components
JLabel lblOne, lblTwo;
JTextField txtOne, txtTwo;
JButton cmdPushMe;
JPanel panel;

// setup graphical user interface components
public void init( )
{

JPanel panel = new JPanel();
panel.setLayout( new FlowLayout() );

lblOne = new JLabel( "Read these words!" );
panel.add( lblOne );

txtOne = new JTextField( 10 );
panel.add( txtOne );

lblTwo = new JLabel( "Read more words!" );
panel.add( lblTwo );

txtTwo = new JTextField( 20 );
txtTwo.setEditable( false );
panel.add( txtTwo );

cmdPushMe = new JButton( "Push Me" );
panel.add( cmdPushMe );

setContentPane(panel);

}

}

This program does the following

imports both the swing and awt packages and all their classes

extends JApplet

declares the GUI components within the overall inclusive InTheFlow class so that they will be available in all other methods in the class

within the method init( )

initializes a panel to contain the components

assigns a FlowLayout to the panel

instantiates an object of the JLabel class called lblOne

its constructor contains a string "Read these words!"

adds this label to the panel

instantiates an object of the JTextField class called txtOne

its constructor contains a number, 10, for its width

adds this text field to the panel

instantiates an object of the JLabel class called lblTwo

its constructor contains a string "Read more words!"

adds this label to the panel

instantiates an object of the JTextField class called txtOne

its constructor contains a number, 10, for its width

sets its editable property to false

adds this text field to the panel

instantiates an object of the JButton class called cmdPushMe

its constructor contains a string "Push Me"

adds this button to the panel

sets the overall content pane for the applet window to the panel

The following contains the HTML file.

You can see how the layout shifts.

So, FlowLayouts are the easiest to implement, and possibly practicable in some situations. But, we will only make use of them intermittently and mostly when I don't want to distract your understanding of the code with other issues.

An Application Based GUI. Now I want to run what should seem like almost the same program, but as an application. We will discuss the code after presenting the code and running it. You should call the file InTheFlowApp.java.

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class InTheFlowApp extends JFrame
{

// graphical user interface components
JLabel lblOne, lblTwo;
JTextField txtOne, txtTwo;
JButton cmdPushMe;
JPanel panel;

// setup graphical user interface components
public InTheFlowApp( )
{

super("Title For Frame");
setSize(300,150);
JPanel panel = new JPanel();
panel.setLayout( new FlowLayout() );

lblOne = new JLabel( "Read these words!" );
panel.add( lblOne );

txtOne = new JTextField( 10 );
panel.add( txtOne );

lblTwo = new JLabel( "Read more words!" );
panel.add( lblTwo );

txtTwo = new JTextField( 20 );
txtTwo.setEditable( false );
panel.add( txtTwo );

cmdPushMe = new JButton( "Push Me" );
panel.add( cmdPushMe );

setContentPane(panel);

} // end InTheFlowApp( )

public static void main(String[ ] args)
{

JFrame frame = new InTheFlowApp();
ExitWindow exit = new ExitWindow();
frame.addWindowListener(exit);
frame.show();

} // end main( )

} // end class InTheFlowApp

class ExitWindow extends WindowAdapter
{

public void windowClosing(WindowEvent e)
{

System.exit(0);

} // end windowClosing( )

} // end class ExitWindow

The discussion of the code follows. Make sure to focus on the differences between the applet and the application.

imports both the swing and awt packages and all their classes but also imports the awt.event classes

the awt.event classes need to be imported because

we need to have the form listen for someone clicking on the little x that tells the program to close

we need the code that should execute when the user clicks on the close button

these are the sorts of things that are automatically available when working with applets

extends JFrame

declares the GUI components within the overall inclusive InTheFlowApp class so that they will be available in all other methods in the class

within the method InTheFlowApp( ), which is actually the constructor for the overall inclusive class and wasn't needed in the applet and which must have the same name as its overall inclusive class

sets the title

sets the size

initializes a panel to contain the components

assigns a FlowLayout to the panel

instantiates an object of the JLabel class called lblOne

its constructor contains a string "Read these words!"

adds this label to the panel

instantiates an object of the JTextField class called txtOne

its constructor contains a number, 10, for its width

adds this text field to the panel

instantiates an object of the JLabel class called lblTwo

its constructor contains a string "Read more words!"

adds this label to the panel

instantiates an object of the JTextField class called txtOne

its constructor contains a number, 10, for its width

sets its editable property to false

adds this text field to the panel

instantiates an object of the JButton class called cmdPushMe

its constructor contains a string "Push Me"

adds this button to the panel

sets the overall content pane for the applet window to the panel

end this InTheFlowApp( ) constructor

within the method main( ) which wasn't needed in the applet

instantiate/construct a JFrame object of type InTheFlowApp( )

instantiate/construct an ExitWindow object called exit

add the capability for the application to listen for the user to click on the overall frame based on the object exit of the ExitWindow class

cause the frame to display using the show( ) method from the JFrame class

end the method main( )

end the overall inclusive class InTheFlowApp

start a new class to deal with the user trying to close the frame/window called ExitWindow that extends the java awt.event class WindowAdapter

create a method called windowClosing( ) that responds to the user clicking on the close button on the frame

within this method we tell the program to System.exit(0) when the user clicks on the close button

Notice how when you compile the InTheFlowApp program, you get a class called InTheFlowApp.class but you also get a class called ExitWindow.class.