Algorithms and Graphical User Interfaces (part 2)

1
Algorithms andGraphical User Interfaces (part
2)

• Session 8
• LBSC 790 / INFM 718B
• Building the Human-Computer Interface

2
Agenda

• Questions
• Algorithms
• Graphical User Interfaces
• Project Specification 1
• Wrap-up

3
Stop/start/continue summary

• Stop
• Nothing (3)
• Allowing people to talk during lecture
• Dry PowerPoint presentations
• Moving screen while Im 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

4
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

5
Sorting

• Given an array, put the elements in order
• Numerical or lexicographic
• Desirable characteristics
• Fast
• In place (dont need a second array)
• Able to handle any values for the elements
• Easy to understand

6
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 designed
• Example

7
Insertion Sort
90
11
27
37
11
16
31
4
8
Insertion Sort
90
11
27
37
11
16
31
4
90
9
Insertion Sort
90
11
27
37
11
16
31
4
90
11
10
Insertion Sort
90
11
27
37
11
16
31
4
90
27
11
11
Insertion Sort
90
11
27
37
11
16
31
4
31
90
27
11
12
Insertion Sort
90
11
27
37
11
16
31
4
27
31
90
11
4
13
Insertion Sort
90
11
27
37
11
16
31
4
16
27
31
90
11
4
14
Insertion Sort
90
11
27
37
11
16
31
4
11
16
27
31
90
11
4
15
Insertion Sort
90
11
27
37
11
16
31
4
11
16
27
31
37
90
11
4
16
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
17
Merge Sort

• Fast, able to handle any data
• But cant 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

18
Merge Sort
90
11
27
37
11
16
31
4
90
11
19
Merge Sort
90
11
27
37
11
16
31
4
27
31
90
11
20
Merge Sort
90
11
27
37
11
16
31
4
27
31
4
16
90
11
21
Merge Sort
90
11
27
37
11
16
31
4
27
31
4
16
11
37
90
11
22
Merge Sort
11
27
31
90
27
31
4
16
11
37
90
11
23
Merge Sort
11
27
31
37
16
11
90
4
27
31
4
16
11
37
90
11
24
Merge Sort
11
27
31
37
16
11
90
4
11
16
27
31
37
90
11
4
25
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 Nlog(N)
• No faster sort (based on comparisons) exists
• Faster sorts require assumptions about the data
• There are other Nlog(N) sorts, though
• Merge sort is most often used for large disk files

26
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 Nlog(N) eventually beats N2 for large N
• And once it does, the advantage increases rapidly

27
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

28
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 weeks notes page for merge sort example

29
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

30
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

31
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

32
(No Transcript)
33
WIMP Interfaces

• Windows
• Spatial context
• Icons
• Direct manipulation
• Menus
• Hierarchy
• Pointing devices
• Spatial interaction

34
Java Swing

• Swing High-level abstract operations
• Containers
• Components
• Layout managers
• Relative positioning
• Low-level operations for detailed control
• Absolute positioning
• Drawing (Graphics)

35
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

36
Java Containers

• Displayable windows
• JFrame
• Subordinate windows (dialogs)
• JOptionPane, JColorChooser, JFileChooser
• Grouping for layout management
• JPanel
• Specialized containers
• JScrollPane
• JTabbedPane
• JSplitPane

Examples
37
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

38
Exercise
File Menu
Help
Book List
Book Details
Request
Recall
Check out
39
Adding a menu
Menu bar
Menu
Menu item
40
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)

41
Swing Controls

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

42
Display Elements

• JLabel
• Icon
• JProgressBar
• setToolTipText()

43
(No Transcript)
44
Rapid prototyping process
Start
Identify needs/ establish requirements
Refine Design Specification
Evaluate
Build Prototype
Final specification
Exemplifies a user-centered design approach
45
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

46
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

47
(No Transcript)
48
Coming up

• Homework 3
• Graded due 10/26
• Project spec 1
• due 10/26
• Next week
• Data structures
• when arrays arent good enough
• Reading on reserve in EPSL

49
Muddiest Point

• On a blank sheet of paper, write a
• single sentence that will convey
• to me what you found to be the
• most confusing thing that was
• discussed during todays class.