In this book, we showed you how to find and select blocks in the Blocks Editor. But, if you already know the block you want, there is a quick way to get it. All you have to do is click anywhere on the white space of the Viewer window and start typing. For example, if you want the When GuestsButton.Click event block, begin typing the word when and a drop-down list will appear, allowing you to choose the block you want among other blocks beginning with wh. Once you select the block, it will appear in the Viewer.

We didn't give you this shortcut initially because we wanted you to become familiar with where blocks were housed and how they were grouped (not because we wanted to make you work harder).

There are a variety of ways to get help while you are using App Inventor. In the Designer, you may or may not have noticed little questions marks on the right-hand side of the Components Palette, as shown in the following screenshot:

Clicking on a question mark launches a popup with information about a Component, as shown in the following screenshot:

At the bottom of the window, you will see a More information link that will further direct you to documentation about that Component.

In the Blocks editor, you can easily find information about the blocks by hovering your cursor over a block. As shown in the following screenshots, hovering over different blocks launches a message revealing the block's purpose or type:

Another way to get help with App Inventor is to click on Guide in the top menu bar, as shown in the following screenshot:

The Guide button will direct you to the App Inventor library of documentation. You can also access this website through http://appinventor.mit.edu/explore/library.

If you can't find an answer to a question or feel stuck, the App Inventor Forum is a way to interact with other users who have a wealth of experience with the platform. The link to the forum is found in the Guide documentation under Support and Troubleshooting.

While you can't change the name of Screen1, you can change the title of Screen1 (or any screen for that matter) so that a different name will appear to the user. By default, Title is the name of Screen1 (or if you are on a different screen, it will populate the screen name that you chose when creating the screen). Make sure you are on Screen1 (if you have multiple screens) and select Screen1 from the Components panel so that it is highlighted. Then, scroll to the very bottom of the Properties panel, as shown in the following screenshot. You will see the option of Title. Click on "Screen1" in the text box below; it will highlight the name and allow you to rename it. You will see the changes reflected at the top of the Viewer and also when you view the app on your device. You can retitle any screen with this method.

Currently, App Inventor has a 5 MB limit for the size of apps. This will not affect many of you at this point; but as you move farther along in your app development and create more complex apps, you may push up against this size limit. One thing that can help is reducing the size of any images. Be mindful to not use high-resolution images when creating your apps, as they take up a lot of space.

In Chapter 5, Building an Event App, and Chapter 6, Introduction to Databases, we created the Event App that used four different screens. While being able to organize all your components in different screens is great for creating the visual hierarchy that any well-built app has, increasing the number of screens will ultimately increase the app's memory footprint, thereby reducing the performance. A small number (five or six) screens in an app is just fine. But as you keep on increasing the number of screens, you will get to a point where the app will start running a bit slow.

There is a workaround to have just one screen, but still have the visual hierarchy and the separation of components that you get by using multiple screens. The trick is to show or hide different components at different times to give the app user an illusion of multiple screens.

Let's say we are designing a simple form in our app. This form has two screens. In the first screen, the user types his/her name in a textbox and presses a button so that the name gets added to some sort of data storage (list, TinyDB, Fusion Table, and so on). When the user presses the button, the second screen opens up and shows a confirmation message. The second screen also has a button to go back to the first screen.

Instead of creating two separate screens, we can create this behavior using a virtual single screen. The following screenshot shows all the components and how they are placed:

The interesting thing that you might notice is that we have placed all the components within two different vertical arrangements. We have placed all the components that we want on Screen1 in VerticalArrangement1 and all the components that we want on Screen2 in VerticalArrangement2. When the app starts, we will keep VerticalArragnement1 visible and hide VerticalArrangement2 (hiding, or making it invisible, automatically makes all the components inside a vertical arrangement invisible too). Then, whenever the user presses the button to enter a name, we will hide VerticalArrangement1 and show VerticalArrangement2. Subsequently, when the user presses the button to go back, we will show VerticalArrangement1 and hide VerticalArrangement2.

In other words, we will toggle between showing one of the vertical arrangements and hiding the other. This will give the user an illusion of multiple screens even though the app has a single screen.

Let's explore all the details of this. Here are the steps that you need to implement in the Designer:

Switch to the Blocks Editor to create the behavior—toggling between showing and hiding the two vertical arrangements to create the illusion of multiple screens. Follow these steps:

When you test this app or when the app first launches, you will see VerticalArrangement1 and all its components, as shown in the following screenshot:

When you enter a name in TextBox1 and click on the button that says Enter, you will see the following screenshot:

Finally, when you click on the button that says Go Back, you will see what you saw first when the app launched. This is how you create an illusion of multiple screens while actually only having a single screen, thereby reducing the memory requirements of the app and making the app more efficient.

App Inventor automatically saves your app as you are creating it. Even though you will see a Save project option under the Projects menu, rest assured that your app is regularly saved by the platform. However, as you build apps, saving a copy of your progress is extremely important in case you want to revert to an earlier version or, for example, you wish to examine your code before you encounter a bug to determine what went wrong. One option in the drop-down list under the Projects menu is Save project as… (as shown in the following screenshot on the left-hand side). This option lets you create a second copy of your project with a new name. Then, the new copy will become your current working project.

On the other hand, using the Checkpoint option regularly throughout development provides a way to create backups in a systematic manner while continuing to work on the same version of the app. When you choose Checkpoint (as shown in the following screenshot on the right-hand side) under the Projects menu, App Inventor will seamlessly create backups behind the scenes. For instance, our Event App versions would be saved as EventApp_Checkpoint1, EventApp_Checkpoint2, and so on. This way, you can open any version of the Event App at varying stages throughout development. Once you finish your app and create your final version, you can delete the Checkpoint versions, as you will no longer need them.