1. FOP: Buttons and Events

2. Introduction:
Now that we’ve have learned the basics concepts used in any programming language, we will now apply these concepts to something more familiar to us USERS.
Before we begin you will sketch out an app you use regularly on your own piece of paper.
Draw a rectangle representing the screen of a mobile device
Take one minute to sketch out what a screen in your favorite app looks like
Now make a quick list of everything on that screen that you can interact with as a user.
Finally, write down one action-and-reaction of the app: one thing you do, and how the app responds.

3. Event-Driven Programming:
Apps have elements on the screen that you can interact with (i.e. cause user- generated events) and apps can respond to these events in various ways.
We can use what we’ve learned so far and apply that knowledge to having our programs react to different actions like clicking, typing, swiping between screens, tilting a phones, dragging your finger, etc.
We may not understand all the technical details yet, but it seems clear that most applications we use respond to events of some kind.
Computers can sense the events that we generate in order to determine how the application should run. We’re going to start exploring how event-driven programming makes this possible.

4. Design Mode:
We now have a new feature in App Lab which allows to create a User Interface (UI) elements into the app. We can also add code to respond when a user interacts with those elements.
User Interface (UI) - The "User Interface" or UI of an app refers to how a person (user) interacts with the computer or app. There are common patterns to user interfaces that you probably know about just from experience:
UI Elements or objects, like buttons, images, text boxes, pull down menus, screens and so on.
UI Events or controls, like click, scroll, move mouse, type keyboard key, etc.
You can now add UI elements like buttons, text input boxes, dropdown menus, checkboxes, images, graphs, etc.

5. Design Mode Continued:
All UI elements you create will have a unique ID. This ID is important because it is how you refer to that specific element in your code.
Also when you create your UI element you can control the width, height, position on the screen, along with many other features that the element can contain.
Try by creating a Red Button in App Lab that says click me!
Make sure to give your button a meaningful ID name.

6. ID Naming Schemes:
Good IDs are meaningful and descriptive. Just like good names for functions, you will want an ID to describe the intended purpose of the element.
Instead of button1 or button2, try forwardButton or leftButton depending on the intended functionality of said button.
In making descriptive and meaningful IDs there are some rules about IDs you need to know. IDs…
are case-sensitive
cannot contain spaces.
must begin with a letter (A-Z or a-z) and may be followed by any number of digits and letters.
can contain hyphens (“-“), underscores (“_”), colons (“:”), or periods (“.”).

7. Events:
Once you have created you’re UI element with its own unique ID you can now refer to that ID using a new command called onEvent(“id”, “action”)
“action” – Refers to the event taking place like a click or a drag
To use the onEvent command you must first switch back to CODE mode in the top left corner and drag the command from the UI controls section in the toolbox.
Add commands you want to run inside the onEvent command when a specific action occurs.
Imagine I created a button with the ID “btn_blue”. If I wanted my button to moveFoward(50) when I clicked it I would do so using the code below:
onEvent(“btn_blue”, “click” , function(){
moveFoward(50);
});

8. Events continued:
It's important to understand in Event-Driven programming that:
Users trigger events - Events occur when users click a button, tap the screen, move the mouse, type a key on the keyboard, etc.
Events trigger code - When an event occurs or "fires" it can be used to trigger a particular JavaScript function.
App Lab's onEvent block is a type of event-handling function called an Event Listener. It wraps all of the setup up you need to do event handling into one command that has several parts.
Use the block code so you don’t need to handle all the messy details of writing it yourself unless you’re up for the challenge!
You may experience some hiccups at first. That’s okay. That’s what programming is about. Run-Test-Debug

9. Programming Patterns:
Step 1 - Design Mode
Add a UI element (or a few) in Design Mode
Step 2 - Add onEvent to Code
Set the id and event type to listen for some event on that element.
Step 3 - Write the code for the event handling function
The code describes what you want the app to do WHEN the specified type of event happens on the specified ID.
Step 4 - Run. Test. Debug.
If the program doesn't work at first (this is very common) try-try again

10. Debugging:
You’ll realize that when you begin to write any program things don’t always go as expected.
It is your job to alleviate that issue. With practice your debugging skills will grow and you’ll learn about the typical flaws someone can make.
Debugging is part of the problem-solving process
Code is usually never perfect the first time it is written, that’s normal.
Get into the habit of running your code more frequently to make sure everything is behaving the way it should be.
Whenever you find a mistake you don’t have to try so hard in finding the error since it will probably be something you just recently wrote.
Debugging is a creative and continuous cycle of writing, testing, and improving code.

11. Common Types of Errors:
There are two types of errors you will commonly see while programming. Syntax Errors and Logic Errors:
Syntax errors:
Things you misspelled or wrote in such a way the computer doesn’t understand what you’re trying to say
Usually the computer spits out an error message of some kind that is a clue about what it can’t understand
Fix these with careful reading of the lines that have errors
Logic errors
The program runs but doesn’t do what you think it should.
Can be tricky to fix because there might not be an error message
Fix by retracing your steps, being humble, and trying to understand why the computer is interpreting what you wrote the way it is.

12. Overview:
Today we were actually introduced to two tools that will help us build increasingly complex applications.
The first was Design Mode, and hopefully it was quickly apparent how powerful this tool is for creating visually appealing and intuitive user interfaces without cluttering up your code.
The second tool was onEvent which is the general command for all event-handling in App Lab.
Event-driven programs are an important concept in programming, but we’ve just gotten our feet wet. In the next lesson we’ll go further by adding multiple screens, and getting better at debugging.