APP INVENTOR

EXAMPLE 8: TIMER

The post-obit tutorial volition bear witness how to set up a timer in your app. The label is going to show the time passing. In addition, when the timer gets to 5, the screen background color  volition change and when it gets to 10, a new screen will open.

DESIGNER SECTION

one. Add a Label to your Screen and change its text to "0"

two. Change the alignment options of the screen to "center" so that the characterization will exist displayed right in the heart of the screen

3. Go to Sensors department and add a Clock. As you tin can see, this object is included as non-visible component. Cheque its properties: TimerInterval should exist set to 1000 and both boxes should be ticked.

4. Click on "Add Screen" on top of the viewer to add Screen2.

BLOCKS Section

1. The commencement affair to practice is calculation the lawmaking for the clock, that is when the clock starts to count, we desire the label to display the time passing. So, we need to click on "Clock" and add: 

                                  when Clock1.Timer                                                  exercise

two. Equally we said to a higher place, the label must mirror the time passing and so we need to include the block of code which makes the label change according to the seconds. Click on characterization and add:

                                  set Label1.Text to

Then click on Math and attach the block for sum to the previous lawmaking. In the first empty space, drag "Label1.Text", which is included in the Label section. In the second empty infinite instead, add the block "0" you detect in Math and change information technology to 1.

In this fashion, the label text will alter according to the timer and it sets to increase past one every 2d.

3. Now nosotros want to change the screen groundwork colour to red when the timer gets to 5. We need an if statement to insert our condition. Go to Control and add together the "if then" cake. Then click on the setting icon and cull "else".

Let's add the first status. Click on Math and attach the cake "…. = ….." to the if clause. In the first empty space, attach "Label1.Text" that you notice clicking on Label. In the second space, include our boundary to fix the background colour to red, that is fourth dimension must be on 5 seconds. Add the "0" block from Math and change its value to 5.

Now, we merely need to add the argument after "then". Become to Screen1 and drag: 

                                  set Screen1.BackgroundColor to

Go to colours and attach the red label to it.

4. What was the second condition? When the timer gets to 10 seconds, we desire to open a 2nd screen. So, allow's add the blocks for the "else" clause. Just copy and paste the block you lot attached to the if clause and set the number to x. And then, click on Control and add the block: 

                                  open up some other screen screenName

As its name is a cord, drag an empty block from Text and write the name "Screen2".

5. Finally, we just need to set the groundwork color for the 2d screen to white. Get to Screen2, click on information technology in the left side carte and add: 

                                  when Scree2.Initialise                                    practice

Then, always from Screen2 section, add: 

                                  set Screen2. BackgroundColor to

At present you lot just demand to click on Colors and add together the white label.

Now run your app with Emulator!

You can download the projection here.