Mobile on the desktop: interactionMode=”mouse”

For a client project I’m building a Flex Mobile Project, for the desktop. Well, it’s also for mobile but the primary use case for the app is on the desktop. There are a few got’chas that I’ve dealt with along the way. The most recent of which is that the <s:Button> doesn’t seem to want to use the “over” state when the mouse moves over them.

That makes since for a mobile project where there is no mouse and so no need for an “over” state but I’m exporting this as a desktop app and so I need it.

Turns out all you have to do is give your components the property interactionMode=”mouse”, as opposed to the default for mobile projects which is interactionMode=”touch”.

You can go and set that for each and every component that you want to have the “over” state for . . . Orrrrrr, you can just set it on the <s:Application> itself and it will apply to everything. It is in fact a style so it cascades just as any other style would. Here’s the code in the ButtonBase class that handles the states.

override protected function getCurrentSkinState():String
    {
        if (!enabled)
            return "disabled";

        if (isDown() || _keepDown)
            return "down";

        // if interactionMode == InteractionMode.TOUCH, then we have no over state
        // if interactionMode == InteractionMode.MOUSE, then only go in to the over state if
        // we are currently hovered or if someone pressed down on us
        // and then rolled away (and stickyHighlighting is off--otherwise
        // isDown() would have returned true)
        if (getStyle("interactionMode") == InteractionMode.MOUSE && (hovered || mouseCaptured))
            return "over";

        return "up";
    }

I think Adobe has done a great job in a short time frame of putting together the mobile Flex framework. As it evolves I hope the workflow for mobile projects and desktop projects are merged together – as I’m doing now.

Thanks to @Quetwo for pointing out that there was such a thing but leaving me to my own devices to go find what it was.

UPDATE: I tested the interactionMode=”mouse” on my device and it didn’t seem to cause any problems. But I’m not sure how it will affect other components and interactions. So I’ve decided to apply it to components individually. Or, in the case of the <s:Button> I have made a custom component that extends Button and I use that component everywhere instead of the regular <s:Button>.

The reason is that there is another setting, super.buttonMode = true, that makes the mouse pointer turn into a hand pointer when mousing over a button. I want to set that for every <s:Button> as well but I’ll never remember to add the property each time I make a button. So instead I have my custom <comps:Btn> that I use and that sets the interactionMode=”mouse” and buttonMode = true. I’m much more likely to remember to use my custom button component than to set a property on each <s:Button>.

The only thing the Btn class does is set:

super.buttonMode = true;
super.setStyle( 'interactionMode', 'mouse' );

In the constructor.