Button Blocks Explained Thunkable AppInventor Makeroid AppyBuilder


To Design or develop an app--Button plays a major role to make a user interact with app by giving suitable commands for a particular button and gives the results to the users for clicking on it in the App. Like if a user clicked on the button Next in a quiz app or something then opening new question or new screen as a result of clicking on a button named 'Next'.
To do this so we need to give commands, Let's know how to command that results and how to use the other blocks and what are the uses of them.
Let's start with the first block.

1)

This block is used to give commands when a user clicks on a button then what process should have to take place and give results for that click. All commands should be arranged in this block. For example To open another screen, To open another question or To calculate the results etc,.
Example1:- To open another screen when button clicked then the coding should be like this or we have code the block like this below.
Example2:- To change the background colour of the present screen when button clicked the coding should be like this or we have to code the block like this below.


Note; These Examples are only for getting basics and we can create coding in so many ways.

2)


This block is an optional commanding block to turn your app into more dynamic like for example when a user placed his finger on the button without clicking then we can give commands through this block. For Example to change the background colour of the button or background colour of the screen or something like this.

Example1:-To change background colour of the button when button got focus the coding will be like this.
Normal






When Got Focus








Note:- That the background colour of the button will be change when button got focus, Once the colour is changed it will not come to normal until you command with another block which we will explain about it in below 3 block explanation.

you can also give the same commands which given to when button clicked but we recommend don't do that.

3)



This is a parallel block of the above 2nd block, means in the above block we are given commands when button got focus but here in this block we have to command when button lost focus. For example, if you are given a command like in the above example changing the background colour of the button when got focused and to change the background colour to normal then we have to give a command in this block as shown below


During Focused as commanded in above 2nd block.




When Lost Focus as commanded in the above block





4)

This block is used to command when a user long clicks the button.
For example when the button is long clicked then to open a notification message or to show a warning message or some more option like delete, copy, paste option.

5)

This block is used to give commands when the user placed his finger or thumb on the button and scrolled down. You can give commands whatever you like.
If you're using scrollable screen then we recommend do not use this block or commands

6)

This is the same as like the above block. But in the above block, you will be able to give commands when touched down. This is used to give commands when the user touched up.

7)



There are the sub-blocks of the button components which are used to customise the button component when some commands taken placed. For example to change the button text or colour when the user has taken his choice of colours (Theme changing option) not only for theme changing but also used to change the button size, text, colour, font style, text size etc,.
1. By clicking here you will be able to how many buttons you have added and you can select one of those to edit as like below

2. By clicking here you will find the all customisable option of the button component as shown below.



We are not going to explain about this option here because these all are explained in the designer tutorial of button component.if you don't know about these options you can know all details in button design tutorial.

8)

This is the main block that is used to change or customise the button component design, for example when a user clicked on the button then the text in button should be changed to some other text then this block is used to command like this example is given below.

Here we commanded when the user clicked on a button then the text in button will change to xxxxxxx
like this, we will be able to give so many commands.
These are the all customisable option it has.
These are all button blocks that are used to command and design the button.

Happy tHunking 😎😎

Post a Comment

0 Comments