Label dataChange event not getting fired - apache-flex

<mx:Label id="myLabel" dataChange="{trace('changed!!');}" />
I change the text in the above label:
myLabel.text = "new text";
But nothing is traced as it's supposed to.
Am I using a wrong event? I thought dataChange is fired when text in the label is changed.

The event you want is valueCommit. The dataChange event is specific to the data property, not text.
<mx:Label id="myLabel" text="1" valueCommit="trace('changed')" />
<mx:Button label="Click Me" click="myLabel.text += '1'" />

Related

Flex: Read values from Repeater

I am using a simple Repeater which has a single component(TextInput).
<mx:Repeater id="myrep" dataProvider="{myAC}" >
<local:TextInputRepeater id="tiRepeater" displaytext="{myrep.currentItem}" />
</mx:Repeater>
<mx:Button label="Get Data" click="getNewValues(event)" />
The repeater has following code:
[Bindable]
public var displaytext:String = "";
<mx:TextInput id="repeatText" text="{displaytext}" change="repeatText_changeHandler(event)"/>
Here is what I want : on click of button in getNewValues function, I want to read the values (user might possibly have changed in the textInputs).
Well, it was a silly issue which I overlooked.
Solution is, tiRepeater[index] will give you the udpated repeater object.

spark buttonbar ... change label on rollover

I've got a spark buttonbar w/ a dataprovider as follows:
'
<s:ArrayCollection id="arr">
<s:source>
<fx:Object label="Dave" addr="123 Main" />
<fx:Object label="Brenda" addr="456 Center" />
</s:source>
</s:ArrayCollection>
'
By default, the button's labels will be "Dave" and "Brenda", respectively. How can I dynamically change the label to the "addr" field when a user rolls over the button?
Add a mouseOver event handler to the ButtonBar. In the event handler do something like this:
buttonBar.labelField = 'addr';
In a mouseOut event handler do something like this:
buttonBar.labelField = 'label';

How to load dynamic events in Flex

I have a small flex application.
<mx:Script>
<![CDATA[
import flash.events.Event;
// Event handler function to print a message
// describing the selected Button control.
private function printMessage(event:Event):void {
message.text += event.target.label + " pressed" + "\n";
}
]]>
</mx:Script>
<mx:Panel title="Button Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:VBox>
<mx:Label width="100%" color="blue"
text="Select a Button control."/>
<!-- The button can contain an image, as in the "Button with Icon" button -->
<mx:Button id="iconButton" icon="#Embed('assets/mm-icon.png')" label="Button with Icon"
labelPlacement="right" color="#993300" click="printMessage(event);"/>
<!-- The size of the button and the label attributes can be customized -->
<mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}"
click="printMessage(event);"/>
<!-- By default, the look and feel of the customized button is
similar to the Default Button. -->
<mx:Button label="Default Button" click="printMessage(event);"/>
</mx:VBox>
<mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
color="#0000FF"/>
</mx:Panel>
What I want to achieve is, I want my user to pass the script as a parameter. so he has the flexibility to do anything with the buttons->like add event, hide the other buttons.
Something like this(below)
<param name="script" value="import flash.events.Event;\n private function printMessage(event:Event):void {\nmessage.text += event.target.label + " pressed" + "\n";\n}">
Thanks.
If I understood, what you want is simply create dynamic event and load it to some component, right? If so in did its very easy to implement.
Just create your own custom event (inherit from Event) or use the Event itself:
var event:Event = new Event("[Your event type here"],[bubbles?],[cancelable?]);
and then add listener to your wanted component to the same "event type".
If you need you can also dispatch this event from wanted component programmatically like this:
[you component].dispatchEvent(event);
but then you have to make sure this component extends EventDispatcher class.
Hope I helped.
Royee

Flex 4 Button state in a HGroup

I have a HGroup with some buttons inside which is my application's menu.
<s:HGroup id="nav">
<s:Button id="homeButton" label="Home" />
<s:Button id="showroomButton" label="Showroom" />
<s:Button label="Catalogue" />
<s:Button label="Offers" />
<s:Button label="My Account" />
<s:Button label="My Orders" />
</s:HGroup>
What I want is when I click for example the #homeButton to change it's state to "over", become disabled and reset all other buttons to the "up" state.
I've written this function
private function resetNavState():void {
for(var i:int = 0,ii:int = nav.numChildren-1;i<ii;i++) {
Button(nav.getChildAt(i)).mouseEnabled = true;
Button(nav.getChildAt(i)).skin.setCurrentState("up",true);
}
}
And then on the homeButton click handler for example i use
protected function homeButton_clickHandler(event:MouseEvent):void
{
resetNavState();
currentState = "home";
homeButton.skin.setCurrentState("over",true);
homeButton.mouseEnabled = false;
}
I resets the states of the #nav buttons but it doesn't change the state of the pressed button.
Any ideas?
Thanx in advance
You'll want to place your buttons in a in a <s:ButtonBar /> control rather than the HGroup.

flex regain lost focus

I have a custom component with textbox & a poup button
as
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
I am using this custom component as the itemEditor for the datagrid
I have a problem with focus. I need to set focus to the text after popup buttton itemclick
The scenario is that I am typing text in the source text. If I go to popup button and click any item, the focus moves to the popup button, and I am unable to type in the text as the focus is lost.
I need to set the focus back to the source code after pop-up-button item-selection so that I can continue typing.
At the moment I need to click gain in the text and then I am able to type.
source.setFocus()
You will need to add a handler for the change event of the pop up button that sets the focus to your text box.
This will be something like this:
this.focusManager.setFocus(source);
or in your example:
<mx:HBox>
<mx:Text id="source" height="100%" width="40%" data="my text" />
<mx:VBox backgroundAlpha="0" height="100%" borderThickness="0">
<mx:PopUpButton enabled="true" id="editButton" width="40" icon="#Embed('assets/images/Legends/editIcon.png')"
initialize="popUpButton_initialize()"
popUp="{actionMenuEdit}"
change="{this.focusManager.setFocus(source)}"
height="19" toolTip="Edit at segment"/>
</mx:VBox>
</mx:HBox>
may b this help u
if (flexApplication != "undefined") flexApplication.focus();

Resources