I have a menu, each time you click on an item it opens up a screen (a new flex component), when I click back on to the screen I want to dispose of that particular instance, is there an easy way to do this?
UIComponent.removeChild(child) is one way. You can also do this with View States.
The best way to do it is to store all your dynamic instances in an Array, like dynamicHandles:
var dynamicHandles:Array = new Array();
dynamicHandles["test"] = new MCTest();
And then add as children:
addChild(dynamicHandles["test"]);
Finally, whenever you need to remove them, first remove them as child and then clean up the array like so:
removeChild(dynamicHandles["test"]);
dynamicHandles = new Array();
Related
I am building an RIA application using Flex 4.6 that contains a main borderContainer (page) that can contain some other borderContainers (graphic or text elements).
I added an event listener on the page to listen to click events:
page.addEventListener(MouseEvent.CLICK, clickHandler, true);
clickHandler looks like this:
private function clickHandler(event:MouseEvent):void
{
// Remove event listeners
page.removeEventListener(MouseEvent.CLICK, clickHandler, true);
// Get click position
objX = event.localX;
objY = event.localY;
}
My problem is that although the event's currentTarget is always the page (normal), the target can either be the page or one of its children, and then localX doesn't give me the position on the page but on the child.
Is there a way to make sure the page is always the target of the event? Something like stopping the capturing phase on the page so it doesn't go deeper?
Thanks in advance for your help
Darrel
I think you may be asking the wrong question. As I understand it, you want the x/y position relative to 'page'. You can use the DisplayObject#globalToLocal() function to find this.
Just take the the global coordinates and convert them to local coordinates relative to 'page':
var coordinates:Point = new Point(event.stageX, event.stageY);
coordinates = page.globalToLocal(coordinates);
objX = coordinates.x;
objY = coordinates.y;
I am having an issue with flex states in my application. What I am looking to do is on creation complete of the application, obtain a user role guest/user/superUser (based on username and password) from a server, then set the state client side based on that information. My .mxml classes need to include certain graphic elements based on that state. I am running into the issues of including elements based on the states defined at the Application level of the project. I am trying to avoid having to define the states in each .mxml file that needs it.
I feel that this is possibly something easy that I am overlooking or maybe there is a better way to do this. Any examples input is very helpful.
I know that this returns the current state
Application.application.currentState;
but I am looking to almost "populate" the
<mx:states>
<mx:State name="state1"/>
</mx:states>
of every .mxml file from the states defined in the Application
If you are looking for dynamic states - here is your solution (The first two states – default and big - are added at compile time. The third state Bang-a-Gong is added at runtime):
private function init():void {
// Create a new state and give it a name.
var stateBang:State = new State();
stateBang.name = 'Bang-a-Gong';
// Set the overrides with an array of AddChild, AddItems,
// RemoveChild, SetEventHandler, SetProperty, and SetStyle
stateBang.overrides =
[ new SetProperty( btn, "label", "Bang-a-Gong" ),
new SetProperty( btn, "height", "150" ),
new SetProperty( btn, "width", "300" ),
new SetStyle( btn, "fontSize", "22" ),
new SetStyle( btn, "fontWeight", "bold" ),
new SetStyle( btn, "color", "#FF0000" ) ];
// Add our new state to the available states of this component.
this.states.push( stateBang );
// Just for kicks lets add a transition for this state.
var transition:Transition = new Transition();
transition.toState = 'Bang-a-Gong';
// Create a new transition effect.
var resize:Resize = new Resize( btn );
// Create an composite effect, either: Sequence or Parallel.
var sequence:Sequence = new Sequence();
// Add our resize effect.
sequence.addChild( resize );
// now add our composition effect to the transition we created.
transition.effect = sequence;
// Push our new transition into the transitions array for this component.
this.transitions.push( transition );
}
In another case, if I understood in right way, you should create some Object in main application, and access it from all child components via FlexGlobals.topLevelApplication.
If you want to change child states, you should have some instance with already defined states as minimum in one place, and later copy them, to child components, but what sense if they are all custom logic?
So, let me know, if it helps.
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
I created a list control at runtime as following:
var myList:List = new List();
ListArea.addChild(myList);
myList.percentHeight = myList.percentWidth = 100;
myList.itemRenderer = new ClassFactory (components.renderers.myRenderer);
myList.dataProvider = myDataArray;
myList.addEventListener(EVENT.CHANGE, historyBarClickHandler);
//Where myDataArray is an ArrayCollection consisting of my Custom ValueObjects.
When i execute the code it displays my list with custom item renderer, which is fine.
But when bring my mouse over it, it doesn't give any colour highlight which means it is not selecting.
Secondly, when i click on any of the list item, it doesn't dispatch any change event.
I tried a lot but couldn't understand it.
Please Guide
Thanks
Your itemRenderer may be causing another issue, but you're not listening for the correct event. It should be:
myList.addEventListener(ListEvent.CHANGE, historyBarClickHandler);
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}"/>