Date post: | 22-Dec-2015 |
Category: |
Documents |
View: | 230 times |
Download: | 0 times |
Objectives
• GUI components– To create user interfaces using frames, panels, and some
simple UI components• Layout managers– To understand the role of layout managers– To use the FlowLayout, GridLayout, and BorderLayout
• Graphics– To use the Color class – To use the paintComponent method– To use the Graphics class
AWT and Swing
• Java provides many predefined classes for building GUI applications.
• These classes are provided in two packages called: Abstract Windows Toolkit (AWT) and Swing.
• In Java, to write a GUI program, we derive new classes from those provided in AWT or Swing.
The overall structure of AWT and Swing
• Graphics– Drawing, fonts, colour etc.
• Components– buttons, text fields, menus and scroll bars etc
• Layout managers– Arrangement of GUI components
• Event handlers– Event such as clicking button and corresponding actions
• Image manipulation.
Creating a frameimport javax.swing.*;
public class MyFrame1 extends JFrame{
MyFrame1(String title) {
setTitle(title);
setSize(400,300);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args) {
MyFrame1 frame = new MyFrame1("MyFrame");
}
}
Adding components to a frame
Container contentPane = getContentPane(); //obtain the content pane of the frameJButton ok = new JButton("first_ok_button"); //create a button objectcontainer.add(ok);
Student activity 11.2
• Read the page on “Adding components to a frame”
• Add a button to the frame.
Effect of Using ContentPane 1public class MyFrame_color extends JFrame{
MyFrame_color(String title) {
setTitle(title);
setSize(400,300);
setBackground(Color.BLUE);//sets the frame colour???
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args) {
MyFrame_color frame = new MyFrame_color("MyFrame");
}
}
Effect of Using ContentPane 2public class MyFrame_color extends JFrame{
MyFrame_color(String title) {
setTitle(title);
setSize(400,300);
getContentPane().setBackground(Color.BLUE);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] args) {
MyFrame_color frame = new MyFrame_color("MyFrame");
}
}
Some GUI Components
• Component is the superclass of Container– Container is the superclass of JComponent• JComponent is the superclass of AbstractButton–AbstractButton is the superclass of JButton
• JComponent is the superclass of JTextComponent– JTextComponent is the superclass of JTextField– JTextComponent is the superclass of JTextArea
• JComponent is the superclass of JLabel
• The Component class provides methods such as setting and getting background colours.
• The Container class provides methods for adding component to the container; setting layout manager; and painting the component.
JButton
• Mostly used constructors. – JButton(String text)– E.g. – JButton ok = new JButton("first_ok_button");
• JButton also inherits all the methods in its super classes such as setBackgroundColor
JTextField
• A JTextField: user input area.• Commonly used constructors and methods are:
– JTextField(int columns)– Creates an empty text field with the specified number of columns.– JTextField(String text)– Creates a text field initialized with the specified text.
• Mostly used methods:– getText()
– Returns the string from the text field. – setText(String text)
– Puts the given string in the text field.
JLabel
• A JLabel is a display area for a short text.• Constructors and methods include the
following:– JLabel()– JLabel(String text)– setText(String text)– getText()
Container
• containers can contain a number of components, e.g. frames and panels, ContentPane
• We can use the add method to put components in a container:Container contentPane = getContentPane();
JButton ok = new JButton("first_ok_button");
contentPane.add(ok);
JPanel
• JPanel is a subclass of Jcomponent• Used as container or sub-containers for
grouping user interface components• Often programmers use a JPanel instead of
the Content Pane when adding components to a frame as JPanel is a subclass of JComponent; it provides more methods than the ContentPane
Student activity 11.4
• Read the page on Container. Use JPanel. Add a JButton to the JPanel instead of to the ContentPane.
Layout Manger
• Controls how the GUI components within the container can be arranged
• Java provides a number of predefined layout managers. – FlowLayout – GridLayout – BorderLayout
• Containers has a method – setLayout(LayoutManager)
FlowLayout
• FlowLayout is the simplest layout manager. • The components are arranged in the container
from left to right in the order in which they were added.
• When one row becomes filled, a new row is started.
FlowLayout: Fragment of code public class ShowFlowLayout extends JFrame {
public ShowFlowLayout() {
Container container = getContentPane();
container.setLayout(new FlowLayout());
for (int i = 1; i <= 10; i++)
container.add(new JButton("Component " + i));
}
public static void main(String[] args) {
ShowFlowLayout frame =
new ShowFlowLayout(FlowLayout.LEFT);
……
}
}
GridLayout
• The GridLayout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor.
• The components are placed in the grid from left to right starting with the first row, then the second, and so on.
GridLayout: Fragment of codepublic class ShowGridLayout extends JFrame {
public ShowGridLayout() {
Container container = getContentPane();
container.setLayout(new GridLayout(3,2));
container.add(new JLabel("First Name"));
container.add(new JTextField(8));
container.add(new JLabel("MI"));
container.add(new JTextField(1));
container.add(new JLabel("Last Name"));
container.add(new JTextField(8));
}
……
}
BorderLayout
• Divides the container into five areas: East, South, West, North, and Center.
• To add a component to a particular area, we use the add(Component, constraint) method, where constraint is – BorderLayout.EAST, – BorderLayout.SOUTH, – BorderLayout.WEST, – BorderLayout.NORTH, – BorderLayout.CENTER
BorderLayout: code fragment public class ShowBorderLayout extends JFrame {
public ShowBorderLayout() {
Container container = getContentPane();
container.add(new JButton("East"),
BorderLayout.EAST);
container.add(new JButton("South"),
BorderLayout.SOUTH);
container.add(new JButton("West"),
BorderLayout.WEST);
container.add(new JButton("North"),
BorderLayout.NORTH);
container.add(new JButton("Center"),
BorderLayout.CENTER);
}
……
The Color class
• You can set colours for GUI components by using the java.awt.Color class.
MyFrame(String title) {
… …
Container container = getContentPane();
JButton ok = new JButton("first_ok_button");
container.add(ok);
ok.setBackground(Color.red);
container.setBackground(Color.green);
… …
}
Drawing in Swing
• usually create a new class that extends JPanel and override the paintComponent () method
• The Graphics object g is created automatically by the Java Virtual Machine for every visible GUI component.
Methods in the Graphics object
• drawLine(50,50,100,60), draws a line from (50,50) to (100,60) • drawRect(20,20,100,50), draws a rectangle with (20,20) as the
top left corner; 100 is the length and 50 is the width.• fillRect(20,20,100,50), draws a rectangle as above but filled with
the current colour.• drawOval(30,30,50,50), draws an oval bounded by an invisible
rectangle whose top left corner is at (30,30); length is 50 and width is 50.
• drawString(“Hello”, 50,50), draws a string starting from the position (50,50).
• setColor(Color.red), sets of colour of the graphics object to be red.
paintComponenet
public class MyCanvas extends JPanel {
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.fillRect(10,10,100,50);
g.drawRect(10,80,100,50);
}
}
Darwing: code fragment 1public class MyExample extends JFrame {
MyCanvas canvas = new MyCanvas();
JLabel heading = new JLabel("My drawing");
public MyExample() {
Container container = getContentPane();
container.add(heading,BorderLayout.NORTH);
container.add(canvas,BorderLayout.CENTER);
}
Darwing: code fragment 2
public static void main(String[] args) {
MyExample myDrawing = new MyExample();
myDrawing.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
myDrawing.setSize(300,300);
myDrawing.setVisible(true);
}
}
Summary
• How to create various GUI components, in particular, JFrame, JPanel, JButton, JTextfield, JLabel.
• How to use layout managers for containers, in particular, FLowLayout, GridLayout and BorderLayout.
• How to use the graphics object to draw graphics, in particular how to use the paintComponent method.