This chapter is from the book
This chapter is from the book
This chapter is from the book
App Inventor Designer
To start the AI development environment, you call the first of two central work windows, the Designer. In the AI Designer, you will mainly create the interface of your own apps and put them together from the functional components of AI. The AI Designer is implemented as a web application, so you load it just like a normal website into your browser by entering the appropriate web address.
When accessing the starting address of App Inventor, a login page encrypted via HTTPS will open (see Figure 2.2), as you already know it from the section on logging in to the Google AI system. Enter your access data and press the button to start App Inventor.
){kind=link}
)
Figure 2.2. Login to start the App Inventor development environment
Once your login data is accepted, AI Designer is started in your web browser. As soon as the page has finished loading, the AI Designer start page greets you with the message “Welcome to App Inventor!” as shown in Figure 2.3. For your first visit to this site, you may have to confirm the Terms of Service and go to the start page by clicking on the link “My Projects.”
){kind=link}
)
Figure 2.3. First visit to App Inventor Designer
Creating a Project in the Design Area
In the upper-left corner of AI Designer shown in Figure 2.3, you can see the App Inventor (BETA) logo. It looks like a bit like a puzzle piece and seems to symbolize the building blocks of the visual development language that you will later put together to create a fully functioning Android app. On the right next to this logo is a bar with three options: My Projects, Design, and Learn. You can use the My Projects and Design options to switch within AI Designer between an overview of your app projects and the desktop of your current app project. When first starting AI, you do not have a current app project (or any other projects), so the two menu items do not change the view at this stage. Similarly, the work area in the bottom part of the window with the Projects heading and a gray background will be completely empty when you first open AI Designer, except for the information about the Google copyright, Terms of Use, and other information, plus the currently used AI version number (“Build: ...”). The Learn option permits you to navigate to the Google documentation on AI in a new browser tab.
At the upper-right corner of the window, you will see your user name in form of your Google e-mail address (see Figure 2.3). Next to it is the link “Report bug,” which you can use to report any errors you might encounter during your work with AI in the beta phase. The “Sign out” option is how you log out after you are finished developing with AI, thereby closing the development environment. Below this option is a small message area, where the developers of Google can inform you of any updates, bugs, or other issues worth knowing about (see Figure 2.4). If there is no current information, you will see just the familiar greeting “Welcome to App Inventor!” (see Figure 2.3). The two buttons to the right of the message area are used to “expand” or “shrink” it.
){kind=link}
)
Figure 2.4. Unavailable buttons are grayed out
In the line with the light green background below the top bar is the function menu, which has three buttons. Depending on what is selected in the options at the top, the function menu shows only those function buttons required for each work area. The function menu is dynamic and changes depending on the active work area; to a certain extent, this variability applies to the top bar with its options as well. For example, the current work area has no projects as yet, so the Delete button is grayed out and you cannot click on it (see Figure 2.4).
Similarly, the menu item “Download Sources” under “More Actions” cannot be used without an existing or selected app project; thus it is currently grayed out and not available, as shown in Figure 2.4. The menu item “More Actions” enables you to later load complete app projects to your local hard drive (“Download Source”) or to upload them from the hard disk to the online AI development environment (“Upload Source”). You will get to know these functions later in more detail in connection with the security and exchange of your app projects.
Let’s create an app project so that we can use the AI Designer user interface elements that require an existing project before they become available. Click on the New button to create your first app project. It opens a window “New App Inventor for Android Project ...,” as shown in Figure 2.5. Enter a name for the new project in the field “Project name”; this identifier will be used as the name of the project within AI as well as the resulting Android app. In keeping with tradition, we will use the name “HelloAndroidWorld”. Note that the project name cannot include any blank spaces, must start with a letter, and can contain only letters, numbers, and underscores.
){kind=link}
)
Figure 2.5. Creating a new app project in AI Designer
Five Panels
After you confirm your input by clicking OK, the comprehensive user interface of AI Designer appears after a short loading time. As shown in Figure 2.6, it contains five panels: Palette, Viewer, Components, Media, and Properties. In these panels, you will later create or “design” the interface of your app with the graphic and functional components of AI.
){kind=link}
)
Figure 2.6. The five panels of AI Designer
Inventory of Palette Components
In the Palette panel, which is found on the left of the work area, you can find all graphic and functional components offered by AI for designing and developing apps. These are the building blocks or puzzle pieces you will use to put together your apps. The components are divided into different groups (sections): “Basic,” “Media,” “Animation,” “Social,” “Sensors,” “Screen Arrangement,” “LEGO® MINDSTORMS®,” “Other stuff,” “Not ready for prime time,” and “Old stuff.” By clicking on the group name (header) with the mouse, you can open each group and see a list of the components it contains. Figure 2.7 shows the opened group “Media” with its five components. On the right next to the component name is a question mark. Clicking on it displays a brief explanation of the component and at least one reference to further information.
){kind=link}
)
Figure 2.7. Displaying additional information on the individual components
The obligatory link “More Information” leads to the functional specification of the component in the Component Reference. This reference defines the use and function of each AI component and provides additional information such as methods, events, and properties, which we will encounter later in this book. Figure 2.8 shows as an example the specification of the media component “Sound,” which appears in a separate tab after we click on the link “More information” shown in Figure 2.7.
){kind=link}
)
Figure 2.8. Specification of the component “Sound” in the Component Reference
The Component Reference represents a good resource for your development work later on if you need to look up details on the individual components. Use this online resource without fear; its information should always be up-to-date.
Designing Apps with Component Objects in the Viewer
The Viewer panel resembles the display of a smartphone, as you can see on the left of Figure 2.9. The top line of the Viewer shows typical cellphone information such as the reception type (“G,” as in GPRS), a bar indicating the signal strength, the battery state, and a clock. All of these items are actually static—that is, they are merely decorative. Below them is the design area where you will actually assemble your app’s interface and functional elements interactively. To do so, you choose the desired components from the Palette by clicking on them and dragging them to the Viewer while holding the left mouse button; you can then drop the components and arrange them as you wish.
){kind=link}
)
Figure 2.9. The starting component “Screen1” and its properties
The component objects arranged optically in the Viewer give you an approximate impression of what the app will look like on your smartphone. We say “approximate” because the representation on your smartphone can be different—for example, a line of text might break in a different place due to a different display size. You can check directly whether there is a divergence between your smartphone and the Viewer during your development work with AI, as the components you drag to the Viewer will appear almost simultaneously on the smartphone connected to the computer. Do not confuse the Viewer with the emulator mentioned in Chapter 1, however: The Viewer cannot simulate any telephone function or similar properties of your smartphone, but rather deals solely with arranging components.
Above the Viewer is the check box labeled “Display Invisible Components in Viewer.” If you enable it, you can display even those components in the Viewer that you have explicitly marked as invisible previously via its initial property “Visible.” That makes sense, for example, if individual components are meant to be visible only in certain situations in the finished app, but not continuously (e.g., a Stop button should become visible only if a Start button has been clicked). This check box gives you the convenient option of seeing all components while you are optically designing the app in AI Designer, so you can assess their visual appearance as a whole.
Structuring Objects Under Components and Media
In the Components panel, all component objects you dragged into the Viewer are depicted in a hierarchical tree structure. In other words, individual components are designated as subordinate to other components, forming groups with the same properties or dependencies—like leaves on branches hanging on a tree. Figure 2.9 shows only the component “Screen1,” which represents your smartphone screen and forms the obligatory starting component of any app or root for all further, subordinate components. As this component is obligatory, the two buttons for renaming and deleting components are not yet activated; they apply only to other components that you add. The original Google AI supports only apps with a single screen component, so the Palette does not have a “Screen” component for selection or additions. In Google AI, apps with different screen views must be realized or improvised with different methods, as we will see later. The inclusion of the number “1” in the default name “Screen1” suggests that the Google developers did not want to completely dismiss the option of adding additional screen views in AI within an app in the future.
Another category of elements that you can add to an app are media files such as audio or video files. These items can be selected from your local hard disk by using the Add button in the Media panel and uploaded to the AI development environment. In Figure 2.9, there are not yet any media files loaded or listed, as these are also usable only in connection with appropriate components, such as those for playing audio or video files from the component group “Media.”
Setting Component Properties
The Properties panel shows the properties of the component object currently selected; they appear when you click an item in the Components or Viewer panel. For now, we have only the component “Screen1” to choose from, so Properties lists its properties. The “Screen1” component has six properties: BackgroundColor, BackgroundImage, Icon (for the app’s start icon), ScreenOrientation (with the options Unspecified, Portrait, and Landscape), Scrollable (to allow the screen to scroll), and Title. You can click to select and individually change these properties.
For example, clicking on the current setting of BackgroundColor will open a color palette in which you can choose a screen background color for your app. In Figure 2.10, the color “Blue” is selected for BackgroundColor. In the “Title” field, you can change the app’s title as displayed on your smartphone; for example, you can change “Screen1” to “Hello Android World!” Unlike the app’s file name, the label entered in this text box can use spaces and any other symbols. The changes you make in the Properties panel are then immediately visible in the Viewer, and soon afterward in the connected smartphone.
){kind=link}
)
Figure 2.10. Changing component properties with the Properties panel
Managing and Saving App Projects
Now that we have investigated the panels in AI Designer that are available for creating the new project “HelloAndroidWorld,” let’s take another look at the two central menu bars. The top bar appears unchanged, containing three menu items: My Projects, Design, and Learn. As soon as you click on the menu item “My Projects,” however, the browser view changes back to the previously empty project view “Projects” shown in Figure 2.3, but now lists the new project “HelloAndroidWorld” along with the date on which it was created, as shown in Figure 2.11.
){kind=link}
)
Figure 2.11. The new AI project “HelloAndroidWorld” in project view
If you highlight the project “HelloAndroidWorld” by clicking on the check box in front of the project name, the function menu offers the previously inactive functions “Delete” and “More Actions.” We do not want to delete the project in this incomplete stage, nor do we want to download it to our hard disk. Instead, let’s go back to the Designer view by clicking on the menu item “Design” or directly on the project name. Your project will then appear in exactly the same editing stage you left it in before (see Figure 2.12).
){kind=link}
)
Figure 2.12. The function menu in design mode
As mentioned earlier, the function menu shows its dynamic side once we have created a project. The designer area now has completely different function buttons in the line with the light green background than we saw earlier in the project view. On the extreme left side, you can see the name of the current project, followed by three buttons for saving the current project—all on Google’s AI servers. Clicking the Save button saves the current project stage explicitly under the current project name.
By clicking the Save As button, you can save the current project under a different name or copy it and then continue working with the copy. The Checkpoint button offers another save variant—one that comes in very handy for developing work. During app development, you may sometimes have to decide between one of several possible solutions, as if at a crossroads. Before embarking on the chosen path, you can place a “checkpoint”—a kind of marker—and save the current stage of the project. If you later decide that another solution would be better, you can go back to the previous stage of the project by selecting the checkpoint and then embark development of an alternative solution from there. AI suggests different project name endings for the various save options, such as “_copy” and “_checkpoint”. The project variations you create this way are displayed in the project overview and can be selected for editing by clicking on the project name (see Figure 2.13). Of course, you can also choose your own names for the project variations you save.
){kind=link}
)
Figure 2.13. Copies and checkpoints of the project “HelloAndroidWorld”
But let’s get back to the function menu in the Designer area. Next to the buttons for saving the project, two other buttons appear on the right-hand side of the function menu. The selection menu under “Package for Phone” provides three options for exporting the app created based on the currently displayed project. Unlike the three previously described options for saving an AI project in progress, this export concerns the result of the project, the app itself, which AI generates from the project. The resulting app is not saved on the AI provider’s server, but rather exported by the server and saved locally in one of three variations: as a graphically encoded download link (“Show Barcode”), as an application file (with the file extension .apk) on your computer (“Download to this Computer”), or directly on your smartphone (“Download to Connected Phone”) as an independent app. We will discuss these export options in more detail toward the end of this chapter. If you select one of the three export options now, an error message with a red background will appear at the top of the work area, as shown in Figure 2.14.
){kind=link}
)
Figure 2.14. Exporting apps requires the Blocks Editor
This message points out that you first need to open another area of the AI development environment before the export function becomes available. You open it by clicking on the last remaining button on the Designer function bar, “Open the Blocks Editor.”