Hello World!

You've got your UI running, but it's entirely empty. You will need to add something. In this part of the tutorial, we will add a simple text displaying "Hello world!"

First of all, you can change the background color of the app. This may come in handy later on. Do this, by running this.setBackgroundColor in your app. The method takes one argument for a VColor (view docs). Here's an example:

// TutorialApp.class

@Override
public void init() {
    // Sets the background color to pale white. The default is transparent.
    setBackgroundColor(VColor.white());
}

The app also doesn't automatically scale with the window's varying sizes. You will need to automatically adjust this in the update method.

// TutorialApp.class

@Override
public void update() {
    // The 'screen' is the game window.
    setHeight(Vera.provider.getScreenHeight());
    setWidth(Vera.provider.getScreenWidth());
}

Ignoring all that, you can add your text by using a label. VLabel, to be exact. VLabel is a widget. The term "widget" in this case, means an element on the screen. Imagine a button -- that could be a widget, as it is an element on the screen. You can interact with it, see it and modify it. Most widgets will require you to provide the app that they are added to as an argument in their respective constructor. You will still need to manually add the widget using addWidget to the UI. To create a label displaying "hello world", do this:

// TutorialApp.class

@Override
public void init() {
    VLabel label = new VLabel("Hello world!", this);

    // This is important, otherwise you will run into issues later when styling or 
    // adding hover/click/etc events. Add this every time you change the text of the label.
    label.adjustSize(); 

    // Finally, let the app know that this label is part of it.
    addWidget(label);
}

You can also move it around using the move method.

// ...
label.move(50, 60); // the label will be moved to (x=50, y=60)
label.move(30); // the label will be moved to (x=30, y=30)
// ...

---

Full example:

import net.snackbag.vera.Vera;
import net.snackbag.vera.core.VeraApp;
import net.snackbag.vera.widget.VLabel;

public class TutorialApp extends VeraApp {
    @Override
    public void init() {
        VLabel label = new VLabel("Hello world!", this);
        label.adjustSize();
        addWidget(label);
    }

    @Override
    public void update() {
        setHeight(Vera.provider.getScreenHeight());
        setWidth(Vera.provider.getScreenWidth());
    }
}

---

That's cool and all, but do you want some interaction within the UI? Then check out the next part of the tutorial here!