Chapter 1: Building Your First App While Exploring the Interface

In This Chapter

• Becoming familiar with App Inventor’s interface

• Learning App Inventor–specific terminology

App Inventor is an incredible new system from Google that allows Android applications to be designed and programmed with a Web page and Java interface. With very little programming knowledge, you can use App Inventor to create simple applications for yourself and your friends. With continuing experience with App Inventor, you can create very complex and powerful applications with App Inventor.

If you have ever had a flash of brilliance and thought, “There should be an app for that!,” take heart. App Inventor makes it possible for you to create that app. If you don’t yet have that incredible and exciting idea for an application, building the projects in the following chapters is very likely to spark an idea for your own Android application. I recommend keeping a notebook nearby to jot down application ideas as you do each of the projects. Many applications that are built with App Inventor are person- or group-specific. Your church, civic group, or circle of friends could well benefit from a common app that may exist but is not tailored for your group. Keep in mind that you don’t have to reinvent the wheel, but you can invent a nicer custom wheel with custom engraving and nice spinners.

If you have not signed up for an App Inventor account, you need to sign up at "http://appinventor.googlelabs.com/. You need to have a Gmail or Google Apps account to sign up.

If you have not set up your computer and phone to work with App Inventor, turn to Appendix A and follow the steps to get set up for App Inventor programming.

Starting a New Project

To get started creating a project, start by logging into App Inventor with the account that you signed up with. If you have never logged in to App Inventor before, you see the About or Learn pages of the App Inventor Web site. Depending on whether you have logged in before and created a project, you may see the My Projects view or the Design view. If you are in the middle of building a project, App Inventor remembers the last loaded application and starts in Design view.

In this chapter and Chapter 2, you start your first project, a simple soundboard that plays a single sound when the user taps a button on the user interface. I have chosen this as a starting project instead of a traditional “Hello, World” app because App Inventor is very untraditional. It lets you do so much more, so quickly.

To start a project from the My Projects view, follow these steps:

1. From the My Projects page (shown in Figure 1-1), click the New button. This brings up the New App Inventor for Android Project dialog box.

2. When prompted, type SounDroid (or any other name you like) in the Project Name field. Keep the project name descriptive of what you are trying to do until you are completely done with all the flashy awesomeness. At the end, you can use Save As from the Design view and give your app a cool marketing-oriented name like Appzilla, but for now, a catchy name like Appzilla won’t help you pick the app out of the crowd of apps and test projects you may soon have in your My Projects screen.

3. Click OK.

The Design view screen loads with a blank project, as shown in Figure 1-2. This is where you start placing design elements and components for your app. I explore this view thoroughly in the “Getting Familiar with Design View” section later in this chapter.

The blank rectangle in the center of the screen is known as the Viewer. It’s roughly analogous to the screen of your phone. You can see a notification bar with battery, time, and network icons in it, just like your phone has. Still, you must remember that what you see in Design view is not what you will see on your phone. This is why you should start designing your application with your phone connected to your computer and App Inventor connected to your phone. You need to test your app on a real phone. Follow these steps to connect everything and get ready to test:

1. Connect your phone to a USB port on your computer. By connecting the phone to App Inventor and then returning to Design view, you can drop buttons, pictures, and text fields onto the blank canvas and see how they will look when the application is complete.

2. Open the Blocks Editor by clicking the Open the Blocks Editor button, as shown in Figure 1-3. This launches the Java Web start program that is the Blocks Editor. Your browser downloads a Java file and, hopefully, also starts it.

Java Web Start programs are applications that launch from your Web browser, but run as separate programs. The Blocks Editor is a part of App Inventor that runs separately from your browser. If you have trouble starting the Blocks Editor Java Web Start program, refer to Appendix A for set-up and troubleshooting help.

3. If the Blocks Editor doesn’t start automatically, find the file you downloaded in the previous step and double-click to start it. If you receive a security warning, select the Always Trust Content from This Provider check box and click OK.

If these steps do not work for you, turn to Appendix A to find out how to set up your phone and computer. Likewise, if you have trouble starting the Blocks Editor, see Appendix A for help with setting up Java for your computer and browser.

App Inventor application programming consists of two interfaces: the Design view and the Blocks Editor. Programming in App Inventor is done with colorful blocks that are designed to snap together like puzzle pieces. The blocks are like words that, when snapped together, form sentences of instruction to your phone. The Blocks Editor is the interface that allows you to put all those puzzle pieces . . . er, blocks . . . together. We explore the Blocks Editor in more detail later in the section, “Introducing the Blocks Editor.” For now, don’t be distracted by all the pretty buttons.

When the Blocks Editor launches, you see a Connect to Phone button in the ribbon at the top of the Blocks Editor window on the right side. Click the Connect to Phone button (see Figure 1-4). This starts the process of sending the necessary information to your phone to connect to App Inventor. After App Inventor is successfully connected to your phone, as you change the application in the Design view and the Blocks Editor, you see the changes both in design and functionality reflected on your connected phone. While App Inventor is connected to your phone, the Connect to Phone button changes to Restart Application. You may need to restart the application if its behavior on the phone does not match what you expect or it doesn’t update appropriately.

When you see the white blank screen appear on your phone, you can minimize the Blocks Editor and switch back to Design view in your browser.

Getting Familiar with Design View

Putting together a complete App Inventor application requires two major steps. First, you use the Design view to add components to your project. Some of the components you add are visible, such as buttons, labels, and text fields. These visible components make up your user interface. The user interface (or UI) is the part of the application that your user interacts with. The other kind of components you add from the Design view are functional but non-visual components, such as those for database functionality and screen arrangement. In the following sections, I help you explore the interface as you put together your first application.

The Design view is laid out in five basic columns from left to right:

• Palette

• Viewer

• Components

• Media

• Properties

The Media and Components columns are stacked on top of each other. In the next several sections, I go into more detail about each of the columns in Design view, but the best way to get an idea of what these columns do is to use them. Throughout the remainder of this chapter, I guide you through an example project, step by step. Take time to understand what each area of Design view does as you build the SounDroid project.

The Palette column

The Palette column contains all the components you can add to your project. It is subdivided into groups of related components, much like you would see colors grouped on an artist’s paint palette. You explore and use these components throughout this book. You can open a Palette grouping by clicking on its name. Clicking on the Social grouping of components, for example, closes the other Palette groups and exposes the Social group of components you can add to give your project social interactions such as phone calls, e-mails, and Twitter feeds. Click on each of the Palette groups to get a feel how these groups appear and disappear. As you get started, you will open and close these groups a lot until you are familiar with where the component you want is located. The Basic palette contains simpler components such as Buttons, Labels and Text fields, whereas the Animation Palette contains sprites, canvasses, and other more advanced components. For right now, click on the Basic Palette grouping to open the Basic components.

The Viewer column

Clicking on any component in the pseudo-phone display in the Viewer column makes it the active component and highlights the component name in the Components column. Making a component the active component also changes the properties that are displayed in the Properties column to the properties or settings you can set for a component.

The Components column

The Components column is a list of all the components you have added to your project. The components arrange themselves in a branching tree structure (see Figure 1-5), with screen arrangement components being the top level. When you get lots and lots of components, this structure allows you to collapse sections of the list to give freer access to some of the components.

Media column

The Media column is located directly under the Components column (see Figure 1-6). This column lets you manage all media components for your application and add any supported media type. You can upload pictures, clip art, sounds, music, or movies to the Media column. You can also add media directly to the properties of some component that uses the media using the add file drop-down list from the property. Media that is added to your App Inventor project is uploaded from your local computer to the App Inventor server. All media files that you upload to a single App Inventor project cannot total more than 5MB. (That limitation may be increased as the App Inventor project matures.)

In the Media column, you can remove or download media from your project by clicking the media name and selecting Download or Delete. Keep the names of your media concise and meaningful because you cannot rename media after you upload it to the App Inventor server. Also, very long filenames can have a weird effect on Design view by causing the Media column to expand and squash the Viewer window.

The Properties column

Every component that you add to your project has settings to change how the component looks and interacts with other components in your application. Most of the properties for your components can be set in the Properties column or changed with blocks in the Blocks Editor when a given trigger occurs in your application. For instance, when a user presses a certain button, the text content or color can be changed.

Each time you place a component that you are unfamiliar with, take a few moments to browse the fields in the Properties column. Some of the components, such as the ActivityStarter, have unique and confusing properties. Throughout this book, I explain new properties as you use them.

Adding Components to Your New Project

To add components to your application, click the component you want and drag it onto the Viewer window in Design view. The representation of your phone is labeled Screen1. Every project starts with a default component called Screen1, and its Title property or label is set to Screen1. Think of this default screen component as the blank sheet of paper on which you will design your application. All App Inventor components have settings called properties. Properties are set in the Properties column when a component is selected in the Viewer. The Block Editor can also be used to change component properties on the fly when events occur in your application. (More on that later, in the section called “Introducing the Block Editor.”) I show you how to replace the default Screen1 title with the title of your application when you get to the Properties column in this chapter. Your application name shows up where you see the text Screen1 in the Viewer. As you add components to the screen, the components fill in from top to bottom of the Viewer, not left to right. In Chapter 3, I show you how to arrange your components across the screen or vertically and how to simulate multiple screens for your application. For now, open the Basic palette grouping by clicking on it.

Currently, App Inventor does not support multiple screen components. This is a limitation that many find frustrating. In Chapter 4, I show you a clever and easy way to emulate multiple screens for your application. The development team for App Inventor is hard at work on providing the multiple screen capability.

Adding a Button component

As a demonstration, open the Basic palette and drag and drop a Button component on to the Viewer. A button shows up not only on the Viewer but also on your connected Android phone.

A button allows you to interact with the users of your application. The users tap it and things happen. Buttons, as you might well expect, play a big part in almost all applications. They provide events that you can tie actions to. Every time you drop any component onto the Viewer, a new component drawer and new blocks are added to the My Blocks tab in the Block Editor. The blocks are stored in drawers. The drawers are accessed by clicking the corresponding button on the left side of the Blocks Editor. Click over to the Blocks Editor to see the new component drawer and blocks: If you have minimized the Blocks Editor, it will be in your system taskbar. Click the icon to maximize it. If the Blocks Editor is closed, you need to open it by clicking the Open the Blocks Editor button. When you have the Blocks Editor open, you see two tabs labeled Built-In and My Blocks in the far left column of the Blocks Editor. Click on the My Blocks tab. All of the components you add to the Design view create a new component drawer. (See Figure 1-7.) Click on the Button1 rectangle to open the component drawer for your new button. All of the blocks for the button you placed on the Design view are in this drawer.

Some of these blocks answer the question, “What should happen when something happens to this button?” Others manipulate and change the properties of the button, such as its size, text, or visibility. You add the button in the Design view, but you make it react and do stuff with the Block Editor. I show you how to use these blocks to add logic and function to your new application in the section, “Introducing the Blocks Editor,” later in this chapter. For now, click back to the Design view to add more components.

Adding a Label component

Click on and drag a Label component from the Basic palette onto the Viewer screen. Once again, you see your new label show up on your connected Android phone. A label allows you to place text and display information on your screen. It also places blocks into the Block Editor that allow you change and manipulate the label properties and text. Just like with the button you placed, you can use blocks that change the label properties such as size, visibility, or text. Labels can be used to display information that your application generates.

By default, the label drops below the button you placed on Screen1. You can drag components around to reorder them on Screen1. Click on the label and drag it above the button. As you drag the label, you see a blue place indicator line, like the one you see in Figure 1-8, indicating where the label will drop when you release it.

Adding an Image component

Drag an Image component from the Basic palette onto the Viewer and drop it on Screen1. The Image component allows you to display images and photos in your application. Just like with the previous two components, adding the Image component has created a new drawer and blocks in the My Blocks section of the Blocks Editor. The image component has dropped to last place in the viewer just like the previous component did. Click the image component and drag it until the blue place indicator is between the Label and the Button and then drop it. You set the properties for the Image component, such as what image to display and what size it should be, when you get to the Properties column.

Adding a Sound component

Some of the components you add to your App Inventor projects are not visible design elements. Some of the components add other functionality for your application but will not be something you see on your phone.

Click the Media palette in the Palette column (see Figure 1-9). The Media palette contains components that can be dragged and dropped to the Viewer to add more cool functionality to your app. Click and drag a Sound component onto the Viewer. The Sound component is dropped below the representation of a phone in the Viewer, as shown in Figure 1-10. All non-visible components are dropped to this area below the Viewer. You can still select them to change their properties, rename them, or delete them. As with the other components you added, there is now a new drawer in the Blocks Editor that allows you to programmatically use its functionality and change the sound player’s properties.

At this point, your project should look like Figure 1-11, with Label, Image, Button, and Sound components. They all have default text and properties. Notice that the view on your connected Android phone is not necessarily what you see on the screen in Design view. That difference becomes even more obvious as you add more elements and arrangements to your projects. That’s why it’s a really good idea to have your phone plugged in and connected as you create the interface design of your application. Having your phone plugged in and connected is not a necessity for designing or editing the blocks. However, you only know what your application looks like and really does when the phone is connected and receiving real-time instruction from App Inventor.

Renaming the Screen component

The Screen component is renamed slightly differently from every other kind of component. Select the Screen1 component in the Component column. Anytime you select a component in the Components column, it becomes the active component and the Properties column changes to show you the component’s properties. The properties for the Screen component are fairly simple. Using the Properties column, you can set the background color, background image, whether the screen is scrollable (more on that later), and the screen title. To rename the Screen component, click in the Text field, change the screen name to SounDroid, and press Enter. Notice that the title on the Viewer and on your phone changes as soon as you press Enter.

Renaming the Image component

Make the Image component the active component by clicking it in the Viewer or in the Component column. Click the Rename button in the Component column. Rename the Image component WavPicImage and click OK. Notice that different properties are now available than were for the Screen component. You can set the image, the image width, and image height in the Properties column. Open the Blocks Editor and click the My Blocks tab, and then click WavPicImage to see the drawer for your button. There are two ways you can add an picture file for your image component. You can add the picture file directly to the image by clicking the Picture property in the Properties column and then clicking the Add button that will be displayed. Alternatively, you can add all of your pictures and other media to the Media column and then select the picture you want when you click the Picture property in the Properties column. You will add a picture for the Image component to display later, when you get to the Media column.

Renaming the Label component

Click the Label component in the Viewer or the Components column to make it the active component and then click the Rename button in the Components column. Rename the Label1 component as SoundNameLabel. You use this label to display information about your program. You can tell the label what text to display using the Text property in the Properties column, or you can add text or change the text using logic or events in the Blocks Editor.

Renaming the Button component

Make the Button1 component the active component by clicking the component in the Viewer or the Components column. Click the Rename button in the Components column and rename the button SoundPlayButton.

Renaming the Sound component

Click the Sound component below the Viewer or in the Components column to make it the active component. Click the Rename button in the Components column and rename the Sound component WaveSound in the Rename Component pop-up box. I show you how to add a sound for the sound player and an image for the Image component next.

Adding sound for the Sound component

For each of the projects in this book, you’ll need to download some project files from the companion Web site. Normally, the project files contain the application icon file and any images and sounds for the project. See this book’s Introduction for more on downloading the project files. To add sound for the Sound component, follow these steps:

1. Click the Add button in the Media column.

2. Click the Browse button in the Upload File dialog box that pops up.

3. Navigate to where you saved the Chapter 01 project files.

4. Click the file wavesound.mp3 and then click Open.

5. Click the OK button on the Upload File dialog box (Figure 1-12) to upload the WaveSound.mp3 from your project file location.

When the upload completes, you see the WaveSound.MP3 file in the listed media.

6. After the media (either pictures, sounds, or movies) is in the Media column, you can click on the media file to download it to your computer or delete it.

Adding images for the Image component

To add an image for the Image component, follow these steps:

1. Click the Image component to make it the active component.

In the Properties column, you see all the properties for the Image component.

2. Click the Picture field in the Properties column that contains the text None.

A list of available media for this component drops down, as shown in Figure 1-13. Three buttons appear at the bottom of the list: Add, Cancel, and OK.

3. Click the Add button to get the Upload File pop-up that you got in the previous section when you clicked on the Add button in the Media column.

4. Click the Choose File button, locate the WaveImage.png from your project file location, and click the file.

5. Click the Open button and then click the OK button in the Upload File pop-up.

Your file shows up in the Media column just as the media added from the Media column did. The Image component allows you to use the following image formats:

• .JPG

• .GIF

• .PNG

• .BMP

Understanding properties

Many of the components you use in App Inventor share some common properties. These properties, such as size, color, and shape, are usually set in the Properties column and left fairly static. Keep in mind that you can change many of these later using programming blocks in the Block Editor.

Think of a component’s properties as the settings that set how it looks and acts, as well as any component-specific settings such as the Picture property for the Image component. In the following section, you start setting some of these properties. The changes you make to the properties of a component may not necessarily be immediately apparent in the Viewer on the Design view.

Any properties settings that affect the look of your application should be verified on your connected Android device, not in the Viewer. The Viewer is only a close approximation of the properties settings.

Setting Image component properties

Make the Image component active by clicking it in the Viewer or in the Components column. The properties for the Image component are now displayed in the Properties column.

Click the Width property field and enter 150, and then click OK. This sets the width equal to 150 pixels. Click the Height property field, set the height to 100 pixels, and click OK. Clicking the text field for the Picture in the Properties column lets you select an image from the images uploaded to the Media column or upload a new image by clicking the Add button.

The Visible check box property is shared by most of the user interface components. At first, you might think it’s nonsensical to add a component and then make it invisible. Remember, however, that you can change these properties with the blocks when certain trigger events occur in your application. You may have a picture, for instance, that displays a “Game Over” message, but is set to invisible in the Properties column. When the user’s score in your application reaches a certain point, you display the “Game Over” image by changing the Visible property with blocks in the Blocks Editor. I cover changing properties based on Blocks Editor logic in later chapters when I delve into more advanced projects.

Any image that you upload to the Media column will have its own default size. For instance, you might upload an image that is 640 pixels by 480 pixels. The display size of most Android devices is considerably less than 640X480. You need to set the appropriate size for your images by using the Width and Height properties. Each phone has its own default pixel size and you may need to adjust the Width and Height properties to make your image look right on your application. It is a good idea to place and size images with your phone connected to your computer and connected with the Blocks Editor. This allows you to see instantly both the size of the image compared to your phone screen and how the image will look when it’s resized. Try to keep the size of your images reasonable. Both space used and upload time are valuable commodities.

Resize the images on your computer before you upload them. Most modern digital cameras create file resolutions and file sizes far too large to be of any real use in App Inventor.

Click on the Width property field. A pop-up box presents you with three options:

• Automatic: The Automatic button takes the image size from the default size of the image that you uploaded. If your image has a default size of 1,400 pixels by 900 pixels, your poor little Android phone will only show the tiniest part of the picture. It’s best to make your images close to the size you intend to use them, but an image that’s a little too large is okay because sizing it down in your Image component makes the image look better. On the other hand, sizing an image up from its native size makes it look pixelated and fuzzy.

• Fill Parent: The Fill Parent option sizes your image to completely fill the screen on your phone. Currently, App Inventor does not currently allow you to “stack” images or components, so only use Fill Parent if in fact you want that component to fill the entire screen when it is visible. You might actually want to do that with our previous example of a Game Over image. Your Game Over image could fill the screen, but be set with the Visible property unchecked. When your user fails to win your game, you could set the Visible property to true and fill the user’s phone screen with a “You has FAIL” image.

• Pixels: The Pixels option allows to you specify the size of the component in pixels. Be careful when setting Image components manually. If you change the ratio of height to width, you could end up squashing or stretching your image in disturbing ways.

Setting Label component properties

Make your Label component the active component by clicking it in the Viewer or in the Components column. When you do so, you see a lot more properties appear in the Properties column. This label displays a name for our sound on our soundboard. The Label component has Height and Width properties as does the Image component. Set the Width property of the label component to 150 and leave the Height property set at Automatic. These properties act much like the Image component’s Height and Width properties. When these properties are set to Automatic, the label expands or contracts to fit the text that the label contains.

You can see this behavior by clicking in the Text property field, typing a long string of text, and pressing Enter. The label expands to fit the text. You should see this behavior in both the Viewer and on your connected Android phone. Restricting just one dimension of the label size allows the other dimension to expand to accept the text. If you set the label width to 100 pixels and then enter a very long string of text, the label never expands wider than 100 pixels, but it will continue to expand in height to accommodate the text. The Viewer lets a really long string of text run off the edge of the Viewer if you have the Width set to Automatic. However, on your device, the label will never actually be wider than your device screen. This is another good reason to design your user interface with your phone connected to App Inventor.

Next, set the Alignment property of your label to right. The Alignment property allows you to control how the text inside your label justifies. Justification is a typesetter term for which side of the page the text is filled in from. In other words, selecting left alignment fills text in from the left side of your label. Center alignment centers it, and right alignment fills text in from the right. The Alignment property does not have a logic block to change justification/alignment in the Blocks Editor. Besides, it’s unlikely you would want to change the alignment of a label after it is set in the Design view’s Properties column.

The BackgroundColor property looks a little like a check box, but is in fact a color picker. If you click the square below the BackgroundColor property title, you get a drop-down list of colors for your button. Use it to pick a color for the background of your label. The background color can be set in the Properties column or in the Blocks Editor. You could, for instance, set a label reporting a player’s health in a game to turn red when the health value drops to a critical point. For the purpose of your first application, leave the default color of None selected.

The Font settings of Bold and Italic can be set using the check boxes. When they are selected, all text that is placed in the label either from the Properties column or with the blocks in the Blocks Editor take on that font face. The Bold and Italic settings do not have Properties blocks in the Blocks Editor.

The FontSize property allows you to set the size of the text in your label. The default font size of 14.0 is a little small for most applications. Click in the FontSize property text field and replace 14.0 with 20. The size of the text shown in the Viewer and the connected phone increases.

The Typeface property allows you to select from a limited set of text types. You can select Serif, Sans Serif, or Monospace. Select the three options to see the differences. For the purposes of this project, use the default. There are no blocks for the Typeface property, so you can’t change the typeface with blocks in the Blocks Editor.

The Text property is the critical property that allows you to place information on your label. Click in the text field, type Relaxing Wave Sound, and then press Enter. You should see the text on your label change both in the Viewer and on your connected phone. If you prefer, you can leave the Properties column’s Text field empty and then populate it later when the application populates the Text property with blocks in the Blocks Editor.

The TextColor property offers another color picker when clicked. Click the box under the TextColor property label and select Blue to make your text blue.

The Visible property works just like all the other component visibility properties. It allows you to start an application with elements of your user interface invisible and to make it appear when certain conditions such as a button press occur. Likewise, you can remove components from visibility by changing the Visibility property with the blocks in the Blocks Editor.

Setting Button component properties

The Button component has a property that can be used much as the Visible property is used. The Enable button allows you to decide if you want a button to be available when your application starts or at some point later based on events in your application. Unlike the Visible property, a button that has the Enable property disabled is still visible. It is not usable, however. For this project, you leave the button enabled.

The Alignment property works exactly as you saw previously with the Label component. Your button text can be center-, left-, or right-aligned. Leave it centered for this project.

Buttons can be made pretty or informative by putting an image on them. The button takes the size of the image you load onto it if the Width and Height properties are set to Automatic. If you manually set the Width and Height properties, the image is scaled to fit the button size. It is generally a good practice to load an image slightly larger than you intend the button to be. That allows the image on the button to be crisp. You can load an image onto a button by clicking the text field in the Properties column under Image and either selecting a picture previously loaded into the Media column or using the Add button to upload an image. For this project, you won’t use an image.

The BackgroundColor, TextColor, and Font properties of Bold, Italics, Size and Typeface all behave exactly as you saw with the Label component.

The text for your button is set with the Text property. Click in the Text property field and type Play. Your button must indicate clearly what it does when tapped.

Your user should feel comfortable tapping a button. The default button size is usually a bit too small for larger fingers. Increase the Width property to 100 pixels and the Height property to 75 pixels. This makes for nice large button that is easy to tap.

Setting Sound component properties

The Sound component only has two properties, Source and MinimumInterval. The Source field is a selector/uploader like you saw with the Image component. Click the Source text field to select media that you have previously uploaded to the Media column. You can also click the Add button to upload a selected sound clip. Click the Source text field and then the Add button to upload the wavesound.MP3 file from your project source files location. The Sound component is best for playing very short audio clips. Any source file used with the Sound component that is longer than about six seconds will be cut off, so it is more appropriate for sound effects than for longer music or extended sounds. Longer sounds require the Player component. You can use a broad range of popular sound formats. See Table 1-1 for supported protocols and file formats.

Table 1.1 Supported Sound Protocols and File Formats

Protocol	Supported File Formats
AAC	.3GP, MP4, M4A
MP3	.MP3
MIDI	.MID, .XMF, .MXMF, .RTT., .RTX, .OTA, .IMY
Ogg Vorbis	.OGG
Wave/PCM	.WAV

Introducing the Blocks Editor

After you have the entire user interface (UI to the geeks) in place, it’s time to add logic and flow to your application. That’s where the Blocks Editor comes in.

You have placed all the visible items on the Viewer and changed the properties to make them look the way you want them to. You use the Blocks Editor to tell the application what to do when it starts, when it stops, and when the user performs an action.

Programming in App Inventor is done with blocks that are colorful and shaped to snap together like puzzle pieces (see Figure 1-14). The blocks are like words that, when snapped together, form sentences that give instructions to your phone. The text on the blocks say plainly what they are for and what they expect from you. At first, the words on the block may seem foreign and daunting, but after you’ve done a few projects, you will know immediately what they do and be able to read the blocks like a sentence from a finely crafted novel.

The blocks are stored in drawers. The drawers are accessed or “pulled out” by clicking the corresponding button on the left side of the Blocks Editor. The individual blocks in a drawer can then be clicked and dragged to the Blocks Editor workspace where you snap them together to represent instructions to the Android phone.

Previewing Built-in Blocks

The Blocks Editor contains two tabs: Built-In and My Blocks. Every time you drop any component onto the Viewer, a new component drawer and new blocks are added to the My Blocks tab in the Block Editor. The Built-In blocks tab contains all the blocks drawers that have static activities and instructions. These blocks remain for you to use no matter what components you add. These blocks contain instructions such as, make a list. Each drawer category contains multiple blocks that you will use throughout this book. The built-in blocks work with your blocks (the ones created when you added components and the ones you create in the Blocks Editor) to create instructions for your application. The following list describes the blocks drawers found on the Built-In tab:

• Definition drawer: Contains blocks that allow you to define programming constructs and concepts; I explain each of these as you use them in a project throughout the book.

• Text drawer: Contains all of the blocks that you can use to manipulate text by creating text, joining pieces of text together, and pulling pieces of text out of other text.

• Lists drawer: Contains many powerful blocks that enable you to create storage containers for lists of items; traditional programmers may think of lists as arrays.

• Math drawer: Contains those math function blocks that you tried to avoid through high school, such as exponent, modulus, and cosine; these functions let you do nearly any mathematical function, including very advanced math.

• Logic drawer: Contains the blocks that help your program make rational decisions, such as Yes, No, True, False, “Are these two things alike?” and “Are these two things different?”

• Control drawer: Contains a wonderland of odd and peculiar-looking blocks that allow you to control the flow and progression of your application by using program “sentences” that give commands, such as “If the button is pressed, do something, but if it isn’t pressed, do something else.”

• Colors drawer: Contains blocks that allow you to easily set the color of items in your user interface; all colors for your Android application in App Inventor are represented by numbers, and these blocks make it easy to plug the right numbers for basic colors into your application.

These can be found on the My Blocks tab, which contains all the component blocks that you created when you placed components in Design view; each component you placed and named has a button to open that component's drawer:

• My Definitions drawer: Contains all the blocks that you create or define using the Definitions drawer under the Built-In tab; these blocks are not created when you add a component but rather when you drag a block from the Definitions drawer.

• Your Components Blocks drawer: Beneath the My Definitions drawer are the drawers for the components you have added in Design view; clicking a component name opens the drawer and allows you to drag out blocks that are events, methods, (things that happen to or with the component), or properties.

Placing Your Button Component Blocks

Make sure you are in the Blocks Editor screen. Click the My Blocks tab and then click the SoundPlayButton. This opens the drawer for the Button component you placed and renamed. Click and drag the when SoundPlayButton.Click do block onto the Blocks Editor workspace. This is an event button that tells you fairly plainly what it does. If you read the words on the block, you can see that it follows a pattern: <yourcomponentname>.<event>. With a little imagination, you can read it as, “When my button named SoundPlayButton is clicked, do what is held in this block.”

All blocks shaped with the large socket can contain other blocks that are sets of instructions that are acted on when some set of conditions are met. In this case, the condition that needs to be met is “When my button is clicked.” Now you need to tell your application what to do when the button is clicked. You add that instruction in the next section.

Placing Your Sound Component Blocks

To place your Sound component blocks, follow these steps:

1. Open the WaveSound drawer that contains all the blocks for your sound player by clicking it.

2. Drag the call WaveSound.Play block out onto the Blocks Editor workspace.

This is a method call. A method call performs a series of more complex or prepackaged instructions. This block is prepackaged instructions on how to play the sound file you uploaded into the Media column earlier in this chapter.

3. Drag the call WaveSound.Play method between the arms of the when SoundPlayButton.Click event and drop it.

Notice that the notch in the top of the play method snaps into the tab on the event with a satisfying click.

Now whenever the event occurs, the method is called. In other words, “When SoundPlayButton is clicked, call the WaveSound.Play.” Your Blocks Editor workspace should look like Figure 1-15.

Test your application on your connected Android phone by tapping the Play button. You should hear an amazing soothing Zen-like sound from your Android phone. You have at this point built a complete Android application. Congratulations! For now, it is only on App Inventor and not loaded into your phone. Next, I tell you about your options for your completed application.

Putting the final touches on your project

Most application projects are very dynamic. They tend to evolve over time. App Inventor provides you with the tools to handle the next steps after you are happy with your project, when you want to branch your application into some new and improved application with the Checkpoint save, or of course to finally to load it onto your phone and other phones.

Click to back over to your browser where the App Inventor Design view is running. In the next section, you learn how to save, fork (a traditional programming word for changing the original intent or direction of an application), and install your application.

Saving your new application

Google is really good at making sure you don’t lose your hard work accidentally. Your project work is saved every time you change anything. Your app is periodically synchronized from your browser to the App Inventor servers whenever you make a change. App Inventor has a Save button, but you will probably seldom use it. (Just in case you need to, however, the Save button is at the top center of your Design view just above the Viewer column.)

The Save As button

The Save As button, located directly above the Viewer in the Design view, allows you to save your current project with a different name. By default, it appends the text _copy to the current project name, as shown in Figure 1-16. You can, however, change the name to anything you like as long as it is unique among your projects. After you click the OK button to save a copy, you are working on the newly named copy of your project, but the old name and project still exist in the My Projects window.

The Checkpoint button

Unlike the Save As button, the Checkpoint button next to the Save and Save as buttons lets you save a copy of your project to a new name as it currently is but continue working on the original project. By default, the Checkpoint button appends _checkpoint# to your existing project name, as shown in Figure 1-17, and stores the check point in your My Projects window. The Checkpoint window also shows you previous checkpoints of the same project in the Previous Checkpoints area.

The important distinction between the Save As and the Checkpoint button is that clicking the Save As button means that you work on the newly named project after you click OK but leave your original project in the My Projects window. Clicking the Checkpoint button, on the other hand, leaves the newly named copy of your project in the My Projects window and you continue working on your original project. The Checkpoint should be considered a “safe point” that you can roll your project back to if you break something as you develop a project. The Save As and Checkpoint buttons are very simple version-control features. Traditional programming uses versions such as 1.0, 2.0, 2.1 and so on to reflect changes in an application. You can use the Checkpoint and Save buttons to do the same thing.

Packaging your app

When your application is at a level of awesome that begs to be put on your phone or someone else’s phone, you have to package it. Packaging is the process of taking all of the user interface elements, all the blocks from the Blocks Editor and all of your media and turning it into code that your Android device understands. The Design view, as shown in Figure 1-18, has a Package for Phone button that allows you to select from three options for packaging your app: Show Barcode, Download to This Computer, and Download to Connected Phone. I explain these options in the next few sections. The Blocks Editor must be open for any of the packaging options to work. Whichever option you select, you see a message informing you that App Inventor is packaging the application. It can take a few minutes for the packaging to complete.

Using the Show Barcode option

When you select the Show Barcode option, your project is compiled into an .APK file. The .APK file is the final file package that will be loaded to your phone using one of the package options. With the Show Barcode option, a QR barcode pops up in the App Inventor Design view. You can then load your project onto your phone using any of the free barcode scanners for Android to scan the barcode. This method has the advantage of not needing to have your phone connected to your computer to load the application onto your phone. However, you can’t share the barcode with other Android phone owners unless they too have an App Inventor account. If your phone has difficulty connecting to App Inventor or is one of the few phones that do not allow untrusted installs, you need to use this method to install App Inventor applications.

Using the Download to This Computer option

If you want to attach your application to an e-mail or load it manually to another phone, use the Download to This Computer option. Clicking the Download to This Computer option prompts you to specify a download location for your application file or automatically downloads the file to your default download folder. The downloaded file is in the format <your project name>.apk. The .APK files can be copied to an Android phone’s SD card or e-mailed to an Android phone and installed manually. For any App Inventor .APK files to be installed, a phone must have its options set to allow installations from insecure locations. See Appendix A for more on setting up a phone to install App Inventor applications.

Using the Download to Connected Phone option

Download to Connected Phone is the option you will use most often. For this option to work, your phone must be connected to your computer and connected using the Connect to Device button on the Blocks Editor. (See Appendix A if you need a refresher on how to connect your phone.) When you select the Download to Connected Phone option, the project that is currently active is packaged and loaded onto your connected Android phone. You then receive a pop-up that informs you that the transfer was successful. It shows up like any other application in your phone’s list of applications, with its name being the name of your project.

Use the Download to Connected Phone option to download the SounDroid application you created in this chapter to your phone. Congratulations! You have created and loaded your first Android application.

Managing Your Projects

App Inventor is a Web-based application. That means that your projects and all of your work stay in Google’s cloud. Cloud computing gives you access to your work via the Internet and remote servers so that you don’t have to install apps or store files on your local computer. That way, nothing is stored on your local computer until you explicitly download your applications.

After you log into App Inventor, click the My Projects link in the upper-right corner of the browser window, as shown in Figure 1-19. This takes you to the overview of all the projects you have in your App Inventor account. From here, you can control which applications you want to open and work on, download, upload, or delete.

From the My Projects view, you can start a new project or manage and delete old projects. This screen offers only a few options, so you can become familiar with them fairly quickly. On the My Projects views, you can

• Create a new project

• Delete an existing project

• Download project source code to your computer

• Upload project source code from a colleague into your My Project view

• Load an existing project into App Inventor

Downloading your project source code

All App Inventor projects are saved and stored on the App Inventor servers, but you can download the source code and the application to your local computer hard drive. Source code is composed of all the separate instructions that make up your application before they are built into your application. When you have a project that you want to share with other app developers, you can download the source code to your local computer. You can then send the source code to other app developers to upload to their App Inventor program so that they can see your brilliance. The source code allows other app developers to see and edit the code before it is packaged into an Android application.

Don’t confuse the source code you download with Java source code that SDK developers use to create applications. The source code I’m talking about here is very specific to App Inventor and can only be loaded and edited by the App Inventor program.

The option to download source code is not terribly obvious: It’s hidden on the More Actions drop-down list, as you can see in Figure 1-20. If you have a project you want to download the source code for, you can download it by following these steps:

1. In the My Projects view, select the box next to the project for which you want to download the source code.

2. Click the More Actions drop-down arrow.

3. Click Download Source.

4. If your browser is set up to automatically download files to a default directory without asking you for confirmation, your source code downloads. If your browser prompts you to confirm whether you want to Save or Run the source code, you should choose Save.

The file you download is saved to your default download directory unless you choose to save it to a different location. The source code for an App Inventor project consists of one .ZIP file — a single file that contains one or more files that have been compressed to reduce the overall file size.

As I mentioned earlier, you can collaborate and share projects by downloading project source code and sending it to others to upload into their App Inventor program. It’s also a good idea to occasionally download the source code for your important projects to back up your projects. This protects them from accidental deletion or the extremely unlikely event of a server losing your project.

To send the source code to others, just attach the .ZIP file to an e-mail or upload it to the file-sharing site of your choice.

Uploading your project source code

When other developers send you their App Inventor projects as source code, you can see what logic they used in the Blocks Editor and learn from how they accomplished a particular goal. When you want to load source code files into your My Project view, whether from a friend or from your own backup source code, follow these steps to upload the source code from your local computer:

1. From the My Projects view, click the More Actions drop-down arrow.

2. Click the Upload Source option.

3. Click the Choose File button in the dialog box that appears.

4. Navigate to the source code you want to load. It may be in your default download directory or wherever you downloaded it from an e-mail or Web site.

5. Click the source code .ZIP file you want to upload.

6. Click Open.

The source code and all asset files are uploaded to your My Projects page. You now have a project that you can manage and edit. If a project with the same name already existed, you will get an error message when you try to upload. Change your project’s name and try again.

Deleting a project

Not every project you set your hand to will turn out to be an application you want to keep around for all time. Sometime in the future, those old tutorials will probably just be in the way of all the awesomeness you have created.

To delete a project, follow these steps:

1. From the My Projects page, check the box next to the project name.

2. Click the Delete button.

3. Verify that you want to delete the project and click OK.

Deleting a project is irreversible and you can’t make something you have deleted come back, not even by begging Google really hard. I have deleted several applications accidentally, much to my chagrin and disappointment. Remember to back up your projects from time to time by downloading the source code, just in case you delete one accidentally later.

Loading an existing project

Existing projects are stored on Google’s App Inventor servers. When you have lots of projects listed on your My Projects page, you can load any one of them into the App Inventor Design view and Blocks Editor by clicking the project name. When you click an existing project from the My Projects view, the source files are loaded from the App Inventor server and the screen changes to the Design view.