6. Booleans, keepIf() and showIf()

This tutorial will teach you how to use boolean values in JavaScript, and conditionally keep/remove or show/hide GUI components.

The boolean datatype

An app often needs to do different things depending on if an answer to a question is yes or no. Examples of that are:

• In a message app: Do you have 0 messages?
  • If yes, show the text You have no messages
  • If no, show a list with the messages
• In a health app: Is the entered age negative?
  • If yes, show the text The age you enter must be greater than or equal to 0
  • If no, show the text The entered age is OK

To represent these yes and no answers, we can use the boolean datatype in JavaScript. This datatype only have two possible values:

• true means yes
• false means no

So instead of thinking of it like the question Do you have 0 messages?, this datatype thinks of it like a statement that is correct (true) or incorrect (false), i.e.:

• In a message app: You have 0 messages
  • If true, show the text You have no messages
  • If false, show a list with the messages
• In a health app: The entered age is negative
  • If true, show the text The age must be greater than or equal to 0
  • If false, show the text The entered age is OK

true and false, like all values in JavaScript, can be stored in app variables and page variables just like strings and numbers.

class StartPage extends Page{
	
	isGirl = true
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`isGirl = ${p.isGirl}`),
			Space,
			Button.text(`I'm a boy!`).onClick(p.setIsBoy),
			Button.text(`I'm a girl!`).onClick(p.setIsGirl),
		)
	}
	
	setIsBoy(){
		p.isGirl = false
	}
	
	setIsGirl(){
		p.isGirl = true
	}
	
}

Conditionally keeping components

Using boolean values we can conditionally keep/remove GUI components using the configuration method keepIf(). When you call this method, you should pass it a boolean value, and if that value is false, the component will be removed, and not used in the GUI.

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text              .text(`1. This Text component doesn't call keepIf() at all, so it will be used as usual.`),
			Text.keepIf(false).text(`2. This Text component passes false to keepIf(), so it will be removed and not used, so you don't see this text in the app.`),
			Text.keepIf(true) .text(`3. This Text component passes true to keepIf(), so it will be used as usual.`),
		)
	}
	
}

Directly passing true or false to keepIf() is of course not that meaningful. Instead, you can use an app/page variable to pass a boolean value to keepIf(), so you pass different values to keepIf() depending on what value is stored in the app/page variable.

class StartPage extends Page{
	
	isGirl = true
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`isGirl = ${p.isGirl}`),
			Text.text(`You are a girl!`).keepIf(p.isGirl),
			Space,
			Button.text(`I'm a boy!`).onClick(p.setIsBoy),
			Button.text(`I'm a girl!`).onClick(p.setIsGirl),
		)
	}
	
	setIsBoy(){
		p.isGirl = false
	}
	
	setIsGirl(){
		p.isGirl = true
	}
	
}

Computations with booleans

In the previous example, we kept a special Text component using:

Text.text(`You are a girl!`).keepIf(p.isGirl)

But how can we keep a special Text component if the user on the other hand is a boy (i.e. when p.isGirl is false)? Just as we can use mathemtical operations with numbers, there are some operations we can use with boolean values. The simplest is the == operation, which checks if the value to left of == is equal to the value to the right of it. If they are equal, the result of the operation is true, and if they are not equal, the result is instead false.

So, to check if the user is a boy, we can compare p.isGirl with false using the == operator.

class StartPage extends Page{
	
	isGirl = true
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`isGirl = ${p.isGirl}`),
			Text.text(`You are a girl!`).keepIf(p.isGirl),
			Text.text(`You are a boy!`).keepIf(p.isGirl == false),
			Space,
			Button.text(`I'm a boy!`).onClick(p.setIsBoy),
			Button.text(`I'm a girl!`).onClick(p.setIsGirl),
		)
	}
	
	setIsBoy(){
		p.isGirl = false
	}
	
	setIsGirl(){
		p.isGirl = true
	}
	
}

Computations resulting in a boolean value

The == operation can not only be used on booleans; you can use it to compare numbers or strings too. There are also some additional operations that results in a boolean value that can be used on numbers and strings:

class StartPage extends Page{
	
	counter = 0
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`${p.counter} (it's negative!)`).keepIf(p.counter < 0),
			Text.text(`Zero`).keepIf(p.counter == 0),
			Text.text(`${p.counter}`).keepIf(1 <= p.counter),
			Space,
			Text.text(`It's a big number!`).keepIf(9 < p.counter),
			Space,
			Columns.children(
				Button.text(`Decrement`).onClick(p.decrement),
				Space,
				Button.text(`Increment`).onClick(p.increment),
			)
		)
	}
	
	decrement(){
		p.counter -= 1
	}
	
	increment(){
		p.counter += 1
	}
	
}

Conditionally showing components

The configuration method keepIf() removes the component if the argument you pass to it is false. Although this often is really useful, it sometimes has a drawback: other GUI components on the screen might not be posistioned where you want them to be.

class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`Hi there!`).keepIf(1 <= p.counter),
			Text.text(`How are you?`).keepIf(2 <= p.counter),
			Text.text(`I am fine.`).keepIf(3 <= p.counter),
			Space,
			Button.text(`Next`).onClick(p.increment),
		)
	}
	
	increment(){
		p.counter += 1
	}
	
}

To avoid this, we want the components not shown on the screen to still occupy the space they would occupy if they wouldn't have been removed. To accomplish this, we can use the configuration method showIf() instead of keepIf(). showIf() works the same way as keepIf(), but the component will still occupy space when it's not shown.

class StartPage extends Page{
	
	counter = 1
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`Hi there!`).showIf(1 <= p.counter),
			Text.text(`How are you?`).showIf(2 <= p.counter),
			Text.text(`I am fine.`).showIf(3 <= p.counter),
			Space,
			Button.text(`Next`).onClick(p.increment),
		)
	}
	
	increment(){
		p.counter += 1
	}
	
}

If you should use keepIf() or showIf() in your app does of course depend on how you want your app to work.

Exercises

Complete the exercises below to see if you have fully mastered what has been taught in this tutorial.

That's it!

Hurray, now you know how to conditionally keep/remove and show/hide GUI components! 🥳 Good work!