Lab 7 Slides

# CSE 340 Lab 7 (Spring 2020)
## Week 7: Getting started with Menus

.title-slide-logo[
  ![:img Menu Types, 50%](img/menus.png)
]

---

# Menus Timeline

- Programming part (Part 1-4) due: Next Wednesday, May 20 @ 10:00pm
  - Lock: Friday, May 22 @ 10:00pm (if you are using late days)

- Analysis part (Part 5-6: Report and Reflection) out: Wednesday, May 20
  - Due: Monday, May 25 @ 10:00pm

- **Examlet 3 is tomorrow!** Friday, May 15

---

# Section 7 Objectives

- Thank you for filling out the mid-quarter section feedback form!
- Review key concepts for Menus assignment
  - Translate
  - Callbacks
  - State machine ([Lab 5](https://courses.cs.washington.edu/courses/cse340/20sp/slides/l05/state.html#1))
- Examlet review with Kahoot 
- Work time on Menus assignment
- Questions

---

# Translate

- Move origin (and everything else) in x and y
![:img a large moon and a large moon moved to the right a few pixels, 15%](img/translate.png)
   
    ```java
    translate(float dx, float dy)
    ```
- How do we use _translate_ in Menus?
---

# Callbacks

Callbacks handle application response to events
  - Update Application Model
    
    ![:img Picture of interactor hierarchy connected to an interface and a
dotted line indicating application interface and a do_action() call
happening below the line in response to a button_pressed(), 45%](img/callbacks2.png)

---

# Callbacks

Callbacks handle application response to events
  - Best implemented using custom listeners:
    - Let you execute code when your view's model has changed
    - No other way to know that has happened
    
    ![:img Picture of interactor hierarchy connected to an interface and a
dotted line indicating application interface with do_action() replaced
with an actionListener, 45%](img/callbacks3.png)

---
# Example in ColorPicker

We setup the Custom View side for you

```java
    // Currently registered ColorListener instance or null.
    // A set of listener in Color picker vs. One listener in Menus
    private List<ColorChangeListener> mColorChangeListeners;

// Class which defines a listener to be called when a new color is selected.
    public interface ColorChangeListener {
        void onColorSelected(@ColorInt int color);
    }

// Registers a new listener
    public final void addColorChangeListener(@NonNull ColorChangeListener colorChangeListener) {
        mColorChangeListeners.add(colorChangeListener);
    }
```
---
# Example in ColorPicker

You implemented this
.left-column-half[
`// TODO: Register callback to update {color,label} View when color changed.`

- What method do we call to register the callback?  
  - `addColorChangeListener()`

- What do we usually do in a callback? 
  - update application (`MainActivity`) model
]
.right-column-half[
![:img listener relationship diagram in color picker, 100%](img/listener.png)
]

---
# Custom Listener in Menus

You need to do this yourself in Menus

```java
// TODO: register a new listener with the menu so that the application knows when a selection is made

// TODO: implement the listener. When the user completes a trial, the menu listener should store
// the results of the trial, and setup for the next trial
```

---
# Android Studio Tips

- [Keyboard shortcuts](https://developer.android.com/studio/intro/keyboard-shortcuts)
- Structure tab

![:img android structure tab, 50%](img/tips.png)

---
# Work time on Menus

<div class="mermaid">
  classDiagram
  
  class MenuExperimentView {
    onTouchEvent()
    startSelection()
    endSelection()
    updateModel()
    onDraw()
  }
  
  
  AbstractMenuExperimentView <|-- MenuExperimentView
  
  AbstractMainActivity <|-- MainActivity
  AbstractMainActivity <|-- TestActivity
  MenuExperimentView <|-- PieMenuView
  MenuExperimentView <|-- NormalMenuView
  MenuExperimentView <|-- CustomMenuView
  
  
  </div>