How do I use the Picker View on mobile?
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
- 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 mouseUpNative Picker Controls
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 menuPickThe label of the Option Menu will be automatically set to the chosen item.
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