Menu
- App Inventor For Android Blocks Editor Download For Pc
- App Inventor For Android Download
- App Inventor For Android Blocks Editor Download Free
Introduction to App Inventor Block Editor. So you know about the app inventor and you have gained knowledge about the designer as well so it's time to move ahead and get to know about the block editor. Block editor is the supportive window of the designer. In designer we add the components to our projects and in block editor we tell our.
Home > Articles > Mobile Application Development & Programming
- Designer and Blocks Editor. App Inventor consists of the Designer and the Blocks Editor. These are described in detail below. App Inventor Designer Design the App's User Interface by arranging both on- and off-screen components. App Inventor Blocks Editor Program the app's behavior by putting blocks.
- App Inventor lets you create Android apps without any knowledge in programming. How cool is that! You design your apps on a web page, assemble pieces of logic blocks together on the same page, test your app on an emulator or on your phone while you are designing; cool, huh?
- Learn to build Android apps in hours. Start learning now. App building made easy. App Inventor is a visual, blocks language for building Android Apps. App Inventor is being used in classrooms all over the world to broaden participation in computer science.
- Managing and Saving App Projects 50 App Inventor Blocks Editor 53 Developing App Functions from Blocks 56 Generic Block Groups Under the Built-In Tab 56 Component-Specific Blocks Under My Blocks 57 Implementing and Editing Apps in the Editor 59 Integrate Android Phone 63 Connecting the Smartphone to Blocks Editor 63.
- App Inventor Blocks Editor
< BackPage 3 of 6Next >
This chapter is from the book Android Apps with App Inventor: The Fast and Easy Way to Build Android Apps
This chapter is from the book
This chapter is from the book
Android Apps with App Inventor: The Fast and Easy Way to Build Android Apps
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.
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.
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.
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.
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.
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.
Figure 2.20. Component-specific block selection of “Screen1”
App Inventor For Android Blocks Editor Download For Pc
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).
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.
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.
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.
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.
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.
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.
Related Resources
- Book $39.99
- Book $35.99
- eBook (Watermarked) $28.79
Home > Articles > Mobile Application Development & Programming
␡- App Inventor Designer
< BackPage 2 of 6Next >
This chapter is from the book Android Apps with App Inventor: The Fast and Easy Way to Build Android Apps
This chapter is from the book
This chapter is from the book
Android Apps with App Inventor: The Fast and Easy Way to Build Android Apps
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.
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.”
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.
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.
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.
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.
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.
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.
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.
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.
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).
App Inventor For Android Download
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.
App Inventor For Android Blocks Editor Download Free
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.
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.
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.”
Related Resources
- Book $39.99
- Book $35.99
- eBook (Watermarked) $28.79