Page

Example showing the basic structure of a simple app.

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

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

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

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

In our Online Editor, you can click on existing page to view and modify the code for it, or you can click on the grid-background to create a new page.

Example of a page with:

• A page constant
• A page variable
• A page method

class StartPage extends Page{
	
	THE_CONSTANT_NAME = `The constant value`
	
	theVariableName = `The variable value`
	
	theMethodName(){
		
		// Can use p.THE_CONSTANT_NAME to access the constant value.
		// Can use p.theVariableName to access the variable value.
		// Can use p.theMethodName to access the method.
		
	}
	
}

In your Page classes, you can also use the special BagaWork variable a to access the things you have in your App class. For more information, see the documentation for the App class.

class StartPage extends Page{
	
	createBeforeDirections(){
		
		const oneOrTwo = m.randomInt(1, 2)
		
		return [
			Direction.when(oneOrTwo == 1).page(LuckyPage).text(`Was lucky`),
			Direction.when(oneOrTwo == 2).page(UnluckyPage).text(`Was unlucky`),
		]
		
	}
	
	createGui(){
		return Text.text(`This GUI will only be used in the preview, the user will never see it in the app, because there will always be a before direction that is true in this case.`)
	}
	
}

class LuckyPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`You are lucky!`),
			Button.text(`Try again`).page(StartPage)
		)
	}
	
}

class UnluckyPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`You are unlucky!`),
			Button.text(`Try again`).page(StartPage)
		)
	}
	
}

You only need to implement createBeforeDirections() if you need it. Most pages will not need it, and can simply leave the method empty, or not have it at all.

class StartPage extends Page{
	
	// This variable should keep track of how many
	// times the user has been on this page.
	numberOfVisits = 0
	
	onBefore(){
		
		// So each time the user comes to this page,
		// we increment it by 1.
		p.numberOfVisits += 1
		
	}
	
	createGui(){
		return Rows.children(
			Text.text(`You have been on the StartPage ${p.numberOfVisits} times.`),
			Button.text(`Go to OtherPage`).page(OtherPage)
		)
	}
	
}

class OtherPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`This is the OtherPage.`),
			Button.text(`Go to StartPage`).page(StartPage)
		)
	}
	
}

You only need to implement onBefore() if you need it. Many simple pages can leave this method empty, or simply not have it at all.

Example showing how to use Page.createGui().

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`Do you know the answer to this question?`),
			Space,
			Columns.children(
				Space,
				Button.text(`No` ),
				Space,
				Button.text(`Yes`),
				Space,
			),
		)
	}
}

The root component in your GUI (the Rows component in the example above) will always be as wide and high as the screen itself/the portion of the screen your app is shown in.

The GUI is built with the GUI Components from the BagaWork framework. In the sidebar on this page you have a list of them (Views and Layouts).

Example showing how to use Page.onAfter().

class AskQuestionPage extends Page{
	
	startTime = Time.setNow()
	answer = ``
	
	createGui(){
		return Rows.children(
			Text.text(`Do you know the answer to this question?`),
			Columns.children(
				Button.text(`Yes`).onClick(p.onYesAnswer),
				Button.text(`No` ).onClick(p.onNoAnswer),
			),
		)
	}
	
	onYesAnswer(){
		p.answer = `yes`
	}
	
	onNoAnswer(){
		p.answer = `no`
	}
	
	onAfter(){
		
		const endTimeInMs = Date.now()
		const timeToAnswerInMs = endTimeInMs - p.startTimeInMs
		
		if(10000 < timeToAnswerInMs){
			// Took more than 10 seconds to answer,
			// so maybe we want to handle that
			// as a special case here.
		}else if(p.answer == `yes`){
			// The user clicked on the yes-button
			// within 10 seconds, handle that here.
		}else{
			// The user clicked on the no-button
			// within 10 seconds, handle that here.
		}
		
	}
}

You only need to handle user input in onAfter() if your app's logic require's that. Many simple apps can simply leave this method empty, or not have it at all.

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`Ready to try your luck?`),
			Button.text(`Yes!`),
		)
	}
	
	createAfterDirections(){
		
		const oneOrTwo = m.randomInt(1, 2)
		
		return [
			Direction.when(oneOrTwo == 1).page(LuckyPage).text(`Was lucky`),
			Direction.when(oneOrTwo == 2).page(UnluckyPage).text(`Was unlucky`),
		]
		
	}
	
}

class LuckyPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`You are lucky!`),
			Button.text(`Try again`).page(StartPage)
		)
	}
	
}

class UnluckyPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`You are unlucky!`),
			Button.text(`Try again`).page(StartPage)
		)
	}
	
}

You only need to implement createAfterDirections() if you need it. Most pages will not need it, and can simply leave this method empty, or not have it all.

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`This is the StartPage`),
			Button.text(`Go to AboutPage`).page(AboutPage)
		)
	}
	
}

class AboutPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`This is the AboutPage.`),
			Button.text(`Go to StartPage`).page(StartPage)
		)
	}
	
}

class StartPage extends Page{
	
	createGui(){
		return Rows.children(
			Text.text(`This is the StartPage`),
			Button.text(`Info about Alice`).page(AboutPage.name(`Alice`).age(10)),
			Button.text(`Info about Bob`).page(AboutPage.age(15).name(`Bob`)),
		)
	}
	
}

class AboutPage extends Page{
	
	// These will get their values from page arguments.
	// If no page arguments are provided, these default
	// values will be used. You can see that in the editor
	// when previewing this page.
	name = `DEFAULT_NAME`
	age = -1
	
	createGui(){
		return Rows.children(
			Text.text(`${p.name} is ${p.age} years old.`),
			Button.text(`Go to StartPage`).page(StartPage)
		)
	}
	
}