Button with State
Selector Tutorial app demonstrates how to use the Selector Block to construct a Button with State.
Selector can be used in many different ways, they happen to be extremely useful to represent states.
In this example we showcase a Play / Pause button.
State are essentially kept using
- Data sources
How the SELECTOR Tutorial app Works?
The Tutorial app uses a Selector containing 2 images, one for Play one for Pause.
The state: playing ~ Pause is stored in a variable called 'PlayPause'
Each time one of the image is tapped 3 things happen:
- The image is switched: if the Play image was displayed, display the Pause image and vice versa.
- The status variable is change. 2 values are used: Pause and Play.
- We Pause or Play the audio
Here are the Action attached to the Play image (the pause is exact reverse)
How does the Selector work:
Selector looks at an expression (variable, data source, a combination of these) and compares it to a set of Match values.
- If a Match is found the Selector will set itself with the Block specified for that match.
- If no Match are found, the Selector will use the Default Value.
Here are Selector Setting for the SELECTOR Tutorial app