Algorithms and

Graphical User Interfaces (part 2)

Session 8LBSC 790 / INFM 718B

Building the Human-Computer Interface

Agenda• Questions

• Algorithms

• Graphical User Interfaces

• Project Specification 1

• Wrap-up

Stop/start/continue summary

• Stop– Nothing (3)– Allowing people to talk during lecture– Dry PowerPoint presentations– Moving screen while I’m trying to copy code– Final exam / hard homework

• Start– More examples, details (3)– More HCI principles– What happens behind the scene that makes

it easier to understand• Continue

– Hands-on exercises in class (6)• Add challenge option or next step

Why Study Algorithms?• Some generic problems come up repeatedly

– Sorting– Searching– Graph traversal

• Need a way to compare alternative solutions

• Reusing algorithms is easy and productive– Focusing on the algorithm reveals the key ideas– Language and interface make reusing code hard

Sorting• Given an array, put the elements

in order– Numerical or lexicographic

• Desirable characteristics– Fast– In place (don’t need a second array)– Able to handle any values for the

elements– Easy to understand

Insertion Sort• Simple, able to handle any data• Grow a sorted array from the beginning

– Create an empty array of the proper size– Pick the elements one at a time in any order– Put them in the new array in sorted order

• If the element is not last, make room for it– Repeat until done

• Can be done in place if well designedExample

Insertion Sort

90 11 27 37111631 4

Insertion Sort

90 11 27 37111631 4

90

Insertion Sort

90 11 27 37111631 4

9011

Insertion Sort

90 11 27

90

37111631 4

2711

Insertion Sort

90 11 27

31 90

37111631 4

2711

Insertion Sort

90 11 27

27 31 90

37111631 4

114

Insertion Sort

90 11 27

16 27 31 90

37111631 4

114

Insertion Sort

90 11 27

11 16 27 31 90

37111631 4

114

Insertion Sort

90 11 27

11 16 27 31 37 90

37111631 4

114

Insertion Sort• Sorting can actually be done in place

– Never need the same element in both arrays

• Every insertion can cause lots of copying– If there are N elements, need to do N insertions– Worst case is about N/2 copys per insertion– N elements can take nearly N operations to

sort

• But each operation is very fast– So this is fine if N is small (20 or so)

2

Merge Sort• Fast, able to handle any data

– But can’t be done in place• View the array as a set of small sorted arrays

– Initially only the 1-element “arrays” are sorted• Merge pairs of sorted arrays

– Repeatedly choose the smallest element in each– This produces sorted arrays that are twice as long

• Repeat until only one array remains

Example

Merge Sort

90 11 27 37111631 4

9011

Merge Sort

90 11 27

27 31

37111631 4

9011

Merge Sort

90 11 27

27 31 4 16

37111631 4

9011

Merge Sort

90 11 27

27 31 4 16 11 37

37111631 4

9011

Merge Sort

11 27 31

27 31 4 16 11 37

90

9011

Merge Sort

11 27 31

27 31 4 16 11 37

37161190 4

9011

Merge Sort

11 27 31

11 16 27 31 37 90

37161190 4

114

Merge Sort• Each array size requires N steps

– But 8 elements requires only 3 array sizes

• In general, 2k elements requires k array sizes– So the complexity is N*log(N)

• No faster sort (based on comparisons) exists– Faster sorts require assumptions about the data– There are other N*log(N) sorts, though– Merge sort is most often used for large disk files

Computational Complexity• Run time typically depends on:

– How long things take to set up– How many operations there are in each step– How many steps there are

• Insertion sort can be faster than merge sort– One array, one operation per step– But N*log(N) eventually beats N2 for large N

• And once it does, the advantage increases rapidly

Divide and Conquer• Split a problem into simpler subproblems

– Keep doing that until trivial subproblems result

• Solve the trivial subproblems

• Combine the results to solve a larger problem– Keep doing that until the full problem is solved

• Merge sort illustrates divide and conquer– But it is a general strategy that is often helpful

Recursion• Divide and conquer problems are recursive

– Solve the same problem at increasing granularity

• Construct a Java method to solve the problem– Divide the problem into subproblems– Call the same method to solve each subproblem

• Unless the subproblems are trivial– Use the parameters to control the granularity

• See this week’s notes page for merge sort example

Search• Find something by following links

– Web pages– Connections in the flight finder– Winning moves in chess

• This may seem like an easy problem– But computational complexity can get really

bad– Simple tricks can help in some cases

Web Crawlers• Goal is to find everything on the web

– Build a balanced tree, sorted by search terms• Start anywhere, follow every link• If every page has 1 kB of text and 10 links

– Then 10 levels would find a terabyte of data!• Avoid links that are likely to be uninteresting• Detect duplicates quickly with hashing

Traveling Salesperson Problem

• Find the cheapest way of visiting 10 cities– Given the airfare between every city pair– Only visit each city once, finish where you

start• There are only 90 city pairs

– But there are a LOT of possible tours• The best known algorithm is VERY slow

– Because the problem is “NP complete”

WIMP Interfaces• Windows

– Spatial context• Icons

– Direct manipulation• Menus

– Hierarchy• Pointing devices

– Spatial interaction

Java Swing• Swing: High-level abstract operations

– Containers– Components

• Layout managers– Relative positioning

• Low-level operations for detailed control– Absolute positioning– Drawing (Graphics)

Swing application structure

• Create top-level container– JFrame mainWindow = new JFrame();

• Create and add components– JPanel newPane = new JPanel();– mainWindow.setContentPane(newPane);

• Arrange (layout) components• Handle events• Make visible

Java Containers• Displayable windows

– JFrame• Subordinate windows (“dialogs”)

– JOptionPane, JColorChooser, JFileChooser• Grouping for layout management

– JPanel• Specialized containers

– JScrollPane– JTabbedPane– JSplitPane

Examples

Some Layout Managers• BorderLayout: top, bottom, sides, center (default for JFrame)

• FlowLayout: rows, with “component wrap” (default for JPanel)

• GridLayout: graph paper, identical shapes

• BoxLayout: one column (or row)

• GridBagLayout: graph paper w/different shapes

Examples

ExerciseFile Menu Help

Book List Book Details

Request RecallCheck out

Adding a menuMenu bar

Menu

Menu item

Adding a menu• Create the menu bar

– JMenuBar menuBar = new JMenuBar();

• Create and add a menu– JMenu fileMenu = new JMenu("File");– menuBar.add(fileMenu);

• Create and add menu items– JMenuItem fileNew = new JMenuItem("New");– fileMenu.add(fileNew);

• Add menu bar to its container• Handle events (ActionListener)

Swing Controls• JButton• JToggleButton• JRadioButton• JCheckBox• JList• JMenuBar, JMenu, JMenuItem• JComboBox (pop up menu)• JTree• JSlider• JTextField, JTextArea

Display Elements

• JLabel

• Icon

• JProgressBar

• setToolTipText()

Rapid prototyping process

Evaluate

RefineDesign

Specification

Identify needs/ establish

requirements

BuildPrototype

Final specification

Exemplifies a user-centered design approach

Start

Modeling the system• Capturing the big picture

– Functional view

• Designing the object structure– Static view

• Represent object interactions for a scenario– Dynamic view

• Represent event-object interactions– In text, diagrams, mock-ups

Project specification 1• Text description

– Capabilities explored– Roles/assignments

•Suggestion: Pair programming• Visual layout• Functional view• Static view• Dynamic view

Links: Spec 1, NDL example

Coming up• Homework 3

– Graded – due 10/26• Project spec 1

– due 10/26• Next week:

– Data structures• “when arrays aren’t good enough”• Reading on reserve in EPSL

Muddiest Point

On a blank sheet of paper, write asingle sentence that will conveyto me what you found to be themost confusing thing that wasdiscussed during today’s class.