App Inventor Tutorial 7 PDF
App Inventor Tutorial 7 PDF
App Inventor Tutorial 7 PDF
This is an app which will demonstrate the use of the screen layout components. These
components will overcome any limitations caused by the ‘add screen’ capability in App
Inventor.
Currently – in the App Inventor stand alone package the use of multiple screens cannot be
deployed on a device. It suggests that the hardware cannot support multiple screens in
development mode. This is likely to be updated in future releases of App Inventor. One way to
overcome this limitation at this stage is to use the layout objects, i.e. the Screen Arrangement
components.
What you will develop is an app which can simulate multiple screens by showing and
hiding the screen layout components. ☺
‘Page 1’ will contain the HelloYou app (Tutorial 1) with the output displaying on ‘page 2’
‘Page 3’ will contain a 2 x 2 table arrangement with 4 buttons containing an image. ‘Page
4’ will load with the image from the pressed button moving around another table
arrangement (2 x 3).
1
Step 1: Open App Inventor
Once you have the App Inventor running type into your browser http://localhost:8888
In the properties panel change the Title field of the screen to ScreenLayout.
The first component we need is a Horizontal arrangement component. Drag this to our
screen and change its properties as follows:
This horizontal component allows us to place items side by side on the screen
horizontally. We will fill this component with 4 buttons. Drag over each button and
change its properties as follows:
2
As we are going to simulate 4 different pages in this app, we will use the vertical
arrangement component. This component allows us to arrange objects on the screen in
a list horizontally – basically we can think of the vertical arrangement as a mini screen.
2nd Vertical Arrangement: Rename – SLPage2 Width- Fill Parent Visible – untick
3rd Vertical Arrangement: Rename – SLPage3 Width – Fill Parent Visible – untick
4th Vertical Arrangement: Rename – SLPage4 Width – Fill Parent Visible – untick
(We cannot see these components as we made them invisible – we can tick the ‘Display
Invisible Components in Viewer check box to see our components)
The first page will contain the features from the ‘HelloYou’ app. Drag into ‘SLPage1’
component the following components:
The final label from the ‘HelloYou’ app will be displayed on Page 2 therefore drag a label
component into ‘SLPage2’.
3
Page 3 will hold 4 images which are buttons. When a user clicks on a button the image
will be displayed in Page 4. To display the 4 buttons, we can use a 2 x 2 table
arrangement. Into ‘SLPage3’ drag over a Table Arrangement component.
This component has default values of 2 rows and 2 columns which results in 4 different
cells.
Cell 1 Cell 2
Cell 3 Cell 4
In each cell place a button component and change its properties as follows:
4
In ‘SLPage4’ we are going to display one of these 4 images. This image will move
between cells of a table arrangement. In ‘SLPage4’ insert a Table arrangement
component and change its properties as follows:
In each cell insert a canvas object – we will later change each canvas background based
on the button the user selects in ‘SLPage3’.
In order to move the image around these cells we can add a timer event. Drag over a
Clock component to the screen. We can change the clocks interval property to 3000
which is 3 seconds (This means we can access the fired event of the timer object every 3
seconds) and untick its enabled property.
5
Step 3: Add the functionality to the Interface
Once the interface is ready we can set the functionality of the components. This app can
be broken into 3 main parts as follows:
1. The Hello You app: demonstrating how to use multiple layouts imitating
different pages. (‘page 1’ and ‘page 2’)
2. To show how to use the table layouts we can select an image and it will pass and
move to the different cells on the ‘next page’. (‘page 3’ and ‘page 4’)
3. To check for control over accessing ‘different pages’
The functionality of the program (step 3) is added by using the Blocks Editor - Open the
Blocks Editor to start adding code blocks.
Once the Blocks editor has loaded we want to add the code blocks for:
1. The Hello You app: demonstrating how to use multiple layouts imitating
different pages.
The Hello You app was documented earlier in Tutorial 1: Copy the following Code
Blocks for the functionality of the ‘HelloYou App’.
In addition to this we want the ‘Page 2’ layout to become visible and the current page
‘Page1’ layout to become invisible. We can therefore complete this block by adding the
following blocks displayed below.
6
2. To show how to use the table layouts we can select an image and it will pass
and move to the different cells on the ‘next page’.
As there is 4 buttons, we want to know which button was called to display the correct
image. To do this we can use a global variable.
Drag a global variable definition to the canvas and name it ‘Img’ Initialise this with a
number piece = 0.
Complete the code blocks for the described steps above for each button click event. You
should end up with the code blocks as outlined below.
7
Consider this:
– If the user clicks on the BtnCat we want the cat image to display on the next page.
– If the user clicks on the BtnMouse we want the mouse image to display on the next
page
– If the user clicks on the BtnCheese we want the cheese image to display on the next
page
– If the user clicks on the BtnXmouse we want the dead mouse image to display on the
next page
To do this we need to define another global variable – to store the image name, which is
a text.
Drag a global variable definition to the canvas and name it ‘ImageSource’ Initialise this
with a text piece = text. (It is ok to leave the initial text as ‘text’ as we will change this for
each button click.)
So for each button click we want the same events to happen therefore we can call a
procedure. To create this procedure we need to identify what will happen when the
button is selected.
2: After 3 seconds (as defined in the interval property of the clock) the cat Image will
load on cell 3 and disappear from cell 2.
3: After 3 seconds the cat image will load on cell 6 and disappear from cell 3
4: After 3 seconds the cat image will load on cell 1 and disappear from cell 6
5: After 3 seconds the cat image will load on cell 5 and disappear from cell 1
6: After 3 seconds the cat image will load on cell 4 and disappear from cell 5
7: After 3 seconds the cat image will load on cell 2 and disappear from cell 4
Steps 2 – 7 will then be repeated whilst the user remains on this page.
Steps: 1 2 3 4 5 6 7
X X X X
X X X
8
From the steps above we can see the order of the cat (X) movements as follows:
In order to add this functionality we must take each step above and logically work out
an algorithm.
For each cell location we must make that cell background the image and set the
previous cell background to null. We also must set the new cell variable to the next cell
location.
IF Cell = Current Cell THEN set previous cellBackgroundImage to Null AND set
current cellBbackground Image to the Imagesource variable AND set the cell
variable to the next cell value.
To set a text object as Null – drag a text block and leave it empty.
Repeat this IF/Then-do block for each cell in the horizontal arrangement, following the
table outlined about.
These 6 IF/Then-do blocks can be added under a ‘procedure’ component as this will be
called every 3 seconds.
9
As this is now a procedure, we can call this for our clock timer event. Drag onto the
screen ‘Clock1.Timer’ – Any code we put in here will be called every 3 seconds (as
defined in our interval property of the clock component)
When a button on Page 3 is clicked, we set a variable ‘Img’ to a value. Every 3 seconds
we need to check which value this is and ensure the ‘ImageSource’ variable is set to the
correct image. Looking at where we set this variable we can identify the code needed for
each of the 4 buttons.
10
IF ‘img’ = 1 THEN set ImageSource to
BtnCat.Image AND call our ‘procedure’
Along the top of our interface, we added 4 buttons – This simply shows the basic method to
show/hide a page. We can add the code block for ‘Page1btn’ to simply show the Page 1 - ‘SLPage1’
and hide the others – ‘SLPage2’, ‘SLPage3’, ‘SLPage4’ as follows:
11
We can also do this for Page 3 – ‘SLPage3’ :
When we think of our page 2 ‘SLPage2’ and page 4 ‘SLPage4’ we do not directly was to access them.
We only want to access page 2 after we access page 1, as we simulate the passing of information
between the ‘pages’. Similarly for page 4. For this reason we ensure ‘Page2btn’ to open ‘SLPage 1’
and ‘Page4btn’ to open ‘SLPage3’
Step 4: Try it out – Connect to the device and test the program
Create a new emulator by clicking on the ‘New emulator’ button at the top of our blocks
editor.
You must wait for the emulator to load fully before you test your app.
Once the emulator is ready - connect and send your app. Select the device from the
device list. This process may take a few minutes. Please be Patient.
12
Your initial screen will load like the HelloYou
App – with the 4 additional buttons.
Click on Page 2 button – youll notice you will return to the page 1.
Click on Page 3 button – click on any image button – this button will then load on next page and
every 3 seconds change its cell location ☺
EndNote: This app has demonstrated the 3 different uses of the Screen Arrangement components –
Using the table arrangement allows for component alignment like a grid. The horizontal
arrangement allows components to sit side by side on the screen whilst the vertical arrangement
allows the simulation of different pages. ☺ What else can you do with these arrangements .
~ Have Fun ~
13