Dragging the AIR application window around the screen - apache-flex

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.

Related

Flex: createPopUp -> Make everything modal except scrollbars

I made this simple application to demonstrate my problem. It has:
An image
A button that launchess a popup window
Scroll bars on the side
<mx: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"
verticalScrollPolicy="on"
horizontalScrollPolicy="on"
layout="vertical">
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function buttonClick():void {
PopUpManager.createPopUp(this,JakePanel,true);
}
]]>
</fx:Script>
<mx:Image width="2000"
source="#Embed(source='assets/image.jpg')"/>
<mx:Button click="{buttonClick()}" label="Launch"/>
</mx:Application>
When the launch button is pressed it launches this popup window:
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
layout="vertical"
width="400" height="300"
title="Popup"
>
<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;
public function close():void {
PopUpManager.removePopUp(this);
}
]]>
</fx:Script>
<s:TextArea text="Enter more text here: " width="100%" height="200"/>
<s:Button label="OK" click="{close()}" width="100%" height="30" />
</mx:Panel>
These are my requirements
When the popup is open I need to be able to disable everything except the popup. To do this I am using: PopUpManager.createPopUp(this,JakePanel,true);. The last parameter specifies that the popup is "modal" and that it should capture all mouse events.
I also need to allow the main scroll bars to be enabled while the popup is open. Often my users will have the app open in a very small screen and will not be able to resize the app. For example:
This is a problem when the app is too small to click the ok button:
Is there a way to make everything "modal" except the main scroll bars? I know that I could put a scrollbar on the Panel but I would prefer to avoid this.
I think that the best way to do this is to:
Wrap everything in the main application in a <mx:hgroup id="allYourStuff"> tag.
When you add the Popup to the screen call: allYourStuff.enabled = false
When you remove the Popup from the screen call: allYourStuff.enabled = true

Switch between Flex Tabbed ViewNavigators

I am working on a Flex TabbedViewNavigatorApplication with three tabs (ViewNavigator elements). I would like to switch from one ViewNavigator to another based upon a user action (via ActionScript code).
I know that switching between Views uses pushView and popView, but I'm working with ViewNavigators, and my searching revealed nothing useful.
I'm trying to switch from Tab2 to Tab1 when an event occurs. In this case, Tab2 contains a list, and when the user makes a selection, I want to jump back to Tab1.
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onAppReady(event)">
<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.TabOneView"/>
<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.TabTwoView"/>
<s:ViewNavigator label="Tab3" width="100%" height="100%" firstView="views.TabThreeView"/>
</s:TabbedViewNavigatorApplication>
Thanks for your help!
I use the following line of ActionScript to switch from one ViewNavigator to another based on a user action:
TabbedViewNavigator(navigator.parentNavigator).selectedIndex = 1;
It worked like a charm and seems simpler than bubbling events.
This class is strangely undocumented. I have not tried this myself, but from searching online, this is what I found which corroborates with what the rest of the network does.
What you need to do is bubble an event to the TabbedViewNavigatorApplication and from there change the selectedIndex property to whichever tab you need to change to. For example:
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
this.addEventListener('someEvent', someHandler);
}
private function someHandler(e:Event):void
{
this.selectedIndex = 0; // or whatever index you want.
}
]]>
</fx:Script>
<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.TabOneView"/>
<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.TabTwoView"/>
<s:ViewNavigator label="Tab3" width="100%" height="100%" firstView="views.TabThreeView"/>
</s:TabbedViewNavigatorApplication>
You just need to dispatch a bubbling event from within your children. You could event create a custom event that holds data about which tab to switch to.

Component doesn't get garbage collected

I just noticed a strange behaviour while looking at my application in the Flash Profiler. When I click a button in my TitleWindow then the TitleWindow doesn't get garbage collected after it is removed. I have no idea why that is happening.
I've created a small example application, so you can try it out yourself:
Main.mxml
<?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" pageTitle="Memory Leak (Spark)">
<fx:Script>
<![CDATA[
protected function openWindowBtn_clickHandler():void
{
removeAllElements();
addElement(new ExampleView());
}
]]>
</fx:Script>
<s:controlBarContent>
<s:Button label="Open Window" id="openWindowBtn" click="openWindowBtn_clickHandler()"/>
</s:controlBarContent>
</s:Application>
ExampleView.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow 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="100%" height="100%" title="Example View" close="closeHandler()">
<fx:Script>
<![CDATA[
import mx.core.IVisualElementContainer;
protected function closeHandler():void
{
var visualElementParent:IVisualElementContainer = parent as IVisualElementContainer;
if (visualElementParent)
visualElementParent.removeElement(this);
else
parent.removeChild(this);
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Button id="doSomethingBtn" label="Click me!"/>
</s:TitleWindow>
When you click "Open Window" and close the ExampleView without clicking the "Click me!" button in it then the GC kicks in and removes the ExampleView. However, when you click on "Click me!" and close the ExampleView afterwards, the ExampleView stays in memory forever.
I wasn't able to find the references in the Profiler which cause this behaviour. I hope someone knows a solution to this, otherwise Flex is creating a lot of memory leaks.
I may be wrong, but iirc EventListeners added in MXML are always created with a strong reference, which would prevent the Button from being GC'ed.
Have you tried adding the EventListener manually with setting it to being a weak reference? If you look at the list of EventListeners in the Debugger you should see something like a WeakMethodClosure if it was added with a weak reference.
One thing you're probably forgetting is that garbage collection isn't collecting unreferenced objects at the moment they loose the last reference. Usually the GC will collect the loose instances only after you create some object, but even than it's not obvious if it will do it in that moment. You can read more about it here:
About garbage collection
Or take a look at this presentation: Garbage Collection - Alex Harui
<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" pageTitle="Memory Leak (Spark)">
<fx:Script>
<![CDATA[
protected function openWindowBtn_clickHandler():void
{
removeAllElements();
addElement(new ExampleView());
}
protected function button1_clickHandler(event:MouseEvent):void
{
var o:Object = new Object();
System.gc();
}
]]>
</fx:Script>
<s:controlBarContent>
<s:Button label="Open Window" id="openWindowBtn" click="openWindowBtn_clickHandler()"/>
<s:Button label="Force GC" click="button1_clickHandler(event)"/>
</s:controlBarContent>
</s:Application>
Take a look at this. If you press the "Force GC" button a couple of times, it will collect the ExampleWindow. In a real world application that does something this happens without the need to call the System.gc() (in fact, it's not a good practice to call it), but after a while, so the things don't just disapear when you're done with them, they disapear when you're done, and Flash Player decides it needs to clean up.
Looks like the ExampleView is not getting Garbage collected because somehow some EventListener is added when "Click Me" is clicked.
The best way to avoid this is to
1. add Event Listener manually in createComplete event
2. Remove the EventListener in closeHandler
3. Remove the button from the container and set it to null
Now the ExampleView will be Garbage collcected

Capturing key events in a mx:Image

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

Flex 4 dynamically resize parent container to contain children

Is there an easy way to make a parent container (eg Group) resize when it's children resize?
Below is a little example app. When I put the 200x200 'food' in the 'stomach' the stomach & it's containing 100x100 'body' should resize to contain the food.
Any ideas?
(from this gist http://gist.github.com/301292)
<?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/halo"
minWidth="1024"
minHeight="768"
creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void {
}
protected function eatFoodTrigger_clickHandler(event:MouseEvent):void {
var food:Border = new Border();
food.setStyle('backgroundColor', 0x15DCA9);
food.width = 200;
food.height = 200;
stomach.addElement(food);
}
]]>
</fx:Script>
<s:Group verticalCenter="0" horizontalCenter="0">
<s:layout>
<s:VerticalLayout horizontalAlign="center" />
</s:layout>
<s:Label fontSize="24" text="The 100x100 pink/brown body has a stomach inside it.
Press eat and the stomach gets 200x200 'food' added to it.
I want the body and the stomach to expand to fit the food." width="200">
</s:Label>
<s:Border id="body"
backgroundColor="0x333333"
minWidth="100"
minHeight="100"
borderColor="0xFF4466"
borderWeight="5">
<s:Group id="stomach">
</s:Group>
</s:Border>
<s:Button id="eatFoodTrigger" click="eatFoodTrigger_clickHandler(event)" label="eat" />
</s:Group>
</s:Application>
Ok so it was a bug in the flex 4 sdk, and it's been fixed. Awesome.
From: http://forums.adobe.com/thread/575252
Your example works for me in a recent
build. Perhaps it was a bug in an old
build. Try one of the new nightly
builds:
http://opensource.adobe.com/wiki/display/flexsdk/DownloadFlex4
-Ryan
Obviously, this is a bit too late, but you could have overriden the addElementAt-method and added some functionality for resizing there. Below, you can see how addElementAdd() should/could be overridden.
//This would be placed in a custom component that extends Group. Your stomach would be this component.
override public function addElementAt(element:IVisualElement, index:int):IVisualElement
{
super.addElementAt(element, index);
ChangeWatcher.watch(element, "width", function():void{ resizeHandler(element) });
ChangeWatcher.watch(element, "height", function():void{ resizeHandler(element) });
}
private function resizeHandler(el:IVisualElement):void
{
var element:DisplayObject = el as DisplayObject;
//Rest of the resizing code.
}
I know this worked for flex3 and Canvas, so it should also work with flex4 and Group.

Resources