7. onBefore()

This tutorial will teach you the methods App.onBefore() and Page.onBefore().

App.onBefore()

Sometimes you want to have some code that runs immediately when your application starts. That code can be placed in a special method in your App class that is named onBefore().

For example, let's say you need to have two number constants in your app, and you also need to have a constant that stores the sum of the previously two mentioned number constants. To achieve that, you can hardcode the sum, like this:

class MyApp extends App{
	
	X = 5
	Y = 3
	SUM = 8
	
}

But, this is not a good way to do it, because if you want to change X or Y to another number in the future, then you must also change SUM to another number. It would be better if SUM could be computed automatically, so one would just need to change X or Y.

class MyApp extends App{
	
	X = 5
	Y = 3
	SUM = a.X + a.Y
	
}

So, the proper solution to this problem is to use the onBefore() method in your App class. When the special a variable is created, it will contain all your app constants/variables/methods, and then your App.onBefore() method will be called on it (if you have one), in which you can set all constants/variables to their correct values.

class MyApp extends App{
	
	X = 5
	Y = 3
	SUM = 0 // Which initial number we give to SUM doesn't matter, since it will be given its correct number in onBefore().
	
	onBefore(){
		a.SUM = a.X + a.Y
	}
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Text.text(`${a.X} + ${a.Y} = ${a.SUM}`)
	}
	
}

Page.onBefore()

The special method onBefore() in your Page classes works very similar to App.onBefore(): Page.onBefore() will be called each time the user comes to the page. It can for example be useful if you want to keep track of how many times the user has visited that page.

class StartPage extends Page{
	
	numberOfVisits = 0
	
	onBefore(){
		p.numberOfVisits += 1
	}
	
	createGui(){
		return Rows.children(
			Text.text(`You have visited this page ${p.numberOfVisits} times.`),
			Button.text(`Go to Page2`).page(Page2),
		)
	}
	
}

class Page2 extends Page{
	
	createGui(){
		return Button.text(`Go back to StartPage`).page(StartPage)
	}
	
}

Exercises

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

That's it!

Wow, wow, wow... Now you know about onBefore() too! 🥳 Excellent work, soon you'll be fully experienced programmer. Just 999 more things to learn before that 😉