I want to change the view states in my flex app when it resizes in the browser window.
I have the swf embedded at 100% x 100%. So when the user resizes the window below a certain width, I want to switch to a different state. I tried adding an event listener like this, but it only fires the event when I resize the swf outside the browser, not inside. I used:
this.addEventListener(ResizeEvent.RESIZE, SizeChanged);
I want this to work within the browser. I even tried using fixed dimensions in the embed code, instead of percentages, but that didn't help either.
You want to add the listener to the stage.
this.stage.addEventListener( Event.RESIZE, resizeHandler ); //from your Main.mxml creationComplete handler
Or you can add a listener via:
Application.application.stage.addEventListener( Event.RESIZE, resizeHandler)
Also, keep in mind that this event fires a lot as the view is resizing, so you will want to account for that.
Related
I wanted to know if I am doing things in a correct way in order to avoid memory leaks.
So, I have an iFrame inside a Backbone view. On click of some elements inside of that iframe I want to execute some functions inside the view.
For example
Let's say that, there is a div element inside that iFrame and want to change color of that div on click of that div.
So inside afterRender() hook I've added event binding like below:
this.$('#myframe').contents().find('body')
.on('click', '#divSample',
$.proxy(function(evt){
//change color
this.showSettingsPopup();
}, this)
);
So how should I go about unbinding events or what other things should be done in order to avoid memory leaks.
Currently in dispose method I'm detaching events.
I need to completely initialize a custom component in my Flex app (i.e. I should be able to access it from action script and get its properties and its children etc), But I do not want to add it to the display or make it visible.
I have tried to add it to my visible component, but keep it visible, but often many of its properties are set only when it is drawn, so i don't get what i need.
Is there a way to add a custom component to some sort of 'Virtual' display, that is not visible to the user?
You could add the component to an invisible Sprite - that way the component itself could both be on the stage and have its own visible property set to true.
Did you try using initialize()? After a view is added to the display list, the initialization stage begins. Calling initialize() before addChild() should let you initialize the view without needing to first add it to the stage.
For more info visit:
http://flexscript.wordpress.com/2008/10/24/flex-component-lifecycle-and-flex-component-framework/
http://blog.deadinkvinyl.com/2008/10/05/flex-3-addchild-and-initialize/
Not sure if possible without adding it to the display list, although I'd wish it were to some extent.
I once had to make custom drag proxy, which didn't work with the real component, because of some weird skinning issues. So instead I had PopupMananger add a box as a popup, added my component to the box, called validateNow on the component, drew it in a bitmap data, removed the popup, and used the bitmap data as the proxy.
So what you were trying was missing a call to validateNow most likely.
I have a Native Window in Flex AIR. Let's say the window doesn't have a focus. It is inactive. Is it possible to find out when mouse is over such window? The window is always in front. I heard that it is possible by checking stage.mouseX in ENTER FRAME handler. But maybe there is a more elegant solution ?
I would look into using the MouseEvent.MOUSE_OVER event; which I would expect to fire whenever the mouse enters the window.
The only issue I see is that the NaiveWindow class does not document mouse events. So, the mouse event will most likely have to be dispatched from one of the children of the NativeWindow. You may try adding a a transparent image as the background, or something similar, and listen for the event on that image.
Not sure what you mean by you have a NativeWindow, but if you've extended spark.components.Window (which is the way you should be creating a window) and add a MouseEvent.MOUSE_MOVE listener to it then that will be triggered whenever the mouse is moving over the window, regardless of whether or not the window or application itself has focus.
I need to keep a NativeWindow I am creating on top of the main window of the application.
Currently I am using alwaysInFront = true, which is not limited to the windows in the application. I can successfully synchronize the minimize/restore/move/resize actions, so the top window behaves appropriately in those cases. Even though using this option has the drawback that if I alt-tab to other application the window goes on top of the other application.
Because of the above I am trying to get it to work without using the alwaysInFront. I have tried using orderInFrontOf and orderToFront, which gets it in place but when I click an area in the main window the top one becomes hidden i.e. air makes it the top one.
I have tried capturing activate/deactivate events but it only happens on the first click, so on the second click the top window becomes hidden again. I also tried making the top window active when the main one becomes active, but that causes the main one to loose focus and I can't click on anything.
Ps. I am doing this to improve the behavior of a HTMLOverlay I am using - see Flex Air HTMLLoader blank pop up window when flash content is loaded
Listening for Event.DEACTIVATE and calling event.preventDefault() should work. Not sure if that is what you have tried, but I have an app where that does the trick.
I ended up turning on/off the alwaysInFront option based on whether the main window or the top window were active i.e. if none where active I turned it off. This was additionally to what I mentioned in the question.
That way when the user switches to another application, the window doesn't go on top of the other apps. I still would prefer a solution where I don't have to use the alwaysInFront option, or even better an alternate solution to the flex loading flash in external sites issue I linked to above.
Ps. I will try to check with the owner of the HTMLOverlay to submit a patch (its an improvement, although its tied to an app that doesn't open extra windows when opening the overlay).
Update: I have committed the changes to the HTMLOverlay.
I'm trying to do something very similar. In an AIR application, I have one large full screen window which is essentially the "desktop". I always want this window to stay behind all other windows in my app. There are, however, some items on the "desktop" window that need to be clickable.
There appears to be no clean way to force a window to maintain its position in the window ordering.
What I've settled on so far, which isn't perfect, is to make all other windows in my app use the alwaysOnTop property but bind this to a global var (ugh) that I maintain to track the overall application level active/inactive state. This way, when I switch to another app, my windows don't float above the all other app windows - they correctly move behind as expected.
Then, I have a regular (alwaysOnTop=false) window that is fully transparent as an "overlay" to the desktop window on which I can place various interactive controls. This window is OK to come forward since it's transparent and my other windows are alwaysOnTop.
Finally, and crucially, I install three event listeners on the "desktop" window as follows:
protected function onApplicationComplete(event:Event):void
{
this.addEventListener(MouseEvent.MOUSE_DOWN, onClickHandler, true,1000,true);
this.addEventListener(MouseEvent.CLICK, onClickHandler, true,1000,true);
this.nativeWindow.addEventListener(Event.ACTIVATE, onActivateWindow,false,-1);
}
protected function onActivateWindow(event:Event):void
{
trace("sent via activate to back");
orderInBackOf(bigTransparentWindow);
}
protected function onClickHandler(event:MouseEvent):void
{
trace("sent via click to back");
orderInBackOf(bigTransparentWindow);
}
I'm not entirely happy with all this since there is still some occasionally noticeable flicker of objects in the overlay window - it appears that the "Desktop" window gets ordered in front of it, an update of some sort happens, and then it gets forced behind again.
Any better solutions welcome!
I have a Flex app with a viewport that loads a series of other swfs. I would like to place a context menu over top of the SWFs when the user right-clicks. To that end, I have set up a fairly standard context menu where each item has a ContextMenuEvent.MENU_ITEM_SELECT event handler. One problem: The eventHandler never gets called.
If I place the context-menu code anywhere else in the app, i.e. not on top of a loaded SWF, everything works fine. However, when I place the exact same code on the SWF viewport, the context menu items appear, but the eventHandlers are never called. Any ideas?
I'm not sure I understand your problem, but this is my insight.
The SWF is embedded and can only be expected to change the visual appearance of your Flex app, but you cannot expect the embedded SWF to do the work of dispatching events as well. You will need to "bubble out" the events into the SWF's parent(s) and let the parent deal with the event.
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html
Let me know, thanks!
i think is because the event doesn't bubble up to your app where you have the listeners.