(MAD) Understanding Events and Event Handling Lesson

Understanding Events and Event Handling

Apps are what we call event-driven applications. They don't perform a set of instructions in a predetermined order. They perform actions based on different events such as clicking a button, dragging your finger, or touching down on the screen. When you add a component to the screen in design view, the component will appear in the blocks editor so it can be programmed. The components are used to trigger an event. Once an event takes place, the app reacts by calling an event handler method that contains the instructions or the actions to do something in response to the event.  

Event Type & Example: User-initiated event: When the user clicks a button, do... Initialization event: When the app launches, do... Timer event: when 20 milliseconds passes, do... Animation event: When two objects collide, do... External event: When the phone receives a text, do...

Your job as a programmer is to specify how the app should respond to events by creating event handler methods.

Event Handlers Methods

Event handlers are functions that are triggered by different events. In app eventer, event handler blocks are yellowish blocks that read, "when do". Each event handler block is like its own main program that contains the code that causes the action to occur. The following blocks are some of the events you'll code: 

screenshot of event handlers code blocks in MIT: when LocationSensor1 latitude, longitude, altitude do LocationChanged when Clock1.Timer do when Screen1.Initialize do when ImageSprite 1 .CollidedWith other do when Web1.GotText url, responseCode, responseType, responseContent do when Button1.Click do

Probably the most common event is a button click event: what should the app do when the user clicks a button.

Event handler code block: when Button1.Click do

button handler code block: when Button1.Click do set Button1 BackgroundColor to (red selected)Button1.Click is an event that can happen to the app. The gold when Button1.Click block is called an event-handler. The blocks inside it are the response to the event. set means to change something, in this case, change the button's BackgroundColor to red. The blocks, as a whole, specify that when the user clicks the button it should turn red.

A button click is an example of a user-initiated event. Not all actions are triggered by the user. These events trigger an action but are not initiated by the user.

  1. Timer events, sort of like an alarm clock going off
  2. Sensor events, such as when GPS coordinates are beamed to the device
  3. Phone events, including incoming texts.
  4. Animation events, such as two objects colliding
  5. Web events, such as some requested data arriving from the web
  6. App (Screen) launch events

Naming Components

bear_Button jellyFish_Button penguin_Button flower_ButtonThe recommended standard is to use a capitalized descriptive name, followed by the capitalized component name - with no spaces between words. Examples include: "ScoreLabel", "ScoreTextBox:, "TitleLabel" or "InstructionslLabel". (AppInventor doesn't allow spaces so if you space in between the words, App Inventor will automatically insert an underscore and name your label "Score_Label".) If you prefer, you can also purposely enter an underscore in a name: TitleName_Label. This will differentiate between a "Name_Label" and a "Name_TextBox" component and will make programming the components easier to identify.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION