Button

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

Introduction

The Button component is a view that displays some text to the user shown as a button, and which the user can click on. Clicking on the Button takes the user to "the next page in the app".

text() - Setting the text

Use the configuration method text() to tell the Button component which text it should display. Pass the text as a string. The text will always be centered in the Button.

class StartPage extends Page{
	createGui(){
		return Button.text(`Click me!`)
	}
}

page() - Going to another page

Use the configuration method page() to tell the Button component which page the user should come to when clicking on the button. Pass the page as an argument.

If this method is not used, then the current page will be reloaded when the user clicks on the button.

class StartPage extends Page{
	createGui(){
		return Button.text(`Go there`).page(DestinationPage)
	}
}

class DestinationPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`Welcome to the DestinationPage!`),
			Button.text(`Back to StartPage`).page(StartPage),
		)
	}
}

handler() - Handling clicks

Use the configuration method handler() to tell the Button component which method to call when the user clicks on the button. Pass it a reference to the method (e.g. a.theMethodName or p.theMethodName, depending on what you have named your method and if you wrote it in your App class or Page class).

class StartPage extends Page{
	
	numberOfButtonClicks = 0
	
	createGui(){
		return Rows.children(
			Text.text(`You have clicked the button ${p.numberOfButtonClicks} times.`),
			Button.text(`Click me!`).handler(p.incrementNumberOfButtonClicks),
		)
	}
	
	incrementNumberOfButtonClicks(){
		p.numberOfButtonClicks += 1
	}
	
}