Creating Screens

Adding to the ViewController

Now that we have our app created and registered with Apps, we can build out our first screen. If you followed along in the Java or Kotlin implementation, you should have this code block in your ViewController class, in the createView() method.

        addTextView(
            modifier = Modifier()
                .size(WRAP_CONTENT, WRAP_CONTENT)
                .alignTopToTopOf(this)
                .centerHorizontally()
                .margins(top = 250, start = 400),
            text = "${ChatColor.BOLD}${ChatColor.ITALIC}${ChatColor.UNDERLINE}Hello World!",
            size = 16,
        )

This method, addTextView(), adds a TextView to your ViewController, and on this screen, this is how we add a title. Now the addTextView() has quite a few parameters, most of which are optional. This tutorial won't cover every parameter of every type of view, and we recommend reading the KDocs for that in depth knowledge. We'll focus on the ones in this example which will be the most common parameters you'll use to customize your TextViews.

Modifier

This parameter takes a Modifier object which contains the view's formatting data. You can set your View's width and height as well as its position on the screen. one of the Modifier's biggest advantages is that is does not require you to use absolute values for your size and positional data.

As you can see from the code block, we don't define the title's size to an exact number but we use this constant WRAP_CONTENT. This means Apps will calculate the View's height and width based off of the text you set for the view as well as the text size.

The next part of the Modifier to notice is the .alignTopToTopOf(this) line. Not only does the modifier not require absolute size values but it also doesn't require absolute positional values either. You can set your View's positions to be relative to other views as well (if you're familiar with web or mobile application development, this should seem familiar). Since Apps calculates all of these values for you, this makes developing your apps significantly easier because if you want to update a view after an event, you don't have to update all of the other views on the screen, Apps will take care of that and will update the rest!

Text

This parameter is the text that will be displayed in your TextView. This supports Minecraft color codes and easily pairs with PlaceholderAPI.

Size

This is the size of the text. The default text size is 10 so for the screen title we want it to be larger than the default and for displaying paragraphs of data, using a smaller text size helps make the data easier to read for players.

View Types

So we just covered how to a TextView to your ViewController but there are many more types of views Apps provides. In general, there are two types of views, theres Views and ViewContainers. And technically, if you peek under the hood, you'll notice ViewContainer extends View but don't focus on that now. Conceptually, the primary difference between the two is ViewContainers can contain child Views within them; hence the name ViewContainer