Archive for List Picker

How to Use the Tiny Web DB and List Picker

This App Inventor tutorial provides a simple example of using a simple database and a List Picker in App Inventor.

Databases are used to organize and manage information. They are a form of long term memory because the data they contain persist beyond the running of a single application. Once data is put into a database, it remains there until it is deleted. This differs from short term memory, such as global variables, which persist only as long as your app is running.

TinyDb

App Inventor has a simplified database component called a TinyDB, which stores persistent data right on the Android device. (App Inventor also has a TinyWebDb component, which stores data on a server. That will be covered in a separate tutorial.)

TinyDb stores data in a tag-value scheme. The tag is used as a key by which the data can be retrieved. For example:

Tag Value
One This is the first string
Two This is another string

To store a value in a TinyDb, you would use the StoreValue procedure, which takes two arguments, a tag and a value:

In TinyDb, the tag is always a text, but the associated value can be a number, or a string, or even a list. In this example, we use a list to a collection of information (latitude, longitude, and description) with the name of a building on campus.

Retrieving a Db Value

To retrieve a value from the Db, you use the GetValue function, which takes the tag as an argument and returns the associated value as its result. In this case we are retrieving the list of data associated with “Hamlin”:

Plotting Points of Interest on a Map

Let’s make a simple app that uses a TinyDb and List to plot points of interest on a canvas — you can imagine that the canvas is a map. In this example, we will use a ball to represent a point on the map. And we will let the user select a screen location from a ListPicker component. Depending on which location the user picks, the app will plot that point on the canvas.

So our User Interface looks like this:

Note here how the PickPoints ListPicker is set up. The ElementsFromString property contains a comma-delimited list of words that will show up as the ListPicker’s options.

Setting up Our Db

Let’s use a TinyDb to store the (X,Y) coordinates of the points we want to plot. Note here that we define the setupDB procedure and then call it from the Screen1.Initialize block:

This will create a TinyDb with two items in it. Point “One” has location (100,100) and point “Two” has location (50,50). Notice that the tags are the same strings we used in our ListPicker.

(NOTE: Because this Db will persist, it is not necessary to create it every time we run this app, although it does no harm to do so. For example, we could instead use if-then logic to test whether the database exists and, if not, we could store our values. This is left as a exercise.)

Handling a List Picker

The last piece of this app is to handle the event that occurs when the user picks an option from the ListPicker:

Recall that our Db stores a list value with each tag. So we use the PlacesListPicker.Selection as our tag argument to retrieve list associated with that location. Then we use the select list item function to select the X and Y coordinates, which are used to set the location of the ball. Notice how list items areindexed. The first item in a list has index 1, the second has index 2, and so on.

The Sourcecode

Here’s the app’s sourcecode.

How to Use the Tiny DB Component

In this App Inventor tutorial you’ll learn how to use the Tiny DB component. At the end of this App Inventor tutorial, you’ll find two videos outlining the process seen here. You can also download the APK and App Inventor Files.
This great App Inventor tutorial was created by Stevozip. Thanks!
The first step in any project we undertake in App Inventor is the design phase of our Tiny DB application.
For this app, we’ll need to add the following items:
  • Four text boxes
  • A label
  • Two buttons
  • An image component
  • A checkbox
  • A listpicker
  • A TinyDB
  • Three HorizontalArrangements
  • Two VerticalArrangements

Once we’ve got our design set up the way we want it, we can move right into setting up our code blocks.  When the goal of the app is saving information to a TinyDB, I generally will code my save button first since that will be the backbone of the application.

 

For the save button, we’ll need to add an IfElse block that will check to make sure that what we are going to upload to our TinyDB isn’t already in the list so we don’t end up overwriting the tag when we don’t want to. When we’ve got that portion in place, we can code the “else” portion of the block to upload our person’s name into the DB with all of our text boxes, picture, and checkbox values saved as sub-elements of that name.  The next thing we need to do is make sure that the name gets loaded into the defined variable list so we can upload that list to our TinyDB and extract the relevant information for populating our form elements.

 

Remember that there will be two lists we’re saving to the DB: one is the list of info relevant to the person, and the other is the list of persons we want to save information for.  Once we’ve saved our person’s name to the list, we can then save that list to the TinyDB and then populate our listpicker with all the names that’ve been saved into the variable list.  Since we might want to add another person to our database, we’ll code the program to clear all of the elements in the application to prepare for the next person.

Now that we’ve got our save button coded, let’s move on to the rest of the application.  The next thing we should get out of the way is coding whether or not we’ll be saving an image for each person we upload to the database.

Next comes the coding of the listpicker and pulling the information from the database to display properly in our app when we select a name from the list.  Because we defined the valueToStore to the TinyDB as a list of information, we can’t just arbitrarily pull the information out and plop it anywhere we want to.

 

Each list item has an index, and this index must match exactly in our “select list item” block that it does in our TinyDB list of information for the person we’re going to look at.  If the first item in the list, when uploaded to TinyDB, is their date of birth, we have to set our index value in our “select list item” block to 1, since that’s the same index value as the date of birth.  This is especially important for this application when we’re uploading a checkbox value and picture to the DB, in that you can’t specify a value of a checkbox as anything other than True or False without receiving an error and crashing the program.  A picture named incorrectly might not necessarily crash the app, but it definitely won’t display anything if the name of the picture doesn’t match with the picture that’s saved in the TinyDB.  Once we know the order of information in the list, that trouble is gone and we can then tell the program to pull the information for the person we want to look at, and in order to do that, we have to use the GetValue block and insert the ListPicker.Selection value into it.  Remember that we uploaded the name of someone as a tag to the TinyDB, and that value is then stored on the DB and we can access it.

Once the code for the listpicker is setup, we can move on to setting up the Screen1.Initialize portion of the app.

 

In here we’re going to need another IfElse block and use it to check whether our TinyDB tag for our variable list is in existence.  If it is not there (the tag is blank), then we don’t do anything, so we don’t end up with an error; if it is there, we want to pull it out of the DB and upload the list to our variable and populate our listpicker with it.

Now we have our entire list of people loaded into our program and we can view all of their information.
The source code for the program is below.  Feel free to download it and alter it to suit your fancy.

Attachments (2)

  • TinyDB_tutorial.apk - on Oct 14, 2010 7:07 PM by Stephen Zipprich (version 1)
    1117k Download
  • TinyDB_tutorial.zip - on Oct 14, 2010 7:07 PM by Stephen Zipprich (version 1)
    10k Download

How to Use List Picker – Map List and Website List

This App Inventor tutorial demonstrates how to use the List Picker (data lists). Some of the items I’ll highlight include:

  • Implementing the List Picker
  • Introduce Activity Starter
  • Creating and working with list data objects
  • Hooking into Google Maps app and Browser app

This awesome tutorial comes from the Android Advice blog. Thanks!

Let’s get started…

1. Click on My Projects, then create a new project. I called mine ConferenceApp because I’m going to create an app that displays keynote speakers and a conference and shows their speaking locations on the map.

2. You will now see the layout screen with Palette, Viewer, Components, Media and Properties boxes. Adding components is easy by dragging objects from the Palette box onto the Viewer.

3. Drag 3 HorizontalArrangement objects from the Palette onto the Viewer. Set all widths to “Fill Parent.” The height of the first should by “Automatic” and the height of the other two below should be “20px.”

4. Add the logo. Drag (2) VerticalArrangement objects inside the top HorizontalArrangement. Set the widths of each of these to “Fill Parent.” Then, drag an image in between the (2) VerticalArrangements. Including the VerticalArrangements on either side of the image allows us to center the logo.

5. Add the first List Picker. Below the second HorizontalArrangement, drag in a ListPicker object and name itkeynoteListPicker. Set the width to “Fill Parent” and text to “View Keynote Speakers.”

6. Add the second ListPicker. Below the third HorizontalArrangement, drag in a ListPicker object and name it placeListPicker. Set the width to “Fill Parent” and text to “View Locations.”

7. Before we can move on to the Blocks Editor, we must add two additional non-visible components. These components will launch the built-in Google Maps application and Browser based on the input we send to them. In the left-column, expand “Other stuff” and drag two ActivityStarter objects onto your layout. (Note: they will be placed below the screen under the Non-visible components text.) Rename one to MapActivityStarter and the other to BrowserActivityStarter.

8. Set MapActivityStarter properties. In the right-column, Properties, set the following properties, while leaving all other blank:

  • Action: android.intent.action.VIEW
  • ActivityPackage: com.google.android.apps.maps
  • ActivityClass: com.google.android.maps.MapsActivity

9. Set BrowserActivityStarter properties. In the right-column, Properties, set the following properties, while leaving all other blank:

  • Action: android.intent.action.VIEW

10. At this point, our basic layout is complete. Your screen should look like this:

11. Now connect your Android phone via usb. On your phone, go to Settings–>Applications–>Development. Enable USB debugging and Stay awake.

12. On the layout screen click the button to Open the Blocks Editor. This will open a Java applet that contains all of the logic blocks/action handlers and interfaces with your phone.

13. First, we will create two list variables that will correspond to the keynoteListPickerspeakerNameList andspeakerURLList. When a user selects the keynote speaker’s name in the list, the app will launch the Browser to an informational page. To get variables in Blocks Editor, go to Built-In, then Definition and drag “def variable” onto the screen. Select the red text box attached to each variable and delete as these variables will be of type list and not text. To set each of these to type list, go to Built-In, Lists, and attach (by dragging) the make a list block to each of the variables. Now, to add data to our lists, we add text fields from Built-In, Text. (Drag and drop the first box in the list labeled “text.”) Once in place, click on the text block to change the value. Notice that after you add one text block to the yellow make a list block another open puzzle piece appears below indicating that you can add another item. Continue adding text blocks to each variable list to match the image below.

14. Next, create two more list variables that correspond to placeListPickerplaceNameList andplaceAddressList. When a user selects the place name from the list, the app will launch the Google Maps app to the specified address. Follow the same approach in the previous step, using the data in the image below.

15. Once all of our data is created and added to the lists, we need to inform each ListPicker which data sets they should use. To do that, go to My Blocks–>Screen1 and drag when Screen1.Initialize do onto the palette. This is called when the app starts. Inside of this block, place the set keynoteListPicker.Elements to block, which is found under My Blocks–>keynoteListPicker. Add the speakerNameList variable to the open puzzle piece, which is found under My Blocks–>My Definitions.
Then do the same for placeListPicker and placeNameList as shown below.

16. At this point, our app is setup so that it will run and our data lists will be displayed when the user presses the ListPicker buttons on the main screen. The only piece left is to tell the app what to do when the user chooses one of the items in the list.

17. Starting with the keynoteListPicker, drag when keynoteListPicker.AfterPicking do onto the screen. Since we want this to launch the Browser, we need to first set the URL to send–the one that corresponds to the chosen item in the list. We do that by using My Blocks–>BrowserActivityStarter–>setBrowserActivityStarter.DataUri to. The index, or place in the list, that the user chose is determined by using the position in list block, which is then fed into the index opening of a select list item block of ourspearkersURLList list. All of this will set the URL of the browser. Now we just have to launch the browser withBrowserActivityStarter.StartActivity. Blocks shown below.

18. We need to do the same thing to launch the maps. The only difference here, is that we need to prepend some text onto the address text that we send to the map. This is accomplished with the make text block by setting the first text block to “geo:0,0?q=” and setting the second text block in the same was a above (just using the other two lists). Shown below.

So there’s the code (layout and blocks) required for building a ListPicker app that implements Browser and Google Maps launching capabilities.

Download this application onto your phone by scanning this code: