COMPSCI4039: Programming
Introduction to Swing 2
Recap lecture 1
Copyright By PowCoder代写 加微信 powcoder
¡ñ We saw how to set up a basic JFrame
¡ð myClass extends JFrame
¡ð Attributes include JButtons, JLabels, JTextField etc.
¡ñ Constructor:
¡ð Contains standard JFrame info re. Size, CloseOperation, title etc.
¡ð Instantiates components (buttons etc.)
¡ñ Main method:
¡ð Instantiates GUI object and gives it name (gui say)
¡ð Sets visible attribute
¡ñ But to add components to the frame we need a layout
Layout Managers
¡ñ The ContentPane is a logical ¡®layer¡¯ of a JFrame window
¡ð you add the other components to it
¡ð NOT directly to the underlying JFrame
¡ð E.g. this.add(textField1) or this.add(textField, BorderLayout.NORTH)
¡ð Equivalent to this.getContentPane().add(textField1) (etc.)
¡ð This is assuming the JFrame is using a ¡°Border Layout¡± …
¡ñ We will learn about 3 layout managers:
¡ð FlowLayout (most simple)
¡ð BorderLayout (default for JFrame)
¡ð GridLayout
Flow Layout
¡ñ Simplest layout
¡ñ Adds components from left to right,
¡ð components given space they need
¡ð If horizontal space not filled components centred
¡ð new line when necessary to fit on window
¡ð changing size of window will re-position
¡ñ Can set this layout in a JFrame using setLayout(new FlowLayout())
¡ñ Can then add as many components as you want directly to (contentPane of)
Example – simplified version of ButtonFrame
import java.awt.FlowLayout;//in future examples will assume appropriate layout imported public class FlowLayoutDemo extends JFrame {
private JButton button1, button2;
// include the other instance variables
public FlowLayoutDemo() {//constructor
// include the standard JFRAME information (size etc.)
button1 = new JButton(“Ok”);
// instantiate the other components
// new bit:
this.setLayout(new FlowLayout()); this.add(button1); this.add(button2); this.add(label1); this.add(textField1);
(See Demo)
FlowLayoutDemo – output
public class FlowLayoutDemo extends JFrame { private JButton button1, button2;
// include the other instance variables
public FlowLayoutDemo() { //constructor
// include the standard JFRAME
// information (size etc.)
button1 = new JButton(“Ok”);
// instantiate the other
// components
this.setLayout(new FlowLayout());
this.add(button1); this.add(button2); this.add(label1); this.add(textField1);
BorderLayout on ContentPane
Default layout for JFrame
¡ñ The ContentPane is divided into 5 areas as shown on the diagram. This is called Border Layout
¡ñ Only 1 component added to each area
¡ñ Components fill areas as shown
¡ð North and South grow vertically as
¡ð East and West grow horizontally as
¡ð Center* gets
space left over * Note American spelling
Example: adding buttons to a frame
¡ñ Add a ¡°Press Me¡± button to the centre area and the ¡°Press Me Too¡± button to
the south area
¡ð add(button1,BorderLayout.CENTER); ¡ð add(button2,BorderLayout.SOUTH);
(See BorderLayoutDemo)
Other layouts
We will look closely at GridLayout soon …
Another layout, GridbagLayout – like FlowLayout but centers both vertically and horizontally. Useful for Swing lab sheet (this week!) when adding panels to border layout to try to replicate this picture (from slide 7):
¡ñ Remember, only one component can be added to each area of North, South, East and West.
¡ñ To place multiple components you must add them to a JPanel (which is a Container) and then add the JPanel to the appropriate area.
Windows within windows
¡ñ We can divide our window into sub-windows
¡ñ A sub-window (JPanel) can be placed anywhere that a component can be
¡ð E.g. we can put a sub-window in the ¡°North¡± position of our main window
¡ð We can then place several components in this sub-window, rather than
¡ñ This way we can get more than 5 components in our main window
¡ñ The default layout for a sub-window (JPanel) is Flow Layout
¡ð Components are displayed side by side
¡ð We can divide a sub-window into sub-sub-windows, etc.
Using the JPanel class
¡ñ A JPanel container is a window
¡ð with no border or title bar
¡ð used to contain other components
¡ð can be used for graphics
¡ð cannot be a top level container (must use a JFrame)
¡ñ To instantiate a JPanel object:
JPanel myPanel= new JPanel();
¡ñ Useful methods:
setBackground(Color), getHeight(), getWidth()
SimpleFrame1 Example
JPanel northPanel = new JPanel(); northPanel.setBackground(Color.white);
label1 = new JLabel(” Click the Button”);
button1 = new JButton(“Click”);
northPanel.add(label1);
northPanel.add(button1);
this.add(northPanel,
BorderLayout.NORTH);
See demo (and code) for full implementation
Code for North area
Changing the layout manager
¡ñ Any container can be given a non-default layout
¡ð instantiate a Layout object of the desired type
¡ð use the container¡¯s setLayout method
¡ð e.g. to give a JPanel object a BorderLayout
BorderLayout bl = new BorderLayout(); myPanel.setLayout(bl);
myPanel.setLayout(new BorderLayout());
No harm in setting layout even if it is to default, e.g.
JPanel northPanel = new JPanel(new FlowLayout()); In previous example
Grid Layout
¡ñ GridLayout simply makes a group of components equal in size and displays them in the requested number of rows and columns.
¡ñ We can put one component in each position
¡ñ Have to specify at least the number of rows or number of columns
Instantiating a GridLayout
¡ñ A GridLayout manager is instantiated with a fixed number of rows and
¡ð GridLayout gl = new GridLayout(rows,cols);
¡ð the parameters rows and cols must be integers
¡ñ you can also add two extra parameters which fix gaps between the cells (in
¡ð GridLayout gls = new GridLayout(rows, cols, hGap, vGap)
¡ð hGap and vGap must also be integers
GridLayoutDemo code
public class GridLayoutDemo extends JFrame{
JButton button1, button2, button3, button4, button5;
public GridLayoutDemo(){
this.setTitle(“Grid of buttons”);
// include the standard JFRAME information (size etc.)
this.setLayout(new GridLayout(0,2));// 2 columns, as many rows as we need
button1 = new JButton(“Button 1”);
// similarly buttons 2 and 3
button4 = new JButton(“Long-named Button 4”);
button5 = new JButton(“Button 5”);
this.add(button1); // then add the rest of the buttons
// add main method
See GridLayoutDemo.java
Adding components to a grid layout
¡ñ Components are placed on the container in the order in which they are added (left to right)
¡ñ Add a component using
add(component)
¡ñ A row is filled across all columns before starting on the next row.
See GridLayoutComponents.java
JFrame with GridLayout comprising 4 rows and 3 columns, each cell containing a JLabel
Back to ButtonFrame
JPanel mainPanel = new JPanel(new GridLayout(2, 1)); JPanel myPanel1 = new JPanel(new FlowLayout());
myPanel1.add(button1);
myPanel1.add(button2);
mainPanel.add(myPanel1);
JPanel myPanel2 = new JPanel(new FlowLayout()); myPanel2.add(label1);
myPanel2.add(textField1); mainPanel.add(myPanel2);
(See Demo)
Outer JFrame has Border Layout mainPanel is added to Center area
this.add(mainPanel);
Back to ButtonFrame – observations
JPanel mainPanel = new JPanel(new GridLayout(0, 1)); JPanel myPanel1 = new JPanel(new FlowLayout());
myPanel1.add(button1);
myPanel1.add(button2);
myPanel1.add(label1);
mainPanel.add(myPanel1);
JPanel myPanel2 = new JPanel(new FlowLayout()); myPanel2.add(label1);
myPanel2.add(textField1); mainPanel.add(myPanel2);
this.add(mainPanel);
Two changes, but code produces the same window! Why?
Designing a complex GUI
¡ñ The basic technique is to layer panels on top of panels ¡ð each with their own appropriate layout manager
¡ñ Often there are many panels on a GUI whose only purpose is to help with the
¡ð they are not ¡®important¡¯ for the functionality of the GUI
¡ñ Panels (and also sometimes labels) with no event functionality in the GUI
¡ð do not have to be instance variables of the GUI
¡ð they can be declared locally in the ¡®layout¡¯ method
Example GUI with nested layout
See NestedFrameDemo.java
¡ñ JFrame has Border Layout as usual
¡ñ Centre area is a JPanel called ¡°centerPanel¡± also with Border Layout.
¡ñ JLabel ¡°Grid of buttons below¡± in North area of this panel
¡ñ Centre area of this panel is a JPanel having Grid Layout with 2 rows and 3 columns.
Creating separate components
Rather than just create a component (JPanel) inside a JFrame object, create the JPanel object as a separate component
We will create a new class – SimpleComponent.java- which extends JPanel which will contain a JTextArea and a button.
A SimpleComponent object will be an instance variable of our JFrame object
See CallingComponentExample.java
Example – SimpleComponent:
import javax.swing.JButton; // and JPanel and JTextArea
public class SimpleComponent extends JPanel { private JTextArea textArea;
private JButton button1;
public SimpleComponent() {
textArea = new JTextArea(10,20);
textArea.setText(“Some text can go in here!”); this.add(textArea);
button1 = new JButton(“Click me”); this.add(button1);
// add getters, setters and other methods
Button and textArea are now instance variables of this component (rather than frame object)
Allows JFrame object to access and modify the button and textArea
Adding component to CallingComponentExample
import javax.swing
public class CallingComponentExample extends JFrame {
private SimpleComponent myComponent;
public CallingComponentExample() {
this.setTitle(“JFrame calling a component”); this.setSize(400, 200); this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myComponent = new SimpleComponent();
(See Demo)
this.add(myComponent);
// Main method — creates the Frame object
Notes on previous example:
¡ñ A lot of the work (including import statements) now done in the SimpleComponent class
¡ñ As our class SimpleComponent is very simple, and the only class that will
use it is CallingComponentExample, it could be added to the
CallingComponentExample class as an inner class.
¡ð We¡¯ll see an example of this in the lab exercise in week 9.
¡ñ Multiline area that displays plain text
¡ñ Constructors: ¡ð JTextArea()
¡ð JTextArea(int rows, int cols)
¡ð JTextArea(String text)
¡ð JTextArea(String text, int rows, int cols)
¡ñ Will expand/shrink to align with other components, so need to experiment
Back to Plotter – we can now do this:
To be discussed in next week¡¯s examples class
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com