Basic Events

You've got your "Hello world!" program to work but want to make something more complex? This part of the tutorial will show you how to create a button that, when clicked, adds +1 to a counter, which will then be displayed on a separate label.

This time, we want a black background of the app with an opacity of 0.4, just for aesthetic reasons and readability (if we're in a bright/colorful zone it would be too distracting from the actual ui. this way we highlight everything). We can do this in the init method! We do this by using the black color preset, and modify the opacity to match what we want.

// TutorialApp.class

@Override
public void init() {
    // Set the background color of the UI to something dark,
    // but transparent
    setBackgroundColor(VColor.black().withOpacity(0.4f));
}

Now the button that, when clicked, add +1 to the counter. We want it in the center, though! Purely because we can. Therefore it also needs to be moved to the center when the UI scales again. That has to be done in the update method, since it is called whenever the UI needs to update (for example when it resizes). First, set the width and height to the screen's new width and height, so the black background fits and all other elements will know where the center is.

// TutorialMod.class

@Override
public void update() {
    // We set the height of the application to the window's height,
    // so when it resizes it still covers everything.
    setHeight(Vera.provider.getScreenHeight());
    setWidth(Vera.provider.getScreenWidth());
}

There is no such thing as a button widget in Vera, purely because we want you to pick how everything should look. Vera shouldn't decide the style of everything. That's why we'll use a label with a leftclick event. Since we want to reference it outside of other methods, we need to add it as a private variable accessible everywhere in the app. The same for the point counter label which will later display how many points we have.

public class TutorialApp extends VeraApp {
    // You don't necessarily need this, but if you want to access
    // widgets from different methods it's important
    private VLabel pointCounterLabel;
    private VLabel label;
    
    // ...

and in the init method create the labels. Our button label should have black text (that's the default color) and a white background color. That looks awful, so we add a padding of 5 and adjust the size. If we wouldn't, the white background wouldn't fit the assigned text and instead be a static 16px high and 100px wide.

// TutorialApp.class -> init()

// Button to click
label = new VLabel("Click me!", this);
label.setBackgroundColor(VColor.white()); // Set background color to white
label.setPadding(5); // Give the label a padding of 5, meaning 5 pixels of
                     // extra background color
label.adjustSize();

// add to the ui
addWidget(label);

The point counting label should be white, because the background is darkened.

// TutorialApp.class -> init()

// Label to count the points
pointCounterLabel = new VLabel("Current points: 0", this);
pointCounterLabel.adjustSize();
pointCounterLabel.setFont(
        // set text color to white
        pointCounterLabel.getFont().withColor(VColor.white()));

addWidget(pointCounterLabel);

Now we have a button and a label both at x=0 y=0. That's pretty counterproductive! Didn't we want to center them? That's correct, but centering also implies centering when the screen changes sizes. That's why we made the widgets accessible throughout the class and didn't give them any positions when initializing them. In the update method we can add code that centers them.

// TutorialApp.class

@Override
public void update() {
    // ...

    // Move to the center of the screen. We do this here, because when the window
    // resizes it should still be at the correct position.
    label.move(
            getWidth() / 2 - (label.getWidth() / 2),
            getHeight() / 2 - (label.getHeight() / 2)
    );
    
    // Move point counter to the center of the screen, but with a little higher Y
    pointCounterLabel.move(
            getWidth() / 2 - (pointCounterLabel.getWidth() / 2),
            getHeight() / 2 - (pointCounterLabel.getHeight() / 2) - 20
    );
}

That's great! Except for the fact that it doesn't do anything. We forgot to give the button the actual ability to add a point. Let's first add a private integer to keep track of our points.

public class TutorialApp extends VeraApp {
    private int points = 0;
    // ...

Now add the functionality to increment points by 1 every time the label is clicked.

// TutorialApp.class -> init()

// When the label is clicked, add a point
label.onLeftClick(() -> {
    points += 1;
    pointCounterLabel.setText("Current points: " + points);
    pointCounterLabel.adjustSize();
});

Full Example

package com.example;

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

public class TutorialApp extends VeraApp {
    private int points = 0;

    // You don't necessarily need this, but if you want to access
    // widgets from different methods it's important
    private VLabel pointCounterLabel;
    private VLabel label;

    @Override
    public void init() {
        // Set the background color of the UI to something dark,
        // but transparent
        setBackgroundColor(VColor.black().withOpacity(0.4f));

        // Button to click
        label = new VLabel("Click me!", this);
        label.setBackgroundColor(VColor.white()); // Set background color to white
        label.setPadding(5); // Give the label a padding of 5, meaning 5 pixels of
                             // extra background color
        label.adjustSize();

        // add to the ui
        addWidget(label);

        // Label to count the points
        pointCounterLabel = new VLabel("Current points: 0", this);
        pointCounterLabel.adjustSize();
        pointCounterLabel.setFont(
                // set text color to white
                pointCounterLabel.getFont().withColor(VColor.white()));

        addWidget(pointCounterLabel);


        // When the label is clicked, add a point
        label.onLeftClick(() -> {
            points += 1;
            pointCounterLabel.setText("Current points: " + points);
            pointCounterLabel.adjustSize();
        });
    }

    @Override
    public void update() {
        // We set the height of the application to the window's height,
        // so when it resizes it still covers everything.
        setHeight(Vera.provider.getScreenHeight());
        setWidth(Vera.provider.getScreenWidth());

        // Move to the center of the screen. We do this here, because when the window
        // resizes it should still be at the correct position.
        label.move(
                getWidth() / 2 - (label.getWidth() / 2),
                getHeight() / 2 - (label.getHeight() / 2)
        );

        // Move point counter to the center of the screen, but with a little higher Y
        pointCounterLabel.move(
                getWidth() / 2 - (pointCounterLabel.getWidth() / 2),
                getHeight() / 2 - (pointCounterLabel.getHeight() / 2) - 20
        );
    }
}