(AIS) Multiple Screens Lesson

Multiple Screens

Most apps have multiple screens that contain information. You can create multiple screens in App Inventor; however, only one screen can be open at a time. Building an app with multiple screens is a lot like creating several individual apps. Every screen that you create has its own components in the Designer window.

Using Screens

To create another Screen, click the Add Screen button in the Design View. You will then be prompted to name the Screen. 

add screen UI with dropdown: Screen1. (dropdown into) Screen1 Screen2 Screen3 Add Screen... Remove Screen

This is an example of the Design View for 3 different screens.

multiple screen UI: Screen1 Go to Screen 2 Go to Screen 3 Screen2 Home Screen 3 Close Screen3 Home Screen 2 Close

In Screen1, Button components are created that when clicked will take you to Screen2 and Screen3. Buttons are created for Screen2 and Screen3 to go back and forth between screens as well. When the close button is clicked, it will return to the screen that opened it.  

In the Blocks Editor, you will be able to see only the components of the screen currently selected. Similarly, the blocks of code related to a screen cannot refer to blocks of code in another screen.

The Control built it drawer has commands for programming the Screen.

code block: open another screen screenName open another screen with start value screenName { } startValue { } get start value close screen close screen with value result { } close application get plain start text close screen with plain text text { } when Home.Click do open another screen screenName Screen1 when Screen2.Click do open another screen screenName Screen2 when Close.Click do close screen

To share data between screens you must use the TinyDB component. The components and variables in one screen are not available to another screen. You will have a TinyDB component created on each screen, but since there is only one database, they point to the same TinyDB database.

Screen.Initialized

Each screen will use the Screen.Initialize as shown in the blocks below to read the current values in the database.

when SubmitButton.Click do set AnimalLabelâ–¾.StoreValue tag animal valueToStore AnimalTextBox Text set AnimalTextBox.Text to { } when Screen1.Initialize do set AnimalLabel.Text to call TinyDB1.GetValue tag animal valueIfTagNotThere cat

Creating Procedures for Specific Events

You can also create a procedure to go to another screen and close the current screen. You need to create a parameter called screen. To create parameters for any event block, click the blue icon and drag an input into the do area. It will add a parameter that you can rename. Use the call command to execute the procedure.

code block: input: x inputs input: screen when Button3.Click do call goToScreen screen Screen3 to goToScreen do if true then screen open another screen screenName get screen close screen

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION