Q2 L1: Adding Blocks in

the Blocks Editor

Lesson Objectives:

Recognize Built-in Blocks, Component Blocks

and Any Component Blocks
Identify the function of some Built-in Blocks
and Components Blocks
Add blocks to the Blocks Editor to make the
project do something
 Blocks Editor
 forms the second central
work window of the AI
development environment
 where you program the
behavior of your app
 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
 Blocks  color-coded and
you can connect
them like puzzle
pieces to create a
program
Workspace  where you
assemble the
blocks into a
program
Backpack allows you to carry around
blocks throughout your project
repositories, allowing blocks to
be transferred between
projects and between screens

Trash where you place

unwanted blocks
 Three Categories of Blocks

 Built-in Blocks are always

available and handle things
like Control, Logic, Math,
Built-in
Text, Lists, Colors, Variables Blocks

and Procedures.
 Component Blocks are
blocks that correspond to the Component
Blocks

components that you have

chosen for your app. Any
Component
Blocks
 Any Component Blocks are
special blocks that can be
used to prevent making lots
of repetitive codes.
 Reminder for Mini Task#1 BestAppEver
 You need to run the BestAppEver using your Android device.
 Record a video that this app is running and make sure to show the
following:
1. The initial words/greeting of the app (5 points)
2. Type in “Hello” followed by your name and section in the
BestAppEver’s textbox and press the Get Message button to hear
the typed message. (10 points)
3. Shake your Android device to show that the contents in the textbox
is automatically deleted. (5 points)
 Once done recording, send your video in
your section’s MS Team under Assignments category.
 Review:
Adding Blocks in
the Blocks Editor

OM
1. This where you program the behavior
of your app.

A. Design Editor
B. Blocks Editor
C. Emulator
D. Android Device
Wrong… 
Correct! ☺
2. These are color-coded and you connect
them like puzzle pieces to create a program.

A. Variables
B. Properties
C. Components
D. Blocks
Correct! ☺
3. These blocks are already available
regardless of which component are in
your project.

A. Built-in Blocks
B. Component Blocks
C. Any Component Blocks
D. Conditional Blocks
Correct! ☺
4. These blocks correspond to the
components that you have chosen for
your app.

A. Built-in Blocks
B. Component Blocks
C. Any Component Blocks
D. Conditional Blocks
Correct! ☺
5. It allows you to carry around blocks throughout
your project repositories, allowing blocks to be
transferred between projects and between screens.

A. Trash
B. Recycle Bin
C. Backpack
D. Jetpack
 Review:
Designing a User
Interface
(Creating a Form)

OM
1. This refers to all the visual elements of
an app that you can interact with .

A. Design Editor Interface

B. Graphical User Interface
C. Blocks Editor Interface
D. App’s Screen Interface
Wrong… 
Correct! ☺
2. It is a special kind of text box that hides the
user’s input or what the user entered by
changing the text into “*”.

A. Spinner
B. CheckBox
C. TextBox
D. PasswordTextBox
Correct! ☺
3. It is a blank white box wherein you can enter username
and even chat replies and has a Hint Property which can
be used to include extra instructions or information.

A. TextBox
B. Label
C. Button
D. Image
Correct! ☺
4. This layout allows you to arrange
components into a grid or table.

A. VerticalArrangement
B. TableArrangement
C. HorizontalArrangement
D. ScrollArangement
Correct! ☺
5. These properties let you set the dimensions of the component.

A. TextAlignment and TextColor

B. FontSize and FontTypeface
C. Height and Width
D. Image and Shape
Lesson #4: Handle Events
(Fling App Part 2)
OBJECTIVES:
 Identify how events work in App Inventor
 Recognize different type of events
 Adding a score feature and changing the
difficulty level of the Fling App
For an app, an event is whenever something
happens while the code is running. Apps are very
precise, as these can monitor every millisecond,
every pixel and every millimeter of movement, all
at the same time, which means that its recording
of events does not get confused.
 Components Capture Events
Components are what an app uses to capture events and
there are two type of components:

Visible components Nonvisible components

 we see on the screen like
buttons, textboxes and
images
 often trigger events when
these are interacted with on
screen, such as when one
these is touched or when
text is entered in these
 sensors that are built into the
device which do not show up on the
screen like the LocationSensor,
SoundRecorder and clock
 can capture events that happen in
the background, such as the current
time and current GPS location
 can also be used to capture events
that happen outside the screen,
like the phone being tilted, texts
coming in, and images taken by the
camera
 The Different Types of Events
1. User Initiated Event
 occurs when the app is
told to do something
through such inputs as
touch, voice commands
or button clicks
 used to record
information, change
preferences or navigate
around the app
uxdesign.cc
The Different Types of Events
2. Initialization Event
 happens when the app
starts up, either when it
is connected via
Companion App or when
its icon is tapped
 often used to set up
initial values of
properties and variables
or to reset the screen for
a new user
NativeScript.org
 The Different Types of Events
3.Timer Event
 captures the passage of time
 uses the clock component to wait for a
specific time or date to happen, such as
having a sound play at 5 p.m.
 can also wait for a certain amount of
time to pass before activating
something, such as making a phone
snooze every 5 minutes before sounding
another alarm
 can execute or can be set for regular
intervals, such as everyday or every
hour
 also used to create animations, perform
an action on a regular basis and trigger pinterest.com
alarms
 The Different Types of Events
4. Animation Event
 triggered when objects
interact with each other
within the canvass
component, such as when
balls collide with each
other or when an
ImageSprite reaches the
edge of the canvass
 most often used in games
gifer.com and other interactive apps
 The Different Types of Events
5. External Event
 happens when the app
receives data from an
outside source
 can be incoming calls and
text messages, as well as
GPS data from
 often used to capture data
from other devices, to
notify when websites have
new data, or to automate
certain activities in
response to that data
techcrunch.com
 Event Trigger Behaviors

 Apps are event-driven, without events, an app will do

nothing.
 What an app does in response to an event is called a
Behavior which is configured using blocks in Blocks
Editor.
 While App Inventor made capturing events super simple
by using components, it is up to you to decide how the
app will behave with these events.
 Behaviors can be as simple as changing the text on a
button to something as complex as syncing databases
between multiple devices. To create new behaviors, an
event handler is needed.
REFERENCES:
 MobileApplication Development Using App Inventor
by Glenn Santos
 App Inventor 2 Essentials by Felicia Kamriani and
Krisnendu Roy
 Q2 L5:
Storing Data Using Variables, Storing
Data in Lists, Making Decisions
Using Conditionals
(Fling App Part 3)
Lesson Objectives:

• Identify how events work in App Inventor

• Recognize how to store data using variable and using lists
• Analyze the code that makes the ball flung only from the lower
half of the screen
 Storing Data Using Variables

Variable creates a value that can be changed

while an app is running, and gives that value
a name. Variables are global in scope, which
means you can refer to them from any code in
the app, including from within procedures.
When you create a new variable block, App
Inventor chooses a unique name automatically.
A local variable is a variable that is declared
within a function or it is an argument passed
into a function. This means that you can only
access these variables in that specific function
where they are declared or passed in as an
argument.
 Things to remember about Variables:
• Before you start using variables, first your
need to initialize them. This process involves
creating the variable by getting it a name
and then giving it an initial value just like a
property.
• The value of a variable can be changed
by incrementing it. Incrementing means
adding a fixed value to a variable every
time a specific event happens. Usually, we
increment by adding one (1) to the
variable, but we can increment by any
number we like. We often increment things
like a user’s score or a number of times a
button was clicked. Variables that
increment on a certain value are often
called counters.
• Expressions can also be used to set a variable.
Math and Logic blocks can be combined to create
complex calculations. You can duplicate many of
your formula in your spreadsheet app using the
blocks found in your app and these calculations or
formula are what we called expressions.
• One of the downsides of using variables is that its
value is hidden from view. While properties can
visibly change the appearance of its components,
like increasing or setting new text. In the same
way, it is one of the strengths of using variables
because you can show them when you want it and
hide it until needed. For example, you can track
the number of correct answers in a quiz but only
display after the user completes it.
 Storing Data in List
Many apps use lists of data. For • Lists can be initialized in two ways:
example, a game may keep a list
of high scores and your Facebook - sets the variable as an empty list and
app keeps a list of your friends. just add items to it later

Lists are a type of data structure

used in every programming
language, not just App Inventor.
We use lists to create and
manipulate different sets of
values/elements.
- used to start with the specific items in
the list and it is better to use because it
has slots where you can assign values
you want
 Things to remember about Lists:

• The make a list block is called a To mutate the a block, click. As

mutator block. It can “mutate” what was shown here.
depending on how it is
assembled. These are blocks
that can be identified by its blue
gear icon .
• Items can also be added and • To remove items in the list,
removed from the list. The you can use the remove list
simplest way to add items in the item block, as shown in this
list is using the add items block. example.

This lets you add items at the end

of the list. You can also mutate it
to increase its slots.
• An index is the position of the
item in the list. The first item in
the list is at index position 1
and the second is at the index
position 2, and so on. Knowing
the index of an item makes
working with lists easier.
To remove the last item from the list
of users and you don’t know the
exact index for this item while the
app is running, the length of list
block can get the number of items in
the list which is also equal to the
number of the last index on the list.
You can also get the index of an The last way to get the index
item on a list if you know its value. is by incrementing a variable.
If you want to remove the
username typed in by the user, you
can use the index in list block,
which returns the index of the item
with the same value as the one in
the index in list thing slot.
Use the select list item block to
get an item from the list in the
position indicated by the index
like what was shown in the
following blocks configuration.
• Another way to get items is by
picking them at random using
the pick a random item block
 Making Decisions Using Conditionals
• The most useful thing about
apps is their ability to help us
make decisions. We add
conditionals to our app that
perform a specific set of
commands as long as certain
conditions are met. Setting
conditions can be done by
creating Boolean expressions.
• Boolean expressions use blocks
to compare the values of one or
more variables or properties
against a certain condition.
Unlike other expressions, this
only returns two values: true or
false. It returns true if the
condition holds, and false if it
does not.
The following blocks are used to create Boolean expressions:

➢They compare whether the

➢The first block returns true if block in one slot has a larger
the blocks entered into the value than the one in the other.
empty slots are equal. The (found in Math section)
second does the opposite and
returns true if the blocks in the
slots are not equal. (found in
Math section)
➢These are also blocks that you can use to test common
conditions you will often encounter when making apps. These
blocks check whether the attached expression, variable, or
property is a number, string or list. If it is, it returns true or else,
it returns false. (found in Math, Text and List sections)
➢It returns true if there is at least
one character inside the string,
else, it returns false. (found in Text
section)
➢It returns true if the expressions in
the slots are all true, otherwise, it
returns false. (found in Logic
section)
➢It returns true if the expressions in
the slots have at least one true
result, otherwise, it returns false.
(found in Logic section)
➢It flips the value of the Boolean
expression attached to it. It returns
true if the attached block is false,
and false if the attached block is
true.
The condition you will make the most is the if-then block.

➢The then block checks the ➢If making more complex

Boolean expression plugged decisions if-then-else block can
into the “if”. If it is true, the be used.
app will perform the
commands in the “then” slot. If
it is false, it will continue to the
next block or do nothing if
there are no other blocks left.
References:

• Mobile Application Development Using App Inventor by Glenn Santos

• App Inventor 2 Essentials by Felicia Kamriani and Krisnendu Roy
• www.appinventor.mit.edu
Major PETA – Fling App