Setting a timed event

The following steps will help you setup an event that will trigger some action on the screen and change it based on your requirements after a given interval.

For this example, I will show how to handle an empty string submitted to a variable, and at the same time show an error to the user that will remove itself after 5 seconds.

TimedEvent

You will need the following components in the Viewer. Drag them to the Viewer from the Palette area.

Component Type  Palette Group   What you’ll name it  Purpose of Component
Label Basic NotificationLabel This is where the error will show up
Button Basic SubmitButton The submit button
TextBox Basic TextBox1 This is the user input field
HorizontalArrangement Screen Arrangements
HorizontalArrangement1 Arrange submit button and textbox
Label Basic Debug Will be used to display what was entered
Clock Basic Timer This will handle the removal of the error
  • In the viewer, drag the submit button and textbox into HorizontalArrangement1
  • Set NotificationLabel text to blank. Leave it empty. Uncheck Visible
  • Set SubmitButton text to Submit
  • Set TextBox1 hint to enter something…
  • Set Debug text to You entered:
  • Uncheck TimerEnabled on Timer
  • Uncheck TimerAlwaysFires on Timer

Open the Blocks Editor to add behaviors.

  • Drag out when SubmitButton.Click from My Blocks –> SubmitButton
  • Drag out set Debug.Text to from My Blocks –> Debug and plug it in
  • Drag out TextBox1.Text from My Blocks –> TextBox1 and plug it in Debug.Text

This is about as simple as it gets. When the user clicks the submit button, anything entered in the text field will be displayed below in the Debug label area.

TimedStep1

If you have a phone connect or using the emulator, try it out to see how it works.

For now it will display whatever you enter. If you leave it blank, the label in Debug will be replaced with a blank space. In this example a null entry will also NOT produce an error. However, when working with more advanced programs you will find that you run into situations where submitting a null value will throw an error. So we want to be able to handle this type of event so that one, there is no error and two, the user is notified what went wrong.

  • Drag out when Timer.Timer from My Blocks –> Timer
  • Drag out set Timer.TimerInterval from My Blocks –> Timer and plug it into Timer.Timer
  • Drag out number 123 from Built-In –> Math and plug it into TimerInterval. Change the number to 5000
  • Drag out set NotificationLabel.Visible to from My Blocks –> NotificationLabel and plug it in under TimerInterval
  • Drag out false from Built-In –> Logic and plug it into NotificationLabel.Visible
  • Drag out set Timer.TimerAlwaysFires to and plug it in under set NotificationLabel.Visible to
  • Drag out false from Built-In –> Logic and plug it into set Timer.TimerAlwaysFires to
  • Drag out set Timer.TimerEnabled to from My Blocks –> Timer and plug it in under NotificationLabel.Visible
  • Drag out false from Built-In –> Logic and plug it into TimerEnabled

Now we just need to setup a conditional event when the submit button is clicked.

  • Drag out ifelse test and plug it into when SubmitButton.Click
  • Drag out the equals block from Built-In –> Text and plug it into the test socket
  • Drag out TextBox1.Text from My Blocks –> TextBox1 and plug it into the first socket in the equals block
  • Drag out text text from Built-In –> Text and plug it into the second socket in the equals block. Remove its value
  • Drag out set NotificationLabel.Text to and plug it into then-do
  • Drag out text text from Built-In –> Text and plug it into  set NotificationLabel.Text to. Set its value to, You have not entered anything.
  • Drag out set NotificationLabel.Visible to from My Blocks –> NotificationLabel and plug it in under set NotificationLabel.Text to
  • Drag out true from Built-In –> Logic and plug it into NotificationLabel.Visible
  • Drag out set Timer.TimerAlwaysFires to and plug it in under set NotificationLabel.Visible to
  • Drag out true from Built-In –> Logic and plug it into set Timer.TimerAlwaysFires to
  • Drag out set Timer.TimerEnabled to from My Blocks –> Timer and plug it in under set NotificatinoLabel.Visible to
  • Drag out true from Built-In –> Logic and plug it into TimerEnabled
  • Plug the original blocks we setup set Debug.Text to TextBox1.Text into else-do

The final blocks should look like this:

 

TimedStep2
Here is what happens. If you leave the textbox empty and press submit the .Click event will fire and will execute the ifelse statement, which says. Test to see if the .Text field has no text and if that is true it will move to then-do and set the text for your notification label, set the label to visible and finally activate the timer. At this point the instructions in the Timer block will execute and first set the interval to 5 seconds, then hide the notification label, and finally turn itself off. At this point it will exit and your user has been notified of their error, and you removed the notification without requiring any extra action from the user. Not to mention, the error would remain on screen until you explicitly hide it after some other event is triggered. Which is not really a clean way to do it. Of course you always have the option to add an OK button with your label and set the click event of the OK, to hide the label. If something was entered in the textbox, the submit button click event would go direct to else-do and show you what was entered where you placed the debug label.

Try it out and see how it works.

I don’t know why, but I found that I had to disable both the timer interval and the timer enabled on the component screen for this to work. I thought that simply disabling enabled would do the trick, but it was inconsistent. Sometimes it would work, and other times it wouldn’t. When I toggled both in my app, it appeared to work every time.

You may also like...