5. Changing Page

This tutorial will teach you how to take the user to another page when she interacts with the GUI on the page currently shown to her.

Multiple pages

An app who's GUI always look the same is usually not that fun. Therefore, most Bagawork apps consists of multiple different pages, and when we want to change the GUI shown to the user in the app, we simply take the user to another page in the app, and show the GUI of that page instead. Simple as that!

Going to another page

To take the user to another page in the app, the user usually needs to interact with the GUI on the page somehow. The simplest example of this is by clicking on a button. For that purpose, Bagawork has the Button component.

To tell the Button which text it should display, use the configuration method text(), and pass it the text it should contain as a string.

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`This is the StartPage.`),
			Button.text(`I am a Button!`)
		)
	}
}

By default, when clicking on Button, the current page will be reloaded. In the example above, it looks like nothing happens when you click on the button, but what actually has happened is:

1. The page shown on the screen has been deleted
2. The page has been created anew
3. The GUI of the new page is shown (the createGui() method has been called)

To take the user to another page when the button is clicked, call the configuration method page() and pass it the name of the page the user should come to.

class FirstPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`FirstPage`),
			Button.text(`Go to SecondPage`).page(SecondPage)
		)
	}
}

class SecondPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`SecondPage`),
			Button.text(`Go to ThirdPage`).page(ThirdPage)
		)
	}
}

class ThirdPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`ThirdPage`),
			Button.text(`Go to FirstPage`).page(FirstPage)
		)
	}
}

Exercises

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

That's it!

Good work, now you know how to navigate between the pages in your app! 🥳 But remember that the Button component is just one way to take the user to another page, there exists more ways you can learn later on.

When you are ready, continue with Tutorial 6. Sizing GUI Components.