2017년 5월 12일 금요일

List Blocks On App Inventor


List is a necessity in almost every app regardless of what programming language you use. This is the easiest way to create and manipulate a set of values/items/elements in an ordered fashion. Please go over the reference before we start. In this tutorial, we will learn how to create a list, add new items to a list, display list items, replace an item in the list, remove an item or remove everything from a list, search for an item, and sort a list.


The snapshot below is from our tutorial app. I recommend you to download the source of this application ListBlocks and try it on an emulator or on a device so you will have better understanding of list manipulation. In the source, I have added plenty of comments for you to easily understand the implementation. You should be able to see those comments once you load the source in your block editor window.

I tried to keep the source as clean as possible without optimizing it too much for beginners to understand. Once you understand the application, trust me, you will be able to rearrange the pieces in more efficient way. Also, for some operations I tried to control it through block editor which actually you can control from designer window like checking if a text box contains only numbers which you can do by enabling the NumbersOnly option in the designer window for a TextBox component, you can specify a ListPicker’s elements through ElementsFromString property in the designer window which I also implemented from block editor window. The purpose of that is to give you alternative ideas which you may need in the future. Also note that 1 and 1.25 are both numbers while list indexes are referred by only whole numbers.
Note that the comments in yellow in the image above are not part of the application.

Contents:

1. Create a List
2. Add Items to a List
3. Display List Items
4. Remove List Items
5. Replace an Item
6. Search for an Item
7. Sort a List
8. Shuffle a List 

1. Create a List

Creating a list is as simple as this-

We have just created four empty lists above, named list1list2list3, and userList. “create empty list” block can be found in Lists drawer in your blocks editor. Those lists are currently empty as we haven’t added any items yet. Note, you can also use “make a list” block to create an empty list. Just don’t put any item when using “make a list” block for creating empty list like this-    



What if you don’t want to create an empty list, rather you want to create a list with items in it? Well, no worries. You can use “make a list” block to do so.



In the above image, we used “make a list” block to create a list named myList with three items – AppleBanana, and Guava. If we didn’t put any item in the make a list block, it would create an empty list just like the way we did with create empty list block. Note that, you can put as many items as you want in make a list.

Tips: When you name a variable, try naming it with a purpose. Say you need a list of prices of different fruits, you can name that list variable – fruitsPriceList so that later you don’t have to recall the purpose of that list, specially when you have lots of variables in your block editor. Also by the name of the variable, one should know that variable represents a list. 

2. Add Items to a List 

Adding an item can be done different ways.        


   
If you look at the image above, we have populated all three lists with different items. First one will have a list of three items which are Orange, Apple, and Banana; the second one is consisted of another three items – 20, 30, and 10. The last one, list3 is consisted of two items which are actually lists. Yes, you can have a list of lists. If you take the first item from list3 which is also a list, you will get a list of three items which contains Orange, Apple, and Banana.  
Now, look at the image below-



The difference between add items to list and append to list is that for add items to list, you can add both individual items and lists, but for append to list, you can only add another list into a list. add items to list will consider a list as an item but append to list will take the contents from a list and add them as separate items. To make things clear, in the above image, list1 is the destination list where the contents of list2 will be added at the end of list1. That means, list1 will contain whatever items it had before plus the items from list2. Note that list2 will have no change in its contents. If things are not clear, try it for yourself and see how they behave.   Both add items to list and append to list add an item at the end of the list. What if we want to add an item in a certain position? That’s when we need insert list item block. insert list item is used when you want to add an item into a list in a certain position. Let’s say you want to add a new item “Grape” into list1 at position 1. This is how you will do it-



As you have noticed, insert list items takes 3 arguments – the list where the new item will be added, the index or position where the item should be added, and the new item that should be added. Since we wanted our new item “Grape” to be added at the beginning of the list, we specified 1 as the index/position. Now our list1 contains four items – Grape, Orange, Apple, and Banana. Note that Grape is the first item in list1 and everything else got moved down by 1 because of the insert operation. Before we inserted Grape, Orange was in the first position, but now Orange is in the second position.

Tips: Always apply whatever you have recently learned. Don’t try to learn everything first and then apply.   

3. Display List Items
 


A fancy way to display list items would be using ListView component. Here’s a detail tutorial on ListView.

In the example below, we used a Label component named FirstListContents to display the contents of list1.



for each item and for each number both can be used for iterating/looping through a list. Here we used for each item as we are not concern about the indexes/positions of an item. When we will sort a list, we will be using for each number instead as we’ll need the indexes of different items in the list for manipulation. You can still use for each item for sorting, but you must define some local or global variables to access the indexes.   for each item is pretty simple. You provide a list to loop through and there’s a local variable named “item” given to you that holds the value of an item. Note that you can change the name “item” to anything you like. Remember “item” is a local variable, you cannot use it outside the scope. In for each block, the scope is inside the do section of for each block.



To give you an idea, let’s say you want to get the sum of all items in a list. This is how you would do it-



We have a list named numberList which contains three items – 20, 30, and 10. We wrote a procedure named CalculateSum that sums up the numbers in our list and then displays the sum. We declared a global variable named sum and initialized it to 0Initializing means assigning a value the first time when you create a variable. Inside the procedure, we again set the value of sum to 0. You might think the initial value of sum was already 0 when we defined the sum variable outside CalculateSum procedure. Well, you may want to use the same procedure again and again. In that case, it’s safe to reinitialize a global variable unless the previous value of that global variable should be retained. We used for each item block to loop through each item in our numberList and added to the value of sum. The execution of the above procedure would look like this-  
sum = 0
sum = sum + value at position 1 of numberList (0 + 20 = 20)
(Now the value of sum is 20)
sum = sum + value at position 2 of numberList (20 + 30 = 50)
(Now the value of sum is 50)
sum = sum + value at position 3 of numberList (50 + 10 = 60)
(Now the value of sum is 60)
The final value of sum will be 60.   Let’s say you want to display a random item from a list. That’s how you would do it-


pick a random item” block gets a random item from a given list.

4. Remove List Items 

To remove an item, all you need to know is the index/position of the item you want to remove. If you want to remove number 30 from numberList below, you’ll have to pass 2 as the index as you can see 30 is in position/index 2 in the numberList below.



In a real world application, you may have to validate if a certain index/position exists in a list before you actually try to remove an item. If you have already downloaded the application that I mentioned at the top of this tutorial, you should see how I validated a given index before I try to remove an item.   To remove everything from a list, simply set the value of the list variable to a make a list block without any item or just use create empty list block. In the image below, we removed all items from numberList by setting the value of numberList to create empty list block.



5. Replace an Item 

To replace a list item, you need to provide with three arguments – the list where you want to replace an item, the index of an existing item in the list, and the new item you want to replace an existing item with.



In the image above, initially we had three items 20, 30, and 10 in numberList. We used replace list item block to replace the item at index 1 which was 20 with a new item 100. Now our numberList contains 100, 30, and 10.

6. Search for an Item 

Searching for an item can be a little tricky because sometimes you will need to know if a particular item exists in a list, if it does, then you might be interested in knowing where or in which position that item exists. If you have multiple occurrences of the same item in a list, you may also need to know all the positions where the item exists in the list.



In the above image, you can see we are trying to search for the item 30 in numberList which contains three items 20, 30, and 10. Before we started searching, we used is in list? block to check if that item exists in numberList. Block index in list gives us the first occurrence of 30 in the list if it exists. If the item doesn’t exist, it gives us 0. Since numberList above contains 30 in the second position, index in list will give us 2.   As of now, we only searched for the first occurrence. What if our list contained 30 two times? How can we get all two positions? Well, we have to use for each block and loop through each item in the list, then compare if the item we are searching for is the same as the item currently in the loop; if equal we get and store the index for later use. We do this for all items in the list.



As you can see above, 30 appears twice in the numberList, in the second and in the fourth positions. As usual, we first check if 30 exists by using is in list block. If it does, we use a for each block and compare each item to see if the item is 30. If it is, we store it in a global variable named resultText by appending. In this case, the final value of resultText would be [2] [4] because 30 exists in 2nd and 4th positions.   The above numberList as the name implies, contains only numbers. What if we had alphanumeric/text items? In that case, we would need to use the compare texts block from text drawer. See below.



Our search above doesn’t ignore casing. Meaning “apple” is not the same as “Apple“. If you don’t care about casing and you want “apple” to be the same as “APPLE”, or “Apple”, simply convert both sides of comparison to uppercase or lowercase before you compare. Choose one, if you choose upcase then use it for both sides. You can find both upcase and downcase in the Text drawer. In the above example, if you didn’t want to care about casing, you would change the comparison to-



If you have noticed both sides used upcase. All we are doing is that we are converting “Apple” in the left side to “APPLE” and also converting the item in the right side to have also all uppercase letters. So, if the item in the right side was “apple”, it will become “APPLE”. I used upcase, you can also use downcase as long as you use the same case for both sides in comparison.

7. Sort a List 

Sorting of list is explained here.

8. Shuffle a List 
 Shuffling of lists is explained here.


Download the source ListBlocks and explore.
Download also the source UniqueSpeedyBirds to see how shuffling works.

Can i put 3 variables in 1 ?


Hello i want to know if its possible to put many variables in one ?

--
what about using a list?
-- 
How to work with App Inventor variables is described here: http://www.appinventor.org/bookChapters/chapter16.pdf

We do not understand what you mean by "put many variables in one?"     Could you give us an example?

Do you want to add the values represented by the variables or display them on a Label or what Haysen?

-- 
Hello , i am creating an application to drive a test bench . I can change the frequency , amplitude and other options.
And i want to save all datas in a data base ( on screen 2 ) . 
 The problem is i have a lot of variables and my idea was to do a variables with all variables , i really dont how to do it maybe there is an other way to do it. 

You can see my project below.





-- 

 and my idea was to do a variables with all variables 

you might want to read my previous answer again...

-- 

is the texting component broken?


It seems that the Texting component has stopped working for me.  I have rebooted my device and tried a very simple test app on 2 devices (Galaxy Note 4 and Galaxy S7).  I have attached the test app in case anyone else wants to try...


--
More info.  Every time I try to SEND with the texting component, I see the IO Error: unable to create GV Helper...

-- 
Are you using a tablet to text?   GoogleVoice no longer works with Android devices and the AI2 Texting component.  If you are using a real cell phone, try going to the texting component on the Designer screen and unchecking the GV box.

-- 
Using a real phone (Note 4 and S7).  The GV box is UNCHECKED.  This seems to be a problem with non-GV texting.  It is as if the GV problem is now appearing with normal texting.

-- 
I just used an AI app to text with no problems Rich.   I don't know what the issue is. I am using an LG phone.   I do not have the Google Voice app on it.  Do you have GV loaded on your two devices?   Perhaps that is the issue?

-- 
Look at the aia you sent.  All it has is a blank form on the Designer screen and   the  MessageReceived block on the Blocks...

-- 
It is correct that the aia is quite simple (a blank from) and the MessageReceived event only shows a notification.

I have seen the problem on devices with and without GoogleVoice.

Were you able to run the app and receive texts?

-- 
I am still not able to receive texts in App Inventor.  I attached a test app written by Hal that appears on a related (closed) thread.  When you run it, the label shows the receive message.  On my Galaxy Note 4 and S7 devices, the label never changed, but he phones each receive the text messages.

Can you help me understand why AI is not receiving the messages?

-- 
I have neither a Note 4 or a Galaxy S7 Rich.The texting component seems to work fine on my LQ.   I did not test the aia you posted.  Perhaps someone with one of those devices will see what is going on.  What you experience might be an issue related to your Android operating system version.

Hopefully someone else on the forum who has one of your devices will test.  Sorry, I can't.

--