3/30/20 © Lauren Bricker, University of Washington
+ - 0:00:00
Notes for current slide
Notes for next slide

CSE 340 Lab 9 (Spring 2020)

Week 9: Getting started with Undo

Slide 1 of 11

Undo Timeline

  • Programming part due: Next Monday, June 1 @ 10:00pm

    • Lock: Wednesday, June 3 @ 10:00pm (if you are using late days)

  • Heuristic Evaluation due: Friday, June 5 @ 10:00pm

  • Reflection due: Monday, June 8 @ 10:00pm

  • Examlet 4 is tomorrow! Friday, May 29

Slide 2 of 11

Section 9 Objectives

  • Understanding Undo assignment
  • Examlet review with Kahoot
  • Work time/ Questions on Undo assignment
Slide 3 of 11

The Undo feature

  • Incredibly useful interaction technique

  • Reverts the application to an older state

    • Mistakes can easily be undone

    • "Ugh...that was definitely not right, but manually erasing all this work is going to take forever"

Slide 4 of 11

The Redo feature

  • Inverse to the Undo feature

  • "Undoes" an undo

    • Work previously undone is reapplied

    • "Huh, maybe I made the right decision after all..."

Slide 5 of 11

Codebase: Application

  • ReversibleDrawingActivity, class contains the entire interactor hierarchy

    • Floating Action Buttons (FAB), buttons that allow for actions supported by AbstractReversibleDrawingActivity
    • References DrawingView in AbstractDrawingActivity

  • AbstractReversibleDrawingActivity, abstract class that extends AbstractDrawingActivity

    • adds support for undo/redo
    • includes buttons for undo/redo
    • doAction(), undo(), redo()
AbstractDrawingActivityDrawingView: "Canvas the user draws on"addMenu()addCollapsableMenu()doAction()AbstractReversibleDrawingActivity+AbstractStackHistory+doAction()+undo()+redo()ReversibleDrawingActivity+onAction()+onColorSelected()+onThicknessSelected()
Slide 6 of 11

Codebase: Application

  • AbstractDrawingActivity - abstract class for app that supports drawing without history

    • Wrapper around a DrawingView

    • doAction()

    • Contains methods for adding menus and changing visibility

classDiagram AbstractDrawingActivity <|.. AbstractReversibleDrawingActivity AbstractReversibleDrawingActivity <|.. ReversibleDrawingActivity class AbstractDrawingActivity { DrawingView: "Canvas the user draws on" addMenu() addCollapsableMenu() doAction() } class AbstractReversibleDrawingActivity { +AbstractStackHistory +doAction() +undo() +redo() } class ReversibleDrawingActivity { +onAction() +onColorSelected() +onThicknessSelected() }
Slide 7 of 11

Codebase: DrawingView

  • AbstractDrawingActivity is a wrapper around a DrawingView

    • Sets behavior for how strokes are drawn

  • DrawingView, a drawing canvas that handles strokes

    • Strokes are just StrokeView's in the DrawingView
    • onTouchEvent() implements a PPS that describes lifetime of a stroke being created
classDiagram class AbstractDrawingActivity { DrawingView: "Canvas the user draws on" addMenu() addCollapsableMenu() doAction() } class StrokeView { Path onDraw() }
Slide 8 of 11

Codebase: Actions

  • AbstractAction abstract class defines basic behavior any Action should have
  • AbstractReversibleAction abstract class defines interface for actions that can be undone
  • doAction() chain: AbstractReversibleDrawingActivity.doAction() ➡AbstractDrawingActivity.doAction() ➡AbstractAction.doAction()
  • AbstractReversibleDrawingActivity's undo() and redo() call methods on AbstractReversibleAction to undo/redo
classDiagram AbstractAction <|.. AbstractReversibleAction AbstractReversibleAction <|.. ChangeColorAction AbstractReversibleAction <|.. ChangeThicknessAction AbstractReversibleAction <|.. AbstractReversibleViewAction AbstractReversibleViewAction <|.. StrokeAction class AbstractAction { doAction() } class AbstractReversibleAction { +boolean done +undoAction } class AbstractReversibleViewAction { +invalidate }
Slide 9 of 11

Codebase: Actions

  • Actions:
    • ChangeColorAction
    • ChangeThicknessAction, implement for homework
    • StrokeAction
    • And more, create your own action!
classDiagram AbstractAction <|.. AbstractReversibleAction AbstractReversibleAction <|.. ChangeColorAction AbstractReversibleAction <|.. ChangeThicknessAction AbstractReversibleAction <|.. AbstractReversibleViewAction AbstractReversibleViewAction <|.. StrokeAction class AbstractAction { doAction() } class AbstractReversibleAction { +boolean done +undoAction } class AbstractReversibleViewAction { +invalidate }
Slide 10 of 11

Codebase: History

The AbstractReversibleDrawingActivity uses an StackHistory interface to manage the undo/redo history

  • You will implement the concrete StackHistory which implements AbstractStackHistory
  • Think: What data structures are used? Why does this make sense?
    • What happens to the redo history if you take a new action after undoing a couple times?
    • What happens to the undo history if you redo an action?
    • What happens to the redo history if you undo an action?
classDiagram AbstractStackHistory <|.. StackHistory class AbstractStackHistory { addAction(AbstractReversibleAction action) undo() redo() canUndo() canRedo() } class StackHistory { +capacity: "Max stack size" }
Slide 11 of 11

Undo Timeline

  • Programming part due: Next Monday, June 1 @ 10:00pm

    • Lock: Wednesday, June 3 @ 10:00pm (if you are using late days)

  • Heuristic Evaluation due: Friday, June 5 @ 10:00pm

  • Reflection due: Monday, June 8 @ 10:00pm

  • Examlet 4 is tomorrow! Friday, May 29

Slide 2 of 11
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
s Start & Stop the presentation timer
t Reset the presentation timer
?, h Toggle this help
Esc Back to slideshow