"One optionMenu to rule them all..."

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
KimD
Posts: 223
Joined: Wed Jul 08, 2015 5:51 am
Location: Wellington, New Zealand

"One optionMenu to rule them all..."

Post by KimD » Sun Jun 03, 2018 11:08 pm

I'm writing an app that needs to run on Windows desktop, and Android and iPhone. The app is going to need to have a lots (couple of hundred) of buttons that allow the user to pick from a pre-defined list of items. Typically the user will need to choose from a list of between 10 and 30 items.

For Windows, the tools palette option menu meets my needs perfectly.

But on Android the tools palette option menu doesn't work as-is, and I understand that I need to use mobilePick. I did try adding the following script to my tools palette option menu and the early results looked promising -

on mouseUp
if the environment is "mobile" then
mobilePick the text of me
Put the result into itemSelected
set the label of me to line itemSelected of the text of me
End if
end mouseUp

The only immediately obvious problem with this solution was that the option menu chevron graphic (down arrow) didn't display correctly in Android.

I haven't yet tried iPhone.

Is there a recommended way to implement one option menu button that will work on Windows, Android & IOS; or do I need to implement different option menu buttons for Windows and Android (and possibly iPhone) and toggle their visibility on/off based on the platform?

Or is there a way to get the chevron graphic to display correctly on Android, or to turn off the chevron graphic?

Thanks in advance

Kim (LC9 on Windows 10)

I realise that this is a very similar post to the [unresolved] one linked here - viewtopic.php?f=49&t=25940&hilit=optionMenu

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7215
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: "One optionMenu to rule them all..."

Post by jacque » Mon Jun 04, 2018 5:30 pm

The option button is suitable for desktop only and isn't used on any mobile OS. The native menuPick command is it's replacement on mobile but it isn't generally associated with the same type of button. Usually you will see a standard button that simply displays the picklist (which has a very different appearance on each mobile platform.)

If you do want to veer from the standard user interface then you'd need to use a button with an arrow icon. And if you want it look like desktop apps then you'll need to add a field that displays when the button is pressed.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

KimD
Posts: 223
Joined: Wed Jul 08, 2015 5:51 am
Location: Wellington, New Zealand

Re: "One optionMenu to rule them all..."

Post by KimD » Fri Jun 08, 2018 11:07 pm

Thanks Jacqueline

I've gone for your last suggestion - a field that displays when the button is pressed. I've put my solution below. I've spent about 15 minutes testing this on Windows & Android, and the early results look promising.

Regards

Kim

===============================================================================

CONTROLS -
- Many mock optionMenu buttons
- single selectionMenu field
- single clearBarrier button // covering the whole of the card, and to handle the scenario where the user clicks outside of the selectionMenu field

CARD SCRIPTS -

On PreOpenCard
CloseSelectionMenu
end PreOpenCard

Local osItemSelected
On OpenSelectionMenu initiatingControl, pickOptions
if the environment is "mobile" then
mobilePick pickOptions
Put the result into osItemSelected
Put line osItemSelected of pickOptions into control ID initiatingControl
else
Lock screen
Put pickOptions into field "SelectionMenu"
Set the initiatingControlID of field "SelectionMenu" to initiatingControl
Set the height of field "SelectionMenu" to min(380, the formattedHeight of field "SelectionMenu")
If (the bottom of this card - the bottom of control ID initiatingControl) > 400 then
Set the top of field "SelectionMenu" to the top of of control ID initiatingControl
Else
Set the bottom of field "SelectionMenu" to the bottom of of control ID initiatingControl
end if
set the visible of field "SelectionMenu" to true
set the visible of button "ClearBarrier" to true
Unlock screen
End if
end OpenSelectionMenu

On CloseSelectionMenu
set the visible of field "SelectionMenu" to false
set the visible of button "ClearBarrier" to false
end CloseSelectionMenu

MOCK OPTIONMENU BUTTON script -

Local muPickOptions
on mouseUp
Focus on nothing
Put /* CR separated list of pick options */ into muPickOptions
OpenSelectionMenu the ID of me, muPickOptions
end mouseUp

FIELD SELECTIONMENU script -

Local muValueToReturn
on mouseUp
Put the value of the clickLine into muValueToReturn
Put muValueToReturn into control ID (the initiatingControlID of me)
CloseSelectionMenu
end mouseUp

BUTTON CLEARBARRIER script -

On MouseUp
CloseSelectionMenu
end MouseUp

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”