App

Example of the basic code for creating your own App class.

// Name your own app whatever you want (in this example MyApp).
class MyApp extends App{
	// Override methods here to give your own app
	// the specific behavior you want it to have.
}

In our Online Editor, you can click on a page, and then click on the MyApp tab to view and edit the code for your App class.

Example of an app with:

• An app constant
• An app variable
• An app method

class MyApp extends App{
	
	THE_CONSTANT_NAME = "The constant value"
	
	theVariableNAME = "The variable value"
	
	theMethodName(){
		
		// Can use a.THE_CONSTANT_NAME to access the constant value.
		// Can use a.theVariableName to access the variable value.
		// Can use a.theMethodName to access the method.
		
	}
	
}

Example of an app that uses onBefore().

class MyApp extends App{
	
	TERM_1 = 5
	TERM_2 = 4
	
	// We want the sum variable to contain the sum of
	// TERM_1 and TERM_2. However, the "a" variable can
	// only be used in methods in the App class, so we
	// can't write sum = a.TERM_1 + a.TERM_2 here. So
	// instead, we initialize the sum to a dummy value
	// (0 in this case)...
	sum = 0
	
	onBefore(){
		
		// ...and in this method we assign
		// the sum its correct value.
		a.sum = a.TERM_1 + a.TERM_2
		
	}
	
}

You only need to initialize the global state if your app needs one. Some simple apps don't need one, and can simply leave onBefore() empty, or not have this method at all.

In our Online Editor, you can preview the app icon by clicking on a page, and then look in the Icon tab.

Example of how createIcon() can be implemented.

class MyApp extends App{
	
	createIcon(){
		return PaperGroup.backgroundColor(`lime`).coordinateSystem(10, 10).children(
			PaperCircle.backgroundColor(`yellow`).radius(5).center(5, 5),
			PaperCircle.backgroundColor(`black`).radius(1).center(3, 7),
			PaperCircle.backgroundColor(`black`).radius(1).center(7, 7),
			PaperLine.backgroundColor(`red`).thickness(0.5).start(3, 3).end(7, 3),
		)
	}
	
	createStartPage(){
		return StartPage
	}
	
}

class StartPage extends Page{
	createGui(){
		return Text.text(`In the code editor, click on the "Icon" tab, and you will see the created app icon!`)
	}
}

You only need to implement createIcon() if you want your app to have its own icon. If you don't implement it, a default icon will be used instead.

Example of an app specifying which Page to first show the user.

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

class StartPage extends Page{
	// Override methods here to give this page
	// the specific behavior you want it to have.
}

Example of an app that doesn't use createErrorRecoveringPage(), and instead uses createStartPage() when the app crashes and the user wants to try running it again.

Notice that when the counter gets to 3, you can still restart the app and use the ClockPage, but going to the CounterPage again after that will always make the app crash.

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

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Thank you for using my app, I hope you enjoy using it!`),
			Button.text(`Go!`).page(MenuPage),
		)
	}
	
}

class MenuPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Menu`),
			Button.text(`Counter`).page(CounterPage),
			Button.text(`Clock`).page(ClockPage),
		)
	}
	
}

class CounterPage extends Page{
	
	counter = 0
	
	createGui(){
		
		// To try error handling, we will on purpose
		// have code that crashes when counter is 3.
		if(p.counter == 3){
			log(nonExistingVariable) // Will crash, since that variable doesn't exist.
		}
		
		return Rows.children(
			Text.text(`Counter is ${p.counter}.`),
			Button.text(`+1`).onClick(p.incrementCounter),
			Button.text(`Back`).page(MenuPage),
		)
		
	}
	
	incrementCounter(){
		p.counter += 1
	}
	
}

class ClockPage extends Page{
	
	createGui(){
		
		const now = Time.setNow()
		
		return Rows.children(
			Text.text(now.getClock()),
			Button.text(`Back`).page(MenuPage),
		)
		
	}
	
}

This is the same app as above, but in it we have also specified that createErrorRecoveringPage() should return MenuPage, so the user comes to the MenuPage after the app has crashed, and doesn't need to view the StartPage again.

class MyApp extends App{
	
	createStartPage(){
		return StartPage
	}
	
	createErrorRecoveringPage(){
		return MenuPage
	}
	
}