I have a button in action script with toggle="true". Now when I click the button its color changes and it looks as if it has been disabled (but its actually not). I need to know which property of this button has changed? For example if I need to know somewhere in my code the "toggled state" (if there is any such thing) of this button, which property of this button should I check?
Thanks.
Button.selected is what your looking for, I made an example to demonstrate this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init(event)">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
private function init(e:FlexEvent):void
{
onButtonClick();
}// end function
protected function onButtonClick(e:MouseEvent = null):void
{
if (button.selected) button.label = "button selected"
else button.label = "button not selected";
}// end function
]]>
</mx:Script>
<mx:Button id="button" toggle="true" click="onButtonClick()"></mx:Button>
</mx:Application>
Related
How can we reference to an element which is added dynamically on runtime?
Example code:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" applicationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function init(event:FlexEvent):void
{
// TODO Auto-generated method stub
trace(button1.label);
var newbtn:Button = new Button();
newbtn.label = "New Button";
newbtn.id = "button3";
newbtn.name = "button3";
mygroup.addElement(newbtn);
trace(this["button3"].label);
}
]]>
</fx:Script>
<s:HGroup id="mygroup">
<s:Button id="button1" label="Button 1" />
<s:Button id="button2" label="Button 2" />
</s:HGroup>
</s:WindowedApplication>
When I try to run above code, it dispatch error
Error #1069: Property button3 not found on project1 and there is no default value.
So, how can I call to the newly added button?
Store your instance in a variable and reference it whenever you feel like it. Use an array for a list of variables.
you can try using
var obj = this.getChildByName("button3");
after that you can use obj to trace the label
I was wondering if there is any way you hide a particular button in a ButtonBar. According to this answer (and the link provided in the second answer) Disable individual buttons in a buttonbar I need to use the getChildAt method of the ButtonBar, but when I do that I get the custom skin object and not the Button object. I was wondering how I could get access to the Button object.
Thanks!
Under the assumption that all buttons in your button bar will be rendered at the same time and you won't need scrollbars...
With a Spark ButtonBar, you can access the skin part directly to get access to a button. Conceptually something like this:
var button : Button = mySparkButtonBarInstance.dataGroup.getElementAt(SomeIndex);
button.visible = false; // or true
button.includeInLayout = false; // or true
This won't work if your ButtonBar can make use of Virtual Layouts and requires scrolling.
Edit: Here is working code demonstrating this technique:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.core.IVisualElement;
protected function button1_clickHandler(event:MouseEvent):void
{
trace(buttonBar.dataGroup.getElementAt(0));
var button :IVisualElement = buttonBar.dataGroup.getElementAt(0);
button.visible = false; // or true
button.includeInLayout = false; // or true }
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:ButtonBar id="buttonBar">
<mx:ArrayCollection>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
<s:Button label="Remove" click="button1_clickHandler(event)" />
</s:WindowedApplication>
I just now tracked down a bug in my code to the fact that the creationComplete event is not being raised by class Player.
Grid.mxml:
m_arrSpaces[4][4].entities.addItem(new Player());
Player.mxml:
<?xml version="1.0" encoding="utf-8"?>
<Entity xmlns="entities.*" xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function onCreationComplete():void {
Alert.show("cration");
m_imgActiveImage = imgUp;
}
]]>
</mx:Script>
I know that the line in Grid.mxml is being run and that the Player object is being added to m_arrSpaces[4][4].entities. I also know that Player.onCreationComplete() is never being called. Wth?
EDIT: Wait, it's doing the same thing even when I correct the typo and include the parantheses in the MXML tag, as in:
creationComplete="onCreationComplete()"
EDIT: Oh, yeah, here's the code for Entity:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Image;
import spaces.Space;
protected var m_imgActiveImage:Image;
public function get activeImage():Image {
return m_imgActiveImage;
}
private function onCreationComplete():void {
width = Space.SPAN - 4;
height = width;
}
]]>
</mx:Script>
</mx:Canvas>
you have this:
creationComplete="onCreationComplete"
and it should be:
creationComplete="onCreationComplete()"
did a quick test on new application with and alert and never reached the onComplete() method.
Alright, looks like another problem at hand was that
m_arrSpaces[4][4].addChild(new Player());
was needing to be called to get everything to work, not
m_arrSpaces[4][4].entities.addItem(new Player());
I'm having a weird behavior. I have an HTML link inside a TextFlow. When I set its linkHoverFormat, it starts sending rollOver/rollOut events up the chain. These events say the don't bubble but somehow they do. And I can't seem to stop them from doing so.
Here's an example:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>
<s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
<s:TextFlow id="textFlow1"
linkActiveFormat="{linkHover}"
linkHoverFormat="{linkHover}"
linkNormalFormat="{linkNormal}">
<s:p> <s:a href="http://projects.nunogodinho.com">hover</s:a> </s:p>
</s:TextFlow>
</fx:Declarations>
<fx:Script>
<![CDATA[
// This pair of handlers is triggered by the panel
protected function rollOverHandler(e:MouseEvent):void {
panel.title = "over";
}
protected function rollOutHandler(e:MouseEvent):void {
panel.title = "out";
}
]]>
</fx:Script>
<s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
<s:RichEditableText id="ret1"
top="10"
editable="false"
textFlow="{textFlow1}" />
</s:Panel>
</s:WindowedApplication>
If you run this app and move the mouse over the link several times without moving out of the panel you'll see that it still changes the text.
So I decided to try to stop this strange event from bubbling:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<s:TextLayoutFormat id="linkNormal" textDecoration="none" color="0x556677"/>
<s:TextLayoutFormat id="linkHover" textDecoration="underline" color="0x0000FF"/>
<s:TextFlow id="textFlow2"
linkActiveFormat="{linkHover}"
linkHoverFormat="{linkHover}"
linkNormalFormat="{linkNormal}">
<s:p> <s:a rollOver="linkelement2_rollOverHandler(event)" rollOut="linkelement2_rollOutHandler(event)" href="http://projects.nunogodinho.com">hover</s:a> </s:p>
</s:TextFlow>
</fx:Declarations>
<fx:Script>
<![CDATA[
import flashx.textLayout.events.FlowElementMouseEvent;
// This pair of handlers is triggered by the panel
protected function rollOverHandler(e:MouseEvent):void {
panel.title = "over";
}
protected function rollOutHandler(e:MouseEvent):void {
panel.title = "out";
}
// This pair of handlers is triggered by the <A> element inside textFlow2
// and I hoped it would stop the event from bubbling up to the panel
protected function linkelement2_rollOverHandler(e:FlowElementMouseEvent):void {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation()
}
protected function linkelement2_rollOutHandler(e:FlowElementMouseEvent):void {
e.preventDefault();
e.stopImmediatePropagation();
e.stopPropagation()
}
// I also tried to intercept the event in the RichEditableText but got the same weird
// behavior: the event triggers the panel's rollOver/rollOut intermittently
]]>
</fx:Script>
<s:Panel left="10" top="10" id="panel" mouseOver="rollOverHandler(event)" mouseOut="rollOutHandler(event)">
<s:RichEditableText top="10" left="55"
editable="false"
textFlow="{textFlow2}" />
</s:Panel>
</s:WindowedApplication>
I tried all combinations of preventDefault, stopImmediatePropagation and stopPropagation. It does change the event's behavior but it also ruins the hovering effect on the link.
Then I tried to intercept the event at the RichEditableText but I got the same kind of results.
Once I had a similar problem but I learned that it was because I was using mouseOver/mouseOut events instead of rollOver/rollOut. Since I switched to rollOver/rollOut it worked fine. Until now.
And now I'm clueless.
Please help.
Thanks.
I have 3 buttons(say b1,b2,b3) in my app which are under the controlbar
on clicking those buttons it will open new view(components)
suppose if button b1 is clicked it should highlight the button b1(bg color change).
how to go about this sorry if it is noob question as am new to this
Thanks
I think you should use ToggleButton here is example
also check Button Bar to group buttons
EDITED by you question i think you need to switch views on Button click
in that case you may see Tab Navigator
hopes thst helps
Set toggle property for buttons to true as in documentation and then manage selected property for buttons (set it to true for active button).
Try this example,since you are looking for a solution without any button bars
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
protected function button1_clickHandler(event:MouseEvent):void
{
for each(var child:UIComponent in hbox.getChildren())
{
if(child.className == 'Button')
{
Button(child).selected = false;
}
}
event.currentTarget.selected = true;
}
]]>
</mx:Script>
<mx:HBox id="hbox">
<mx:Button label="B1" toggle="true" click="button1_clickHandler(event)"/>
<mx:Button label="B2" toggle="true" click="button1_clickHandler(event)"/>
<mx:Button label="B3" toggle="true" click="button1_clickHandler(event)"/>
</mx:HBox>
</mx:Application>
For controlling the background color of the buttons in selected state,define selectedUpSkin,selectedOverSkin,selectedDownSkin(and selectedDisabledSkin)
P.S:If you are using only buttons in the control bar,you can use Button as the type of child and avoid that if statement