1. Page Constants

This tutorial will teach you what page constants in BagaWork are, and show you what we can use them for, and how.

The problem

To understand the usefulness of page constants, let's first go though a page in app that could benefit from using a page constant, but that doesn't use it. Such a page is the page shown below.

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

class InfoPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Info about Arthur`),
			Space,
			Text.text(`Arthur is a human.`).left(),
			Space.grow(0.05),
			Text.text(`The answer to the "Ultimate Question of Life, the Universe, and Everything" was something Arthur learned.`).left(),
			Space.grow(0.05),
			Text.text(`Ford Prefect is good friend with Arthur, and he even saved Arthur's life.`).left(),
			Space,
		)
	}
	
}

As you can see on the page, the name Arthur is written at multiple places. This works, but there are some drawbacks with writing the same value over and over again at multiple different places like this:

• If we don't know how Arthur is spelled and spell it wrong (for example spell it as Artur), then when we later learn that we have spelled it wrong we need to correct the spelling at multiple places in our code, which is a lot of work
• If Arthur changes name in the future, we need to change the name at multiple places in our code, which is a lot of work

To repeatedly write the same value at multiple places in the code (as Arthur in the example above) is known as hardcoding values.

The solution

Luckilly, there exists a solution to the problem of hardcoding values, namely to use constants instead. With a constant:

1. We would write the value (the name Arthur) at one place in our code, and place it in a constant
2. We would refer to that constant at each place in our code we need to use the name

This way, if we spell the name wrong, or if Arthur changes name in the future, we just need to change the name at one place in our code (where we created the constant and placed the name in it).

How to create a page constant

Directly in your Page class you can create constants that are accessible within that Page. We call these constansts for page constants. In the code below you find an example of how to create the following page constants:

• NAME will have the string value Arthur
• COUNTRY_NAME will have the string value Sweden
• BEST_DATE will have the string value 2023-09-15

class InfoPage extends Page{
	
	NAME = `Arthur`
	COUNTRY_NAME = `Sweden`
	BEST_DATE = `2023-09-15`
	// You can create as many page constants as you want.
	
	// And then you have createGui() as usual.
	
}

How to use constants

In BagaWork, everything you create in your Page class (constants, variables and methods) are accessible in a special variable called p (short for page). To retrieve the value of a constant, you would simply write p.THE_NAME_OF_THE_CONSTANT, for example p.COUNTRY_NAME.

To display the title on the InfoPage we had before, the following code were used:

Text.text(`Info about Arthur`)

With the NAME constant we have now, we can instead write:

Text.text(`Info about ${p.NAME}`)

This looks a bit strange, but let's go through how it works. Remember, in JavaScript, when creating a string with two ` characters, all characters between them will be interpreted as text part of the string. BUT, in a string created with two ` characters, we can also write ${SOMETHING}, where we want the computer to replace that entire thing with the value we get from SOMETHING. So ${p.NAME} will be replaced with Arthur in this case.

So, at all places in our code where Arthur is written, we will instead use ${p.NAME}.

The final solution

So, here's the code for the page using a constant, instead of harding the name at multiple places. Notice how easy it is to change name to Alice in the code; you just need to change it at the place where we create the NAME constant!

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

class InfoPage extends Page{
	
	NAME = `Arthur`
	
	createGui(){
		return Rows.children(
			Text.text(`Info about ${p.NAME}`),
			Space,
			Text.text(`${p.NAME} is a human.`).left(),
			Space.grow(0.05),
			Text.text(`The answer to the "Ultimate Question of Life, the Universe, and Everything" was something ${p.NAME} learned.`).left(),
			Space.grow(0.05),
			Text.text(`Ford Prefect is good friend with ${p.NAME}, and he even saved ${p.NAME}'s life.`).left(),
			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 have a basic understanding of what a page constant in BagaWork is 🥳 Next tutorial will be about using app constants in BagaWork, which are constants you can access from all your pages.