GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks,...
-
Upload
hugh-sherman -
Category
Documents
-
view
217 -
download
0
description
Transcript of GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks,...
![Page 1: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/1.jpg)
GUI Tutorial 1
![Page 2: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/2.jpg)
A Bit of Philosophy on what to Teach There are numerous libraries, frameworks,
options Modern GUIs are often developed using XML
(e.g., Android, XAML, etc.) My goals for 306:
Understand event-driven programming in general Work with one object-oriented GUI library (Swing) Feel confident you can learn other toolkits as
needed Cover only the basics (e.g., there are many layout
managers, but I’ll only cover a couple)
![Page 3: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/3.jpg)
Topics in GUI Tutorial 1 Event-driven programming Layout managers Text fields and labels Responding to buttons Simple dialogs
confirmation message simple input
JPanel Borders CheckBox and ComboBox
![Page 4: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/4.jpg)
Event Programming GUIs are under control of the user, not the
program. This type of programming is referred to as event-driven.
Java programs react to a wide variety of user interface events – button pushes, mouse clicks, window manipulation, etc.
Program installs event listeners for events of interest
Need to know the event source – e.g., button, text box, window etc.
All listeners implement the particular interface for that type of event (e.g., button listeners must implement ActionListener)
![Page 5: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/5.jpg)
FirstGUI
Covers JFrame, BorderLayout, JTextField, JLabel, JButton, ActionListeners
![Page 6: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/6.jpg)
Basic Strategy – very simple GUI1. Create a JFrame (or JApplet) as the top-level
container. Normally only 1 JFrame per application.2. Define the components as instance variables (or
possibly local variables)3. In the constructor, allocate space for the
components, add them to the JFrame (may call helper methods)
4. Main is usually very short:1. call the constructor2. set visible true.
No events yet…
![Page 7: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/7.jpg)
Create a JFramepublic class FirstGUI extends JFrame{
public static void main(String[] args) {FirstGUI gui = new FirstGUI();gui.setVisible(true);
}
}
GUI displays… barely!
![Page 8: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/8.jpg)
Use the constructor to configure itpublic FirstGUI(){ // EXIT_ON_CLOSE is static intsetDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setTitle("My First GUI"); setSize(300, 100);} set functions are defined because FirstGUI is-a JFrame
![Page 9: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/9.jpg)
What’s a layout? A layout manager determines how
components will be arranged (order and size) Layout managers enable programs to be more
portable The default layout manager for a JFrame is
BorderLayout The default layout manager for a JPanel
(covered soon) is FlowLayout Controlling the layout is not an important
topic for this class. Suggested reading:http://www.developer.com/java/ent/article.php/630651/Swing-from-A-to-Z-Minimum-Maximum-and-Preferred-Sizes.htm
![Page 10: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/10.jpg)
BorderLayoutIn a BorderLayout, outer components (N/S/E/W) are
sized to their natural size, if possible. Any extra space is given to CENTER.
NORTH
SOUTH
CENTER EASTWEST
![Page 11: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/11.jpg)
Now let’s add components JTextField – used to accept information, single line Our JTextField will be an instance variable –
because we want to access it from other methods later.
Our JLabel field will be local – only set up and add to GUI, don’t need to access or modify later
public class FirstGUI extends JFrame { private JTextField myName; private void createLayout() { JLabel nameLabel = new JLabel("Name");myName = new JTextField(20);add(nameLabel, BorderLayout.NORTH);add(myName, BorderLayout.CENTER);
}
call createLayout from ctor
only add 1 component/area
![Page 12: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/12.jpg)
Basic Strategy – simple GUI w Events1. Create a JFrame (or JApplet) as the top-level
container. Normally only one JFrame per application.2. Define the components as instance variables (or
possibly local variables)3. In the constructor or an initialization function,
allocate space for the components, add them to the JFrame, do other JFrame set up (set default close operation, set size, etc.)
4. Write an event listener (can be anonymous or inner class)
5. Attach the event listener to the component6. In main, call the constructor, set visible true. Main
is usually very short.
![Page 13: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/13.jpg)
Add a Button In createLayout, define a button, allocate
space, add to JFrameJButton nameButton = new JButton("OK");add(nameButton, BorderLayout.SOUTH);
It displays… but no action yet
Why is it OK for nameButton to be a local variable?
![Page 14: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/14.jpg)
Create a listener A class that responds to events must
implement an interface named ActionListener Remember that an interface:
Specifies methods that must be defined Provides method signature (name, parameters) Interface does not provide a method body – like
pure virtual in C++. Method must be defined by implementing class.
By using an interface, Java knows what method to call Event
Listener
JButton
actionPerformed
![Page 15: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/15.jpg)
Note on packages Just importing java.awt.* does not provide access to
java.awt.event.ActionEvent. You can think of it as a directory structure that doesn’t automatically include subdirectories. (that’s not really what happens…)
import java.awt.event.*;
![Page 16: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/16.jpg)
Simple action listener class There are several syntax options for where the listener is defined. We’ll define an inner class.
This should be in your source file, between public ClassName and the final }.
For now, put it just above your main method. You can give the class any name, but it must implement
ActionListener and you must have a method definition for actionPerformed.
private class ButtonListener implements ActionListener{
public void actionPerformed(ActionEvent e){System.out.println("Button pressed");}
}COMMON ERRORS: misspelling actionPerformed, notmaking it public, not having ActionEvent as a parameter.
Run it now… still nothing happens!
![Page 17: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/17.jpg)
Add the listener to a button Press the button…. nothing happens yet!
Need to “attach” the listener to the buton. Add the action listener to it (inside createLayout()).nameButton.addActionListener(new ButtonListener());
But system.out.println is not very exciting
![Page 18: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/18.jpg)
JOptionPaneJOptionPane provides 3 quick options for
dialogs: Simple input Simple message Confirmation
![Page 19: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/19.jpg)
Modifying the action listener We can access the value of the JTextField
because it’s an instance variable and our listener is an inner class
Put these lines in actionPerformed:String message = "Hello " + myName.getText();JOptionPane.showMessageDialog(null, message);
![Page 20: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/20.jpg)
More JOptionPane optionsString numStr = JOptionPane.showInputDialog("Enter your age");int num = Integer.parseInt(numStr);int yearsLeft = 100 - num;JOptionPane.showMessageDialog(null, "You have " + yearsLeft + " years left");
NOTE: This example is just to show all JOptionPane options – for most applications you would probably add an age field to the JFrame.
![Page 21: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/21.jpg)
Final JOptionPane example showConfirmDialog returns an enumerated type int ready = JOptionPane.showConfirmDialog(null, "Are you ready to continue?");
if (ready == JOptionPane.YES_OPTION)JOptionPane.showMessageDialog(null, "Here we go!");
elseJOptionPane.showMessageDialog(null, "OK, we'll wait");
![Page 22: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/22.jpg)
JPanel JPanel is a container to hold other components A JPanel may be in its own class, or may be a
variable inside another class Which is best? Depends….
![Page 23: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/23.jpg)
FlowLayout// default layout is flowJPanel panel = new JPanel();panel.add(component);
Items displayed in order added Fills horizontally, move to next line when not enough space for next field.
FIELD-1
FIELD-3
FLD-4
FIELD-2
FLD-5 FLD-6
![Page 24: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/24.jpg)
Using a JPanel with FirstGUIprivate void createLayout() {
JLabel nameLabel = new JLabel("Name");myName = new JTextField(20);// Create a JPanelJPanel panel = new JPanel();// Add elements to the panelpanel.add(nameLabel);panel.add(myName);// Add the panel to the layoutadd(panel, BorderLayout.CENTER);JButton nameButton = new JButton("OK");add(nameButton, BorderLayout.SOUTH);nameButton.addActionListener(
new ButtonListener());}
![Page 25: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/25.jpg)
CarpoolGUI
JPanel, FlowLayout, GridLayout, JComboBox, CheckBox, RadioButton, Font
Quick Intro: Panel Communication
![Page 26: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/26.jpg)
CarpoolGUI Used to sign up for carpooling Will show lots of GUI components Creates a more complex layout using panels We’ll start today, finish next time
NOTE: Clue layout will probably not need so many separate JPanel classes
![Page 27: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/27.jpg)
Panel Communication
Main panel
Control Panel
This is just a special case of message passing – common OO technique
![Page 28: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/28.jpg)
GridLayoutJPanel buttonPanel = new JPanel();buttonPanel.setLayout(new GridLayout(4, 3));buttonPanel.add(button7);buttonPanel.add(button8); …
7 8 9
4 5 6
1 2 3
0 . CE
can set 1 of these to 0, will expand as needed
![Page 29: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/29.jpg)
Nesting PanelsJPanel keypadPanel = new JPanel();keypadPanel.setLayout(new BorderLayout());JPanel buttonPanel = new JPanel();buttonPanel.setLayout(new GridLayout(4, 3));buttonPanel.add(button7);buttonPanel.add(button8); …keypadPanel.add(buttonPanel, BorderLayout.CENTER);JTextField display = new JTextField();keypadPanel.add(display, BorderLayout.NORTH);
7 8 94 5 61 2 30 . CE
![Page 30: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/30.jpg)
Get started: normal items in JFramepublic class CarpoolGUI extends JFrame {
public CarpoolGUI() { setSize(new Dimension(400, 250)); setTitle("Let's carpool"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);}public static void main(String[] args) { CarpoolGUI gui = new CarpoolGUI(); gui.setVisible(true);}
}
![Page 31: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/31.jpg)
Create panel with combo boxespublic class ToFromPanel extends JPanel { // JComboBox<String> requires Java 1.7 or higher
private JComboBox<String> toCity, fromCity;public ToFromPanel(){ toCity = createCityCombo(); fromCity = createCityCombo(); }private JComboBox<String> createCityCombo(){ JComboBox<String> combo = new JComboBox<String>(); combo.addItem("Golden"); combo.addItem("Boulder"); combo.addItem("Denver"); return combo;}
}
Don’t Repeat Yourself (DRY)We create a createCityCombo method to avoid repeating code.
![Page 32: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/32.jpg)
Continue combo panel Add to ToFromPanel constructor:
JLabel fromLabel = new JLabel("From");JLabel toLabel = new JLabel("To");setLayout(new GridLayout(0, 2));add(fromLabel);add(toLabel);add(fromCity);add(toCity);
Add to CarpoolGUI constructor:ToFromPanel tfPanel = new ToFromPanel();add(tfPanel, BorderLayout.CENTER);
![Page 33: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/33.jpg)
Create panel with radio buttonspublic class PreferencePanel extends JPanel {private JRadioButton smokeButton, noSmokeButton;public PreferencePanel(){// Create the buttons
smokeButton = new JRadioButton("Smokes"); noSmokeButton = new JRadioButton("No smoke"); // Set no smoke as the default noSmokeButton.setSelected(true); // Add the buttons to the panel add(smokeButton); add(noSmokeButton); }}
![Page 34: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/34.jpg)
Add the panel to the JFrame In the JFrame constructor:PreferencePanel pPanel = new PreferencePanel();add(pPanel, BorderLayout.EAST);
But it’s possible to click both! Need a RadioGroup
![Page 35: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/35.jpg)
Update Preference panelButtonGroup group = new ButtonGroup();group.add(smokeButton);group.add(noSmokeButton);setBorder(new TitledBorder (new EtchedBorder(), "Preferences"));
OK, but let’s get items in a column
![Page 36: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/36.jpg)
We’ll use GridLayoutsetLayout(new GridLayout(2, 1));
![Page 37: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/37.jpg)
Add a border Add to the ToFromPanel constructorsetBorder(new TitledBorder (new EtchedBorder(), "Location"));
![Page 38: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/38.jpg)
CheckBox and Fontpublic class WillDrivePanel extends JPanel {private JTextField name;private JCheckBox willDriveCB;
public WillDrivePanel(){ JLabel label = new JLabel("Name"); name = new JTextField(20); name.setFont(new Font("SansSerif", Font.BOLD, 12)); add(label); add(name);}
} add to JFrame, of course (NORTH)
![Page 39: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/39.jpg)
Add to JFrameWillDrivePanel wdPanel = new WillDrivePanel();
add(wdPanel, BorderLayout.NORTH);
![Page 40: GUI Tutorial 1. A Bit of Philosophy on what to Teach There are numerous libraries, frameworks, options Modern GUIs are often developed using XML (e.g.,](https://reader035.fdocuments.net/reader035/viewer/2022062523/5a4d1b157f8b9ab0599914e0/html5/thumbnails/40.jpg)
Now the check boxwillDriveCB = new JCheckBox("Will drive");add(willDriveCB);