This lesson, we will cover using buttons and labels, and some simple code associated with these two components.
- A button is just a component on the screen that does something when pressed/clicked. This is essential to most applications, as many of them will use buttons to perform different actions.
- The label component is like a text box for your screen. It is used to display text.
For this lesson, we are going to make a simple app, that says “Hello, world” when the button is pressed.
Go to the components part of your screen. Scroll to the top, and drag a Button component onto your screen. A blue button should appear in the middle of your “Screen1” viewer, and you should see the property column on the right-hand side of your screen change to be button-specific.
Feel free to mess around with those now to get a feel for what each one does, but make sure to delete this button and replace it with a new one for our app. For a complete list of the different options for buttons, visit https://docs.thunkable.com/button
Now, drag a label component onto the screen. It should automatically appear above the button. Change the Text property by deleting the text, so it reads “empty string”, in the properties column like below:
These are all the basic components we need for this app, but feel free to use some of the properties that you are familiar with to make the program look prettier. If you want, you can even change the shape and colour of the buttons!
Once you are satisfied with the look, navigate to the “Blocks” tab. Under Button1 there will be a block saying “When Button1 Click”. Drag this into the main section of the screen.
Under the Label1 section in the blocks grouping, find the “From Label1 set text to” block and drag this into the button block. This means that when the button is pressed, the label text will change to what we set it to be! Replace the text “Label” to “Hello, world” in the pink tagged-on block.
Your app is now good to go! Press the “live test button” to try out the app. When you press the button, “Hello, world” will appear as text above the button.
You can also find more information on labels at https://docs.thunkable.com/label