6. Sizing GUI Components

This tutorial will teach you how you can change size of GUI components.

Positioning children

First, some quick repetition.

The child components in Rows are:

• As wide as the Rows component
• Just heigh enough to surround their content
• Positioned at the top of Rows (by default)

To position the child components elsewhere in Rows, you can insert extra Space components in Rows to push apart the children. The Space children will share the remaining space available in Rows evenly among themselves.

It works the same for the Columns component, but the children are instead positioned as columns, and not as rows.

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`First`).backgroundColor(`red`),
			Space.backgroundColor(`pink`),
			Text.text(`Second`).backgroundColor(`yellow`),
			Space.backgroundColor(`purple`),
			Button.text(`To columns`).page(ColumnsPage),
		)
	}
}

class ColumnsPage extends Page{
	createGui(){
		return Columns.children(
			Text.text(`First`).backgroundColor(`red`),
			Space.backgroundColor(`pink`),
			Text.text(`Second`).backgroundColor(`yellow`),
			Space.backgroundColor(`purple`),
			Button.text(`To Rows`).page(StartPage),
		)
	}
}

Sizing children

It's not only Space children that can grab some shares of the remaining available space; any child component used in Rows and Columns can grab some of the remaining available space. But it's only the Space children that grabs it by default, and by default they grab equally much of it. But all this can be changed with the configuration method .size() on the children. Let's go through how this works in detail.

First, let us ignore the Space children, and instead focus on all other children, such as Text and Button components.

By default, all children in Rows will be just tall enough to surround their content. If you want them to also grab some of the remaining available space, you can call the method .size() on the child, and pass it a number indicating how many shares of the remaining available space it should also occupy.

class FirstPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`FirstPage`),
			Text.backgroundColor(`red`).text(`None of the children here call .size(), so all children are just tall enough to surround their content.`),
			Button.text(`Go to second page`).page(SecondPage),
		)
	}
}

class SecondPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`SecondPage`),
			Text.size(1).backgroundColor(`red`).text(`This text component wants 1 share of the remaining avaialble space. Since this is the only child that wants some shares, it will get all of it (1 out of 1 shares)`),
			Button.text(`Go to third page`).page(ThirdPage),
		)
	}
}

class ThirdPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`ThirdPage`),
			Text.size(100).backgroundColor(`red`).text(`This text component wants 100 shares of the remaining avaialble space. Since this is the only child that want some shares, it will get all of it (100 out of 100 shares)`),
			Button.text(`Go to fourth page`).page(FourthPage),
		)
	}
}

class FourthPage extends Page{
	createGui(){
		return Rows.children(
			Text.text(`FourthPage`),
			Text.size(4).backgroundColor(`red`).text(`This text component wants 4 shares of the remaining avaialble space. The Button below wants 1 share of the remaninig available space, so this component will get 4 of 5 shares.`),
			Button.size(1).text(`Go to first page`).page(FirstPage),
		)
	}
}

The special thing with the Space component is that it has the size 1 by default (it has been made like this because that's often how one wants to use it), while all other components has the size 0 by default (which means they will be just big enough to surround their content).

So when you use the Space component like this:

Space

It has the same functionality as being used like this:

Space.size(1)

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Space.backgroundColor(`yellow`),
			Text.size(1).backgroundColor(`red`).text(`I occupy one third of the space.`),
			Space.backgroundColor(`pink`),
		)
	}
}

You can still call .size() on Space if you want it to claim another amount of shares of the remaning available space.

class StartPage extends Page{
	createGui(){
		return Rows.children(
			Space.backgroundColor(`yellow`),
			Text.size(1).backgroundColor(`red`).text(`I occupy one fifth of the space.`),
			Space.size(3).backgroundColor(`pink`),
		)
	}
}

Exercises

Complete the exercises below to see if you have fully mastered what has been taught in this tutorial.

That's it!

Good work, now you know how to change the size of GUI components! 🥳 Using Rows and Columns with .size() on the children is enough to create almost any layout you want.

The last thing to learn in the Fundamental section is the tutorial Fundamentals 7. The App Class. Then you will actually know everything needed to be able to start creating small apps 🙂