In the last few steps, we made it possible to switch between the image grid and the slideshow. In the next few steps, we're going to make it possible to filter images based on a query string.
We'll proceed in two steps:
- First, we'll add a search box to the menu bar above the image grid.
- Then, we'll update the state of our app to filter images based on the search box query.
In this step, we'll add a search box to the menu bar above the image grid.
> **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_16
## What you will learn
In this step, you will learn:
- How to use an `Icon` to display an icon.
- How to use a `TextInput` for inputting text.
## Adding a Looking Glass Icon
For the two `SearchBox`, we need a looking glass icon, so we first need to add it as a resource to our app.
Navigate to the **resources** directory, and download the following files to it:
[[looking_glass.svg]]
We'll use this file as our looking glass icon.
## Defining Variables
Now that we've added the looking glass icon, we'll define a variable to refer to the looking glass icon in the DSL code.
In **app.rs**, add the following code to the top of the live design block:
```Rust
LOOKING_GLASS = dep("crate://self/resources/looking_glass.svg");
```
## Defining a `SearchBox`
Now that we have a way to refer to the placeholder image, we can add a definition for a `SearchBox`. A `SearchBox` is a simple container that combines an `Icon` with a `TextInput`. An `Icon` is a simple widget that displays an icon, whereas a `TextInput` is used for inputting text.
In **app.rs**, add the following code to the live design block, above the definition of `MenuBar`:
```Rust
SearchBox = <View> {
width: 150,
height: Fit,
align: { y: 0.5 }
margin: { left: 75 }
<Icon> {
icon_walk: { width: 12.0 }
draw_icon: {
color: #8,
svg_file: (LOOKING_GLASS)
}
}
query = <TextInput> {
empty_text: "Search",
draw_text: {
text_style: { font_size: 10 },
color: #8
}
}
}
```
This code defines a `SearchBox` with the following properties:
- `width: 150` and `height: Fit` ensure that the search box takes up as much space as needed.
- `align { y: 0.5 }` ensures that the search box is vertically centered.
- `margin { left: 75 }` ensures the search box has a slight margin on the left (so it does not overlap with the window buttons on Mac).
The `Icon` in the search box has the following properties:
- `icon_walk { ... }` controls how the icon is laid out.
- `width: 12` makes the icon 12 pixels wide.
- `draw_icon { ... }` controls how the icon is drawn.
- `color: #8` ensures the icon is red.
- `svg_file: (LOOKING_GLASS)` sets our looking glass icon as the SVG file for this icon.
The `TextInput` in the search box has the following properties:
- `empty_text: "Search"` ensures the string "Search" is displayed when the input is empty.
- `text_style: { ... }` controls how the text is styled.
- `font_size: 10` ensures the text has a size of 10 points.
- `color: #8` ensures the text is red.
## Updating `MenuBar`
Now that we have a `SearchBox`, let's update our definition of `MenuBar` to include a `SearchBox`.
In **app.rs**, replace the definition of `MenuBar` in the live design block with the one here below:
```Rust
MenuBar = <View> {
width: Fill,
height: Fit,
<SearchBox> {}
<Filler> {}
slideshow_button = <Button> {
text: "Slideshow"
}
}
```
## 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 now see a search box in the menu bar above the image grid we created earlier:
![[SearchBox.png]]
## What's next
In this step, we added a search box to the menu bar above the image grid. In the next step, we'll update the state of our app to filter images based on the search box query.