<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:scroller="ardisia.components.scroller.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
protected var counter:int = 0;
public function creationComplete():void
{
if (scroller.skin)
scroller.skin.id = "scrollerSkin";
if (!ExternalInterface.available)
{
testEnabledLabel.text = "ExternalInterface not supported by your browser";
testCt.enabled = false;
return;
}
var GET_USER_AGENT:String = "function() { " +
"var userAgent = window.navigator.userAgent.toLowerCase(); " +
"return userAgent; " +
"} ";
var userAgent:String = ExternalInterface.call(GET_USER_AGENT);
if (userAgent.toLowerCase().indexOf("safari") == -1 ||
(userAgent.toLowerCase().indexOf("chrome") > -1))
{
safariTest.text = "NO \u2717";
testEnabledLabel.text = "Test disabled because you are not running Safari.";
testCt.enabled = false;
return;
}
else
{
safariTest.text = "YES \u2713";
testEnabledLabel.text = "Test enabled because you are running Safari.";
testCt.enabled = true;
}
}
protected function removedFromStageHandler(event:Event):void
{
}
protected function mouseWheelHandler(event:MouseEvent):void
{
counter++;
var newString:String = "MOUSE_WHEEL Event (" + counter + ")\n";
newString += "currentTarget: " + UIComponent(event.currentTarget).id + " \n";
newString += "target: " + UIComponent(event.target).id + " \n";
newString += "stageX: " + event.stageX + " \n";
newString += "stageY: " + event.stageY + " \n";
newString += "delta: " + event.delta + " \n\n";
mouseWheelLogRichText.text = newString;
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="Safari Mouse Wheel Fix Description"
description="Flash content running within the Safari Web Browser does not always dispatch MouseEvent.Mouse_Wheel events. This class fixes this significant usability problem and is extremely easy to implement. To apply the fix, simply drop the SafariMouseWheelFix component into the Declarations tag or initialize the class in actionscript before the FlexEvent.ApplicationComplete event fires. It's that easy. This fix will be ignored for content that is not running within the Safari Web Browser."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Default Example</data:tabLabel>
<data:primaryContent>
<s:HGroup height="465"
verticalCenter="0" horizontalCenter="0"
gap="50">
<s:VGroup horizontalAlign="justify">
<s:HGroup>
<s:Label text="Are you running Safari?"/>
<s:Label id="safariTest"
fontWeight="bold"/>
</s:HGroup>
<s:Label id="testEnabledLabel"
fontWeight="bold"
paddingTop="10" paddingBottom="10"/>
<s:HGroup id="testCt"
height="100%">
<s:BorderContainer width="300" height="400">
<scroller:Scroller id="scroller"
width="100%" height="100%"
horizontalScrollPolicy="off"
mouseWheel="mouseWheelHandler(event);">
<s:Group id="viewport">
<s:Label id="descriptionLabel"
top="20" left="20" right="20"
text="Use the Mouse Wheel over different child elements below to see that the event target changes."/>
<s:Label id="sparkLabel1"
top="90" left="150"
text="Spark Label 1"
fontWeight="bold"
backgroundColor="#FFFFFF" backgroundAlpha="1"/>
<s:Label id="sparkLabel2"
top="320" left="30"
text="Spark Label 2"
fontWeight="bold"
backgroundColor="#FFFFFF" backgroundAlpha="1"/>
<s:Label id="sparkLabel3"
top="350" left="170"
text="Spark Label 3"
fontWeight="bold"
backgroundColor="#FFFFFF" backgroundAlpha="1"/>
<s:Group id="container1"
top="100" left="20"
width="80" height="80">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:Label id="container1Label"
verticalCenter="0" horizontalCenter="0"
text="1"
fontWeight="bold"
color="#FFFFFF"/>
</s:Group>
<s:Group id="container2"
top="150" left="70"
width="80" height="80">
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#00FF00" />
</s:fill>
</s:Rect>
<s:Label id="container2Label"
verticalCenter="0" horizontalCenter="0"
text="2"
fontWeight="bold"
color="#FFFFFF"/>
</s:Group>
<s:Group id="container3"
top="200" left="120"
width="80" height="80" >
<s:Rect width="100%" height="100%">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:Label id="container3Label"
verticalCenter="0" horizontalCenter="0"
text="3"
fontWeight="bold"
color="#FFFFFF"/>
</s:Group>
<s:Group top="405"/>
</s:Group>
</scroller:Scroller>
</s:BorderContainer>
<s:BorderContainer height="400">
<s:VGroup width="180" height="100%"
horizontalAlign="justify"
gap="20"
paddingTop="10" paddingLeft="10">
<s:Label text="MOUSE_WHEEL Event Log"
fontWeight="bold"/>
<s:RichText id="mouseWheelLogRichText"
top="10" left="10" right="10"/>
</s:VGroup>
</s:BorderContainer>
</s:HGroup>
</s:VGroup>
<s:VGroup horizontalAlign="justify">
<s:Label text="Implementation"
fontSize="16"
fontWeight="bold"
paddingBottom="20"/>
<s:RichText tabStops="20 40 60 80 100">
<s:content>
<s:p fontWeight="bold" paddingBottom="13">in MXML:</s:p>
<s:p><fx:Declarations></s:p>
<s:p> </s:p>
<s:p><s:tab/><s:tab/><ardisia:SafariMouseWheelBrowserFix /></s:p>
<s:p> </s:p>
<s:p></fx:Declarations></s:p>
</s:content>
</s:RichText>
<s:Label textAlign="center"
text="OR"
fontWeight="bold"
paddingTop="20" paddingBottom="20"/>
<s:RichText tabStops="20 40 60 80 100">
<s:content>
<s:p fontWeight="bold" paddingBottom="13">in Actionscript:</s:p>
<s:p><s:Application initialize="new SafariMouseWheelFix()" ></s:p>
</s:content>
</s:RichText>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>