Student Instructions

You do not need to watch this video to understand or complete this lesson - it is merely here if you are interested in getting a general overview.

In this lesson to get started we will only use a few of the features depicted.

Student Instructions

Welcome to Design Mode

In App Lab "Design Mode" lets you drag and drop User Interface (UI) elements into the app and then add code to respond when a user interacts with those elements. It's kind of two-step process, but we'll learn all about it in this lesson.

To start let's just look at Design Mode and add a single UI element (a button) to our app. We'll add code later on.

Vocabulary

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.

Student Instructions

Event-driven programming

App Lab apps work by adding code to respond to certain events that occur in a program. It's App Lab's way of saying "Hey! something just happened!". Your code can then respond to each of these events.

Collectively, the coding tasks involved in making your app respond to events by triggering functions are called Event Handling.

In App Lab all event handling starts by adding a special block of code called onEvent. Here is how to do it:

A small example - move turtle forward on "click"

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. Here is an example with everything labeled:

You'll try this next!

Student Instructions

Event-Driven Programming Patterns

Now you're getting the hang of it!

What you have just done once will become a familiar pattern to you. When making event-driven apps in App Lab you usually go through the following steps:

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

Debugging

We haven't had a ton of practice with debugging yet. But if you have ever written any code and it threw an error, or didn't work for any other reason and you dug in and figured out why and fixed it, you were debugging.

We'll do some debugging practice later on.

The next tip we'll learn about will help make debugging easier for you later on.

Don't Worry!

Even for professionals, it's very common to go through several cycles of run-test-debug to get it right even for very small programs or pieces of code. It's the nature of the business.

In the next few levels we'll practice this pattern of creating event-driven programs and also debugging.

Student Instructions

Choosing Good IDs

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.

For example, if you have many buttons in your program, you will want to give each an ID that describes what the button does.

So, instead of this:

• button1 and button2

You might make IDs that convey not only that it's a button but what you intend the button to be used for, like:

• forwardButton and leftButton or
• fwdBtn and leftBtn or
• forwardBtn and leftBtn
• it's up to you!

Rules About IDs

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 (".").

Why no spaces?

Many computer systems do not allow function names and IDs to contain spaces. We typically use camelcase in our lessons.

You've already seen several examples like this: moveForward, onEvent, turnLeft, etc. It's important to realize that camelcase is a style convention, not a hard and fast rule of JavaScript.

Case-sensitive?

This means there is a difference between LeftBtn and leftBtn (notice the Capital L on the first one).

These differences seem annoying at first, but you get used to it, and actually learn to appreciate the fact that the computer requires such precision.

There are a few common styles for capitalizing and spelling multi-word IDs:

• "Camelcase" -- aCamelcaseNameMightLookLikeThis
• Underscores -- Some_people_like_to_use_underscores_to_separate_words
• dashes -- Others-like-to-use-hyphens-or-dashes

Whatever you choose is up to you. It's your style. It just helps to be consistent.

Student Instructions

Descriptive IDs

You try it - give your buttons descriptive and meaningful IDs rather than the default button1, button2 and so forth.

After you change the ID in Design Mode remember to:

• Change the event handler code so that it correctly references the new IDs of the buttons
• Run - Test - Debug the program to make sure it works, and debug any problems.

Student Instructions

Play with different event types

If you haven't yet, you should experiment with different event types with your onEvent blocks. The ones that will work best here are mouse-related ones such as: * click * mousemove * mousedown * mouseup * mouseover

There are some events that capture keystrokes from the keyboard. These are interesting, but they do not work easily with buttons. We'll stick to mouse events for now, and get to keys later.

Be sure to experiment with each of the ones that start with "mouse...".

Once you've have played a little bit, click Finish to move on.

Student Instructions

Learning How to Debug Programs

Debugging is a skill and an art. With practice you learn how to write relatively bug-free code and more importantly you learn about yourself and the kinds of errors you typically make.

But learning how to debug takes some time and getting used to, and you will learn about the different kinds of things that can go wrong when you write programs.

It bears repeating:

Debugging is part of the problem-solving process of programming.

• Rarely does code work exactly the way you want the first time.
• If you write some code and need to work out a few bugs that does not mean you are bad programmer - actually the opposite might be true.

Be a Pro! Even professionals do not expect to write bug-free code on the first

• Instead they get in the habit of running their code, checking their assumptions, and making changes as needed. Programming isn't a fixed set of steps.
• It's a creative and continuous cycle of writing, testing, and improving code.

Don't Worry! We'll Practice.

• With practice you eventually stop making certain kinds of errors that beginners run into, but there's always something around the corner that needs to be worked out.

Common Types of Errors

In the next few levels we'll practice debugging a few common types of errors. They generally fall in two categories:

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.

Click Continue to start practicing

Student Instructions

Goodbye, Turtle!

Using the turtle as a form of output was helpful as we learned about UI elements and event handlers.

But it's time to move on. Goodbye, fair turtle! We'll miss you.

Typically when you handle an event your code makes changes to UI elements to make a computation or update the app display in some way. Since we only have one UI element right now, we'll just add code to change it every time we click it.

setPosition and Screen Dimensions

The setPosition command (now added to the Toolbox) lets you move UI elements to an arbitrary position on the screen (and optionally set the size at the same time). Here is the generic form which shows that: for a given UI id, you can explicitly set the x,y location on the screen as well as the width and height.

The little arrow on the right side mean that some of the parameters are optional. You can click the arrows to collapse or expand the available parameters.

You (perhaps obviously) need to plug actual numbers into these parameters of setPosition for it to have any effect. The numbers for setPosition x and y coordinates of the screen. This is similar to the turtle's moveTo(x,y) command.

Remember:

• 0,0 is the top left corner.
• Specify a location by how many pixels from the left and down from the top of the screen it is.
• The screen is 320 by 450 pixels.
• You can hover over the screen to see the x,y coordinate of any point.

Student Instructions

Design Mode: Add a label

Well, now we have the beginnings of a little game! Time to go back to design mode to start embellishing our program.

You try it: - Add a text label that says "Try to Catch the Button!"

• Switch back to design mode
• Drag a label on the screen
• Set the text to be something like "Try to Catch the Button!"
• Set any other properties or styles of the text label that you want.

Student Instructions

How to Add Images in Design Mode

Adding an image UI element in design mode is relatively simple. But you have three options for how to get the image you want.

Enter a URL of an image on the web

There are several ways to get the URL of an image.

A common technique (shown at right) is to find an image you like on a web page and then right-click (or ctrl-click) and choose an option that says something like "Copy Image Address" then you can paste it into the text box in App Lab.

If you're unsure, you can also choose an option like "Open Image in New Tab" which isolate the image by itself and the URL will show in the address bar, which you can copy/paste into App Lab.

Common Mistake: Using the URL of an image search web site rather than a URL of the image itself.

• Make sure you get the path to an actual image file - something that ends with .jpg, .gif or .png.
• A URL that starts like this: https://www.google.com/search?q=cat&espv=2&biw=1497.... is probably wrong.

Upload your own images

If you have saved images on your computer you can upload them into app lab's asset manager. Just click Upload File and follow the dialogs on screen.

For images the file must be of type: .jpg, .png, or .gif

Once you've uploaded the image then you need to Choose it to set the image to that file. If you add multiple images you'll see them all listed every time you upload a file and you can choose to use any file that you've already uploaded.

Use a Pre-Loaded Icon

App Lab comes with a set of handy single color icons (black icon, white/transparent background) that you can use for buttons or graphics, whatever you like. You can also change the color of the icon after you add it to the app.

The trickiest part is that you need to find and click on the "Icons" tab once the asset manager pops up.

Click Continue to try it!

Student Instructions

Add an Image and Make a Chaser Game!

Now You Try it - add an image to your app and modify the code so that the image jumps around the screen rather than the button. Your little game should have:

• Text on the top of the screen with a title or instructions for what to do.
• An image that "runs away" (moves randomly) based on some mouse event.

Tips: * Hint - the easy way to do this is to simply change the IDs in onEvent and setPosition to respond to the image instead of the button. * Remove the button from the app after the image is working. We don't need it anymore. * Change the label text so that the instructions make sense for your game. * The game is even more fun if you use the mouseover event instead of click

Optional Extensions: * Make the background interesting * Add another image that runs away. * See what happens with the commands hideElement and showElement * Have two UI elements where interacting with one controls or does something to the other.

Finalize your "Chaser Game v.1" and click Finish.

• Note: We'll revisit this game in the next lesson where you can improve it. This is just version 1

Student Instructions