I have a container Canvas named "cnvList" which contains another component horizontal list "hlist". When i hover the mouse over "cnvList", it should display the current mouse position relative to the container cnvList. I have used cnvList.contentMouseX for this. But it should repeatedly track the mouse position repeatedly even when the mouse is not movedk. Can anyone suggest me with code how it can be done?
Try using the Event.ENTER_FRAME (enterFrame) event on the Canvas, let me know if that does it.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Canvas id="cnvList" width="100%" height="100%"
enterFrame="trace(cnvList.contentMouseX)">
<mx:HBox id="hlist" width="100%" height="100%"/>
</mx:Canvas>
</mx:Application>
Alternatively you try "mouseMove" instead of "enterFrame" to get a trace only when the mouse is moved. You can also add an event listener to Application.application or even the stage itself to get notification when the mouse is moved anywhere in the app.
Related
In my flex application I need to restrict the mouse from moving in a certain area.In other words I want to create a 'No Entry Zone' for the mouse in the application.Hiding the cursor when mouse enters the area is not a solution for me.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
protected function canvas2_mouseMoveHandler(event:MouseEvent):void
{
trace('mouse moved inside');//this trace should not be executed.
}
]]>
</mx:Script>
<mx:Canvas x="250" y="180" backgroundColor="white" height="300" width="400" mouseMove="canvas2_mouseMoveHandler(event)">
<mx:Text text="Mouse Entry not allowed"/>
</mx:Canvas>
</mx:Application>
You cannot programatically position (so neither fix) the mouse cursor in Flex (as pointed out by Alex Harui in this answer).
Although, you could give a try to this approach.
By tracking the mouse's x|y you could
draw the cursor at its last enabled
position when entering your
restricted canvas (+ hide it), and
remove the drawn cursor on
mouseOut event (+ show the cursor).
For restricting the drag / drop in your Canvas you just set the dragEnter property (event handler) on it:
dragEnter="event.stopImmediatePropagation();"
You can see some samples of enabling and disabling drag/drop operations here
We can not control/set Mouse position From Flex/ActionScript
but we can make Canvas Mouse in-sense-able applying properties
i.e. when we move mouse over it would not fires an event. properties are
mouseChildren="false"
mouseEnabled="false"
Hopes that helps
ive been pondering how to create the same type of resizing that acrobat connect does. i did read the documentation of percentage sizing. and i have implemented it. but its not how i want it to look.
to see an example : https://admin.na3.acrobat.com/_a204547676/flextras/
sorry Jeffrey to use you as an example. :)
just try to resize your window and see it... thats what im looking for .
any hints guys?
Given your code sample; the button is not given a height or width; so Flex sizes it automatically used a fixed width. Give the button a percentage width or height and it should resize appropriately as the screen changes.
<?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" xmlns:mx="library://ns.adobe.com/flex/mx" backgroundColor="#FFFFFF">
<s:BorderContainer width="40%" height="70%" y="10" horizontalCenter="0">
<mx:Image height="100%" width="100%" id="img" source="http://upload.wikimedia.org/wikipedia/en/thumb/a/ab/Apple-logo.png/125px-Apple-logo.png" horizontalCenter="0"/>
</s:BorderContainer>
<s:Button y="543" horizontalCenter="0" label="start" width="40%" height="30%"/>
</s:Application>
ok i have tried it. but its not the result i am looking for. if you keep resizing back and forth the acrobat app you can see the entire app resizing compared to the above example.
its not quite the same.
i'm trying to make a scrollable box, when a mouse enters and STAYS on "wrapper"'s area, "pubsBox" moves 10 pixels to the left.
<mx:Canvas id="wrapper" height="80" width="750">
<mx:HBox id="pubsBox" horizontalGap="10" height="80" width="100%" />
</mx:Canvas>
My problem is that I'm not sure how to make the MouseEvent.MOUSE_OVER work, to recognize that the mouse is still ON the area and so pubsBox should continue to move 10 pixels to the left every second.
I understand that i have to use a Timer, but what I'm concerned about is the fact that I can't get Flex to recognize that the mouse is still OVER "wrapper" and continue firing the event. Any ideas?
Use MouseEvent.MOUSE_OUT. Assume that the mouse is still over the wrapper until the mouse out event is fired. So essentially you will setup some sort of loop that will continually move the pubsBox until the MouseEvent.MOUSE_OUT event is fired.
<mx:Canvas id="wrapper" height="80" width="750" mouseOver="startMove(e)" mouseOut="stopMove(e)">
<mx:HBox id="pubsBox" horizontalGap="10" height="80" width="100%" />
</mx:Canvas>
In the startMove function, setup you timer etc, for the logic to achieve the move. In the stopMove function, add your logic to stop the timer and kill the move process.
I'm currently learning Flex, and am having the hardest time getting scroll bars to work. In short, I'm making a giant form for users to fill out, contained within a viewstack component. The user will type up information in one view, and it will be displayed in the other. But right now in the first canvas I have components that run off the screen and flex doesn't automatically add a scroll bar, so I added 'verticalScrollPolicy="on"' to my canvas. Now, while it gives me a scroll bar, it gives me an empty scroll bar. I still cannot move it up or down, meaning components are still trapped off the bottom of my screen. Am I missing something simple?
Edit - I'm using Adobe Flex Builder 3, and the components it lets you drag in. http://img12.imageshack.us/img12/218/problem1f.jpg This is a picture of the problem, and i guess relavent code would be.
<mx:Application xmlns:mx="adobe.com/2006/mxml" layout="absolute" width="830" height="835">
<mx:ViewStack x="10" y="72" id="viewstack1" width="790" height="751" >
<mx:Canvas label="Design Mode" width="100%" height="100%" verticalScrollPolicy="on" horizontalScrollPolicy="on" >
(Components inside)
</mx:Canvas>
I think the problem is in the way the content in your canvas determines it's height.
If I do this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:ViewStack width="500" height="500">
<mx:Canvas width="100%" height="100%">
<mx:Canvas width="100" height="1000" backgroundColor="#ededed" />
</mx:Canvas>
</mx:ViewStack>
</mx:Application>
I get scrollbars - Canvas has a default horizontalScrollPolicy and verticalScrollPolicy of auto, meaning it'll show the scrollbars as needed. I think, for whatever reason, the outer canvas isn't detecting that the content is taller than it should be.
if it can help some one : some related problem
I have list for which I require some space between the items and the list margin. The items inside the list are rendered from some other file. But when I add padding I cannot see any difference.
Something like this:
<mx:List id="List" selectionColor="red" itemRenderer="renderers.List"
doubleClick="Handler()" width="500" cornerRadius="4"
textAlign="center" height="335">
Also when mouse is rolled over only the item has to be highlighted excluding the padding.
Any suggestions? A sample code will be very useful.
Thanks
You are looking for useRollOver for, well, adding roll overs.
<mx:List useRollOver="true" />
As for the padding, you will need to do that in a custom item renderer.
Here is a good article to help you get started on making a custom item renderer:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
The below already has space between the left and right edges of the list and the items in the list, with them being laid out in the centre of the list. This is using the default itemRenderer.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:List id="List" selectionColor="red" width="500" cornerRadius="4"
textAlign="center" height="335">
<mx:Array >
[1,2,3,4]
</mx:Array>
</mx:List>
</mx:WindowedApplication>
Are you rendering text or images?
As for the selection of only the item and not the extra space, I'm not too sure about that one.