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';
Related
I have an AdvancedDataGrid with two columns that have item renderers. Those item renderers are rendering link buttons in their respective columns. I want to be able to click on those link buttons without triggering the itemClick event of the AdvancedDataGrid. Any suggestions for how I could accomplish this?
I've never worked with an AdvancedDataGrid but I assume a few principles hold. The first being the behavior of event propagation. The event gets processed by the button before it gets processed by the grid. This means that we can catch and stop the event from ever reaching the DataGrid. Below is a code sample demonstrating how a DataGrid renderer can have a Button without triggering other behavior.
CustomerRenderer...
<fx:Script>
<![CDATA[
protected function watchButtonClickHandler(event:MouseEvent):void
{
//the line below stops the event from
//propagating through the rest of the display
//list
event.stopImmediatePropagation();
//handle button click logic here
}
]]>
</fx:Script>
<s:Group width="100%" id="buttonGroup">
<s:layout>
<s:HorizontalLayout horizontalAlign="center" verticalAlign="middle"
paddingBottom="1" paddingLeft="1"
paddingRight="1" paddingTop="1" />
</s:layout>
<s:Button id="watchButton" width="98" label="{buttonLabel}"
click="watchButtonClickHandler(event)"/>
</s:Group>
....
I'm doing some programmatic validation of some field values in a form, is there any way in Actionscript to highlight the field in red the way the validators do?
you just need to set errorString property on programmatic validation error
<s:TextInput errorString="error string value" />
<mx:TextInput errorString="error string value" />
Using:
var textField:TextField = new TextField();
addChild(textField);
To highlight the background in AS3:
textField.background = true;
textField.backgroundColor = 0xFFF000;
To highlight the border in AS3:
textField.border = true;
textField.borderColor = 0xFFF000;
To turn it off, just set the appropriate boolean to false.
Try using glow filter:
<fx:Declarations>
<s:GlowFilter id="gf" color="#ff0000" alpha="1" blurX="5" blurY="5" />
</fx:Declarations>
<s:TextInput id="ti" width="80%"/>
<s:ToggleButton id="btn" label="glow on/off" click="ti.filters = btn.selected?new Array(gf) : null;"/>
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
<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'" />
I am using flex when i was select combobox item i want to create new form
for eg. when i select 1 it will appear one form when i select 2 it will appear
two.so and so....
Put your Forms inside of a ViewStack container. You can then bind the ViewStack's selectedIndex to the selectedIndex of your ComboBox:
<mx:ComboBox id="comboBox" />
<mx:ViewStack selectedIndex="{comboBox.selectedIndex}">
<mx:Form id="formA">
...
</mx:Form>
<mx:Form id="formB">
...
</mx:Form>
</mx:ViewStack>