Now that we've designed most of the user interface of the Event app, we will switch to the Blocks editor to program our app. Click on the Blocks button in the upper-right corner of the Designer. You will find that throughout the building of this app (as with any app), you will go back and forth between the Designer and Blocks editor.
In the Blocks editor, we will code the navigation buttons to launch the appropriate screen. For example, when the user presses the Info button, we want the app to open Info_Screen.
In the Blocks Editor, make sure you are on Screen1 by verifying that Screen1 (and not one of the other screens) displays on the menu button. In the Blocks palette under HorizontalArrangement, you will see a list of the buttons that you just created in the Designer. (Notice how the button names are indented underneath HorizontalArrangement, this is a visual cue to remind you that they are contained within the HorizontalArrangement Component.) If you don't see all of the buttons displayed in the Palette, click on the plus sign to the left of HorizontalArrangement, it will toggle to a minus sign and display those items (in this case, 5 buttons) within.
- Click on InfoButton to reveal the blocks drawer and choose the first gold block when InfoButton.Click.
- Under the Built-in blocks, click on the gold Control blocks and scroll down to the open another screen screenName block. Insert this block into the when InfoButton.Click block.
- Add a blank pink Text block to it and type
Info_Screeninto the blank. Connect it to the open another screen screenName block. - Repeat these steps for RSVPButton and GuestsButton.
For MapButton, we won't be opening another screen; instead we will be launching the ActivityStarter (that we have already set to open Google Maps), as follows:
- In the MapButton drawer, select the first block, when MapButton.Click.
- In the ActivityStarter1 blocks drawer, select the purple call ActivityStarter1.StartActivity block. Connect the two blocks together.
- The following screenshot shows all of the previous steps:
If you think about it, all the buttons on all the screens will do the same thing. Instead of rebuilding the exact same sets of blocks for all of the other screens, we can use the Backpack tool. There is a little backpack icon in the upper-right corner of the blocks Viewer, as shown in the earlier screenshot. This tool enables you to share blocks between screens and projects (note that the Backpack empties when you sign out).
There are two ways to add blocks to the Backpack. They are as follows:
- You can drag the blocks directly to the Backpack (the simplest method).
- Or, you can right-click on block you want to add (similar to copying or pasting blocks, right-clicking to add blocks to the Backpack, will add all attached blocks). For example, right-click on the when InfoButton.Click block (or on a Mac, click on the control button on the keyboard while clicking on the event block) and a drop-down list will appear, as shown in the following screenshot. Select the fifth option, Add to Backpack; this will add the three blocks in this set (if you have your computer's sound on, you will hear an indicator sound).
The first time you do this the number in the parenthesis in the drop-down list will be 0 (as shown in the preceding screenshot). But after you add the first set of blocks to the Backpack and repeat the step for the next set of blocks, the number will increase. This number lets you know how many times you have added blocks to the Backpack.
Add the three other block sets to the Backpack, in the method you choose. After adding the blocks, click on the Backpack to reveal the four block sets you have added, as shown on the right-hand side of the following screenshot. Click on any white space in the Viewer to close the Backpack:
Now we can switch screens and retrieve our Backpack blocks. Click on the Screen1 button above the Viewer to choose another screen from the drop-down list. Select Info_Screen.
If you think about it, we only need three of the four sets of blocks we added to the BackPack. We don't need the InfoButton blocks because we are currently on the Info screen, so we don't want the InfoButton to do anything. To make a button not active or not do anything, we simply don't create any blocks (code) for it.
Adding blocks from the Backpack works in exactly the same way as adding blocks from a drawer. Click on Backpack to reveal the selection of blocks you've added and click on the RSVPButton block. You will see that they those blocks appear on the Viewer. Repeat the steps to add the GuestsButton and the MapButton blocks from the Backpack.
We didn't need to create the HomeButton blocks when we were on Screen1 because that is essentially the Home screen. But, we do need to activate the Home Button on other screens so users can navigate back to Screen1 (or Home). let's do that now that we are on the "Info_Screen. Copy and paste any event block on the screen and then click on the gold arrow to the right of the button name. It will reveal a drop-down list of all the buttons; choose HomeButton. Change the text in the pink Text block to Screen1. Your blocks for Info_Screen should look as like the following image. Repeat the same steps to add the Home Button blocks to the RSVP_Screen and the GuestList_Screen::
The purpose of Info_Screen is for the organizer (you) to provide guests with information about the event. This screen would display static text, but it could easily be updated. Let's switch back to the Designer.
An easy way to add text to a screen is with a Label. (Alternatively, you could also create the text on your computer using Photoshop or Gimp (or another design tool) and save it as an image file (JPG or PNG) and upload it to App Inventor using the Media tool). You will find the Label component in the User Interface drawer. We are going to create eight lines of text, so drag a Label onto the Viewer and repeat this seven more times. In the Properties panel, type your information in the text box under Text. You can copy our formatting for font, color, and layout, as shown in the following screenshot, or design your own:
