Page #

On this page you find the documentation for the Page class.

Introduction #

Your App basically consists of different Pages. One Page at a time will be shown to the user, so each Page has it's own graphical user interface (GUI). The user can interact with the GUI in a Page (for example by clicking on a button in the Page), after which the App will go to the next Page, and show the GUI of that Page instead, and so on.

You should create your own Page classes that inherit from the Page class, and in which you override some methods to give your own Page classes the specific behaviors you want them to have.

class MyApp extends App{
	createStartPage(){
		return new 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.
}

Initializing the page state #

Before the page is shown to the user, a new instance of it will be created, and onBefore() will be called on it. In this method you can initialize the page's internal state.

class AskQuestionPage extends Page{
	onBefore(){
		p.startTimeInMs = Date.now()
	}
}

Creating the GUI #

After onBefore() has been called, createGui() will be called. In this method you should create the GUI structure the page consists of, and send back the root component of the GUI structure. The app will then show the Page's GUI on the user's screen.

class AskQuestionPage extends Page{
	onBefore(){
		p.startTimeInMs = Date.now()
	}
	createGui(){
		return Rows(
			Text(`Do you know the answer to this question?`),
			Cols(
				Button(`Yes`).handler(() => p.answer='yes'),
				Button(`No` ).handler(() => p.answer='no'),
			),
		)
	}
}

Handling user input #

When the user has interacted with your GUI (for example by clicking on a Button) and should be taken to another Page, onAfter() will be called, in which you can handle the user's input.

class AskQuestionPage extends Page{
	onBefore(){
		p.startTimeInMs = Date.now()
	}
	createGui(){
		return Rows(
			Text(`Do you know the answer to this question?`),
			Cols(
				Button(`Yes`).handler(() => p.answer='yes'),
				Button(`No` ).handler(() => p.answer='no'),
			),
		)
	}
	onAfter(){
		
		const endTimeInMs = Date.now()
		const timeToAnswerInMs = endTimeInMs - p.startTimeInMs
		
		if(10000 < timeToAnswerInMs){
			// Took more than 10 seconds to answer, handle that here.
		}else if(p.answer == 'yes'){
			// The user clicked on the yes-button, handle that here.
		}else{
			// The user clicked on the no-button, handle that here.
		}
		
	}
}

Creating after directions #

When the user has interacted with the GUI, it needs to be taken to the next Page. createAfterDirections() will be called to figure out which that next Page is. This method should return an array of Directions, where each Direction represents a condition that indicates when that Direction should be used, and which Page the user should come to when that condition is true.

If none of the Page's Directions' have a condition that returns true, the user will come to a new instance of the Page the user currently is on.

class AskQuestionPage extends Page{
	onBefore(){
		p.startTimeInMs = Date.now()
	}
	createGui(){
		return Rows(
			Text(`Do you know the answer to this question?`),
			Cols(
				Button(`Yes`).handler(() => p.answer='yes'),
				Button(`No` ).handler(() => p.answer='no'),
			),
		)
	}
	createAfterDirections(){
		return [
			new Direction(
				TooSlowPage,
				() => 10000 < Date.now() - p.startTimeInMs,
				"Took more than 10 seconds to answer",
			),
			new Direction(
				YesPage,
				() => p.answer == 'yes',
				"The user clicked on the yes-button",
			),
			new Direction(
				NoPage,
				() => true, // Directions are tested in order, so can hard code true in the last direction.
				"The user clicked on the no-button",
			),
		]
	}
}

class TooSlowPage extends Page{
	// Override methods here...
}

class YesPage extends Page{
	// Override methods here...
}

class NoPage extends Page{
	// Override methods here...
}

Button(`yes`).page(YesPage)

new Direction(
	YesPage,
	() => p.answer == 'yes',
	"The user clicked on the yes-button",
)

Creating before directions #

In some rare cases, when a user comes to one Page, let's call it PageA, you might want to immediately send the user to another Page, let's call that one PageB, without the user seeing PageA. For this, you can add a before direction in PageA by implementing the method createBeforeDirections().

createBeforeDirections() will be called directly when the user comes to the Page, and should return an array with Directions. If one of those Directions' condition is true, the user will come to the Page the Direction leads to. Otherwise, the initial Page will be shown as usual.

class MyPage extends Page{
	createBeforeDirections(){
		// One should not be allowed to view this
		// page between 00:00 and 08:59.
		return [
			new Direction(
				MorningPage,
				() => new Date().getHours() < 9,
				"Is morning",
			),
		]
	}
}