In Flex Air app, how do you open a window behind an active one?
I tried following and i can't seem to get it to work
<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"
creationComplete="onCreationComplete(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.Window;
private var window1:Window = new Window();
private var window2:Window = new Window();
private var timer:Timer = new Timer(3000,1);
private function onCreationComplete(event:FlexEvent):void
{
window1 = new Window();
window1.title = "Window 1";
window1.width = 200;
window1.height = 200;
window1.open(false);
window1.orderInBackOf(this);
window2 = new Window();
window2.title = "Window 2";
window2.width = 200;
window2.height = 200;
timer.addEventListener(TimerEvent.TIMER_COMPLETE, openWindow2, false, 0, true);
timer.start();
}
private function openWindow2(event:TimerEvent):void
{
window2.open(false);
window2.orderInBackOf(window1);
}
]]>
</fx:Script>
</s:WindowedApplication>
With this code, I would expect window1 to open behind the main app window and, in 3 seconds, window2 would open behind window1. But if you execute this, window1 will open on top of the main window and window2 will open on top of window1 and the main app will retain focus. This seems like a bug in the Flex. If so is there any workaround for this problem?
So it seems like there isn't a good way to solve this problem. A workaround would be to add event listener for AIREvent.WINDOW_COMPLETE and move the window in the event handler. This seems like "correct" workaround and it works for a simple case like my original example. Problem is that this approach did not work on my code.
If you look at the spark.components.Window code from the sdk, you will see that an event listener for Event.ENTER_FRAME is added when opening the window (in commitProperties()). Then in the event handler, enterFrameHandler(), it keeps a counter, and on second frame, dispatch AIREvent.WINDOW_COMPLETE event. This makes me think that AIREvent.WINDOW_COMPLETE event will fire on second frame regardless of the status of the window even though the livedoc says:
Dispatched when the Window completes its initial layout and opens the underlying NativeWindow.
I'm guessing my window wasn't full created by the second frame and therefore orderInBackOf failed.
So here's my workaround:
First, in my window, I override open(openWindowActive). If openWindowActive is false, I add an event listener for Event.ENTER_FRAME. In the event handler, I keep a counter and, when the frame count reaches a certain number (10 right now), I move the current window behind the active one. This is a VERY hacky way to get around this problem. I've been increasing the limit and now it succeeds about 90% of the time. I could continue to increase the limit until I get close to 100% but I hate having to check this condition every time I make any changes to the window. Also this condition could be different depending on the machine.
I would LOVE it if someone can tell me how wrong my workaround is and tell me a much much better way to solve my problem... but till then this will have to do...
Is there a particular reason you're setting the useWeakReference parameter to true? Otherwise, you should be able to just call:
timer.addEventListener(TimerEvent.TIMER_COMPLETE, openWindow2);
However, there's a bug in that line of code. The TIMER_COMPLETE event is fired when the timer is finished all its cycles. You have set your timer to "fire" infinitely. So it will never complete it's cycles.
You need to modify that line of code to the following and you should get your expected results:
timer.addEventListener(TimerEvent.TIMER, openWindow2);
To address your second question (why window1 doesn't appear behind the application). Judging by the return value of the orderInBackOf function:
Boolean — true if the window was succesfully sent behind;
false if the window is invisible or minimized.
It seems that ordering fails if the the window is invisible. It may be the case that, by having the code in the creationComplete handler, you're calling this function before the Application window has a chance to display itself. Try moving that code within your openWindow2 function, as well. Yeilding:
private function openWindow2(event:TimerEvent):void
{
window1.orderInBackOf(this);
window2.open(false);
window2.orderInBackOf(window1);
}
I hope this helps in some way,
gMale
EDIT: per my last comment try this,
private function openWindow2(event:TimerEvent):void
{
window1.depth = 5; //arbitrary number
window2.depth = 4;
window1.open(false); //assumes window1 isn't opened before
window2.open(false);
}
Related
In Flex (Flash Builder 4) I am opening a new window via PopUpManager.addPopUp. I have timer code that runs in my component and I need to stop my timer when that window opens and start the timer again when the window closes.
I figure it's easy enough to stop the timer in the function that opens the window, but how can I start the timer again when the window closes?
Is there a way to tell if there is a pop-up window in front of my component, or if a specific pop-up window is still open via PopUpManager?
Maybe events are a better approach?
Thanks!
Events! is the way to go.
Fire events during launch/close. Add your logic in the event Handlers!
You can use following code to check whether opened popup window is getting closed or not.
if it is closed you can stop the timer.
//set the flag to find your popup window is exist or not.
private var isPopupExist:Boolean = false;
private function closePopUpWindow():void
{
var systemManager:SystemManager = FlexGlobals.topLevelApplication.systemManager;
//Returns a list of all children.
var childList:IChildList = systemManager.rawChildren;
for(var i:int=childList.numChildren-1;i>=0;i--)
{
var childObject:* = childList.getChildAt(i);
//If child object is Uicomponent.
if (childObject is UIComponent)
{
var uiComponent:UIComponent = childObject as UIComponent;
//If uicomponent is popup and class name is equal to **your popup component name** here i am using "ChatComp".
if (uiComponent.isPopUp && uiComponent.className == "ChatComp")
{
isPopupExist = true;
}
}
}
}
in your Timer,
private function checkPopUpExistance():void
{
call closePopUpWindow() function for every 1 sec or any seconds(your wish) to check whether popup is exist or not.
if(isPopupExist)
{
here you stop the timer.
}
}
Now you can start the Timer, when you opened the Popup window.
The popupmanager is a singleton class, so you can easily know how many popups have been created with his ChildList
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManagerChildList.html
I've created a custom component with several inline item renderers that I use as a tooltip. The height of the component is unknown, as the data contents of the component are not known until runtime.
However, when displaying the tooltip, occasionally it extends beyond the boundaries of the flash application, thus, I'd like to be able to detect this occurrence and reposition the tip.
The problem is that the height and width of the component are, apparently, not available until after being rendered by the popup manager. (i.e. they are always 0)
But, I do not know any way of finding out when the popup is actually rendered and, therefore, the height/width values available.
I tried adding a resize event listener to the component, but it doesn't appear to work, though I most certainly could be doing something wrong since it seems to me that the resize event only gives you the "oldWidth" and "oldHeight" of the object, which, at first display, would be 0...and useless to me.
Any ideas about how to proceed?
-----Edit-----
I have a base class like this:
public class TTComponent extends Canvas
{
var _parentC:UIComponent;
var popped:Boolean = false;
var timer:Timer;
var _comp:UIComponent;
public function set parentComponent(pC:UIComponent):void
{
_parentC = pc;
_parentC.addEventListener(MouseEvent.MOUSE_OUT, mouseOut);
_parentC.addEventListener(MouseEvent.MOUSE_OVER, mouseOver);
}
public function mouseOver(evt:MouseEvent):void
{
if (_parentC != null)
{
timer = new Timer(150,1);
_comp = this;
timer.addEventListener(TimerEvent.TIMER_COMPLETE, function( tevt:TimerEvent ):void
{
this.move( somex, somey);
if (popped != true)
{
PopUpManager.addPopUp(_comp, parentComponent );
popped = true;
});
timer.start();
}
}
public function mouseOut(evt:MouseEvent ):void
{
if ( timer )
{
timer.stop();
timer = null;
}
//If we popped up, remove the popup
if ( popped )
{
PopUpManager.removePopUp( _comp );
popped = false;
parentC .removeEventListener(MouseEvent.MOUSE_OUT, mouseOut);
parentC .removeEventListener(MouseEvent.MOUSE_OVER, mouseOver);
}
}
}
Then, an extended renderer like this:
<c:TTComponent name="T" 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:c="components.*">
<s:BorderContainer>
...about 30 labels grouped in various manners
...2 lists with inline item renderers
</s:BorderContainer>
</c:TTComponent>
Now, the code is called like this:
var w = new TTComponent();
w.data = data;
win.parentComponent = this;
This will add listeners to the mouse over and mouse out events on the parent, whatever it is, and then show or hide the tooltip accordingly.
------Edit------
Using a portion of what a commenter below suggested, this is the solution I came up with:
Inside the TTComponent class:
import flash.events.Event;
import mx.binding.utils.ChangeWatcher;
private var heightWatcher:ChangeWatcher;
public function set parentComponent
{
...
heightWatcher = ChangeWatcher.watch(this,'height',onSizeChange);
}
public function onSizeChange(evt:Event):void
{
if (this.height != 0)
{
....calculate the new component coords
this.move(newx, newy);
}
}
Note that this additional code doesn't bind to any component variable, it just adds a watcher on the component property.
You could also try binding your width and height. If these are made bindable in your class, flex will automatically adjust your popup's width and height.
When using mxml for your binding, you can just do something like this
<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}"></mx:YourComponent>
You can also add a eventListener that listens to the change event if you want to reposition you component, like so
<mx:YourComponent height="{HeightOfYourTooltip}" width="{WidthOfYourTooltip}" change="yourComponentResizeHandler()"></mx:YourComponent>
If you are using a programmed approach, you should should use the changewatcher. Below is shown how you can use that.
ChangeWatcher.watch(YourComponent, "width", repositionHandler);
ChangeWatcher.watch(YourComponent, "height", repositionHandler);
If you want to watch for other variables or properties to change, be sure to add the [Bindable]-tag above your variables in your class, like this
[Bindable]
var myVariable:SomeVariable;
I hope this helps.
For displaying toolTip which controls you are using in itemRenderer? Text or Label?
Try to Listen update complete Event of that component. May this Help you. :)
This might be messy, but on the pop up component, you could add an event listener after complete is fired, if the height or width == 0 then you setTimeout() to a function after say 100ms until you get valid data.
Yes, I know it is a bit of a hack, but those will eventually report correctly measured values so it's not going to call that many times.
Just an idea if you are against a deadline or something like this isn't critical. :)
I've inherited an application and am fixing a bug. There is a refresh button in a the application's mxml file and it has a click="refresh(null)". This works.
However we also want to do a refresh every five minutes automatically using a timer. There is code in an .as file (that is sourced' into the above mxml file) that uses a Timer and calls refresh(null) from within the .as file, but this doesn't seem to do anything.
Is this the right way to do this? Or do we need to explicitly reference the object we want to refresh? If so, how do we do that?
Code jisting (sorry, I'm on an isolated network and can't easily move code to here; if you can't read it then just ignore my question please):
foo.mxml:
<mx:Application ...>
<mx:Script source="funcs.as"/>
<mx:Image ... click="refresh(null)".../>
funcs.as:
// timer created
// timer started
// timer observer added, calls refreshScreen()
private function refreshScreen():void
{
refresh(null);
}
var timer:Timer = new Timer( 5000 );// 5 second intervals
timer.addEventListener(TimerEvent.TIMER, refreshScreen)
timer.start( )
//refreshScreen needs to have an event parameter
private function refreshScreen( e:TimerEvent ):void
{
refresh(null);
}
(Flex 3) I have a TextArea component which needs to hold the user's clipboard content. The TextArea does the job relatively well for most cases but when pasting a large amount of data, I can't seem to get the content in the component at all due to the script execution timeout.
I've done a fair deal on investigation to try and hopefully find how I could make this work.
I found that the TextArea is using a IUITextField (which is in my case an instance of TextField at runtime) do handle the job of obtaining the pasting data and then throws an event when it is done.
I have found no way to take a look at the source of TextField as it is a class in the playerglobal.swc library.
Is there a way for me to maybe see the source of that class or is there something I'm missing in my approach to figure out a way to make this work?
P.S: I know there would be alternate way to achieve the results I'm looking for but I would like to make this particular solution work.
Since the TextField doesn't want to accept our paste event we will find someone else who will. Here is the mx:TextArea workaround:
MXML:
<mx:Canvas id="canvas" paste="pasteHandler(event)">
<mx:TextArea id="textArea" textInput="if (event.text.length > 1) event.preventDefault();"
keyDown="keyDown(event)" mouseEnabled="false"/>
</mx:Canvas>
AS:
private function keyDown(event:KeyboardEvent):void{
//When CTRL-V is pressed set focus to canvas
if(event.keyCode==86 && event.ctrlKey)
canvas.setFocus();
}
You also need enable the clipboard items on the Canvas's ContextMenu and reset focus to TextArea when finished with the paste.
Got the paste-blocking solution from: flex: how to prevent PASTE (ctrl+V) in a flex3 textinput?
This problem will often occur when large amounts of antialiased text are added to the display list. Once the text is rendered, everything is fine again. You can go around this problem, if you're handling predefined text, by splitting large portions of text into a lot of small ones, and adding them to the stage piece by piece (say, 20 lines of text at a time), waiting one frame between each, allowing the screen to refresh.
I haven't tried this yet, but I would suggest adding an event listener to the TextArea and checking on Event.RENDER, if the text was changed. If this is true, you could remove all text that was added since the last render event, and frame by frame re-add it much like in the example above.
Also, try using native instead of embedded fonts and switching off antialiasing, or reducing its quality.
Unfortunately, I think that you can't intercept all types of user input event on text fields using Flex 3.
If you can switch to Flex 4 (thus using the new FTE), then you should add a listener on the TextOperationEvent.CHANGING event , that is a cancellable event. In the handler, you could verify the amount of text that is being added and, if it is too much, cancel the event (event.preventDefault()) and add it in multiple frames.
The nice thing about this event is that it fires also for event such as "delete key pressed with selected text", or cut/copy/paste/delete operations. In fact, I use it to apply early validation to some kind of text fields, that I couldn't detect in any way with Flex 3.
EDIT
Maybe I found a solution.. I noticed that the "restrict" property, that allows to filter the characters allowed in a text field, is supported in the built-in TextField class, and it is not a feature added by the wrapping Flex component: interesting for our porpuse.
So I tried to play with it, and I discovered that setting restrict="" on your TextArea will prevent blocking the UI on paste of a large block of text, because it is applied "early" at the player level. The nice thing is that, even with this setting, the TextArea will still dispatch the textInput event, so you can monitor the paste event and decide what to do with the new text: update the text property in a single step, start an incremental update or just ignore the event.
Copy and paste the following code to see an example (tested with Flex 3.6 and Flash Player 11):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
minWidth="955" minHeight="600"
layout="vertical"
horizontalAlign="center">
<mx:Script>
<![CDATA[
protected function generateClipboard():void {
var largeData:String = "";
while (largeData.length < 1000000) {
largeData += "Lorem ipsum ... ";
}
System.setClipboard(largeData);
}
protected function ontextarea1_textInput(event:TextEvent):void {
if (event.text.length < 100) {
// NAIVE CODE: just to demonstrate that you can
// programmatically modify the text.. you should "merge"
// the new text with existing content here
textArea.text += event.text;
} else {
// do something here, like starting
// to add text block by block in
// multiple frames
}
}
]]>
</mx:Script>
<mx:TextArea id="textArea" width="100%" height="100%" restrict="" textInput="ontextarea1_textInput(event)"/>
<mx:Button click="generateClipboard()" label="Set clipboard"/>
</mx:Application>
The tricky part will be correctly set the text on the textInput event, and the "incremental" load of large text.
Its impossible with such large texts (you mentioned that the text is around 7MB).
If you look at the source of mx:TextArea, it inserts text simply be setting its TextField text property to the string you entered:
From TextArea.as around line 2050:
if (textChanged || htmlTextChanged)
{
// If the 'text' and 'htmlText' properties have both changed,
// the last one set wins.
if (isHTML)
textField.htmlText = explicitHTMLText;
else
textField.text = _text;
textFieldChanged(false, true)
textChanged = false;
htmlTextChanged = false;
}
If you make a sample app with a TextField and try to set its text property with a large string, you will get script timeouts. (i got timeout when i tried it with a string length of 1MB):
import flash.text.TextField;
tf = new TextField();
addChild(tf);
tf.multiline = true;
tf.wordWrap = true;
tf.width= 600
tf.height = 500
var str:String = "";
for (var i:int=0; i<100000; i++) {
str = str+"0123456789"
}
tf.text = str
This is the simplest possible way to display text, and it timeouts. Flex will try to do a dozen of more things with this textfield before laying out...so it will give up at much smaller size texts too.
The only possible solution is to make a custom textfield, and add the text gradually - Adobe recommends to use TextField.appendText():
import flash.text.TextField;
public function test(){
tf = new TextField();
addChild(tf);
tf.multiline = true;
tf.wordWrap = true;
tf.width= 600
tf.height = 500
addEventListener(Event.ENTER_FRAME,onEF);
}
private var cnt:int = 0;
private function onEF(event:Event):void{
if (cnt>200) return;
trace (cnt);
var str:String = "";
//pasting around 50K at once seems ideal.
for (var i:int=0; i<5000; i++) {
str = str+"0123456789"
}
tf.appendText(str);
cnt++;
}
This script manages to add 10MB of text into the TextField... although after adding 1MB it gets increasingly slower (it took around 1 sec for an iteration at the end). And if you try to do anything with this textfield (for example resizing, modifying text not with appendText(), adding it to the stage after its complete...) you will get script timeout.
So the complete solution is to capture the paste event canvas wrapper trick (William's solution), and then add the text gradually to a custom component, that uses appendText to add text. (use flash.text.TextField, and add it to the stage with mx_internal::$addChild() ). I have not tested, whether you can remove the resulting monstrosity with removeChild without triggering a script timeout :).
In the Spark TextArea the Paste Event fires correctly. There might be a cleaner way to do this but this is the solution I found.
MXML:
<s:TextArea id="textArea" changing="changeHandler(event)"
paste="pasteHandler(event)" />
AS:
private var pastedText:String;
private var textPosition:int=0;
//Number of characters to read per frame
private var chunkSize:int=1000;
private function changeHandler(event:TextOperationEvent):void{
if(String(event.operation)=="[object PasteOperation]"){
event.preventDefault();
}
}
private function pasteHandler(event:Event):void{
pastedText = String(Clipboard.generalClipboard.getData(ClipboardFormats.TEXT_FORMAT));
this.addEventListener(Event.ENTER_FRAME,frameHandler);
}
private function frameHandler(event:Event):void{
if( textPosition + chunkSize > pastedText.length ){
chunkSize = pastedText.length - textPosition;
this.removeEventListener(Event.ENTER_FRAME,frameHandler);
}
textArea.text += pastedText.substr(textPosition,chunkSize);
textPosition += chunkSize;
}
I have an AIR application running on a Mac and I want to have the behavior of hiding the window when someone "closes" the app (e.g. hits the red "x" button or cmd-w). However, if someone hits cmd-q or chooses "Quit" from the dock context menu or top level menu, I want the app to actually close.
I can preventDefault on the "closing" event sent by the application, however, this causes all "close" methods to just hide the window. The only way for someone to close the application at that point is ForceQuit (or through a separate interface I provide, like a context menu option on the dock icon).
I have also tried capturing the cmd-q keyDown event manually, but it doesn't get sent. Also, this wouldn't help for the case when people try to quit the app using the menu options.
Furthermore, if I preventDefault on the closing method, it causes my application to cancel a shut down process immediately (which is a terrible user experience).
Is there a way to detect different methods of closing an AIR application? I want to be able to tell the difference between these closing methods and react to the appropriately.
Try this for the closing, from what I understand there was / is a bug in the framework so that if you include the AIR updater it breaks cmd-q support, the thread used to be here: http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=670&threadid=1373568
This may or may not be applicable to your situation.
NativeApplication.nativeApplication.addEventListener(Event.EXITING,
function(e:Event):void {
var opened:Array = NativeApplication.nativeApplication.openedWindows;
for (var i:int = 0; i < opened.length; i ++) {
opened[i].close();
}
});
Try this, I am sure there must be a better way of handling this but this has worked for me.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.core.Application;
import mx.events.AIREvent;
import mx.core.Window;
private function onCreationComplete():void {
addMacSupport();
}
private var macsupport_allowExit:Boolean = false;
private function addMacSupport():void {
if ( Capabilities.os.indexOf("Mac") == 0 ) {
//open a hidden window that will prevent the application from
//exiting when the user presses Cmd+W
var win:Window = new Window();
win.visible = false;
win.open(false);
//add a closing listener on the hidden window, this event will only
//be fired when the user pressed Cmd+Q or selects quit from the menu
//then set macsupport_allowExit to true
win.addEventListener(Event.CLOSING, function(e:Event):void {
macsupport_allowExit = true;
});
//add an event listener to this window on closing
addEventListener(Event.CLOSING, function(e:Event):void {
//always preventDefault
e.preventDefault();
//wait one frame, then check the macsupport_allowExit variable
//if it is true, we nedd to exit the app, otherwise just hide
//the app window
callLater(function():void {
if ( macsupport_allowExit ) {
nativeApplication.exit();
}
else {
nativeWindow.visible = false;
}
});
});
//add an event listener for INVOKE to show our main app window
//when the dock icon is clicked.
addEventListener(InvokeEvent.INVOKE, function(e:InvokeEvent):void {
if ( nativeWindow && !nativeWindow.visible ) {
nativeWindow.visible = true;
nativeWindow.activate();
}
});
}
}
]]>
</mx:Script>
</mx:WindowedApplication>