Buttons Won't Respond to MouseOver

classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

Buttons Won't Respond to MouseOver

bilbosax
I wrote a mobile app. I am now converting it to desktop. I basically just
created a new desktop project and copied all of my files into it from the
previous mobile project. Pretty much everything is working as I expected
except for one thing, none of my button skins will respond to a MouseOver
event.

I have set up a test with one of the buttons, and on "MouseOver", it does
trace out that it was affected, so the MouseOver event is working. But NONE
of my button skins that have an over state are showing it. It is as if the
entire app thinks that it is on a mobile device still where there is no
"over" state.

I have looked over the application descriptor and seen nothing out of the
ordinary. I am using a couple of mobile components in the app, so I don't
know if that can *force* an app into thinking it is a mobile device. But I
have wasted two days trying to figure this out.

Does anyone have a clue why my desktop app skins will not respond to a
mouseover event? Anything in this conversion that I need to change?



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Buttons Won't Respond to MouseOver

bilbosax
I am beginning to think this is a deeper issue than I initially thought.
Since my apps was originally written for mobile, it has a few mobile
components and skins for those components. I simply left them in my desktop
versions so that I would have as few changes to make as possible because
these are very large apps, and there are three of them. I am beginning to
think that if you add ANY mobile components, or perhaps a mobile skin, then
the app defaults to a "mobile mentality" for lack of a better word and
behave like a mobile application. Here is an small example.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                                           xmlns:s="library://ns.adobe.com/flex/spark"
                                           xmlns:mx="library://ns.adobe.com/flex/mx">
       
        <fx:Style>
                @namespace s "library://ns.adobe.com/flex/spark";
                @namespace mx "library://ns.adobe.com/flex/mx";
               
                s|TextInput {
                        skinClass:
ClassReference("spark.skins.mobile.ScrollingStageTextInputSkin");
                        fontFamily: "Arial, Helvetica, san-serif";
                        contentBackgroundAlpha: 1;
                        contentBackgroundColor: #FFFFFF;
                        paddingTop:0;
                        paddingBottom:0;
                }
               
        </fx:Style>
       
        <s:TextInput width="200" horizontalCenter="0" top="150"/>
        <s:Button width="200" horizontalCenter="0" top="250"/>
       
</s:WindowedApplication>


This is a simple little desktop app that adds a button and a TextInput in
it, but I have added the skinClass ScrollingStageTextInputSkin in the CSS
for the textInput, which was designed for mobile. To get it to work, you
need to add these two swc's:

[SDK]/frameworks/libs/mobile/mobilecomponents.swc
[SDK]/frameworks/themes/Mobile/mobile.swc

If you run this app after adding the code and swc's, the application works,
but the button will no longer display an over state, just an up state, and
down state. If you simply delete the s|TextInput CSS, then the button
behaves exactly as you would expect with all three states demonstrated.

Unless you have any other ideas, my early thoughts are that I am going to
have to go through each of my apps and meticulously replace all the
mobilegrids and other mobile components with their desktop counterparts to
get this issue resolved.

Any Thoughts??? I would really love to avoid this if there is any other
alternative.



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Buttons Won't Respond to MouseOver

Erik Thomas-3
Have you given thought to just adding type descriptors to your CSS that changes the skins to spark throughout your app? Seems you could do this for the grid, text inputs, and buttons in a few minutes per app. Or if you have custom skins, just derive them from the spark skins instead of mobile skins? All you really need is for the skin to declare an "over" state, and then set "over.color" and other attributes for the "over" state.

Reply | Threaded
Open this post in threaded view
|

Re: Buttons Won't Respond to MouseOver

bilbosax
Well, I can tell you that I have definitely narrowed down the problem to
skins.  I can add mobile components to my app without it affecting the
behavior of my app, but if I add even a single mobile skin, the entire app
quits responding to the over state.  I will have to look into it because I
am not a wiz at skins, but I am not sure how hard it will be to make a skin
for a mobile component that does not extend MobileSkin, or if it is even
possible.  Do you know?

Does a mobile component require a MobileSkin, or just any skin that defines
the appropriate states of the  component?



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/
Reply | Threaded
Open this post in threaded view
|

Re: Buttons Won't Respond to MouseOver

Erik Thomas-3
Well, it would be nice to know why your components are defaulting to mobile skins on desktop. That is probably a question for the developer mailing list.

If I was in your shoes, I would be sharing a single codebase between desktop and mobile, and while it's a little bit brute force, just use the @media query in your main css file:

@media (os-platform: "IOS") or (os-platform: "android") {
    s|Button {
        skinClass:ClassReference("spark.skins.mobile.ButtonSkin");
    }
}

@media (os-platform: "Macintosh") or (os-platform: "Windows") {
    s|Button {
        skinClass:ClassReference("spark.skins.spark.ButtonSkin");
    }
}

Reply | Threaded
Open this post in threaded view
|

Re: Buttons Won't Respond to MouseOver

bilbosax
Thanks, I will give this a try and see how it goes.  To be fair to the
framework, though, I don't believe that it defaulted to mobile skins
necessarily, but every component that I add to an app, I specifically give
it a skin that I want.  Since the MobileGrid by default has a mobile skin, I
simply edited it and added it to my application to give it the right colors
and display for my brand.  So I specifically put a mobile skin on my mobile
components.  The thing that I don't understand is why if I use one mobile
skin, ALL of the app skins lose their over state representation in a desktop
app?  That is a question I would like to know the answer to.



--
Sent from: http://apache-flex-users.2333346.n4.nabble.com/