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
Related
I have a Callout whose content is resized by certain user interactions. The skin has an animation and after that the Callout is no longer positioned correctly and needs to be repositioned.
Is there any way to invalidate the Callout after the Callout content has been resized?
It was simpler than I thought. I added an event handler to the resize event on the Callout content and then in that event called the Callout method updatePopUpPosition() to update the Callout position, obviously.
At first I was looking for one event that I could listen for after the Callout had been resized but that would involve dispatching a custom event when there is an effect. Adding an event handler for resize triggers multiple times when the resize effect is running but the animation and positioning is flawless so I'm keeping it.
<?xml version="1.0" encoding="utf-8"?>
<s:Callout 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:Script>
<![CDATA[
import mx.events.FlexMouseEvent;
import mx.events.ResizeEvent;
protected function editorBar_resizeHandler(event:ResizeEvent):void {
updatePopUpPosition();
}
]]>
</fx:Script>
<controls:MyContent id="editBar" width="100%" resize="editBar_resizeHandler(event)" />
</s:Callout>
I have a very general question and have prepared a simple test case.
When using BasicLayout (i.e. absolute positioning) - what is the best approach to place a Flex component in the center of the application?
In the test case below I'm using x="{width/2}" but this gives me at least 2 problems:
How do I account for the component dimensions (the ProgressBar in the test case)?
Is the binding {width/2} a good idea to use? Wouldn't it send unnecessary DATA_CHANGE events in some cases?
And finally I wonder, how this all applies to full screen applications using StageScaleMode.SHOW_ALL - because currently my application is aligned to the top-left in the full screen mode and there is a white dead zone on the right of it. (Which is at least a change from pure Flash/AS3 behaviour, where the full screen content is displayed in the center of the screen and 2 dead zones on the left and right).
<?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"
width="700" height="525"
backgroundColor="#CCFFCC"
initialize="systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL">
<fx:Script>
<![CDATA[
private function fullScreen(event:MouseEvent):void {
stage.displayState =
stage.displayState == StageDisplayState.NORMAL ?
StageDisplayState.FULL_SCREEN :
StageDisplayState.NORMAL;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="connected" />
</s:states>
<s:CheckBox right="10" bottom="10"
label="Full screen"
click="fullScreen(event)" />
<mx:ProgressBar indeterminate="true"
x="{width/2}" y="{height/2}"
label="Connecting..." labelPlacement="center"
includeIn="normal" />
</s:Application>
Way easier than that: just use horizontalCenter and verticalCenter properties of UIComponent. When used inside a BasicLayout the component will always be centered. Like this:
<mx:ProgressBar indeterminate="true"
horizontalCenter="0" verticalCenter="0"
label="Connecting..." labelPlacement="center" />
If you give these properties a value other than '0' the component will be offset from the middle by the amount of pixels you specify as a value. (e.g. horizontalCenter="50" will offset the component 50 pixels to the right of the center of the parent component)
That white space is probably due to your usage of systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL. Just remove that line. Why are you doing that anyway?
edit
Just noticed you're using a fixed 'width' and 'height' on your Application: you'll have to make those '100%' if you want your app to really fill the screen. This is another possible cause for that white space.
To get your application centered (rather than left/right aligned) when using systemManager.stage.scaleMode=StageScaleMode.SHOW_ALL, set systemManager.stage.align to the empty string - i.e.:
// in your Application creationComplete handler
systemManager.stage.scaleMode = StageScaleMode.SHOW_ALL;
systemManager.stage.align = "";
I typically do 2 things,
I place objects inside VGroups/HGroups with alignment, I also use relative widths eg percentages.
Think like in the old days of using HTML tables. It works very well especially if your canvas is resized allot.
All of my canvases have to be resizeable as I like to only write my apps once, for pc, mobile etc, so I just make everything scalable by default.
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 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.
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