EnterNumber

On this page you find the documentation for the GUI Component EnterNumber.

Introduction

The EnterNumber component is a view in which the user can enter a number. If the user presses the Enter key (↵) in the component, the app will progress to the next page.

class StartPage extends Page{
	createGui(){
		return EnterNumber
	}
}

number() - Setting an initial number

Use the configuration method number() to give the EnterNumber a number it will contain initially.

class StartPage extends Page{
	createGui(){
		return EnterNumber.number(123)
	}
}

placeholder() - Setting a placeholder text

Use the configuration method placeholder() to show a text in the EnterNumber component when no number is shown. Try typing some digits in the example below, and see that the placeholder text disappears. If you then delete the digits you typed, the placeholder text will be shown again.

class StartPage extends Page{
	createGui(){
		return EnterNumber.placeholder(`Enter age`)
	}
}

decimals() - Setting maximum number of decimals

Use the configuration method decimals() to indicate how many decimals the entered number may contain. Pass it:

• 0 to allow no decimals, e.g. allow numbers like 123 and 55 (i.e. only integers)
• 1 to allow at most 1 decimal, e.g. 123, 123.4 and 0.6
• 2 to allow at most 2 decimals, e.g. 123, 123.4, 123.45 and 1.23
• Etc.

class StartPage extends Page{
	createGui(){
		return EnterNumber.placeholder(`Enter age`).decimals(0)
	}
}

class StartPage extends Page{
	createGui(){
		return EnterNumber.placeholder(`Enter age`).decimals(2)
	}
}

page(), pageIfEqual(), pageIfLower(), pageIfHigher() & pageIfBetween() - Going to next page

There are 4 different copnfiguration methods you can call to specify which page the user should come to depening on which number the user has entered:

• pageIfEqual(number, page)
• pageIfLower(number, page)
• pageIfHigher(number, page)
• pageIfBetween(lowNumber, highNumber, page)

These methods can be called multiple times. In addition to those, you can also use page(page) to specify the page the user should come to if the entered number isn't true for any of the previously mentioned configuration methods.

Example:

EnterNumber
	.pageIfEqual(2, TwoPage) // Go to TwoPage if the user enters 2.
	.pageIfEqual(6, SixPage) // Go to SixPage if the user enters 6.
	.pageIfLower(0, NegativePage) // Go to NegativePage if the user enters a number lower than 0, for example -0.000001, -300 or -999999.
	.pageIfHigher(100, HighPage) // Go to HighPage if the user enters a number higher than 100, for example 100.000001, 2000 or 999999.
	.pageIfBetween(50, 60, MiddlePage) // Go to MiddlePage if the user enters a number between between 50 and 60, for example 50.000001, 55 or 59.999999.
	.page(DefaultPage) // Go to DefaultPage if the user enters a number that doesn't fulfill any of the other pageIfXXX() methods, such as 5, 50 or 99.99999.

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.size(1).text(`How many years old are you?`),
			Columns.children(
				EnterNumber
					.size(1)
					.pageIfLower(0, InvalidAgePage)
					.pageIfEqual(0, KidPage)
					.pageIfBetween(0, 18, KidPage)
					.page(AdultPage)
					.pageIfHigher(150, InvalidAgePage),
				Button.text(`⇨`),
			),
		)
	}
}

store() - Storing the entered number

Use the configuration method store() to store the number the user entered in an object (for example in a or p). Pass it two values:

1. The object in which the entered number should be stored (e.g. a or p)
2. The name of the variable in the object where the entered number should be stored

class MyApp extends App{
	
	age = -1
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.size(1).text(`How many years old are you?`),
			Columns.children(
				EnterNumber.size(1).store(a, `age`).page(GreetingPage),
				Button.text(`⇨`),
			)
		)
	}
}

class GreetingPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`Hello you who are ${a.age} years old!`),
			Button.text(`Back to StartPage`).page(StartPage),
		)
	}
}

defaultNumber() - Specifying a default number

Use the configuration method defaultNumber() to specify which number that should be used if the user doesn't enter a number at all (i.e. if the user leaves the input field empty). If you don't call this configuration method, 0 will be used as the default number automatically.

class MyApp extends App{
	
	age = -1
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.size(1).text(`How many years old are you?`),
			Columns.children(
				EnterNumber.size(1).defaultNumber(10).store(a, `age`).page(GreetingPage),
				Button.text(`⇨`),
			)
		)
	}
}

class GreetingPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`Hello you who are ${a.age} years old!`),
			Button.text(`Back to StartPage`).page(StartPage),
		)
	}
}

handler() - Handling the entered number

Use the configuration method handler() to tell the EnterNumber component which method to call to handle the entered number. The method will be passed the entered number as an argument.

class MyApp extends App{
	
	age = -1
	doubledAge = -2
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.size(1).text(`How many years old are you?`),
			Columns.children(
				EnterNumber.size(1).handler(p.handleEnteredAge).page(GreetingPage),
				Button.text(`⇨`),
			)
		)
	}
	
	handleEnteredAge(enteredAge){
		a.age = enteredAge
		a.doubledAge = enteredAge * 2
	}
	
}

class GreetingPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`Hello you who are ${a.age} years old! Your doubled age is ${a.doubledAge}.`),
			Button.text(`Back to StartPage`).page(StartPage),
		)
	}
}