Buttons Won't Respond to MouseOver

[William Spence]

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?

[William Spence]

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 love to avoid this if at all possible.

[William Spence]

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 on desktop.  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?