4. App Variables and Methods

This tutorial will teach you what app variables and app methods are in BagaWork, and how they differ from page variables and page methods.

Why app variables are needed

A page variable can only be accessed and used on the page the created it. But often, we need to be able to use the same variable on many different pages. For these cases, we can instead use an app variable.

How to create app variables

To create an app variable, we write the same code as for creating an app constant, but we use thisNamingConvention for app variables instead of THIS_NAMING_CONVENTION (which is only used for constants).

In the code below you find an example of how to create the following app variables:

• name will have the string value Alice
• lastVisit will have the string value 2023-09-16

class MyApp extends App{
	
	name = `Alice`
	lastVisit = `2023-09-16`
	// You can create as many app variables as you want.
	
	// And then you have createStartPage() as usual.
	
}

How to use app variables

To obtain the value from an app variable, you write the same code as for obtaining the value from an app constant, i.e. you would write a.theName. For example, to obtain the value stored in the app variable lastVisit, we would write a.lastVisit (which would evaluate to the string 2023-09-16 in this case).

class MyApp extends App{
	
	name = `Alice`
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Text.text(`Hello ${a.name}!`)
	}
	
}

As you can see in the example above, we can use the special a variable in your Page classes BagaWork to access your app variables.

class MyApp extends App{
	
	name = `Alice`
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Hello ${a.name}!`),
			Button.text(`Change name`).page(ChangeNamePage),
		)
	}
	
}

class ChangeNamePage extends Page{
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`Change name to what?`),
			Space,
			Columns.children(
				Space,
				Button.text(`Alice`).page(StartPage).onClick(p.setNameToAlice),
				Space,
				Button.text(`Bob`).page(StartPage).onClick(p.setNameToBob),
				Space,
			),
			Space,
		)
	}
	
	setNameToAlice(){
		a.name = `Alice`
	}
	
	setNameToBob(){
		a.name = `Bob`
	}
	
}

App methods

A page method can only be used in the Page that created the page method. If you want to be able to use the method in many different pages, you should instead create the method as an app method by writing it in your App class instead. Then you can access it from all your pages using a.theNameOfTheMethod.

class MyApp extends App{
	
	name = `Alice`
	
	createStartPage(){
		return StartPage
	}
	
	setNameToAlice(){
		a.name = `Alice`
	}
	
	setNameToBob(){
		a.name = `Bob`
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Hello ${a.name}!`),
			Space,
			Button.text(`Change name`).page(ChangeNamePage),
			Space,
			Button.text(`Change name to Alice`).onClick(a.setNameToAlice),
			Button.text(`Change name to Bob`).onClick(a.setNameToBob),
		)
	}
	
}

class ChangeNamePage extends Page{
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`Change name to what?`),
			Space,
			Columns.children(
				Space,
				Button.text(`Alice`).page(StartPage).onClick(a.setNameToAlice),
				Space,
				Button.text(`Bob`).page(StartPage).onClick(a.setNameToBob),
				Space,
			),
			Space,
		)
	}
	
}

Exercises

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

That's it!

Good work! 🥳 Page constants/variables/methods are really similar to app constants/variables/methods, the only difference is in which class you should create them, and if you should use p or a to access them. If you will just use the variable in one of your pages, then use a page variable, and if you need to use it in multiple pages, then use an app variable instead. Simple as that!