[SOLVED] COMPSCI4039: Programming

COMPSCI4039: Programming
Introduction to Swing 2

Recap lecture 1

Copyright By Assignmentchef assignmentchef

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 containers 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.
Well 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 weeks examples class

CS: assignmentchef QQ: 1823890830 Email: [email protected]