I have made this short example to demonstrate some problems I'm having.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas
id="buttonCanvas"
x="100" y="100" opaqueBackground="#000000" width="80%" height="300"
creationComplete="init(event)">
<mx:Button x="5" y="5"/>
<mx:Button x="5" y="50"/>
</mx:Canvas>
<mx:Script>
<![CDATA[
private function init(event:Event):void{
buttonCanvas.addEventListener(MouseEvent.ROLL_OUT, function(event:Event):void{
buttonCanvas.opaqueBackground=(buttonCanvas.opaqueBackground==0)? 0x666666:0;
});
}
]]>
</mx:Script>
</mx:Application>
I don't understand the following:
Why don't the percentage or absolute dimensions affect the canvas size?
Why does the roll_out event fire when the mouse leaves a button (even when it is still inside the canvas).
I'm going nuts trying to figure this out. Any help would be greatly appreciated!
Maybe you wanted to use backgroundColor style and not opaqueBackground property?
Just glancing at this, I can tell you that the default value for opaqueBackground is null, not 0.
Related
I'm trying to set the hand cursor on an HBox. I've tried buttonMode and useHandCursor but have had no luck. This example displays the busy cursor. Can anyone tell me how to make it display the flashPlayer's hand cursor?
<s:Application 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:components="com.dn2k.components.*" >
<fx:Script>
<![CDATA[
private var cursorID:int;
//cursorManager
protected function box_mouseOverHandler(event:MouseEvent):void
{
cursorManager.setBusyCursor()
}
]]>
</fx:Script>
<mx:HBox id="box" useHandCursor="true" buttonMode="true" mouseChildren="false" backgroundColor="0xcc0000" mouseOver="box_mouseOverHandler(event)">
<s:Label text="Hiya sexy..."/>
</mx:HBox>
This code shows it perfectly while mouse is over container:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" mouseChildren="false" useHandCursor="true">
<s:Label text="Hiya sexy..." />
</mx:HBox>
</s:Application>
If you want to set hand cursor in Label you must set mouseChildren=”false” and below is the revised code
<mx:HBox backgroundColor="0xcc0000" buttonMode="true" id="box" useHandCursor="true">
<s:Label text="Hiya sexy..." buttonMode="true" mouseChildren="false" useHandCursor="true" />
</mx:HBox>
Hope this works for you.
What Jeff said. Also you can use CursorManager.setCursor(). You'll have to embed a graphic for the cursor though.
You can also use the newer Mouse class which provides a higher frame rate native cursor.
<mx:HBox rollOver="Mouse.cursor = MouseCursor.BUTTON"
backgroundColor="0" backgroundAlpha="0"
rollOut="Mouse.cursor = MouseCursor.AUTO"/>
The background color and background alpha are used to draw out graphics that are used as the hit area. In empty Spark containers there is a mouseEnabledWhereTransparent property that I don't think existed in mx containers. Here is documentation on it:
When true, this property ensures that the entire bounds of the Group
respond to mouse events such as click and roll over. This property
only goes in to effect if mouse, touch, or flash player gesture events
are added to this instance. In addition, it assumes that the calls to
addEventListener()/removeEventListener() are not superfluous.
Having said that it seems that this works without setting the mouseEnabledWhereTransparent property:
<s:Group id="testingHitGroup" left="10" top="10"
rollOver="cursorObject_rollOver(event)" width="100" height="100"/>
I'm trying to auto-resize a Spark TextArea using Flex Hero but having no luck. Can anyone point me in the direction of a working example please?
EDIT: To clarify, I want to auto-resize the TextArea when typing, so there's never a scroll bar.
After some playing around I found a way to do it:
<?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">
<s:layout>
<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="8" paddingBottom="8"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.core.mx_internal;
protected function changeTextArea():void
{
textArea.heightInLines = NaN;
}
protected function lineCount():void
{
label.text = textArea.textFlow.flowComposer.numLines.toString();
}
]]>
</fx:Script>
<s:TextArea id="textArea"
heightInLines="1"
horizontalCenter="0" verticalCenter="0" verticalScrollPolicy="off" horizontalScrollPolicy="off"
change="changeTextArea()" focusOut="lineCount()"/>
<s:Label id="label"/>
<s:Button/>
</s:WindowedApplication>
I just set the width/height to be a percentage of the container:
<s:TextArea width="100%" height="100%" />
Unless you are asking something else?
I just tested it with flex hero, and as Bruno Trincão posted here, s:RichEditableText works with textArea.heightInLines = NaN;
I'd like to use a button within a component to remove it. So, you click it and the component is gone. But, I haven't figured out how you reference the component from within the component. What should I put in click=""?
My component: popCanvas
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel width="200" height="200" title="hello"
click="remove=">
</mx:Panel>
</mx:Canvas>
In the main app:
var popCanvas:PopCanvas= new PopCanvas;
popCanvas.x = 20;
popCanvas.y = 30;
this.addChild(popCanvas);
Any suggestions?
Thank you.
-Laxmidi
Okay,
This is what I came up with:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function removeMe(event:MouseEvent):void {
this.removeChild(event.currentTarget as DisplayObject);
}
]]>
</mx:Script>
<mx:Panel width="400" height="300" title="hello" click="removeMe(event)">
</mx:Panel>
</mx:Canvas>
So, I used the event's currentTarget to reference the component in order to remove it. If someone clicks anywhere on the component it's removed.
Thanks.
-Laxmidi
I have a Component that has a specific background image. The code looks like:
<mx:backgroundImage>#Embed(source='img1.png')</mx:backgroundImage>
<mx:states>
<mx:State name='state2'>
<mx:SetStyle name="backgroundImage">
<mx:value>#Embed(source='img2.png')</mx:value>
</mx:SetStyle>
</mx:State>
</mx:states>
But when I change the state to 'state2', it doesn't actually change anything.
Am I missing anything specific here?
The default target is the main app.
So you are actually setting the background of the entire app in state2 and not the Component.
Here is an example with the VBox
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:states>
<mx:State name="state2">
<mx:SetStyle name="backgroundImage" target="{VBox1}">
<mx:value>
#Embed(source='img2.jpg')
</mx:value>
</mx:SetStyle>
</mx:State>
</mx:states>
<mx:VBox id="VBox1" x="0" y="0" width="50%" height="50%">
<mx:backgroundImage>
#Embed(source='img1.jpg')
</mx:backgroundImage>
</mx:VBox>
</mx:Application>
Also if you are using Flex 3 Builder you can always switch to Design mode to see changes from Base state to a new state. It should be in the top right corner.
EDIT for components
Main file
<cbsh:BackSwitch>
</cbsh:BackSwitch>
</mx:Application>
Component
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:states>
<mx:State name="state2">
<mx:SetStyle name="backgroundImage" target="{this}">
<mx:value>
#Embed(source='img2.jpg')
</mx:value>
</mx:SetStyle>
</mx:State>
</mx:states>
<mx:backgroundImage>
#Embed(source='img1.jpg')
</mx:backgroundImage>
<mx:Button x="437" y="269" label="Switch!" click="currentState='state2';"/>
</mx:VBox>
I haven't dealt with this specifically, but my intuition is that it is having a problem with the way the value is set.
Have you tried this:
mx:setStyle setStyle name="backgroundImage value="#Embed(source='img2.png')" />
Because this seems to be kind of a weird error, my temporary solution is to have two canvases with different backgrounds that flip visibility depending on the state
I'm trying to capture key events in a mx:Image and I can't get it to work.
<?xml version="1.0" encoding="utf-8" ?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" />
<mx:Canvas width="100%" height="100%">
<mx:Label id="lab" x="50" y="20" text="Nothing"/>
<mx:Image x="50" y="50" source="#Embed('image.png')" keyDown="lab.text='Something';"/>
</mx:Canvas>
</mx:Application>
When I press a key when the mouse is over the image I expect the label text to change to "Something", but nothing happens. I've done all sorts of combination of enabled and putting the keyDown on the canvas and the label as well.
What am I missing?
The issue is one of focus. Key down events are only generated within a component when that component (or one of its descendants) has focus. In order for an Image to receive focus, you must set focusEnabled to true. This, however, requires that the user tab to give the Image focus, since clicking on an Image does not convey focus, much less mousing over it.
If you want to listen for the key down event when the user's mouse is over the Image, you can manually assign focus to the Image when the user moves their mouse over it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
import mx.managers.IFocusManagerComponent;
private var oldFocus:IFocusManagerComponent;
public function imageMouseOver(event:MouseEvent):void {
oldFocus = focusManager.getFocus();
var newFocus:UIComponent = event.target as UIComponent;
newFocus.setFocus();
}
private function imageMouseOut(event:MouseEvent):void {
if (oldFocus) {
oldFocus.setFocus();
}
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%">
<mx:Label id="lab" x="50" y="20" text="Nothing"/>
<mx:Image x="50" y="50" source="#Embed('image.png')" mouseOver="imageMouseOver(event)" mouseOut="imageMouseOut(event)" keyDown="lab.text='Something';" focusEnabled="true"/>
</mx:Canvas>
</mx:Application>
Alternately, you can assign a key down listener to the stage when the user mouses over the Image, and remove it when the user mouses out.
Image derives from (a.k.a "is a") SWFLoader. You need to add listeners to the content of the loader, not the loader itself. See this question for details, Interact with SWF Loader