Welcome back 🤜🤛

Hello again, Modern Roku Developer.

Yes, you have gained yourself that title since yesterday 🚀

I hope you’re ready to start a more challenging lesson, since yesterday was just the basics.

Today’s lesson is all about making your app interactive, handling key presses and taking a closer look into the nuts and bolts of the BrightScript language.

Let’s get started!

Adding state and interactivity

The primordial example for state management is having a counter on screen that increases each time you press a button. Wow, groundbreaking!

Before we start, try to keep these questions in mind. And maybe try answering them yourself!

What is the right way to store state in a component?
How do we create a button?
How do we assign a specific effect (increasing the counter) to the button being pressed?

From the previous section, you might have guessed that the right way to store state in a component is using a component-scoped variable (i.e: a m.variable). Let's add it directly to the init() method of our MainScene.bs file:

sub init()
    label = m.top.findNode("welcome")
    label.text = "Hello from create-roku-app"

    m.counter = 0
end sub

Unlike other languages, there is no way of assigning a memory to a variable without an initial value like 0. You could use invalid but that wouldn't be an integer.

Next step is to create the button. You can create it in the XML like we did with the Label before, and then get a reference to it through findNode():

<component name="MainScene" extends="Scene">
    <children>
        <Label id="welcome" translation="[96, 54]"/>
        <Button
            id="actionButton"
            translation="[96, 100]"
            text="Increase!"
        />
    </children>
</component>

sub init()
    label = m.top.findNode("welcome")
    label.text = "Hello from create-roku-app"

    m.counter = 0

    button = m.top.findNode("actionButton")
    button.setFocus(true)
end sub

Relaunch your app and you should see something like this:

Untitled