{"id":107,"date":"2014-10-10T19:39:30","date_gmt":"2014-10-11T02:39:30","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=107"},"modified":"2014-10-10T19:39:30","modified_gmt":"2014-10-11T02:39:30","slug":"using-listpicker-for-displaying-and-selecting-from-on-screen-lists","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/10\/10\/using-listpicker-for-displaying-and-selecting-from-on-screen-lists\/","title":{"rendered":"Using ListPicker for displaying and selecting from on screen lists"},"content":{"rendered":"

What is ListPicker?<\/strong><\/p>\n

ListPicker<\/em> is a user interface component that makes it easy to display a list of items and have the user make a selection from the list. For example, let’s say we’d like to display six things on the screen and then have the user select an item from the list.<\/p>\n

For simplicity, here is a sample ListPicker<\/em> list showing six items labeled “A”, “B”, “C”, “D”, “E” and “F”. \u00a0Those items are arbitrary – your list could contain “Oranges”, “Bananas”, “Apples”, “Grapes” or whatever other text descriptions you would like to have. (The default color is white text on black but the color properties, as well as the text size, may be changed in the App Inventor Designer.)<\/p>\n

\"Screenshot_2014-10-10-12-03-13\"<\/a><\/p>\n

 <\/p>\n

When this screen is displayed the user may touch an item in the list to select it.<\/p>\n

Use ListPicker<\/em> whenever you have a set of items from which the user is expected to make a selection. Example applications could include selecting a product from a list of inventory items, select a food item from a menu, select a name from a display of names and addresses and many more.<\/p>\n

Learning how to use ListPicker<\/em> is helpful for new App Inventor programmers as many online tutorials and example programs use ListPicker<\/em> – but without explaining what it is or how to use it! \u00a0Becoming familiar with\u00a0ListPicker<\/em> will make those other tutorials easier to understand!<\/p>\n

Example
\n<\/strong><\/p>\n

When an item is selected an event is created, and your event handler can then identify which item was selected in this list. \u00a0To illustrate, let’s start with a simple app that displays a list of items when the “Click me to display a short list” is pressed:<\/p>\n

\"Screenshot_2014-10-10-12-03-24\"<\/a><\/p>\n

ListPicker<\/em> does all the hard work for us – display the items on screen (as shown in the previous screen snap shot) and processing the selected element.<\/p>\n

In the example above, “C” was selected.<\/p>\n

How to Build the ListPicker Demonstration\u00a0Application<\/strong><\/p>\n

Step 1 is to drag a ListPicker<\/em> component from the Palette to the Viewer. Rename the control if you wish and change the text of the ListPicker<\/em> control button to something useful \ud83d\ude42 Here is the app after dragging the ListPicker<\/em> component and changing the text (in the ListPicker<\/em> properties) to “Click me to display a short list”:<\/p>\n

\"LP-Designer\"<\/a><\/p>\n

Step 2 is to place some items into the list. We do that by typing a comma separated list in the ElementsFromString<\/em> property\u00a0of ListPicker<\/em>, as\u00a0shown here:<\/p>\n

\"LP-Properties\"<\/a><\/p>\n

 <\/p>\n

We have now added six items – A, B, C, D, E and F. We could enter longer text descriptions\u00a0if we wished – for example “Oranges, Bananas,Apples” and so on:<\/p>\n

\"LP-Properties2\"<\/a><\/p>\n

Step 3 is to add an event handler for the list to process the list selection – this turns out to be really super hard – not! It is actually super easy! Click on the ListPicker<\/em> component in the Blocks Editor and then drag the .AfterPicking<\/em> event into your program:<\/p>\n

\"LP-EventBlock\"<\/a>ListPicker<\/em> handles all the details of the on screen selection. All that is needed is to fetch the item that was selected, store that in a variable, or, as in this example, display the selection in a label field on the app’s screen.<\/p>\n

That’s it for the basic operation of the ListPicker<\/em>. If you have many elements – too many to fit on one screen – the list automatically handles scrolling. Just use your finger to drag up or down the list. You can also change ListPicker<\/em> properties such as the color of the list and more.<\/p>\n

Of course there are many ListPicker<\/em>\u00a0features, but this is intended as a brief introduction.<\/p>\n

But one feature we wish to mention is that you can add items to the list to display from within your program by putting your items in a list and assigning them as shown here:<\/p>\n

\"LP-BlocksAdding\"<\/a>The ListPicker1.Elements<\/em> property contains a programmatic list of items. \u00a0If you are not familiar with lists, please see Chapter 8 “Introduction to Lists” in my e-book “Guide to App Inventor 2:Tutorial – The fast and easy way to create Android apps”.<\/p>\n","protected":false},"excerpt":{"rendered":"

What is ListPicker? ListPicker is a user interface component that makes it easy to display a list of items and have the user make a selection from the list. For example, let’s say we’d like to display six things on the screen and then have the user select an item from the list. For simplicity, … Continue reading Using ListPicker for displaying and selecting from on screen lists<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,13],"tags":[],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","category-components","category-tips"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}