App Screen Templates for App Inventor 2

The following Resources are for use with MIT's App Inventor 2 (http://appinventor.mit.edu/explore/ ).  The .AIA files need to be first saved to your local computer and then imported under the "Project" pull down of App Inventor 2.  I hope these work out for you.

Using Screens:
There are two different approaches to accomplish Screens using App Inventor.  One uses the actual multiple Screens functionality of App Inventor, that requires some work arounds: 
  1. Unfortunately going between Screens do not work reliably with the AI Companion (emulator) during development; it is best to build and install the .apk to to your device to test it.
  2. Global Variables are not accessible to other screens, so data has to be stored in a TinyDB to share it across pages.  I have added a demonstration of this below. 
  3. Initially it appeared that one could not close the current screen when going to a new screen; so they kept layering on top of each other, which can be confusing and does not seem ideal.  However, a work around has been proposed allowing one to open the new window and close the previous one that I have integrated into the examples below (SCREENEXAMPLE.AIA) using an "if true"; much thanks much to our PSCSTA teachers who helped uncover this work around.
A more straight forward solution is to use a series of Vertical Layouts and to represent each page, and selectively make "visible" only one Layout on at a time, hiding the others.  I have sample .AIA files for both of these approaches to get you started in App Inventor here:

Using Screens Functionality:
The SCREENSEXAMPLE.AIA sample file has three screens and demonstrates how you can use buttons to go to new screens to traverse between the three of them.  When a button goes to a new page, it also closes the previous screen using an "if true" statement to allow both the new open and current close to occur; if you want the existing screen to remain open you can adjust the blocks.  NOTE: Opening and Closing of screens is under the Built-In "Control" blocks.
To see an example of how to pass data from one screen to another, the SCREENSWITHDATA.AIA has been added.  It also has a few comments added to help guide one to understand Screens.

Using Multiple Templates for Screens:
By setting up a series of Horizontal Layouts to be each of your App's Pages, you can then control them by making only one visible at a time (.Visible = True) and all others hidden (.Visible = False).  The LAYOUTSCREENMENU.AIA sample file has three page vertical Layouts that are controlled by a top row of three buttons (in a Horizontal Layout) that serve as the App's menu.  Similarly those menu Buttons could be moved into each of the Layouts to simulate a button going to the next page (or Layout in this method).  For variety I have added an image, check boxes, and a WebView of our class stie to each of the pages to distinguish them.  

ċ
LayoutScreenMenu.aia
(21k)
Garfield Apps Class,
Jan 20, 2014, 10:33 PM
ċ
ScreensExample.aia
(25k)
Garfield Apps Class,
Mar 16, 2014, 8:02 PM
ċ
ScreensWithData.aia
(28k)
Garfield Apps Class,
Mar 16, 2014, 8:30 PM
Comments