4. What happens when you click on the Blocks button of the App Inventor Project View window?
Answers
Answer:
The project will be gone
Answer:
Event Handlers
App Inventor programs describe how the phone should respond to certain events: a button has been pressed, the phone is being shaked, the user is dragging her finger over a canvas, etc. This is specified by event handler blocks, which used the word when. E.g., when Button1.Click and when AccelerometerSensor1.Shaking in HelloPurr.
Most event handlers are green in color and are stored at the top part of each drawer. Here are some examples of event handlers.
When an event occurs on a phone, the corresponding event handler is said to fire, which means it is executed.
Commands and Expressions
When an event handler fires, it executes a sequence of commands in its body. A command is a block that specifies an action to be performed on the phone (e.g., playing sounds). Most command blocks are purple or blue in color.
Here are some sample commands, some of which you may recognize from building HelloPurr:
Some commands require one or more input values (also known as parameters or arguments) to completely specify their action. For example, call Sound1.Vibrate needs to know the number of milliseconds to vibrate, set Label1.BackgroundColor needs to know the new background color of the label, and set Label1.text needs to know the new text string for the label. The need for input values is shown by sockets on the right edge of the command.
These sockets can be filled with expressions which are blocks that denote a value. Expression blocks have leftward-pointing plugs that transmit the value to the socket. Larger expressions can be built out of simpler ones by horizontal composition. E.g., all of the following expressions denote the number 500:
Commands are shaped so that they naturally compose vertically into a command stack, which is just one big command built out of smaller ones. Here's a stack with four commands:
When this stack of commands is placed in the body of an event handler (e.g., the when.Button1.Click event handler), the command will be executed from the top to the bottom. If the stack of commands above is executed, then the phone will first play the sound, then vibrate, then change the label's color to be green, and then label will show the text "CS117 rocks!"
However, the execution happens very quickly; you will see all the actions happen essentially at the same time.
Control Flow
When an event handler fires, you can imagine that it creates a karaoke-like control dot that flows through the command stack in its body. The control dot moves from the top of the stack to the bottom, and when it reaches a command, that command is executed -- i.e, the action of that command is performed. Thinking about control "flowing" through a program will help us understand its behavior.
The order of the commands, or the control flow is important when you make an app. You need to make sure which action should come first.
Arranging Components on the Screen
App components are organized vertically by default. For example, in the extended version of the PaintPot tutorial, the user creates buttons which change the line size or wipe the screen. To organize ButtonWipe, ButtonSmall, and ButtonBig nicely, drag a HorizontalArrangement Component from the Screen Arrangement section of the palette. Now drag the three buttons into the HorizontalArrangement in the desired order. VerticalArrangement and TableArrangement components can also be used to control positioning. Also, keep in mind that the way the components appear in the Viewer is only an approximation of how the components will look on the phone.
Manipulating Component State
Every component is characterized by various properties. What are some properties of a Label component?
The current values of these properties describe the state of the component. You can specify the initial state of a component in the Properties pane of the Designer window.
App Inventor programs can get and set most component properties via blocks. E.g., here are blocks for manipulating the state
Getter blocks are expressions that 'get' or contain the current value of the property. Setter blocks are commands that change the value associated with the property.
Some Label properties cannot be manipulated by blocks. Which ones?
As an example of manipulating Label properties, open the LabelSize program, which has 4 event handlers. What do these do?
Other Button Events
Other button events are when LongClick, when GotFocus, and when LostFocus. Experiment with these by creating the following handlers:
Note: many components 'get focus' when touched,