In the previous step, we created two `SlideshowNavigateButton`s as part of building a slideshow for our app.
Recall that slideshow will be structured as follows:
- The `Slideshow` consists of a single `Image`, with a transparent `SlideshowOverlay` on top.
- The `SlideshowOverlay` contains two `SlideshowNavigateButton`s, one on each side.
- The two `SlideShowNavigateButton`s will be used to navigate the slideshow by mouse.
In this step, we'll create the `SlideshowOverlay`.
> **Note:**
> If you don't feel like typing along, you can find all the code for this step here:
> https://github.com/makepad/image_viewer/tree/main/step_9
## What you will learn
In this step, you will learn:
- How to use a `Filler` to fill up unused space.
- How to handle keyboard focus.
## Defining a `SlideshowOverlay`
Let's start by adding a definition for the `SlideshowOverlay`. A `SlideshowOverlay` is a transparent container that sits on top of an `Image`, and contains two `SlideshowNavigateButton`s.
In **app.rs**, add the following code to the live design block, after the definition of the `SlideshowButton`:
```rust
SlideshowOverlay = <View> {
height: Fill,
width: Fill,
cursor: Arrow,
capture_overload: true,
navigate_left = <SlideshowNavigateButton> {}
<Filler> {}
navigate_right = <SlideshowNavigateButton> {}
}
```
This defines a `SlideshowOverlay` with the following properties:
- `height: Fill` and `width: Fill` ensure the overlay stretches to fill its container.
- `cursor: Arrow` sets the icon of the mouse cursor to an arrow when it hovers over the overlay.
- `capture_overload: true` allows the overlay to capture events that have already been captured by one of its children (we'll explain this further when we talk about how key focus works).
A `SlideshowOverlay` contains the same two `SlideShowNavigateButton`s that we added to `App` in the previous step, but this time with a `Filler` in between:
```rust
navigate_left = <SlideshowNavigateButton> {
draw_icon: { svg_file: (LEFT_ARROW) }
}
<Filler> {}
navigate_right = <SlideshowNavigateButton> {
draw_icon: { svg_file: (RIGHT_ARROW) }
}
```
A `Filler` is a helper widget that fills up any unused space in a container. This ensures that the first `SlideShowNavigateButton` is laid out on the left while the second is laid out on the right.
### Handling Key Focus
Looking ahead a little bit, in a later step we'll talk about how to handle user events for the slideshow. At that point, we'll want `SlideshowOverlay` to be responsible for handling keyboard events, so this would be a good time to talk about how **key focus** works.
In Makepad, a widget only responds to keyboard events if it has key focus — meaning it’s the active widget for receiving keyboard input. Most built-in widgets, like `View`, don’t respond to key presses unless they’ve been given key focus.
Most built-in widgets automatically grabs key focus when they are clicked — but only when the widget itself is clicked directly. If one of its children is clicked instead, then that child grabs the key focus, not the widget itself.
For `SlideshowOverlay`, that's *not* the behaviour we want: we want `SlideshowOverlay` to grab key focus, even when one of the `SlideShowNavigateButton`s is clicked. That's why we added the following properties earlier:
- `grab_key_focus: false` on `SlideshowNavigateButton` prevents the button from grabbing key focus when it is clicked — allowing the overlay to grab it instead.
- `capture_overload: true` on `SlideshowOverlay` allows the overlay to capture events (and thus grab key focus) that have already been captured by one of its children.
## Updating App
Now that we have an `SlideshowOverlay`, let's update our definition of `App` to display a `SlideshowOverlay` instead of two `SlideShowNavigateButton`s.
In **app.rs**, replace the definition of `App` in the live design block with the one here below:
```rust
App = {{App}} {
ui: <Root> {
<Window> {
body = <View> {
<SlideshowOverlay> {}
}
}
}
}
```
## Checking our Progress so far
Let's check our progress so far.
Make sure you're in your package directory, and run:
```
cargo run --release
```
If everything is working correctly, you should see the same two buttons as before, but this time with one button laid out on the left and the other on the right:
![[SlideshowOverlay.png]]
Of course, what you're really seeing here is the overlay, but since the overlay itself is transparent, you only see the buttons.
## What's next
In this step, we created the `SlideshowOverlay`. In the next step, we'll create the `Slideshow`.