7. The App Class

This tutorial will teach you the basics about the App class.

App structure

As you should know by now, a Bagawork app consists of different pages. However, that is not enough for a Bagawork app to work. For example, the computer would have no idea about which of your pages that should be shown to the user first (when the app starts), so something more is needed. Therefor, a Bagawork app also consists of an App class.

Creating the App class

In programming, a class is a description of how a thing should work. The Bagawork framework contains a class called App, which is a general description of how a Bagawork app should work.

When you create a Bagawork app, you should create your own app class that extends the App class. This way, your own app class will already contain the general description of how a Bagawork app should work, and you just need to write a little bit of code to make it function the specific way you want it to. Great, right? 🙂

class MyApp extends App{
	
}

You can name your own app class whatever you want, but remember that all classes in your app need to have a unique name, so you can't have a page class with the same name as your app class.

To specify how your own app class should work, you override some predefined methods in it (it works the same way as you override methods in the Page class, but the App class has other methods you can override).

Creating the Start Page

When the user starts your Bagawork app, the method named createStartPage() will be called in your App class. In this method, you should return back the page that should be shown to the user directly when the app starts.

class MyApp extends App{
	
	createStartPage(){
		return FirstPage
	}
	
}

class FirstPage extends Page{
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`This is the first page!`),
			Space,
			Button.text(`Go to the second page`).page(SecondPage),
		)
	}
	
}

class SecondPage extends Page{
	
	createGui(){
		return Rows.children(
			Space,
			Text.text(`This is the second page`),
			Space,
			Button.text(`Go back to the first page`).page(FirstPage),
		)
	}
	
}

Exercises

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

That's it!

Woho! Now you also know the basics of how to use the App class! 🥳 The app class is often used for more things than just indicating which the start page is, but you will learn more about that later.