For our app, we are asking the invited guests to provide their names, the total number of guests, and the food or drink to share at the potluck. Once a guest presses the Send RSVP button, something magical will happen. We will push all the data from the app to the Fusion Table that we created.
In Chapter 5, Building an Event App we created the RSVP_Screen and now we will build the GUI (Graphical User Interface) that the guests will use. Navigate to the RSVP screen in the Designer window. The screen is empty except for the background pool image and the navigation buttons that we added along the bottom.
Since you have already gained experience adding various components in the previous chapters, we are pretty confident about your abilities. Of course, we will help specify which components to use! The guest provides three pieces of data here: the name, the number of guests, and the item to bring. We will place all the components related to these three pieces of data within a VerticalArrangement for a streamlined look. Hence, the first component to add is: VerticalArrangement. Drag it to the Viewer and set its Height and Width properties to Fill parent.
To collect the first piece of data, the name, add a Label and below that a Textbox by dragging them onto the Vertical Arrangement in the Viewer. Rename the Label to NameLabel and change the BackgroundColor property to Dark Gray. Check the FontBold property and change the Text property to Name.
Similarly, rename the Textbox to NameTextBox. Change the Width property to Fill parent. Type Enter your first and last name for the Hint property.
For the second piece of data, the number of guests, add a Label and another component called ListPicker (found just below the Label component in the User Interface palette). Drag the Components onto the VerticalArrangement underneath the Label and Textbox. Rename this Label to GuestsLabel. Change the BackgroundColor property to Dark Gray, check the FontBold property and change the Text property to Number of guests (including you).
We will use the ListPicker Component to track the number of people attending when a guest submits an RSVP. The ListPicker is a button that, when clicked, opens up a list of items from which a user can select. Rename the ListPicker to NumGuestListPicker. We will make just two changes to the ListPicker properties. Put 1,2,3,4,5,6,7 as the ElementsFromString property. These are the items what we want displayed when the user clicks the NumGuestListPicker. We are assuming the number of guests (including the person who is completing the RSVP) is in the range 1-7. You can add more or fewer guest options as you wish.
Just remember that the comma-separated numbers that you specify are the options that the users will be able to select from. Finally, make the Selection property 1. This means that, if the user does not choose a number from the NumGuestListPicker, the default value of 1 will be used to count the user who sent the RSVP.
Finally, we will add a Button and rename it to SendRSVPButton. The user will click this button to send the RSVP after completing the form. Just as we did for the labels, make the BackgroundColor dark gray, and insert Send RSVP as the Text property.
Next, drag the FusiontablesControl component from the Storage Palette drawer to the Viewer. (Notice how the FusiontablesControl1 component drops down below the Viewer, because it is a non-visible component.) After you have added all the components, the RSVP_Screen will resemble the following screenshot:
This completes the GUI for the RSVP_Screen. In professional programming lingo, this is also called creating the frontend.