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"/>
Related
I would like to reorder items of a List in a Flex mobile app by dragging them around with a finger.
As a first step I have copied the example from Adobe document Using drag-and-drop with list-based controls - but while their example works fine as web application, nothing happens in the mobile app below:
Why doesn't it work (like is some skin missing in the mobile theme?)
Is there a way to make it work (at least reordering items in a mobile List)?
Below is the simple test code I've tried - just put it into a new blank (i.e. without a nav. bar) Flex mobile project in Flash Builder:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
applicationDPI="160"
creationComplete="initApp()">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function initApp():void {
srclist.dataProvider =
new ArrayCollection(['Reading', 'Television', 'Movies']);
destlist.dataProvider = new ArrayCollection([]);
}
]]>
</fx:Script>
<s:HGroup>
<s:VGroup>
<s:Label text="Available Activities"/>
<s:List id="srclist"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true"/>
</s:VGroup>
<s:VGroup>
<s:Label text="Activities I Like"/>
<s:List id="destlist"
dropEnabled="true"/>
</s:VGroup>
</s:HGroup>
<s:Button id="b1"
label="Reset"
click="initApp();"/>
</s:Application>
I have found and tried by myself a super workaround on this page.
Just copy classes from his example and add the custom itemRenderer to your source list.
<s:List id="srclist"
allowMultipleSelection="true"
dragEnabled="true"
dragMoveEnabled="true">
<s:itemRenderer>
<fx:Component>
<local:DraggableIconItemRenderer decorator="{DragThumb}" />
</fx:Component>
</s:itemRenderer>
</s:List>
Respect to the author!
Here is the result:
I have an AIR application. It should be moved around the screen with the mouse. In order to achieve this I use the event:
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, true,-2);
It should be activated with the lowest priority compared to inserted elements for example those that should be scrolled, clicked, etc.
I tried the solution shown below with the event priority set to -1 because there might happen 2 different events and my moving application event should be the last one to be serviced or shouldn't be serviced at all.
<?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"
width="200"
height="200"
applicationComplete="init()">
<fx:Script>
<![CDATA[
import mx.core.Window;
import mx.events.ScrollEvent;
private function init():void {
this.stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown, true,-2);
}
private function onMouseDown(event:MouseEvent):void {
trace("clicked on stage "+event.currentTarget.toString());
if(event.currentTarget == stage){
trace("catched stage target");
this.nativeWindow.startMove();
event.stopImmediatePropagation();
}
}
function scrolledCanvasHandler(event:ScrollEvent){
trace("clicked on canvas "+event.currentTarget.toString());
event.stopPropagation();
}
]]>
</fx:Script>
<mx:Canvas x="29" y="34" width="80%" height="80%" backgroundColor="#343434" scroll="scrolledCanvasHandler(event)">
<mx:Label x="25" y="77" text="moving window, moving window"
fontSize="18" color="#FFFFFF" fontWeight="bold"/>
</mx:Canvas>
</s:WindowedApplication>
As you will notice the
event.stopPropagation();
doesn't work.
Perhaps my solution isn't the best suited to achieve this. Are there better solutions?
Chris
that's what i did in an app of mine:
<s:HGroup id="appTitleBar"
width="100%" height="35"
styleName="titleBar"
mouseDown="nativeWindow.startMove();"
doubleClickEnabled="true"
doubleClick="nativeWindow.minimize();"
contentBackgroundColor="#313131"/>
click (+drag) on this HGroup will drag the window. duobleclick will minimize it.
edit
don't make your whole app draggable this will only confuse the user.
and btw priority should be positive not negative - but also don't mess with this. not expected behavior for anyone.
I am having trouble handling a MouseEvent.MOUSE_DOWN on an component with a Image for a mask in Flex 4.
I have an application as follows:
<?xml version="1.0"?>
<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"
creationComplete="init()"
>
<fx:Script>
<![CDATA[
import spark.core.MaskType;
public function init():void {
manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
}
public function handleMouseDown(e:MouseEvent):void {
trace( e.target )
}
]]>
</fx:Script>
<s:Group id="manager" width="500" height="500">
<s:Group id="layer" mouseChildren="false" x="220">
<s:Group id="content" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
<s:Rect width="338" height="162">
<s:fill>
<s:SolidColor color="0xDDAAAA" />
</s:fill>
</s:Rect>
<s:mask>
<s:Group>
<mx:Image
source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
cacheAsBitmap="true"
/>
</s:Group>
</s:mask>
</s:Group>
</s:Group>
</s:Group>
</s:Application>
If you run this, you will notice that if you click on the left side of the image (on the "3"), the trace correctly indicates that "layer" got clicked. However, if you click on the right side of the image (on the "D") you'll see that "manager" got clicked instead of "layer", which is wrong. If you click anywhere on the "layer" that is past 338px (the mask size), the mouse event does not seem to make it to the layer object.
If I remove the "x" offset on "layer", the whole layer works as expected, but as soon as I offset, anything past the width of the mask (338px) seems to not be captured properly, like if the mask wasn't offset. The strange thing is that if you click to the left of the image once it has been offset, you do get "manager", which means that the layer (and mask) did get moved.
Here's what I mean, with no offset, clicking on the green area returns "layer", clicking on the blue area returns "manager", which is the expected behaviour. See image
If I offset the layer by 220, the areas behave like this image
Sorry I can't embed the images here, but I don't have enough reputation :(
Figured it out.
Apparently the problem is that the Image that is used as the mask needs to be added to the display list before it gets set as the mask or this erratic behaviour happens. This is what the code looks like now and it's working:
<?xml version="1.0"?>
<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"
creationComplete="init()"
>
<fx:Script>
<![CDATA[
import spark.core.MaskType;
public function init():void {
manager.addEventListener( MouseEvent.MOUSE_DOWN, handleMouseDown );
}
public function handleMouseDown(e:MouseEvent):void {
trace( e.target.id )
}
]]>
</fx:Script>
<s:Group id="manager" width="500" height="500">
<s:Group id="layer" mouseChildren="false" x="100" mouseEnabledWhereTransparent="false">
<s:Group id="content" mask="{maskImage}" maskType="{MaskType.ALPHA}" cacheAsBitmap="true">
<s:Rect width="338" height="162">
<s:fill>
<s:SolidColor color="0xDDAAAA" />
</s:fill>
</s:Rect>
</s:Group>
<mx:Image id="maskImage"
source="http://www.wpclipart.com/signs_symbol/alphabets_numbers/3D_text_T.png"
cacheAsBitmap="true"
/>
</s:Group>
</s:Group>
</s:Application>
Also of note is that the maskImage is a child of layer and not a child of content. Setting it as a child of the latter results in the same incorrect behaviour as before.
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 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.