Java GUI Concepts

• GUI stands for Graphical User Interface

Key Terms and Definitions

• Swing is a GUI widget toolkit for Java, which provides lightweight components that start with "J," such as JButton and JLabel.
• AWT (Abstract Window Toolkit) is an older GUI toolkit using heavyweight components, which is suitable for simple GUIs but not for comprehensive projects.
• JFrame is a top-level container for creating the main window of a GUI application.
• JPanel is a container is to group and organize components within a GUI.
• A Layout Manager arranges components in a container, examples include; FlowLayout, GridLayout, and BorderLayout.
• A Color Class sets colors for GUI components using RGB values.
• A Font Class sets fonts for text in GUI components.
• ImageIcon displays images in labels or buttons.

Java GUI API

• Component Classes create user interface elements, such as JButton, JLabel, and JTextField.
• Container Classes hold other components such as JFrame, JPanel, and JApplet.
• Helper Classes support GUI components for example Graphics, Color, Font, FontMetrics, and Dimension.

Container Classes

• JContainer groups components, whose subclasses include Frames, panels, and applets.
• JFrame is a window that holds Swing components in Java GUI applications.
• JPanel is an invisible container that groups components and can be nested.
• JApplet is a subclass of Applet for creating Swing-based Java applets.
• JDialog is a popup window for receiving extra information or notifications.

GUI Helper Classes

• Helper classes are in the java.awt package.
• Graphics provides methods for drawing strings, lines, and shapes.
• Color manages colors for GUI components such as the background and foreground.
• Font specifies fonts for text, this includes the the type, style, and size.
• FontMetrics provides properties of fonts.
• Dimension describes the width and height of a component.
• LayoutManager specifies how components are arranged in a container.

Frames

• A JFrame creates the main window for a GUI application.
• Each JFrame has a content pane.
• GUI components are placed in the content frame.
• A content pane is an instance of JContainer.
• To create a user interface, create either a frame or an applet to hold the user-interface components.
• Steps to create a frame:
  • Create a JFrame object.
  • Set the frame size using setSize(width, height).
  • Center the frame using setLocationRelativeTo(null).
  • Set the default close operation using setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE).
  • Make the frame visible using setVisible(true).
• A pixel is the smallest unit of space for drawing on the screen.
• Resolution specifies the number of pixels per square inch, higher pixel counts increase the screen’s resolution.
• A button is always centered in the frame and occupies the entire frame, no matter how it is resized.

Layout Managers

• Layout managers automatically map the user interface on all window systems.
• A layout manager is created using a layout manager class.
• Layout managers are set in containers using the setLayout(aLayoutManager) method.
• FlowLayout arranges components left to right, top to bottom and is the simplest layout.
• When one row is filled, a new row is started.
• Alignment options: FlowLayout.LEFT, CENTER, RIGHT.
• Example: setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20)).
• GridLayout arranges components in a grid (rows and columns).
• Example: setLayout(new GridLayout(3, 2, 5, 5)).
• BorderLayout divides the container into five areas: NORTH, SOUTH, EAST, WEST, CENTER.
• Example: add(new JButton("Center"), BorderLayout.CENTER).

FlowLayout Properties

• Has alignment, hgap, and vgap properties.
• setAlignment, setHgap, and setVgap specify the alignment and the horizontal and vertical gaps.

GridLayout Properties

• It has the rows, columns, hgap, and vgap properties.
• setRows, setColumns, setHgap, and setVgap define the number of columns, and the horizontal and vertical gaps.

BorderLayout

• Includes the hgap and vgap properties.
• setHgap and setVgap specify the horizontal and vertical gaps.

Using Panels as Subcontainers

• Panels group components within a frame or another panel.
• Panels act as subcontainers.
• Panels can be placed inside a frame or another panel.
• Windows can be divide into panels within Java GUI.
• Swing’s panel is Jpanel.
• Use new JPanel() to create a panel with a default FlowLayout manager.
• Or use new JPanel(LayoutManager) to create a panel with the specified layout manager.
• Use the add(Component) method to add a component to the panel.
• Example:
  • Create a JPanel with a GridLayout for buttons.
  • Add the panel to the frame using add(panel, BorderLayout.CENTER).

Color Class

• Colors are defined using RGB values (0-255).
• Passing a value beyond this range to the argument will result in an IllegalArgumentException.
• You can set colors using java.awt.Color.
• Example: Color color = new Color(128, 100, 100).
• Set background and foreground colors using setBackground(Color) and setForeground(Color) in java.awt.Component.
• Standard colors: BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN, LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE, YELLOW.

Font Class

• Create a font using Font(String name, int style, int size) from java.awt.Font.
• Font names: SansSerif, Serif, Monospaced, Dialog, or DialogInput.
• Font styles: Font.PLAIN (0), Font.BOLD (1), Font.ITALIC (2), and Font.BOLD + Font.ITALIC (3).
• Constructor: public Font(String name, int style, int size);
• GraphicsEnvironment is an abstract class that details the graphics environment on a particular system.
• Example: Font font = new Font("SansSerif", Font.BOLD, 16).
• Set fonts for components using setFont(Font).

ImageIcon

• Images are normally stored in image files.
• An icon is a fixed-size picture, and small which is normally used to decorate components.
• Use images to display in labels or buttons.
• Supported formats: GIF, JPEG, PNG.
• Example: ImageIcon icon = new ImageIcon("image/us.gif").
• Display an image in a label: JLabel label = new JLabel(icon).

Common Features of Swing GUI Components

• The public methods include: Component, Container, and JComponent.
• The Component class is the root for all GUI components and containers
• All Swing GUI components are subclasses of JComponent.
• Except for: JFrame, JApplet, and JDialog.
• A border can be set on any object of the JComponent class.
• Tool Tips: Text that appears when hovering over a component.
• Example: jbtRight.setToolTipText("This is the Right button").
• Borders: Used to decorate components.
• Example: p1.setBorder(new TitledBorder("Three Buttons")).

jbt1.setIcon(icon);
jbt2.setIcon(icon);

Introduction to GUI Builder

• The GUI Builder in NetBeans allows for professional-looking GUIs without in-depth knowledge of layout managers.
• Components are placed directly onto the form.

Creating a Project

• An IDE project in NetBeans includes Java source files and metadata.
• Steps to create a new Java project:
  1. File > New Project or click the New Project icon.
  2. Select Java Application under the Java category.
  3. Enter the project name and location.
  4. Uncheck Use Dedicated Folder for Storing Libraries.
  5. Check Set as Main Project and leave Create Main Class empty.
  6. Click Finish.

Creating a JFrame Container

• The Source Packages folder in the Projects window includes an empty node.
• To build the interface, create a Java container within which the other GUI components can be placed.
• The JFrame serves as the main container for the GUI.
• Steps to add a JFrame container:
  1. Right-click the project node > New > JFrame Form.
  2. Enter Class Name and Package Name.
  3. Click Finish.

Getting Familiar with GUI Builder

1. Design Area

• Primary workspace for creating and editing GUI forms.
• Includes buttons for Source, Design, and History views.
• Contains a toolbar for aligning components, setting auto-resizing, and previewing forms.

2. Navigator

• Displays a tree structure of all GUI components.
• Shows visual feedback for the selected component.

3. Palette

• Contains Swing, AWT, and JavaBeans components.
• Allows customization of component categories.

4. Properties Window

• Displays properties of the selected component.

Adding Components

1. Adding a JPanel

• Select Panel from the Swing Containers category.
• Click on the form to place the JPanel.

2. Adding Title Borders to JPanel

• Select the JPanel and open Properties.
• Click the ellipsis (...) next to Border property.
• Select TitledBorder and enter a title.
• Adjust Font Style to Bold, Size 12.

3. Adding a JTextField

• Select Text Field from the Swing Controls category.
• Click on the form to place the JTextField.

4. Adding and Aligning a JLabel

• Select Label from the Swing Controls category.
• Align and edit the display text.