Good Hope School

Secondary 1 ICT
Mobile App Development – Ch.2 Basics
Name: _________________________________ Class: ___________ ( )

The Structure of an App Inventor App

 An app consists of components. A Screen can contain other components.
TextBox

Label

Slider
Screen
Button

CheckBox

 Each component (including a Screen) has its own properties, shown on the panel on
the right in App Inventor.

Properties of
the selected
component

In selection

List of all
components

 To add a new component to a Screen, drag the component from the Palette to the
Viewer.

S1 ICT Mobile App Development – Ch.2 Page 1 of 10

 🔨 Practical 1
Create a new project. Try out components such as Label, Button, TextBox and
Checkbox. Figure out the steps to finish the following tasks and report to the class:
1. How do we change the background colour of the Screen?

2. How do we put the app in the landscape orientation?

3. How do we change the display text of a Label or a Button?

4. How do we change the text colour of a Label?

5. How do we set bold and italic styles to a Label?

6. How do we centre-align a Label just like “Welcome to App Inventor!” below?

7. Toggle the TitleVisible property of a Screen. What is the difference?

Renaming Components
 Each component in the app has a unique name.
 It will be very hard to identify the components during coding if you leave
them with the default numeric names.
 Always rename the components with a consistent set of short and
meaningful names!
 Component names can contain only letters, numbers and underscores
and must start with a letter or an underscore.
 To rename a component, select the component and click Rename in
the Components panel of the Designer view.

 Checkpoint
How will you name these components?
 Name it here Good examples

(A Button for login)

(A TextBox for entering First Name)

S1 ICT Mobile App Development – Ch.2 Page 2 of 10

Common Usage of Components
 To signal the app to do something
Button (when the button is clicked, do …)
 Allows the user to enter text and numbers into
TextBox
the app
Label  __________ on the screen

Basic Input/Output
To program our app, we go to the Blocks page in App Inventor.

There are built-in blocks and blocks for each component on the Blocks page on the left.

Showing all Colors blocks Showing all blocks for Button_OK

Example: Detecting a Button Click
When Button_Calculate is clicked
(do something)

Example: Changing the Background Colour of a Screen after Clicking a Button

When Button_ChgBg is clicked,
change the background colour of
Screen1 to yellow.


 Add the Color block from the section.
 Screen1.BackgroundColor means the BackgroundColor property of Screen1.

>

 Checkpoint
This time when Button1 is clicked, the background colour of Button1 should turn yellow.
Complete the program.

S1 ICT Mobile App Development – Ch.2 Page 3 of 10

Example: Changing the Text of a Label after Clicking a Button
When Button_ChgAns is clicked,
change the display text of
Label_ans to “Answer: B”.


 Add the text string block from the section. Type the text you want to
display in the block.
Example: Capture Text Entered in a TextBox and Display in a Label
When Button_OK is
clicked, change the
display text of
Label_name to the text
entered in
TextBox_name.


 obtains the text entered by the user in TextBox_name.
 TextBoxes with white BackgroundColor may not be clearly visible on iOS/iPadOS. It
is recommended to set the LightGrey BackgroundColor instead.
 TextBoxes by default has a hint text. It can be removed by clearing the Hint property.

🔨 Practical 2
Make a simple program that shows the message “hello world” when a button is clicked.


Step 1. Creating the User Interface
Set the title of the Screen to be “Ch.2 Practical 2”. Drag a Button and a Label and
position them like this:

Change the display text of the Button to “Click me” and the display text of the Label to
nothing:

Rename the Button and the Label with proper component names. How do you call
them?

S1 ICT Mobile App Development – Ch.2 Page 4 of 10

 Step 2. Coding
Go to the “Blocks” page and finish the following code.

Step 3. Test it with the Companion App

The app starts without showing “hello world” before clicking the button ·················
The user interface items are set properly (title, button, label) ·····························
The response is correct ·············································································

🔨 Practical 3
Import S1_Ch2_CatDog.aia. The project contains 2 images in the media library:

Complete the app such that when the “cat” or “dog” button is clicked, the correct
background image will display accordingly.


Step 1. Creating the User Interface
Drag two buttons and place them as shown above. Change the display text of the
buttons to “Cat” and “Dog”.
Rename the Buttons with proper component names. How do you call them?
Step 2. Coding
Go to the “Blocks” page and finish the following code.
Hint: When the cat button is clicked, we change the BackgroundImage property of the
Screen to be the file name of the cat image (cat.jpg).

Step 3. Test it with the Companion App

The user interface items are set properly (buttons) ··········································
The app starts with a white background ··························································
The cat background shows correctly when the cat button is clicked ······················
The dog background shows correctly when the dog button is clicked ····················
Test the two buttons again to double check ·····················································

S1 ICT Mobile App Development – Ch.2 Page 5 of 10

Notifier
We can use a Notifier component to display popup alert messages. Drag the Notifier from
the Palette (User Interface) to the screen.

Joining Text Strings

If we want to combine static (will never change) text with dynamic (changing at any time,

unpredictable, e.g. user inputs) text, we can use the block ( section) to
combine them to form a meaningful sentence.

Example: Capture Text Entered in a TextBox and Display in a Notifier

When Button_OK is
clicked, show a message
containing what is entered
in TextBox_name with
“Hello” as the title and
“OK” as the button.


When Button_OK is
clicked, show a message
dialog “Hi [what has
been typed in
TextBox_name]” with
“Hello” as the title and
“OK” as the button.

S1 ICT Mobile App Development – Ch.2 Page 6 of 10

 🔨 Practical 4
Create a simple app that gives a greeting with a notifier message box after receiving the
name in the TextBox. The Notifier should display the name entered by the user.


Step 1. Creating the User Interface
Prepare the user interface as shown above. What do we need?
Set the BackgroundColor of the TextBox to be grey to improve readability. Remove
the Hint text.
Rename with proper component names. How do you call them?
Step 2. Coding
Go to the “Blocks” page and finish the following code.

Step 3. Test it with the Companion App

The user interface items are set properly ·······················································
The TextBox has no hint text and is grey in background colour ····························
The notifier pops up after the OK button is clicked ···········································
The text in the notifier is correct ···································································

Performing Calculations
We use the blocks in to do calculations. These blocks will fit into other blocks such
as those of a Notifier or a Label.
A number value

Addition, subtraction,
multiplication and division
Rounding to the nearest
integer
Format with decimal places

S1 ICT Mobile App Development – Ch.2 Page 7 of 10

Examples: Basic Calculation
1+2 Result:

(12+20) ÷ 8 Result:

Display the nearest integer of 32 ÷ 6 Result:

Display the result of 32 ÷ 6 in 2 decimal places Result:

Example: Calculate using inputs from the user

When Button_Buy is clicked, calculate Product Price (TextBox_price) x Quantity to
Buy (TextBox_qty) and display the result in the Notifier.

S1 ICT Mobile App Development – Ch.2 Page 8 of 10

 🔨 Practical 5
Create a simple app that calculates the Body Mass Index (BMI) by taking the user’s
height (in cm) and weight (in kg). The result should be in one decimal place. Show the
result with a notifier message box.

The message should be “Your BMI is XX.”, where XX is the calculation result.

The formula to calculate the BMI is:

𝑤𝑒𝑖𝑔ℎ𝑡𝑘𝑔
𝐵𝑀𝐼 =
ℎ𝑒𝑖𝑔ℎ𝑡𝑐𝑚 ℎ𝑒𝑖𝑔ℎ𝑡𝑐𝑚
100 × 100

Step 1. Interface Design

Create a new project and design the interface.

Step 2. Coding
Go to the “Blocks” page and finish the following code. Optionally, you may use
to shorten your code.


 

⑤

Complete the code.

:
:
:
:
⑤:

Hint: To have 3 inputs in the join block, click the blue gear icon on the join block and
drag more “string” to “join”.

S1 ICT Mobile App Development – Ch.2 Page 9 of 10

 Step 3. Test it with the Companion App
Test Case Height: 150 Height:
Weight: 42 Weight:
Expected Result Your BMI is 18.7.
Actual Result
Do they match?

💡 Debugging Exercise
1. In one of the students’ BMI app (Practical 5), the result shows:

What is the mistake here?

2. We want to obtain the height in cm from the textbox TBox_cm and convert it into
metres after clicking the button Button_cal. The result should be shown in the
label Label_m.

When attaching the block of TBox_cm, it cannot be attached and we see the
following message. What is the mistake here?

References
 Mobile CS Principles – https://course.mobilecsp.org
 MIT App Inventor – http://appinventor.mit.edu

End

S1 ICT Mobile App Development – Ch.2 Page 10 of 10