Creating Apps with Multiple Screens

refer to: Colored Dots for App Inventor 2

A new addition to App Inventor, that was introduced in Release 42, Dec 20, 2011, is the ability to create apps with multiple screens. Creating such apps is not very different from creating apps with only a single screen. In fact, you should think of this process as creating several stand-alone apps which communicate by sending messages to each other.

Every screen that you create has its own components in the Designer window. In the Blocks Editor, you will be able to see only these components and none of the components from the other screens in your app. Similarly, blocks of code related to a screen cannot refer to blocks of code in another screen.

Important note: None of the components, variable definitions, and procedures that you define in one screen will be accessible from a second screen.

To explain how to build an app with two screens, we will use the running example of an app titled ColoredDots. ColoredDots is similar to PaintPot, but it uses a second screen to allow the user to create new colors by providing values for the basic colors red, green, and blue. In the PaintPot app, a user can only paint with one of the three predefined colors. Adding more colors would have reduced the amount of space available to painting, requiring new buttons on the screen. In ColoredDots, the ability of choosing a new color is implemented with a second screen, Settings. Once a new color is created, its value is passed to the first screen through a message.

These are the two screens for the ColoredDots app:

Working with the Main Screen (Screen1)

When you create a project, App Inventor automatically creates the main screen and names it Screen1. While you can change its title in the Properties pane, the Rename button for Screen1 is disabled, so the only way to refer to it is as Screen1. In the following image, you see a screenshot of the Designer window when Screen1 is selected. You can notice that Screen1 is selected because the button Screen1 (highlighted with a red circle) is in a dark-green color.

As you can see in the Components pane, only the components that belong to Screen1 are accessible. Additionally, in the Blocks Editor, you will only find these components as well, as the below image shows. The shown code, implements the basic behavior of the main screen.

Notice the title shown in the top right corner of the window: ColoredDots - Screen1. Always check that title, to make sure you are looking at the code for the correspoding screen that is open in the Designer window.

Adding a new screen

To add a new screen to your app, you click on the Add Screen button in the top toolbar of the Designer window, see left-side image below. A dialog window will appear, in which you can provide a name for the new screen as shown in the right-side image below.

Important Note: You should change the name of the screen to something meaningful in the moment you add a new screen to the app. Once a screen is added, its name cannot be changed.

Working with the new screen

When you create a new screen, the Designer window switches content to display the new screen. At the beginning there will be no components in it. You continue adding new components as you do whenever you create a new app. The image below shows the Designer window for the SettingsScreen after all its components have been added.

When you switch to the Blocks Editor, you will notice that only the components for the SettingsScreen are shown, and you can write the code to implement its behavior.

Now that we know how to create multiple screens, let's explain how the two screens with communicate with each-other.

Communication between screens

Most of the methods needed to implement communication between screens are found in the Control drawer in the Blocks Editor. Additionally, there is an event handler OtherScreenClosed for the screen components.

The arguments to such methods and the event handlers are always text, either the screen name, or a message. While it is possible to pass as arguments other data types, such as numbers or lists, their values will be automatically converted to text.

Here are examples of using the open/close methods in our app. The method open another screen is used in Screen1 by the event handler SettingsButton.Click. The close screen methods are used by the two buttons of the SettingsScreen.

Then, in the code of Screen1, we need to make sure that the event handler OtherScreenClosed is fleshed out. Below is the code for Screen1. In the resultblock the color value from the closed SettingsScreen is passed, and then used to change the paint color for the Canvas1 component. Notice that since we have only one other screen, we didn't use the argument otherScreenName. You will need to check its value whenever there are more than one other screens reporting back to this screen.

Known Problems

In the current version, it is not yet possible to test the multiple-screen app in the development mode. You can test each screen separately, but you cannot test the communication between two screens. You will receive a message as shown below:

In order to test whether the screens are talking to each other, you need to Package for Phone and open the installed app.

Miscellaneous

• You might have noticed the procedure CheckColorValue used in the event handler for TestButton. It was used in order to avoid bugs that will be introduced if the user forgets to enter a value in one of the text boxes (or all of them), or enters a meaningless number (values must be between 0 and 255). Since we cannot rely on the fact that users will be careful, we check for those values with a dedicated procedure, see its code below:
  
• Our Settings screen currently returns only one value, for the paint color. Usually, in a settings screen, we might have several options that can be changed. For example, in our app, we could have an input field that allows us to change the radius of the dots, or the addition of a background image for the canvas. Because the messages communicated between two screens are text values, you will need to write extra code to make sure that you handle additional data properly. Below is the code for the two screens, if we add a second setting in our app that allows the user to enter the radius for the dots. Notice the use oflist to csv row and list from csv row to convert the list to text and the text to list.
• You can achieve the same result by using TinyDB. That is, you store the setting values in the TinyDB and then read them in the next screen. However, in order for this to work, you will need to have a TinyDB component in every screen you create, since the screens cannot refer to each other components.
• One of the methods available for screen communication is open another screen with start text. To use this start text in the new screen, in its Screen.Initialize event handler, you will need to call the method get start text.