09b: ADT Recap; GUI Basics
ICS211, Spring 2013
Dr. Zach
(switch view)
Status
- Exam 2 on Monday
- A06: not much code to write, but hard to get it all right
Recap: ADTs
- Stack: LIFO; only affect one end
- Queue: FIFO; only affect one end or other
- List: can affect any element in sequence (by index)
- Iterator: Efficient traversal of list while still hiding/encapsulating implementation.
- We focused on using it over a linked list of nodes implementation, but could use over array too
Implementations:
- Array-based
- Node-based (linked list)
- Variations: singly-linked, doubly-linked, tail pointer, circular (including array for queue), sentinel node, etc.
Efficiency and Trade-offs
| Array-based (directly/by index) | Array-based (iterator) | Linked (directly/by index) | Linked (iterator)
|
---|
add (append) | O(1)* | O(1)* | O(1) (w/ tail ptr) | O(1)
|
---|
add (insert) | O(n) | O(n) | O(n) | O(1)
|
---|
get | O(1) | O(1) | O(n) | O(1)
|
---|
remove | O(n) | O(n) | O(n) | O(1)
|
---|
- * - resizing the array is amortized
- iterator - assuming iterator is at necessary location
- When to choose one over other? Depends on your needs.
- LinkedList better for insert/delete, but ArrayList better once your array is built (random access, sorting, copying portions of it).
- When uncertain, people tend to favor ArrayList.
Perspective on Big-O
- Gives you a mental framework for estimation and theoretical comparison
- Processing a gigabyte of sorted characters
- 1GB? Hah, tiny! Fits in your smartphone's memory; 1/4 or 1/8 of your laptop's memory.
- Appending an extra character in O(1) - basically instant
- Inserting an extra character in O(n) - noticeable; about 1 second (since CPUs = Ghz)
- Sorting using an O(n2) sort - 32 years!!
Java's Collections
Interfaces
- List
- Queue
- Deque (usable as Stack)
Implementations
- ArrayList (List)
- LinkedList (List, Queue, Deque)
- ArrayDeque (Queue, Deque)
Java OOP
- instance variables, constructors
- inheritance, overriding (vs overloading; super), polymorphism
- interfaces, abstract classes (implementing)
- generics
For Exam 2
Essentials:
- OOP (Q05, Q06, (A04, A05, A06))
- Know how to work with Nodes (A05a, Q07, Q08, (A06))
- Know how to work with Stack, Queue, List objects (A05b, Q08)
- Know the +/- of different implementation options
GUIs
(just the basics)
Background
- We'll use Swing: javax.swing.*
- Older: java.awt.
- (Abstract Windowing Toolkit) (Swing still uses parts of this)
- Oracle is now pushing JavaFX (RIAs using XML + CSS too)
- We'll code by hand to get an idea of how this all works
- As with all coding, once you know what you're doing, tools will help you
- Tutorial: Creating a GUI with Swing
- Fairly huge; somewhat skimmable
Overview
- Make a plan (design)
- Pick your components (widgets)
- Layout your components
- Implement the behavior (using event listeners)
- Deploy (application, applet, etc.)
1: Our simple example
- A number pad (as for a calculator or phone)
- Draw a quick/basic design sketch of out what you're going for:
2: Select components
- Swing Tutorial -> Using Swing Components -> Visual Guide helps a lot here
- Tutorial has basics for each possible component: description, examples, essential methods
- Not complete though. Once you know what you need, you can see full API for more
- Buttons for 0 - 9, a text field, a non-editable display part
3: Layout components
- Containers.
- Top-level (JFrame, JAppet) vs JPanel
- Tip: Build a JPanel that contains everything, then put that JPanel into a top-level container
- Every container has a layout manager for its components
- Swing Tutorial -> Laying Out Components Within a Container -> Visual Guide helps a lot here
- We'll keep it simple: nested JPanels and simple layout managers (Flow, Grid, or Border)
Sample code: Default Flow Layout
JPanel top = new JPanel();
//create buttons
JButton[] buttons = new JButton[10];
for (int i = 0; i < buttons.length; i++) {
buttons[i] = new JButton("" + i);
if (i > 0) {
top.add(buttons[i]); //add each button to the top JPanel
}
}
top.add(buttons[0]);
//then put top into a JFrame (window)...
GridLayout
JPanel top = new JPanel();
top.setLayout(new GridLayout(4, 3)); //row, col
//create buttons
JButton[] buttons = new JButton[10];
for (int i = 0; i < buttons.length; i++) {
buttons[i] = new JButton("" + i);
if (i > 0) {
top.add(buttons[i]); //add each button to the top JPanel
}
}
top.add(buttons[0]);
//then put top into a JFrame...
Layout Managers
- Constructor/rules for each is a little different, so look it up in tutorial
- Can nest JPanels, so break design down into pieces, with different simple layouts for each
- (Or learn how GridBagLayout works)
NumberPad
public class NumberPad {
//components we may need to refer to later
private JPanel top;
private JButton[] buttons;
private JButton enter;
private JTextField input;
private JLabel output;
/** Builds the top-level JPanel of the NumberPad GUI. */
public NumberPad() {
//top level
this.top = new JPanel();
top.setLayout(new BorderLayout());
//first row: input field
this.input = new JTextField();
top.add(input, BorderLayout.PAGE_START); //put in top
//create buttons
buttons = new JButton[10];
for (int i = 0; i < buttons.length; i++) {
buttons[i] = new JButton("" + i);
}
//center row: a grid of buttons 1-9, and then 2 more buttons underneath
JPanel center = new JPanel();
center.setLayout(new GridLayout(4, 3));
for (int i = 1; i <= 9; i++) {
center.add(buttons[i]);
}
center.add(new Label("")); //spacer
center.add(buttons[0]);
this.enter = new JButton("Enter");
center.add(this.enter);
this.top.add(center, BorderLayout.CENTER);
//bottom row: an non-editable output/status field
this.output = new JLabel(" "); //a space so it has some height
this.top.add(this.output, BorderLayout.PAGE_END);
}
public static void main(String[] args) {
JFrame window = new JFrame("Number pad");
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
NumberPad pad = new NumberPad();
window.setContentPane(pad.top);
window.pack();
window.setVisible(true);
}
4: Implement Behavior
- At this point, can click buttons and type in text field... but nothing happens.
- Relies on an event listener architecture (described on board)
- Simplest approach: Make number pad an ActionListener, register self with all components, and then sort out details from a single method
Complete implementation
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class NumberPad implements ActionListener {
//components we may need to refer to later
private JPanel top;
private JButton[] buttons;
private JButton enter;
private JTextField input;
private JLabel output;
/** Builds the top-level JPanel of the NumberPad GUI. */
public NumberPad() {
//top level
this.top = new JPanel();
top.setLayout(new BorderLayout());
//first row: input field
this.input = new JTextField();
this.input.setHorizontalAlignment(JTextField.RIGHT);
this.input.addActionListener(this);
top.add(input, BorderLayout.PAGE_START); //put in top
//create buttons
buttons = new JButton[10];
for (int i = 0; i < buttons.length; i++) {
buttons[i] = new JButton("" + i);
buttons[i].addActionListener(this);
}
//center row: a grid of buttons 1-9, and then 2 more buttons underneath
JPanel center = new JPanel();
center.setLayout(new GridLayout(4, 3));
for (int i = 1; i <= 9; i++) {
center.add(buttons[i]);
}
center.add(new Label("")); //spacer
center.add(buttons[0]);
this.enter = new JButton("Enter");
this.enter.addActionListener(this);
center.add(this.enter);
this.top.add(center, BorderLayout.CENTER);
//bottom row: an non-editable output/status field
this.output = new JLabel(" "); //a space so it has some height
this.top.add(this.output, BorderLayout.PAGE_END);
}
public void actionPerformed(ActionEvent ae) {
if (ae.getSource() == this.enter || ae.getSource() == this.input) {
//Enter button clicked or enter pressed in input field
this.output.setText("Entered: " + this.input.getText());
this.input.setText("");
}else if (ae.getSource() instanceof JButton) {
JButton pressed = (JButton) ae.getSource();
//one of the buttons must have been clicked: add that value to input
this.input.setText(this.input.getText() + pressed.getText());
}
}
public static void main(String[] args) {
JFrame window = new JFrame("Number pad");
window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
NumberPad pad = new NumberPad();
window.setContentPane(pad.top);
window.pack();
window.setVisible(true);
}
}
Just the beginning of GUIs...
- Much more complexity possible: many different components, layouts, event listener types, skins, customizations.
- For animation and complex interfaces, need to deal with threads
- IDE tools exist to help with construction (GUI builders).
- But the concepts here are the same across all GUI building (even in some other languages):
- Make a plan (design)
- Pick your components (widgets)
- Layout your components
- Implement the behavior (using event listeners)
- Deploy (application, applet, etc.)
- We haven't talked about deployment options yet... We'll talk about applets next time.
For next time...
- Quiz 08 before Mon.
- Exam on Monday
- A07 (linked list iterator) by in one week
- A08 (small GUI game) to be posted today
- We'll start searching and sorting next week
Space, Right Arrow or swipe left to move to next slide, click help below for more details