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 them.

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.

Example

Example of how to show a Button on a page (note: nothing special should happen when you click on the button in this example).

Open in Online Editor

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:

The page shown on the screen has been deleted
The page has been created anew
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. Note that the name of the page should not be surrounded by ` characters.

Example

Example of an app where the user can go between 3 pages.

Open in Online Editor

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.

Exercise 1

The code in this BagaWork project contains 3 pages. It works like this:

Your task is to add a fourth page to the app and make it work as shown below.

Exercise 2

The code in this BagaWork project contains 3 pages. It works like this:

That is, the first page contains buttons that leads to the other two pages, but the other two pages contains no buttons, so they are dead ends. That's no good! Your task is to add "Back" buttons to these two pages, so they work as shown below.

That's it!

Good work, now you know how to navigate between the pages in your app! 🥳 But know that the Button component is just one way to take the user to another page; there exists more ways you can use. Learn more about these in future tutorials.

When you are ready, continue with the tutorial Fundamentals 6. Sizing GUI Components.