I'm having a problem similar to FLEX: dialog not display immediately . Code follows:
private function saveBitmap(event:ContextMenuEvent):void
{
loadingScreen.visible = true;
loadingScreen.appLoadingText.text = "Preparing bitmap...";
addChild(loadingScreen);
validateNow();
var bmpd:BitmapData = new BitmapData(canv.width, canv.height);
bmpd.draw(canv);
var fr:FileReference = new FileReference();
fr.addEventListener(DataEvent.UPLOAD_COMPLETE_DATA, removeLoadingScreen);
fr.addEventListener(Event.CANCEL, removeLoadingScreen);
var png:PNGEncoder = new PNGEncoder();
var iba:ByteArray = png.encode(bmpd);
fr.save(iba, "export.png");
}
Basically, bmpd.draw and/or png.encode are dog slow, so I'd like to have a nice "please hold while we prepare your png" dialog to appear. I can't use callLater() because of the FileReference.
And just for good measure, the loading screen appears at the same time the save dialog appears from the call to fr.save().
Any ideas?
Cheers!
You're adding the child in this function. Are you doing any other work to the loadingScreen, such as sizing it? Or positioning it? Most commonly this is done in updateDisplayList(). What container are you using?
Are you sure the Z-order of your two children is correct? You can swap children with the swapChildren method
Related
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'm trying to place a popup window (TitleWindow) in the middle of the main application window. how do i set the coordinates of my popup window to be of the main application window?
i tried the localToGlobal function but with no luck, I just can't get the main window x and y.
Thanks in advance,
Uzi.
From the Adobe Docs:
Just call the centerPopUp method in the CreationComplete event of your TitleWindow.
private function handleCreationComplete():void {
// Center the TitleWindow container
// over the control that created it.
PopUpManager.centerPopUp(this);
}
If you're creating the popUp from within a method, you can also try:
public function openWindow(event:MouseEvent):void {
myPopUp = new TextArea();
myPopUp.width= 220;
myPopUp.height= 150;
myPopUp.text = "Hold down the Shift key, and " +
"click in the TextArea to close it.";
myPopUp.addEventListener(MouseEvent.CLICK, closeWindow);
PopUpManager.addPopUp(myPopUp, this, true);
PopUpManager.centerPopUp(myPopUp);
}
Edit: You can also try:
PopUpManager.centerPopUp(Application.application as DisplayObject);
or if the component is directly on your application's main stage
PopUpManager.centerPopUp(this.parent);
Second Edit: If you're using the PopUpManager.addPopUp method to launch your popup, just change the 2nd argument from this to this.parent (or whatever component you like). The 2nd argument tells the PopUpManager what your popup's parent is. Check out the Adobe Live Docs for more info.
PopUpManager.addPopUp(myPopUp, this.parent, true);
myPopUp.x = (Application.application.width - myPopUp.width)/2
myPopUp.y = (Application.application.height - myPopUp.height)/2
#uzi orgad
I think this will be suitable for you, try this
var popup:Object ;
popup = PopUpManager.createPopUp(
FlexGlobals.topLevelApplication as DisplayObject,
popupname, true);
PopUpManager.centerPopUp(popup as mx.core.IFlexDisplayObject);
FlexGlobals.topLevelApplication as DisplayObject points to the main application.So the popup appears at the middle of the application
private function editForm():void {
var event:DepManagementEvent = new DepManagementEvent("Edit Page",true);
var navi:String;
event.navi = deleteDataGrid.selectedItem
dispatchEvent(event);
}
This function is in item renderer, i need the parent datagrid id to be called here...
DataGrid(this.owner) or DataGrid(this.listData.owner) would give you the parent data grid. I don't know the exact reasons, but I heard that the second one is the preferred way of doing it.
Some helpful information here:
http://www.adobe.com/devnet/flex/articles/itemrenderers_pt2_04.html
I have a flex Air program that loads external content with the HTMLLoader. Now for some reason whenever I load a page that has any flash content a blank system window pops up outside of my program. It's completely blank, all white with min, max and close buttons. If I close it any flash content I loaded stops working. For the life of my I can't figure out what's happening and there's no messages in the console and no title for the window.
Does anyone have any ideas? I appreciate any help you can give. Here's the code I'm using:
private var webPage:HTMLLoader;
private function registerEvents():void
{
this.addEventListener(gameLoadEvent.GAME_LOAD, gameLoad);
//webPage = new HTMLLoader();
}
//function called back from Game Command to load correct game
private function gameLoad(event:Event):void
{
var gameEvent:gameLoadEvent = event as gameLoadEvent;
loadgame(gameEvent.url, gameEvent.variables);
}
private function loadgame(url:String, variableString:String):void
{
DesktopModelLocator.getInstance().scaleX = 1;
DesktopModelLocator.getInstance().scaleY = 1;
//var url:String = "http://pro-us.sbt-corp.com/aspx/member/LaunchGame.aspx";
var request:URLRequest = new URLRequest(url);
//var variables:URLVariables = new URLVariables("gameNum=17&as=as1&t=demo&package=a&btnQuit=0");
if(variableString != null && variableString != ""){
var variables:URLVariables = new URLVariables(variableString);
variables.exampleSessionId = new Date().getTime();
variables.exampleUserLabel = "guest";
request.data = variables;
}
webPage = HTMLLoader.createRootWindow(true, null, true, null);
webPage.height = systemManager.stage.nativeWindow.height - 66;
webPage.width = systemManager.stage.nativeWindow.width;
webPage.load(request);
webPage.navigateInSystemBrowser = false;
flexBrowser.addChild(webPage);
}
]]>
</mx:Script>
<mx:HTML id="flexBrowser" width="1366" height="658" backgroundAlpha="0.45" creationComplete="registerEvents();" x="0" y="0">
</mx:HTML>
you're not using any of the capabilities of your html component. As is, it may as well be a canvas since all you're doing is addChild to flexBrowser, a DisplayObjectContainer. Though I wouldn't do it this way, you can pretty simply set the flexBrowser.htmlLoader.load(request); and get rid of all that webPage stuff.
Is your application using a transparent window? air won't display flash content in the HTMLLoader in that case, see http://bugs.adobe.com/jira/browse/SDK-15033
One workaround is to use http://code.google.com/p/adobe-air-util/source/browse/trunk/src/net/tw/util/air/HTMLOverlay.as.
I had to do some changes to get it to work well with our app. I sent an email to the project owner to contribute the changes, if you are still on it I can send you the patch. The most important change, is that the html overlay window does go behind other apps when switching i.e. alt-tab or opening another app.
Update: I committed the changes to the overlay above, check it out as it should work for you as well. I know it seems like an awful workaround, but there doesn't seem to be anything better until adobe fixes the issue. If you do see something better, make sure to post the update :)
This problem has been fixed in AIR 1.5.2:
Before AIR 1.5.2, SWF content embedded in and HTML container in a transparent window could not be displayed. With AIR 1.5.2, SWF content can be displayed with certain wmode settings.
I've reviewed all the documentation and Google results surrounding this and I think I have everything setup correctly. My problem is that the symbol is not appearing in my app. I have a MovieClip symbol that I've embedded to my Flex Component. I need to create a new Image control for each item from my dataProvider and assign this embedded symbol as the Image's source. I thought it was simple but apparently not. Here's a stub of the code:
[Embed(source="../assets/assetLib.swf", symbol="StarMC")]
private var StarClass:Class;
protected function rebuildChildren():void {
iterator.seek( CursorBookmark.FIRST );
while ( !iterator.afterLast ) {
child = new Image();
var asset:MovieClipAsset = new StarClass() as MovieClipAsset;
(child as Image).source = asset;
}
}
I know the child is being created because I can draw a shape and and that appears. Am I doing something wrong? Thank you!
You should be able to simply set child.source to StarClass:
child = new Image();
child.source = StarClass;
See the MovieClipAsset Language Reference for more details:
you rarely need to create MovieClipAsset instances yourself
because image-related properties and
styles can be set to an
image-producing class, and components
will create instances as necessary.
For example, to set the application
background to this animation, you can
simply write the following:
<mx:Application backgroundImage="{backgroundAnimationClass}"/>