App Inventor 2
Programming mobile phones with Android 
by App Inventor 2 - Juan Antonio Villalpando

- Initiation Tutorial App Inventor 2 -

Return to tutorial index

____________________________

User interface

7.- Selection.

ip7_selection

Let's look at different ways to choose, select ... with CheckBox, Spinner, ListView and TextBox.

Create a new project and add the controls to the next image ...

Remember that for the Layout occupies the width must put in propierty Width: Fill parent.

We went down to our computer these three image files (right click on the image and save) and then click Upload File... to our project.

We started with Blocks:

__________________________________
A. CheckBox

When we make a CheckBox the chosen image will appear in the control Image1.

In addition CheckBox, uncheck the other (false).

If we remove the if and each pair of false CheckBox, you can choose more than one box at a time.

That is, we just put Imagen.Photo as fresa.gif within the CheckBox.Changed. (Same in the other two CheckBox)

__________________________________
B. Spinner.

When you press the Spinner1, we will get a list of options.

First we create two lists with the name of the items you want to appear in the menu Spinner and another with the name of the file containing each image.gif

- When the display starts, it loads the list of fruits1 on the menu Spinner.

- When you click an option, taken index of pulsed option, ie the rate of a fruit and

is selected in the image list, this index, so that matches the index of the fruit selected with index image displayed.

- The two lists have one correspondence, ie each elemente of a list corresponds to an element of another list and also respecting the order.

__________________________________
C.- SelectorDeLista, List menu.

Add code for ListPicker, similar to Spinner.

__________________________________

D. - Selection by text.

We write a text (strawberry, pear or lemon) and using the command if an option is performed.

One must be careful with uppercase and lowercase.

________________________________
8.- Another example of ListPicker.

ip8_listpicker

- In this case we put one ListPicker1 and other ListPicker2 . Also we put a Label1.

_________________
Design

- We can choose between triangles and rectangles.
- According to choose one way or another we will Rectangle, Equilateral, Isosceles and Scalene. Or, Square, Rectangle, Rhombus and Rhomboid.
- When choosing one of these classes, we will get its definition.

_________________
Blocks

Note that two lists have been created.

The list of triangles and squares, was made ​​directly by adding those words, but the list box, Equilateral, ... Rombo, Romboide, was performed using a csv file, ie those words are passed to a csv format and then they get into the list.
it's a somewhat complicated way to the beginning, but it is effective.
in csv format elements are enclosed in double quotes and separated by a comma.

The line change is performed by / n.

- If you do not want it to look ListPicker2 , we put the Property Visible: false

In this code it notes that the word Rectangle belongs to both Triangles as Quadrilateral. So when we want to get the definition has to check if it has arrived by selecting Triangles or Rectangles.

__________________________________