The updateScreen() Pattern

Name Code (Block) Code (Text)
The updateScreen() Pattern

How does it work?

Many App Lab projects run in the following way.

  1. The user interacts with a screen element (like clicking a button or typing in a text box). This triggers an event handler.
  2. The event handler changes the values stored in variables.
  3. The information on the screen is updated to reflect the change to the variable.

Typically every one of your event handlers (onEvent blocks) will include identical code for step 3, updating the screen. To avoid this problem, make a single function called updateScreen that includes the code to change every element on your screen once variables have been updated.

You will usually want to call updateScreen inside of every event handler and will also want to call it once at the beginning of your program. This ensures that the same code is always being used to update the information that shows up on the screen.

Found a bug in the documentation? Let us know at documentation@code.org