- Welcome to App Inventor!
- App Inventor Designer
- App Inventor Blocks Editor
- Integrate Android Phone
- Using the Emulator
- Start-Up Problems
This chapter is from the book
This chapter is from the book
This chapter is from the book
App Inventor Blocks Editor
Apart from the Designer, the Blocks Editor forms the second central work window of the AI development environment. The Blocks Editor is where you will bring the individual components of your app to life and assign them specific tasks, which together will form the overall functionality of your app. As the AI Blocks Editor is implemented as Java Web Start application, starting it requires your computer to have the Java configuration described in Chapter 1. You start the AI Blocks Editor from the AI Designer from the function menu and by clicking the button labeled “Open the Blocks Editor,” as shown in Figure 2.15.
){kind=link}
)
Figure 2.15. Starting the AI Blocks Editor from the function menu of AI Designer
Once you click on this button, its label changes to “Opening the Blocks Editor ... (click to cancel),” indicating that the loading process for AI Blocks Editor has begun. The web browser then asks you in a separate window what it should do with the Java Web Start application you are about to download, or rather the underlying JNLP file AppInventorForAndroidCodeblocks.jnlp. Proceed in the same way as in the Java Web Start demos of the previous chapter: Choose Open with > Java(TM) Web Start Launcher, perhaps activate “Do this automatically for files like this from now on” so you are not asked the same question in the future, and then confirm your choice by clicking OK, as shown in Figure 2.16.
){kind=link}
)
Figure 2.16. Confirm to load and start the AI Blocks Editor
The Java Web Start application AI Blocks Editor is now being loaded, as indicated by the message appearing in a separate window (see the left side of Figure 2.17). Before the fully downloaded application is executed on your computer, your operating system may first check it for a digital signature. If none is present, you have to manually confirm that you want to run the program (see the right side of Figure 2.17). Again you have the option of enabling the check box “Always trust content from this publisher”; choosing it means you will not be asked the same question again the next time you open AI Blocks Editor.
){kind=link}
)
Figure 2.17. Loading AI Blocks Editor with a security check
The loading process for AI Blocks Editor can take a little while—according to Google, 30 seconds or more, depending on the Internet bandwidth you have available. After the loading and start time, a new window appears, presenting the user interface of AI Blocks Editor (see Figure 2.18). Again, it is quite empty when you first open it, but that will soon change.
){kind=link}
)
Figure 2.18. The AI Blocks Editor user interface on first start
Given that you started the AI Blocks Editor within a specific project from within the AI Designer, the initial representation of the user interface relates to the current project, “HelloAndroidWorld.” The project name appears both in the window title and on the left in the green bar of the function menu shown in Figure 2.18.
Developing App Functions from Blocks
The AI Blocks Editor also presents different panels below the function menu. Similar to the AI Designer, the left column—the block selection—contains a list of functional groups available for selection. These groups do not contain components, but rather functional blocks, which make up the syntax of the visual developer language AI, similar to the command set of a classic programming language.
To make it easier even for nonprogrammers to understand the role that blocks play in developing apps with AI, we can try a simple comparison of the two central work areas, Designer and Blocks Editor, plus the individual building blocks, components and blocks. Don’t worry—this approach is not required for your development work with AI. After all, AI is meant to help you intuitively use and assemble the building blocks offered in your app development, without having to think too much about the application structure. Later, you will see how easily you can switch between the working environments and manage to use the different puzzle pieces in combination.
Generic Block Groups Under the Built-In Tab
Let’s get back to selecting blocks in the AI Blocks Editor. The block selection contains two areas that you can access by clicking on the Built-In and My Blocks tabs. The Built-In tab includes seven generic block groups: Definition, Text, Lists, Math, Logic, Control, and Colors. As the term “generic” indicates, these blocks are always generically available for app development, independent of the component objects used. To open a group, simply click on the group name. This displays the individual blocks of the group in a scrollable selection to the right of the group name. Figure 2.19 shows an extract of the available colors from the Colors group.
){kind=link}
)
Figure 2.19. Color selection in the Colors block group
Component-Specific Blocks Under My Blocks
Things are slightly different with the block groups listed under the My Blocks tab. Here you can choose from component-specific blocks that allow you to influence the properties of those component objects that you use in the current app project. Accordingly, the block groups have the names of the corresponding component they represent in the Blocks Editor. As we are currently using the start component “Screen1” in our app “HelloAndroidWorld,” this group is the only one listed and selectable in Figure 2.20. The more components you later add in the Designer, the more groups you have available in the Blocks Editor under My Blocks.
){kind=link}
)
Figure 2.20. Component-specific block selection of “Screen1”
If you compare the blocks available for “Screen1” shown in Figure 2.20 with the properties of the component of the same name in AI Designer under the Properties function menu (see Figure 2.12), you will notice that they are partly identical. The Blocks Editor also contains blocks for setting the background color (Screen1.BackgroundColor) and the background image (Screen1.BackgroundImage).
){kind=link}
Implementing and Editing Apps in the Editor
To the right of the block selection, you can see the central work area of the AI Blocks Editor—the actual editor. The editor will be your main sphere of activity for developing the program logic that’s behind the user interface of your app; it is where you will implement your app. In this now-empty area, you will combine the different blocks of your app so that the blocks of the input components transmit their data to the processing block structures, which then turn them into results and pass these data on to the blocks of the output components. You drag the required blocks—similar to the components in AI Designer—by holding the mouse button from the block selection of a group under Built-In or My Blocks into the editor and then assemble them like a puzzle into the desired functional block structures according to the AI syntax rules.
As the complexity and range of functions of an app increase, the number of blocks or block structures also increases, as does the display space the nascent app takes up in the editor. For that reason, the actual work area of the editor is far larger than you can see in the currently visible main window of the Blocks Editor. By using the scroll bars alongside the window or holding the left mouse button, you can scroll the window so that you always see the edited blocks on the screen. You can scroll even more quickly with the scroll window in the upper-right corner of the editor. This scroll window shows the main window as a small red rectangle within a gray rectangle, symbolizing the whole interface. By holding the mouse button and moving the red rectangle, you can scroll over the virtual workspace even more quickly (see Figure 2.21). The zoom slider in the function menu above the scroll window offers additional help for managing large block structures. If you slide it to the left, to a resolution of less than 100% (Zoom Out), you enlarge the section shown in the window, which makes the displayed blocks smaller but allows you to see more at once (see Figure 2.21). A value greater than 100% (Zoom In) lets you zoom into the block structure, making the section displayed smaller.
){kind=link}
)
Figure 2.21. Zooming out of the partial window
Once you have arranged all components in the Blocks Editor and want to concentrate on developing the associated block structures, you can enlarge the partial window even more by hiding the block selection completely. Click on the small top triangle on the splitter bar between the editor and block selection area to collapse the latter. If necessary, you can display it again by clicking on the bottom triangle of the splitter bar, which has now moved to the left edge of the window. If the splitter bar is collapsed, you might wonder how to add to further blocks from the Built-In groups in the Blocks Editor. AI has an efficient solution, as usual. Simply left-click into a free area of the editor; all block groups from the Built-In area then appear in horizontal orientation. Click on a group to open it. You can then select the desired block and thereby create it, as shown in Figure 2.22.
){kind=link}
)
Figure 2.22. The block selection Built-In directly in the enlarged Blocks Editor
We should not forget to mention one important element within the Blocks Editor—the graphically represented recycle bin in the lower-right corner. As expected, it is used for deleting blocks that are no longer required in the editor. To delete a block, simply drag it to the recycle bin. This process is shown in Figure 2.23 for the assignment block for the color green.
){kind=link}
)
Figure 2.23. Deleting a block with the recycle bin
If, for example, you instead want to change a color from green to blue in the Blocks Editor, you do not need to delete the assignment block for green and then drag a new one for blue from the block selection to the editor. Many of the blocks have their own property menu, with which you can directly carry out the appropriate changes or value assignments quickly and easily. In case of the assignment block for colors, you can touch a color block with the mouse to display a small inverted triangle as symbol of an expandable menu. Click on it and you can choose from all available colors directly, as shown in Figure 2.24.
){kind=link}
)
Figure 2.24. Changing a block value directly in the Blocks Editor
Touching a block with the mouse pointer also brings up a brief explanation of the function or possible settings of the block (see Figure 2.25). This is the case with both the abstract block types in the block selection and the specific block types in the editor and often provides useful additional information during your development work in the AI Blocks Editor.
){kind=link}
)
Figure 2.25. Explanatory text for blocks
Let us close out our discussion of Blocks Editor by turning back to the function menu above the editor and the block selection. Here you can see three menu items in form of the buttons Saved, Undo, and Redo, which can be used only in certain situations. For example, you can save the current block structures in Blocks Editor with the Saved button only if you have just made changes to them and these changes have not yet been automatically saved by AI on the Google servers. Only during this time does the button have the label “Save”; it is active and usable when this label is present. The Undo button enables you to undo an action—for example, inserting a new block into the editor. If you decide you do want to use the deleted block after all, you can click the Redo button to restore it.
This brings us to the last two menu items of the Blocks Editor we need to describe, as they are of decisive importance for developing apps with AI. The buttons labeled “Connect to phone” and “New Emulator” integrate the last area of the AI development environment—your Android smartphone or the emulator to simulate it, respectively. If your smartphone is not yet connected to AI, the smartphone icon next to the button shows a question mark in the display.
Before you read on, please delete any blocks you may have dragged to the Blocks Editor while experimenting and ensure that the editor is completely empty. This ensures that we avoid malfunctions on the smartphone later that could be caused by an interpretation of the randomly added and functionless blocks.