I'm wondering if there's a way to configure a FLEX button so it behaves like a push button...
<mx:Button buttonDown="trace('ankur')" autoRepeat="true"/>
to make a flex button to receive contiuous event happening, use the autoRepeat property with buttonDown event, note the click property will no work,
put this tag in ur application, run it,
i hope , this is wht u were luking for
thanx
Ankur Sharma
If you just need it to toggle (which is how a pushbutton behaves), set its toggle property to true.
<mx:Button label="Button Test" toggle="true"/>
If this is not what you mean, be more specific in your question.
EDIT: Since you refined your question, I would suggest you make a handler for the mouseDown event of the button, which starts a method running, and make a mouseUp handler that stops the method from running. Or better yet, have it set or unset a variable, which is tested in the updateDisplayList() method. Like so:
private var _runButtonStuff:Boolean = false;
override protected function updateDisplayList(width:Number, height:number) : void {
super.updateDisplayList(width,height);
if (_runButtonStuff) {
doStuff();
}
}
private function doStuff() : void {
// do some stuff
}
private function buttonIsDown() : void {
_runButtonStuff = true;
}
private function buttonIsUp() : void {
_runButtonStuff = false;
}
and the button looks like this:
<mx:Button text="Run Something" mouseDown="buttonIsDown()" mouseUp="buttonIsUp()"/>
<mx:Button label="Button Test" toggle="true" click="yourMethodName()"/>
public function yourMethodName():void {
var evt:someEventName = new someEventName(someEventName.TYPE);
dispatchEvent(evt);
}
Now when you listen to this event again, call the same method name again through addEventListner. It will keep on firing the same event for ever.
I have a question, on what scenario you want to apply this. You can either go by EventDispatcher or some ActionScript code which will keep on firing the same method name until the equation is solved.
Depending upon your requirement you can go. I would suggest event driven, as it would be easier to manage.
Related
I'm trying to use a flexlib schedule viewer in my application.
I want to have it so that when I click on a scheduled event, it calls a function in my main app (that will allow me to edit the event). But there doesn't seem to be any specific function for anything like this built into the class ie no event dispatched when I click on an event.
I can use the 'click' function to detect that the item has been clicked on.. and have tried something like this:
private function exerciseClickHandler(event:MouseEvent):void{
if (exerciseSeries.selectedItem != null){
//code
}
}
<code:ScheduleViewer id="exerciseSeries" click="exerciseClickHandler(event)" />
This method isn't very reliable because if it only works the first time.. once an item is selected, it stays selected so all following clicks on the item fulfills the condition.
Is there any way to determine whether an event was being clicked on?
Or do I have to extend the component and add some sort of clickEvent when an event is clicked on.
Since exerciseClickHandler is firing up when you click on the component, wouldn't this work?
Instead of
private function exerciseClickHandler(event:MouseEvent):void{
if (exerciseSeries.selectedItem != null){
//code
}
}
write
private function exerciseClickHandler(event:MouseEvent):void{
switch (exerciseSeries.selectedItem)
{
//code
case xy:
break;
}
}
or
private function exerciseClickHandler(event:MouseEvent):void{
//do something with exerciseSeries.selectedItem
}
What I mean is that you wrote that everything stops after the first element is clicked. And according to the code you provided it has to stop, beacuse after the first click exerciseSeries.selectedItem won't be null anymore, since it's selected. So remove the conditional you wrote and use the instance.
I'd suggest you set up a ChangeWatcher to keep an eye on the selectedItem (or selectedItems if you are going to allow multiple selection at some point). Example:
protected exerciseSeriesCreationCompleteHandler(event:FlexEvent):void{
ChangeWatcher.watch(this,['exerciseSeries','selectedItem'], handleChange_SelectedItem);
}
protected function handleChange_SelectedItem(event:PropertyChangeEvent):void{
// Either
dispatchedEvent(//some custom event);
// Or
someDirectMethodCall();
}
An alternative would be to search for an instance of the the event class in the view hierarchy under the mouse coordinates whenever a user clicks.
//Attach this click handler to the component
private function handleClick(event : MouseEvent) : void {
var obj : *EventClass*= null;
var applicationStage : Stage = FlexGlobals.topLevelApplication.stage as Stage;
var mousePoint : Point = new Point(applicationStage.mouseX, applicationStage.mouseY);
var objects : Array = applicationStage.getObjectsUnderPoint(mousePoint);
for (var i : int = objects.length - 1; i >= 0; i--) {
if (objects[i] is *EventClass*) {
obj = objects[i] as *EventClass*;
break;
}
}
if(obj is *EventClass*){
//Dispatch some custom event with obj being the item that was clicked on.
}
}
Where EventClass is the class of the objects that represent events
I have had similar problems and sometimes you can get by with wrapping the object with a Box and putting the click event on the Box. If you have not already tried that, it's a cheap, easy fix (if it works for you).
<mx:Box click="exerciseClickHandler(event)">
<code:ScheduleViewer id="exerciseSeries" />
</mx:Box>
Am working on a flex project
I am looking to provide some UI functionality using the mouse- I have two distinct UI events to be achieved via mouse
a) change value
b) delete object
I don't seem to have sufficient mouseclick events for both. I am avoiding using the right click as it has some default options(whose signing off will affect the whole project- not just this). I have mouse click used for change value- how do I use the doubleclick as the single-click events seems to get invoked prior?
Any thoughts?
private var doubleClickOccurred:Boolean = false;
private var timer:Timer = new Timer(100, 1);
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
myLabel.addEventListener(MouseEvent.CLICK, checkSingleOrDoubleClick);
myLabel.addEventListener(MouseEvent.DOUBLE_CLICK, checkSingleOrDoubleClick);
timer.addEventListener(TimerEvent.TIMER_COMPLETE, handleClick);
}
private function checkSingleOrDoubleClick(event:MouseEvent):void
{
if(event.target == myLabel && event.type == MouseEvent.DOUBLE_CLICK)
{
// set the flag and let the timer complete event
// take care of the click handling
doubleClickOccurred = true;
trace(" double clicked");
}
else if( event.type == MouseEvent.CLICK)
{
// start timer to wait till the double click event
// gets called
timer.start();
trace("Starting timer");
}
}
private function handleClick(event:Event):void
{
if(doubleClickOccurred)
{
// handle double click event
trace("Yes");
}
else
{
// handle single click
trace("No");
}
// reset flag for capturing future events
doubleClickOccurred = false;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label id="myLabel" text="Click Me" doubleClickEnabled="true" />
Output:
1) If a there is a single mouse click on the Label, the Single click login i.e trace("No") is invoked
2) In case of double click on the Label, the trace("yes") is invoked.
I hope this piece of code answers your question about handling single and double click on Flex components.
Can't say too much without knowing what you're editing, what the values are, etc.
A common idiom is to show an "X" icon, say, on the edge of a selected item, with clicks only on that icon triggering delete.
I would like the native Flex checkBox to change state only, when the box is clicked. If user clicks the label the state shouldn't change.
The click event cannot be muted as it is utilized in parenting components.
Any ideas how to obtain such functionality? How to detect, that user has clicked the label?
Thanks,
Rafal
Marty Pitt was very close to the right answer. I've added an event handler to his code, that stops the propagation - and now it works perfectly (as expected)!
The code below is a class that extends mx:CheckBox:
override protected function createChildren():void {
super.createChildren();
this.mouseChildren = true;
textField.mouseEnabled = false;
textField.addEventListener(MouseEvent.CLICK, textFieldClickHandler);
}
protected function textFieldClickHandler(me:MouseEvent):void{
me.stopImmediatePropagation();
}
Thank you.
Workaround - checkbox without label and separate label nearby.
If it's a Halo checkbox, I would create a subclass, and override createChildren(), with something like:
override protected function createChildren():void {
super.createChildren();
// in Button, this is false by default, however we want to restrict
// clicking to the button itself, not the label, so allow the children
// to recieve mouse events, to prevent the button from dispatching them.
this.mouseChildren = true;
textField.mouseEnabled = false;
}
That seems like a pretty kludgy hack, but it may work (I haven't tested it).
If it's a Spark checkbox, then you can just create a seperate skin. Much cleaner!
I am using HSlider to implement a one-thumb slider control. The thumb position is updated by a timer. However, the user can also update the thumb position by either clicking on a position in the slider track, or by dragging the thumb.
Judging by the Flex documentation, I figured all I needed to do was write a handler for the change event. The docs say:
change Event Event Object Type:
mx.events.SliderEvent property
SliderEvent.type =
mx.events.SliderEvent.CHANGE
Dispatched when the slider changes
value due to mouse or keyboard
interaction.
I wrote my code as follows:
<mx:HSlider thumbPress="handleThumbPress(event)" change="handleUserChange(event)"
showTrackHighlight="true" buttonMode="true" useHandCursor="true" minimum="0"
maximum="{_max}" snapInterval="1" enabled="true" width="100%" id="mySlider"
liveDragging="false" showDataTip="true" verticalCenter="0" horizontalCenter="0"
trackSkin="{SliderTrack}" trackHighlightSkin="{TrackHighlightConfigurable}"
sliderThumbClass="{MySliderThumb}" thumbSkin="#Embed('../imgempty.png')"
dataTipFormatFunction="dataToolTipFormat"/>
What I observe is that my change handler, which is only supposed to be invoked in response to user interaction keeps getting invoked whenever my timer sets the value of the slider. The timer code sets the values quite simply as:
private function updateValue( newValue : Number ) : void
{
mySlider.value = newValue;
}
Am I making an obvious mistake? Is there a better way to distinguish between user versus programmatic change of Flex Slider?
Thanks.
-Raj
Change event is not fired if you change value programmatically. When you change value of thumb beyond minimum or maximum value of slider the event is fired. Event also gets fired if you change Minimum or maximum of slider. Is this happening in your code ?
You could just put a boolean wrapping when you set the value programmatically:
private var inputByUser:Boolean = false;
private function updateValue( newValue : Number ) : void
{
if (!inputByUser)
mySlider.value = newValue;
}
I don't know your exact code so I couldn't solve it explicitly, but something along those lines is what I'd do. You'd set that inputByUser in your change handler, like so:
private function changeHandler() : void
{
inputByUser = true;
updateValue(mySlider.value + 10); // however you're doing it
inputByUser = false;
}
Hope that helps,
Lance
How can I raise an event from a SWF file loaded into a Flex application (using SWFLoader)?
I want to be able to detect
a) when a button is pressed
b) when the animation ends
You'll need to do 2 things:
Dispatch an event from the loaded swf. Make sure the event bubbles if you sent it from nested views. Bubbling can be set through the bubbles property of the event.
Listen to the event from your main application. I think you should be able to do that on the content property of the SWFLoader instance.
mySWFLoader.content.addEventListener("myEvent", myEventHandler);
I took a lazier approach for raising the event inside flash
Flex:
<mx:SWFLoader source="homeanimations/tired.swf" id="swfTired" complete="swfTiredLoaded(event)" />
private function swfTiredLoaded(event:Event): void {
mySWFLoader.content.addEventListener("continueClicked", continueClickedHandler);
}
Flash:
dispatchEvent(new Event("continueClicked", true, true));
I believe its because you would be creating two seperate custom event class one in Flash and the other in Flex.
Dispatching one EV_NOTIFY.ANIMATION_ENDED from Flash may not be understood by Flex,since it has its own version of EV_NOTIFY.ANIMATION_ENDED.
As an adjunct to the answer by Christophe Herreman, and in case you were wondering, here is a way of making your own events...
package yourpackage.events
{
import flash.events.Event;
[Event(name="EV_Notify", type="yourpackage.events.EV_Notify")]
public class EV_Notify extends Event
{
public function EV_Notify(bubbles:Boolean=true, cancelable:Boolean=false)
{
super("EV_Notify", bubbles, cancelable);
}
}
}
I have taken the liberty of setting the default value of bubbles to true and passing the custom event type to the super constructor by default, so you can then just say...
dispatchEvent(new EV_Notify());
In your particular case I doubt there are times when you would not want your event to bubble.
The prefix EV_ on the name is my own convention for events so I can easily find them in the code completion popups, you'll obviously pick your own name.
For the two cases you cite you can either have two events and listen for both of them, or add a property to the event which says what just happened, which is the approach which is taken by controls like Alert...
package yourpackage.events
{
import flash.events.Event;
[Event(name="EV_Notify", type="yourpackage.events.EV_Notify")]
public class EV_Notify extends Event
{
public static var BUTTON_PRESSED:int = 1;
public static var ANIMATION_ENDED:int = 2;
public var whatHappened:int;
public function EV_Notify(whatHappened:int, bubbles:Boolean=true, cancelable:Boolean=false)
{
this.whatHappened = whatHappened;
super("EV_Notify", bubbles, cancelable);
}
}
}
then you call it as follows...
dispatchEvent(new EV_Notify(EV_NOTIFY.ANIMATION_ENDED));
you can then inspect the whatHappened field in your event handler.
private function handleNotify(ev:EV_Notify):void
{
if (ev.whatHappened == EV_Notify.ANIMATION_ENDED)
{
// do something
}
else if (ev.whatHappened == EV_Notify.BUTTON_PRESSED)
{
// do something else
}
etc...
}
HTH
I could not make this last approach work (with Flash CS4 and Flex 3). I put the dispatchEvent call in one of the last frames of my Flash animation, but could not pick it up in Flex.
I resorted to a counter variable and incrementing until I reached the known last frame number using the ENTER_FRAME event - which I can pick up using almost the same code.
If I can pick this up, then why can't I pick up a custom event?