4. Positioning GUI Components

In the app below, the root component of the page has no background color (its background is transparent), and it's the application's default background color (aqua) we se. So it's hard to tell what space the root component does occupy (but it does still occupy the entire screen).

class StartPage extends Page{
	createGui(){
		return Text.text(`This Text component has no background color, so it's hard too see what space it occupies.`)
	}
}

In the app below, the root component of the page has an orange background color, so it's easy to see what space it occupies (the entire screen).

class StartPage extends Page{
	createGui(){
		return Text.backgroundColor(`orange`).text(`This Text component has an orange background, so it's easy too see what space it occupies.`)
	}
}

Example of how to use the Rows component to position three Text components as rows. All GUI components are given a background color, so one easily can see the space each component occupies.

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Text.text(`I'm the first row`).backgroundColor(`pink`),
			Text.text(`I'm the second row`).backgroundColor(`aqua`),
			Text.text(`I'm the third row`).backgroundColor(`lime`)
		)
	}
}

This is the same example as before, but only the Rows component and the third child are given a background color to show that the Rows component's background also is drawn where the children are (underneath them).

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Text.text(`I'm the first row`),
			Text.text(`I'm the second row`),
			Text.text(`I'm the third row`).backgroundColor(`lime`)
		)
	}
}

When you pass multiple arguments to a method, the arguments have to be separated by a comma, as shown below:

Rows.children(Text.text(`a`), Text.text(`b`), Text.text(`c`))

This code can become more readable by writing it on multiple lines instead:

Rows.children(
	Text.text(`a`),
	Text.text(`b`), 
	Text.text(`c`)
)

When the code is written like this, some people find it strange that the last argument doesn't end with a , (comma). But do you know what? It is actually OK to write a , (comma) after the last argument too, so it is possible to write this code like this:

Rows.children(
	Text.text(`a`),
	Text.text(`b`), 
	Text.text(`c`),
)

When each argument is written on their own line like this, one usually adds that extra comma after the last argument. From here on, our examples will do that too, and we recommend you to do the same in your code.

Example of using Rows with a Space child.

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Text.text(`I'm the first row`).backgroundColor(`pink`),
			Space,
			Text.text(`I'm the last row`).backgroundColor(`lime`),
		)
	}
}

Example of using Rows with two Space children.

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Text.text(`I'm the first row`).backgroundColor(`pink`),
			Space,
			Text.text(`I'm the second row`).backgroundColor(`aqua`),
			Space,
			Text.text(`I'm the third row`).backgroundColor(`lime`)
		)
	}
}

Example of using Rows with three Space children.

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Text.text(`I'm the first row`).backgroundColor(`pink`),
			Space.backgroundColor(`silver`),
			Text.text(`I'm the second row`).backgroundColor(`aqua`),
			Space.backgroundColor(`yellow`),
			Space.backgroundColor(`brown`),
			Text.text(`I'm the third row`).backgroundColor(`lime`)
		)
	}
}

Example of how to use the Columns components. All GUI components are given a background color, so one easily can see the space they occupy.

class StartPage extends Page{
	createGui(){
		return Columns.backgroundColor(`red`).children(
			Text.text(`First`).backgroundColor(`pink`),
			Text.text(`Second`).backgroundColor(`aqua`),
			Text.text(`Third`).backgroundColor(`lime`)
		)
	}
}

class StartPage extends Page{
	createGui(){
		return Columns.backgroundColor(`red`).children(
			Text.text(`Left`).backgroundColor(`pink`),
			Space,
			Text.text(`Right`).backgroundColor(`lime`)
		)
	}
}

class StartPage extends Page{
	createGui(){
		return Columns.backgroundColor(`red`).children(
			Space,
			Text.text(`Centered`).backgroundColor(`pink`),
			Space
		)
	}
}

Example of how to combine the Rows component and the Columns component to create a layout with a bottom navigation view (learn how to make it functional later).

class StartPage extends Page{
	createGui(){
		return Rows.backgroundColor(`red`).children(
			Space,
			Text.text(`I'm the main content`).backgroundColor(`pink`),
			Space,
			Columns.backgroundColor(`lime`).children(
				Space,
				Text.text(`Home`).backgroundColor(`gold`),
				Space,
				Text.text(`About`).backgroundColor(`silver`),
				Space,
				Text.text(`Contact`).backgroundColor(`brown`),
				Space
			)
		)
	}
}