Upload
nelson-philip-hopkins
View
220
Download
1
Embed Size (px)
DESCRIPTION
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
Citation preview
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.