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 

  • Variable
  • Data sources 
Automatically install SELECTOR Tutorial app in your workspace

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:

  1. The image is switched: if the Play image was displayed, display the Pause image and vice versa.
  2. The status variable is change. 2 values are used: Pause and Play.
  3. 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

Learn More
- Selector: Switch Blocks with condition
- Container: Switch Block on Views without condition.
- Expression: Selector do evaluate Expressions