3. Configuring GUI Components

This tutorial will teach you the basics of how to create and configure GUI components in your pages.

Page.createGui()

As you learned in the previous tutorial, all your Page classes should contain a method called createGui(). This method will be called (when a method is called, the code in it will be executed) when the page needs to display its GUI on the screen, and in this method you should create and return the page's GUI.

class StartPage extends Page{
	createGui(){
		return Text.text(`Hello, world!`)
	}
}

GUI Components

To create the page's GUI, you use the different GUI Components BagaWork contains. They are stored in different pre-defined constants whose name reflect what they do, such as:

• The GUI Component stored in the Text variable displays text
• The GUI Component stored in the Button variable displays a button
• And so on...

So, to build a GUI, you must learn which the different GUI components are that exist in BagaWork. They are all mentioned on the Documentation page, but learning how to use them by only reading the documentation can be a bit tricky for beginners, so therefore we have these tutorials, which will give you a gentler introduction to how to use them.

Creating a new instance of a GUI component

To use a GUI Component, create a new instance of it by simply writing the name of the constant that stores the GUI Component you want to use. For example, to use the Text GUI Component, simply write Text. Easy as that! 🙂

Configuring a GUI component instance

However, most GUI Components require additional information from you to be useful. For example, the Text GUI Component needs to know which text it should display.

To pass additional information to a GUI Component, you call configuration methods on it, and (if needed) you pass it the additional information as one or more arguments to the configuration method.

As an example, to tell a Text component which text it should display, you call its configuration method text(), and you pass it the text it should display as a string (created by two ` characters), for example Text.text(`This string contains the text that should be displayed.`). For an example of this, see the previous example (the first one on this page).

Text.text(`Hello, world!`)

Text.text("Hello, world!")

Text.text('Hello, world!')

Different components have different configuration methods you can use. For example, the Text component has a configuration method named left() you can call to tell it that it should left align the text it displays (it is centered by default). This configuration method receives no arguments (but it's still required to write the parentheses).

class StartPage extends Page{
	createGui(){
		return Text.text(`Hello, world!`).left()
	}
}

Configuration methods return the component instance itself, so they are chainable, which means that you can continue to call as many configuration methods on the component you want.

class StartPage extends Page{
	createGui(){
		return Text.text(`Hello, world!`).left().top()
	}
}

The order you call the configuration methods in doesn't matter. All four code pieces below configures the Text component the same way.

Text.text(`This text is left and top aligned!`).left().top()

Text.text(`This text is left and top aligned!`).top().left()

Text.top().left().text(`This text is left and top aligned!`)

Text.top().text(`This text is left and top aligned!`).left()

left() and top() are examples of configuration methods only the Text component have. But some configuration methods can be used on any component. An example of that is the configuration method called .backgroundColor(), which you can use to tell the component that it should have a background color. To tell it which color to use for the background, you pass it the name of a color in English as a string, such as `red` or `blue`.

class StartPage extends Page{
	createGui(){
		return Text.text(`Hello, world!`).right().bottom().backgroundColor(`yellow`)
	}
}

Indenting the code

When you call many configuration methods on a component, the line of code tends to become quite long, which can make it hard to read. In JavaScript, you can often insert line breaks to make the code span multiple lines instead, and the indentation (white-space characters (spaces and tabs) to the left of the code) doesn't matter to the computer, but can make the more readable for us humans. Feel free to write your code the way you think make it the easiest to read.

class StartPage extends Page{
	createGui(){
		return Text.text(`This text is shown to the user!`).right().bottom().background(`yellow`)
	}
}

class StartPage extends Page{
	createGui(){
		return Text.text(`This text is shown to the user!`)
			.right().bottom().background(`yellow`)
	}
}

class StartPage extends Page{
	createGui(){
		return Text.text(`This text is shown to the user!`)
			.right()
			.bottom()
			.background(`yellow`)
	}
}

class StartPage extends Page{
	createGui(){
		return Text
			.right()
			.bottom()
			.background(`yellow`)
			.text(`This text is shown to the user!`)
	}
}

class StartPage extends Page{
	createGui(){
		return Text
			.right()
			.bottom()
			.background(`yellow`)
			.text(
				`This text is shown to the user!`
			)
	}
}

class StartPage extends Page{
	createGui(){
		// Note: this will unfortunately not work; the
		// start of the value you return must be written
		// to the right of return (on the same line)!
		return
			Text.text(`This text is shown to the user!`)
				.right()
				.background(`yellow`)
				.bottom()
	}
}

Exercises

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

That's it!

Now you know how to create and configure GUI components! 🥳 That wasn't that hard, was it? But much remains to be learnt. You have only seen a few examples of how to use the Text component and some configuration methods you can call to configure it, but BagaWork contains many more components you can use, and many other configuration methods you can call too. The hard part will be to learn which these components and configuration methods are, and how you can combine them to create more complex and useful GUIs (a GUI consisting of a single GUI component is usually not that useful).

Continue with the tutorial Fundamentals 4. Positioning GUI Components when you are ready.