Multi-Screen Apps

You may imagine that a typical app has a number of "screens" or views that a user goes through as part of using your app. Below is a typical example with a welcome screen, a screen that plays a game and a game over screen.

What's a screen, anyway?

A screen is just a UI element like anything else in Design Mode. But it has a few special properties:

  • A screen is a UI element that contains other UI elements.
  • Only one screen can be visible at a time
  • Only elements that "belong" to a screen are visible when that screen is active.
  • Even though your design elements might be spread across multiple screens, your code is all in one place.

How to Make a new Screen

There are two ways to add a screen to your app. First, make sure you're in Design Mode.

  1. Either choose New Screen... from the pulldown menu at the top of the display area. Note: you also use this pulldown menu to switch between screens in design mode.
  2. Or drag and drop a Screen UI element from the toolbox. Heads-up: As soon as you release the screen element, the app will show you a new blank screen. You can get back to other screens using the pulldown menu at the top.

Set a Screen's Properties

  1. Use this pulldown menu to select the screen you want to work on. The list will contain the IDs of all the screens you've created.
  2. Click on a blank area of the background to select the screen and set its properties.
  3. Screens also have IDs. Like other UI elements, it's a good idea to give your screens descriptive and meaningful IDs. It makes writing code so much easier.
  4. If your screen is full with UI elements and there's no blank area to click to select it, use this pulldown menu. It lists all the UI elements that are part of this screen, including the screen itself.
  5. Click this button to make this screen the "default screen" which means the screen that will show first when the app is run.
  6. Screens don't have many properties but you can set the background of the screen to a color or an image. Images are stretched or squeezed to fit the screen.

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