2. App Constants

This tutorial will teach you what constants in programming are, and how you can create them in a Bagawork app.

App constants vs page constants

In the previous tutorial you learned what page constants are, and how to use them. Page constants are great, but they have one big limitation: a page constant can only be used on the page that created it. Sometimes we want to re-use a value on multiple different pages, and then it's better to use an app constant instead, since all different pages have access to all app constants.

Below we have an example of an app that uses the same hardcoded value (the name of the app, InfoApp) at multiple diffrefent pages, including on multiple different pages.

class InfoApp extends App{
	
	createStartPage(){
		return MenuPage
	}
	
}

class MenuPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`InfoApp`),
			Space.size(0.05),
			Text.text(`Select what you want to read more about.`).left(),
			Space,
			Columns.children(
				Space,
				Button.text(`Mario`).page(MarioPage),
				Space,
			),
			Columns.children(
				Space,
				Button.text(`Zelda`).page(ZeldaPage),
				Space,
			),
			Space,
		)
	}
	
}

class MarioPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`InfoApp - Mario`),
			Space,
			Text.text(`Mario is a video game character created by Nintendo. He often needs to rescue princess Peach.`),
			Space,
			Columns.children(
				Space,
				Button.text(`<-`).page(MenuPage),
				Space,
			)
		)
	}
	
}

class ZeldaPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`InfoApp - Zelda`),
			Space,
			Text.text(`Zelda is a video game character created by Nintendo. She is the princess of the Hyrule Kingdom.`),
			Space,
			Columns.children(
				Space,
				Button.text(`<-`).page(MenuPage),
				Space,
			)
		)
	}
	
}

This works, but changing the name of the app in the future (for example to Information App) will be hard, since there are so many places we would need to change that name. Putting the name in an app constant, and then refer to that constant at each place in the code we need to use the name would be better.

How to create app constants

We create app constants the same way we create page constants, but we write them in the App class instead. In the code below you find an example of how to create the following app constants:

• APP_NAME will have the string value InfoApp
• CREATED_DATE will have the string value 2023-09-15

class MyApp extends App{
	
	APP_NAME = `InfoApp`
	CREATED_DATE = `2023-09-15`
	// You can create as many app constants as you want.
	
	// And then you have createStartPage() as usual.
	
}

How to use app constants

In Bagawork, everything you create in your App class (constants, variables and methods) are accessible in a special variable called a (short for app). To retrieve the value of a constant, you would simply write a.THE_NAME_OF_THE_CONSTANT, for example a.APP_NAME.

To display the name of the app on the MenuPage we had before, the following code were used:

Text.text(`InfoApp`)

With the app constants we have now, we can instead write:

Text.text(`${a.APP_NAME}`)

In this case, when we create a string that only contains the special ${SOMETHING} thing, we can actually simplify the code to:

Text.text(a.APP_NAME)

When the computer executes this code, it will first retrieve the value for the APP_NAME constant from the a variable, and it gets back the string value InfoApp, and pass that to the Text.text() method, which then will display that text.

However, on the MarioPage, where the text we send to the Text component is not only the app name, but looks like this:

Text.text(`InfoApp - Mario`)

We have to use the complicated ${SOMETHING} thing:

Text.text(`${a.APP_NAME} - Mario`)

The same is true for the ZeldaPage.

The final solution

So, here's the code for the app using constants, instead of harding the name of the app at multiple places.

class InfoApp extends App{
	
	APP_NAME = `InfoApp`
	
	createStartPage(){
		return MenuPage
	}
	
}

class MenuPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(a.APP_NAME),
			Space.size(0.05),
			Text.text(`Select what you want to read more about.`).left(),
			Space,
			Columns.children(
				Space,
				Button.text(`Mario`).page(MarioPage),
				Space,
			),
			Columns.children(
				Space,
				Button.text(`Zelda`).page(ZeldaPage),
				Space,
			),
			Space,
		)
	}
	
}

class MarioPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`${a.APP_NAME} - Mario`),
			Space,
			Text.text(`Mario is a video game character created by Nintendo. He often needs to rescue princess Peach.`),
			Space,
			Columns.children(
				Space,
				Button.text(`<-`).page(MenuPage),
				Space,
			)
		)
	}
	
}

class ZeldaPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`${a.APP_NAME} - Zelda`),
			Space,
			Text.text(`Zelda is a video game character created by Nintendo. She is the princess of the Hyrule Kingdom.`),
			Space,
			Columns.children(
				Space,
				Button.text(`<-`).page(MenuPage),
				Space,
			)
		)
	}
	
}

Exercises

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

That's it!

Great work, now you also now how to use app constants in Bagawork! 🥳 And constants are great, but variables are even more usefull, so let's take a look at them next.