I want to be able to show a Spark TitleWindow container as a modal without having to construct it by code via AS3. I tried creating the TitleWindow before-hand manually by dragging and resizing it around and adding objects, etc then hiding it. Then on a button, I set the called function to the ones below:
public function doPopup():void {
testWindow.visible = true;
PopUpManager.addPopUp(testWindow, this, true);
}
Unfortunately, this only shows testWindow but not as a modal. I want it to be like this so that I can freely resize and design the layout of my TitleWindow and only have to call some function to show it as a modal one.
I'm pretty sure the reason you are seeing this behavior is because your TitleWindow (that you've declared within the mxml of the parent container) is already added to the stage even though it is set as not visible. A workaround you could try is to call this.removeElement(testWindow) in a creation complete handler for the parent container. That will get it off the stage so the PopUpManager can add it later properly.
Having said that, I would recommend putting your TitleWindow into a separate mxml file and instantiate it using the PopUpManager. It's cleaner that way and you can still use the design mode to lay it out as you see fit.
Hope that helps.
Try the Cairngorm 3 Popup library :
http://opensource.adobe.com/wiki/display/cairngorm/HowToUseCairngormPopup
Related
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 Flex application, running with Flash Player, not AIR, that contains a Tree that I would like to put a custom context menu on.
Tried just doing <mx:Tree ... contextMenu="{MyClassWithStatic.menu}">, but that didn't do anything.
Went searching, and found this quote from some Adobe docs somewhere
In Flex or Flash Builder, only top-level components in the application can have context menus. For example, if a DataGrid control is a child of a TabNavigator or VBox container, the DataGrid control cannot have its own context menu.
so went upwards, trying each parent element until I reached my <Application>-element, which is consistent with what they wrote.
Tried making a Flex component, based on Group (the default) which contained my tree, and the context menu on the top-level element there, hoping it would work, but to no avail.
Is there any other way to manage this that I haven't found yet?
The code I use to create the menu:
var menuItems:Array = [];
var rename:ContextMenuItem = new ContextMenuItem("Rename");
rename.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, renameSelectedHandler);
menuItems.push(rename);
menu.customItems = menuItems;
menu.hideBuiltInItems();
You're right, the contextmenu only works on top level components. It's a limitation of Flex which is annoying and shouldn't be there in the first place. There's not much you can do since there is no way to capture the event other than using some Javascript trickery, but even then, it doesn't tell you where you were clicking.
If I were you, I would just forget the concept and go away from using right click altogether if possible.
I can't be sure, as all the code isn't' there. But you seem to have ignored your own research. Don't use your new component, or anything which "contains" your tree. Then just stick the Tree in your application.
Also I've a memory of TreeItemRenderer not being the same as in other UIcomponents. Maybe, test your "menu" code with a Datagrid first and make sure it works. Good luck
I did not try it myself, but after reading the comments on http://michael.omnicypher.com/2007/02/flex-trees-with-context-menu_14.html it looks like you could add a context menu to the tree's item renderer.
The article and comments at http://blog.arc90.com/2008/04/21/adding-a-contextmenu-to-a-flex-tree/ are worth a look too.
I am checking this guy's code...
http://www.codingcolor.com/as3/as3-youtube-chromless-api/
I have download the source code...but I couldn't figure out how he add the play, pause and stop button in the stage. I know in his VideoPlayerControl.as, he has
playbackControl = new PlayPauseButton();
playbackControl.addEventListener(Event.CHANGE,setPlaybackState);
addChild(playbackControl);
in his PlayPauseButton.as. there is not code for the location of the button(x,y)..
I am not sure how he place the control buttons....
Also...Are there anyways to give the button location with object oriented way instead of specify it with static number???
I appreciate any help...
Without reviewing his code...
it sounds like you need to read up on the Flex Component Lifecycle.
In normal cases, the PlayPauseButton will be created and added in createChildren().
the updateDisplayList() method will position and size the elements. Additionally, many components implement a measure() method that will determine the ideal size for it. And many containers have code to automatically lay out the children. If the PlayPauseButton has a measure method and it is added to a container (such as an HBox of VBox) he won't need code to position or size the button as that wrk is already done in the code that he inherits from the Flex framework.
I'm moving to a pure as3 environment into flex and I have a question about preloaders.
For one of my apps in particular when the swf loaded I would add a screen with an animated preloader. Then at a particular point in my code when I know all of my xml has been parsed, UI built and all initiliztion done I dispatch a "done" event which removes the preloader.
How can I achieve this is flex? I've only ever really seen flex preloaders that are percentage based which I believe represent the actual loading of the swf itself?
Please read the flex cookbook for preloaders, they have some demo applications, that could help u out
actually there is a preloader property in the application tag,
that could be wht u might help u out
tc
Ankur Sharma
Flex has a ProgressBar control that you can use for similar purposes. If you want to continue to use your own custom animated progress bar, you can add that Sprite to the rawChildren of a Container (preferably Canvas) and show it as a modal pop-up using the PopUpManager - remove the pop-up from the done event's handler.
The overriden addChild method of the Container class will throw an error if you pass a child that doesn't extend UIComponent - that's why you should use rawChildren.addChild.
Yep default flex preloader represents the loading of the swf itself.
If I were you, I would use the Task library from the Cairngorm 3 Libs, works perfectly with a preloader :
http://opensource.adobe.com/svn/opensource/cairngorm3/trunk/libraries/TaskTest/src/samples/TaskFlowPreloader.as
What is the best way to render to a UIComponent which hasn't been added to the stage? (I'm using UIComponents as renderers for objects, and want to render new copies for image export, filtering, etc.)
Two strategies I've seen/used so far include realizing the component to ensure it calls all the lifecycle methods:
Add the component to Application.application, render with BitmapData.draw(), remove component. This is similar to what I've seen done for printing unrealized components as well.
Add the component to a pop up window, render with BitmapData.draw(), dismiss popup after rendering complete.
I believe both of these just rely on the UI not refreshing while the current thread/event is executing, though (1) could also rely on the component being realized out of view.
Is there a better way?
What I've used in the past with much success is the following:
Create a new instance of your component
Add an event listener for FlexEvent.CREATION_COMPLETE
Set visible=false on the component
Add the component as a child of the main Application
When the component is created, the event listener function will be invoked. The rest of the logic should be put in / invoked from your event listener function
Remove the event listener you added in step #2.
Use ImageSnapshot.captureImage() or captureBitmapData() to capture the visual representation of the component.
Remove the component from the main Application
Process the image data as you need to.
I've used this to snapshot various Flex charting components for use in PDF's generated on the server side. After getting the BitmapData I use the PNGEncoder or JPEGEncoder classes to compress the data, then encode it in Base64 before uploading to the server.
I'm pretty sure you can use the draw() method in BitmapData without having your component on the DisplayList.
For example is use it when I need to modify images I load with the Loader Class. In the init handler I create a BitmapData instance and draw the Bitmap from the loadInfo.content property, then copyPixels() or whatever I need to modify the loaded image
So much of a UIComponent's layout can be tied to it's context. This is especially true for a lot of its derivatives (e.g. HBox) since the fluidity of the layout is tied to it's parent's size and the number of siblings sharing its parents space.
Additionally Flex can be a real pain to get to visually update. Often critical render functions aren't done synchronously ... there are callLater, callLater2 and other hacky approaches that make dealing with the auto-magical layout properties of UIComponents a major headache. Not even calling validateNow or updateDisplayList can guarantee that the layout will be correct on the current frame (instead of a few frames in the future).
I suggest the best thing you can do is not use a UIComponent and try and use a Sprite or other.
Your approach to attach it but make it invisible (alpha = 0, mouseEnabled = false, mouseChildren = false) is decent. You should listen for the FlexEvent.CREATION_COMPLETE callback before you are certain it is properly laid out. Then you can bitmapData.draw it and then remove it from the stage. If you must use UIComponents then I know of no better way.
You can call the lifecycle function manually before using the BitmapData.draw(). Do the following.
createChildren().
commitProperties().
updateDisplayList().
bmd.draw().
The first 2 steps are not 100% necessary, you can put all codes into updateDisplayList(). Because you invoke the function manually, you don't have to worry this is invoked by Flex framework many times.