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? 🙂
Example showing JavaScript code for how to create your own app class called MyApp
.
class MyApp extends App{
}
In our Online Editor, the app class has already been created for you, and you can view and change the code for it by clicking on the MyApp
button in the editor.
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.
Example showing a BagaWork app consisting of two pages, and how the app class tells the computer that the page named FirstPage
should be shown to the user 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.
When opening this BagaWork project in the editor, it correctly displays a preview of Page1
in the app. But, if you click on the MyApp
button and preview the app, you can see that something is wrong: MyApp.createStartPage()
tries to send back StartPage
, which doesn't exist! So, when trying to run the app for real, it will crash as soon as it starts running. Fix this problem (please ^^).
Hint
This problem can actually be fixed in 2 different ways:
- Rename the page
Page1
toStartPage
- Change the code in
MyApp.createStartPage()
to returnPage1
instead ofStartPage
Which you should do depends simply depends on if you prefer to have the first page in the app named StartPage
or Page1
.
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.