How do I use the Picker View on mobile?

PickWheel.livecode

This lesson describes how LiveCode menus can be represented and used on mobile. Screen captures are provided.

Introduction

In a desktop environment menus (option menus, pulldown menus, combo boxes and popup menus) provide an expanding list from which an item can be selected. On mobile devices a different user interface philosophy is used.

On mobile menus are represented by a native Picker View. This is created by the mobilePick command.

Creating an Picker View

Creating an Option Menu
  • Button - "countryPicker"
  • Entry Field - "countryChoice"
  • Scrolling field - "countryList". This field is provided for reference only and list the options used in the picker.

Set the script of the button to 

on mouseUp
   local tIndex
   
   // Show the picker
   mobilePick field "countryList"
   
   // The result is the line index of the selected item
   put the result into tIndex
   
   // Show the country with the chose index
   put line tIndex of field "countryList" into field "countryChoice"
end mouseUp

Native Picker Controls

iPhone Option Menu Support

Deploy your app onto a mobile device and click on the button. A native Picker View opens allowing the user to choose from the provided options.

Using an Option Menu

LiveCode Option Menus will automatically show a native mobile picker when deployed to a mobile device.

  • Option Menu - "countryPicker"
    • Set the Menu Items property to the list of countries
  • Entry Field - "countryChoice"

Set the script of the Option Menu to 

on menuPick pItemName
   put pItemName into field "countryChoice"
end menuPick

The label of the Option Menu will be automatically set to the chosen item.

6 Comments

dirk

How do you use UTF text in a Picker View??

Hanson Schmidt-Cornelius

Hi Dirk,

you can create Unicode entries for the picker wheel by entering Unicode text into the "Menu Items" field of the "Property Inspector". This even allows you to copy and paste a sequence of Unicode text.

Kind Regards,

Hanson

dirk

Thanks Hanson, I was trying to build it from a script - which failed. But yours works of course! :-)

However, can you tell me how to use one of the unicode items that is then picked? It seems to me to return garbage text - eg when I have "Japanese" actually in Japanese in the contents of the option menu, how can I then know when that has been selected? Using "on menuPick pItem" - pItem is non-recognisable.

Any possibility to have a "hidden" column with a corresponding code or some other possibility? eg. returning the line number that was selected?

Or any other suggestions? Thanks!

Hanson Schmidt-Cornelius

Hi Dirk,

if you implement the picker using the "Option Menu" the label of the button is updated with the unicode entry you selected. The "menuPick" event is also passed the option you selected. Indexes to an item are not provided here. A second column with indexes is also not available here.
If you implement the picker programmatically using "mobilePick", then you are returned the item number that corresponds to the item you selected.

In terms of handling unicode, have a look at the dictionary and search for "unicode". You will find a number of entries that allow you to convert between text and Unicode or even put a unicode item somewhere.

Kind Regards,

Hanson

Hugh

on mouseUp
mobilePick field "countryList"
put the result into field "countryChoice"
end mouseUp

Is "the result" the selected text, or the index of the selected text?

Elanor Buchanan

Hi Hugh

When using mobilePick the result is the index of the selected item. I have updated the lesson to reflect this.

Thanks for bringing this to our attention.

Kind regards

Elanor

Add your comment

E-Mail me when someone replies to this comment