{"id":477,"date":"2015-01-09T18:12:31","date_gmt":"2015-01-10T02:12:31","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=477"},"modified":"2015-01-09T18:12:31","modified_gmt":"2015-01-10T02:12:31","slug":"using-the-spinner-control-for-selecting-items","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2015\/01\/09\/using-the-spinner-control-for-selecting-items\/","title":{"rendered":"Using the Spinner Control for Selecting Items"},"content":{"rendered":"

When your app needs the user to select an\u00a0item from a list of choices, use the Spinner<\/em> control.<\/p>\n

Suppose we have a really simple restaurant menu that provides a choice of tacos and drinks. Our customer may select a Chicken, Beef or Vegan taco from an interface that looks like this:<\/p>\n

\"Spinner-Screen\"<\/a><\/p>\n

Touching the Chicken Taco item on the screen displays a set of options – select a\u00a0desired item from\u00a0the list:<\/p>\n

\"SpinnerScreenshot\"<\/a>The Designer View<\/strong><\/p>\n

<\/p>\n

The item labeled “add items…” is a Spinner control, dragged out of the Palette. There are two Spinner controls in this user interface:<\/p>\n

\"SpinnerMain\"<\/a><\/p>\n

 <\/p>\n

Select the first Spinner<\/em> control and then go to the Properties for that control. In the ElementsFromString<\/em> item, enter Chicken taco, beef taco, vegan taco<\/em>. These items, separated by commas, become the elements of the Spinner<\/em> list.<\/p>\n

 <\/p>\n

\"Spinner1Properties\"<\/a><\/p>\n

 <\/p>\n

Do the same for the drinks on the menu:<\/p>\n

 <\/p>\n

\"Spinner2Properties\"<\/a><\/p>\n

Blocks\u00a0Code<\/strong><\/p>\n

The code is so simple it hardly needs an explanation! \u00a0When the user selects an item, the AfterSelecting<\/em> event occurs. The selected item is obtained from the local variable selection<\/em>:<\/p>\n

\"SpinnerBlocks\"<\/a><\/p>\n

Key Features Shown<\/strong><\/p>\n