I'm trying to remove an eventlistener on (in this specific case) a HorizontalList. The list is initialized with the property
itemRollOver="playPreview(event)"
I'd like to remove this eventListener by switching state and stating something like:
<mx:SetEventHandler target="{horList}" name="itemRollOver" handlerFunction="null" />
This doesn't seem to work. The event is still handled and playPreview(event:ListEvent) is still called. How to properly do this? (I know I can do it in Actionscript, but I specifically want to do it by means of state switching)
Cheers Bart
AFAIK you can only remove listeners that were added with AS, not ones added with mxml. So you should remove the listener from the mxml, on creationComplete of your app use AS to add the event listener, then whatever you do to cause your state to switch can fire an AS function to remove it.
Of the top of my head the code is something like this:
HList.addEventListener(MOUSE_EVENT.RollOver,nameOfRollOverFunction);
HList.removeEventListener(MOUSE_EVENT.RollOver,nameOfRollOverFunction)
Related
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
By "refresh" I am completely disposing it and then introducing it again in the application (without closing the application itself - that is). Other than than I think the question is self-explanatory.
Example:
Say I have a component named myComponent. I add that component to the application using MXMl in the standard way <components:myComponent id="myID" />. Say that when a user clicks a button (the button may be in another state), the component with id myID should be garbage-collected and a new instance of it added to the application.
How do I go about doing that? If there are multiple solutions which one is the optimal performance-wise?
I am new to Flash and Flex so excuse me if any incorrect terminology were used.
Remove all the event listeners from the old component; whatever they are using the removeEventListener method:
myButton.removeEventListener(someEvent, someEventHandlerMethod);
Then all variables that refer to the component should be set to null. If created in an MXML file, like this:
<s:Button id="myButton" />
Then all you have to do is set that value to null:
myButton = null;
Once there are no references to the component, it can safely become eligible for garbage collection.
If you want to re-created, then just re-created it. You'll have to re-create it in ActionScript, but the code isn't hard. Conceptually something like this:
myButton = new myButton();
myButton.properties = propertyValues;
myButton.addEventListener(someEvent, someEventHandlerMethod);
parentContainer.addChildAt(myButton, whateverPositionYouWantToADdTheComponentAt);
I'm not sure I see the benefit of doing this. I suspect it'll be much more efficient to tweak the existing button instance in the way you need to as opposed to destroying it and trying to replace it with the exact same thing.
How can I remove all event listeners on all components at once, especially when it is not known what listeners are attached to each component?
You can override mx.core.FlexSprite, which UIComponent inherets from, and generate an array of listeners created. Doug Mc Cune put up source code here.
His blog says: removeAllEventListeners() – removes all event listeners of all types. This completely wipes out all event listeners for the component all at once.
Let us know if this does the job!
No!
You might be able to mock something up with hasEventListener and willTrigger. But, there doesn't appear to be an obvious way to remove the event listeners without actually knowing the method name.
What do you want to do this for?
There is an issue in Adobe JIRA for this task, please vote if you feel that it important for you
https://bugs.adobe.com/jira/browse/SDK-14127
Elad Elrom has a post on his implementation to store event listener references, and be able to remove them all at once:
http://elromdesign.com/blog/2010/07/16/easy-way-to-store-event-listeners-reference-prevent-memory-leaks/
Let's take the next example:
<mx:State name="sayHello">
<mx:SetProperty name="preText" target="{this}" value="Hello"><mx:SetProperty>
</mx:State>
Can I somehow know when preText property has been set to hello?
Already tried with:
state->activate
state->enterState
state->exitState
and
UIComponent->currentStateChange
In all the cases above,pretext property is null, how ever somehow, later on it gets the desired value (I tested with a timer)
Any help would be great!
Thanks!
It is tough to say. Most properties implemented by the Flex Framework dispatch a propertyChangedEvent. So, in this case you could listen to preTextChanged event on the component in question to let you know that the property changed.
If this is a property you implemented yourself, just make the properties set method dispatch the event, like this:
dispatchEvent(new Event('preTextChanged'));
Add the listener like this:
this.addEventListener('preTextChanged',onpreTextChanged);
You won't be able to listen to the property change event in MXML if you don't define event metadata for the event; and most components do not bother to define metadata for the propertyChanged event.
The act of changing a state can take time. Due to the asynchronous nature of Flex/Flash Player something like this:
currentState = newState
trace(preText);
The trace value will most likely not be set yet because the state change processing did not occur yet. You may be able to listen to the currentStateChange event, thoug. When that dispatches your properties should all be modified.
I have 2 components for example (editor.mxml using mx:windows), when I click an edit button, I want to get the current value from the other component's datafield? (datagrid.mxml using mx:window)
I do know how to access the main MXML's datagrid by parentDocument or Application.application method, but stumped block if I want to access other way as mentioned above. Keep the code as simple as possible.
You could either do dependency injection, that is, give component A a reference to component B so that they can communicate directly (example of tighter coupling,) or have both components communicate through a common mediator using events (example of more loose coupling.)
Both of those options would be implemented wherever it is that you're creating those components (A and B in this example) and adding them to the display list.
This might be more complicated than it deserves, and it smacks of Pattern-Fever, but you could use a mediator class that listens for the CLICK event from the button and knows enough about the other component to query its property. It could even transmit that data using a custom event, which the button listens for.
While this involves three classes instead of two, it often turns out to be easier to have two components that focus on looking good and one that worries about coordination.
Cheers
Try this:
FlexGlobals.topLevelApplication
This points Your root. From the root You can grab every element You want.
You can also add an id to the custom component like this,
<custom:Editor id="myCustomComponent">
</Editor:AddressForm>
and
access your datagrid's value like this,
var data:ArrayCollection = myCustomComponent.DatagridID.dataProvider;