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();
Related
I am building a flash player application (Flex 4) in IntelliJ IDEA. A button is positioned on top of a VideoDisplay area and the visibility is set to false. It becomes visible when the mouse is over the VideoDisplay area.
The problem is that the button blinks rapidly when the mouse is over it (it does not blink, when the mouse is over the VideoDispaly area, and not right over the button, though).
in .mxml:
<mx:VideoDisplay id="videoDisplay" visible="true" width="237" height="188" click="simplePlay()"
mouseOver="videoOnHover()" mouseOut="videoHoverOut()"
playheadUpdate="videoDisplay_playheadUpdate()"
ready="videoDisplay_ready()"
rewind="videoDisplay.play()"
autoPlay="false"
live="true"
source="rtmp://cp114761.live.edgefcs.net:443/live/tpc-live_1#44263"/>
<mx:Button id="pauseButton" name="pause" visible="false" verticalCenter="0" horizontalCenter="0" click="simplePause()"
overSkin="#Embed(source='img/pause-hover.png')"
upSkin="#Embed(source='img/pause.png')"
downSkin="#Embed(source='img/pause-hover.png')" />
in CDATA[ section:
private function videoOnHover():void {
pauseButton.setVisible(true);
}
Would be very grateful for any advice!
Put VideoDisplay and Button in the group and handle rollOver rollOut on it.
<s:Group rollOver="videoOnHover()" rollOut="videoHoverOut()">
<mx:VideoDisplay id="videoDisplay" visible="true" width="237" height="188"
autoPlay="false"
live="true"/>
<mx:Button id="pauseButton" name="pause" visible="false"/>
</s:Group>
I want to add a button with a cross to the header of the accordion which can be clickable. that means i want to display a message when the some one click on that button. i go through many of the samples in the web but couldn't get it done. if any one who knows do this in flex4 it will very helpful.
I tried with also a CanvasButtonAccordionHeader, it shows the button but when i click it, it didn't give the message although i created the click event handler.
if somebody know how to resolve this please describe it with a simple source code.
thanx.
You can easily do that by customizing the header in CSS.
Add the header Style to you accordion.
<mx:Accordion id="accordion"
headerStyleName="accHeader"
width="100%" />
In your CSS
.accHeader {
fillColors: haloSilver, haloBlue;
fillAlphas: 1.0, 0.5;
selectedFillColors: black, black;
}
Or embed your image in here.
You can place that message in your ViewStack.
I use the CanvasButtonAccordionHeader in Flex 3, so not sure if this will work in Flex 4.
But.... in case it's of any use, I create my CanvasButtonAccordianHeader as a custom componant which dispatches an event when the button is clicked:
<CanvasButtonAccordionHeader xmlns="flexlib.containers.accordionClasses.*"
xmlns:mx="http://www.adobe.com/2006/mxml" mouseChildren="true"
<mx:Script>
<![CDATA[
[Bindable]
private var itemName:String;
public function init():void{
itemName=data.name;
}
]]>
</mx:Script>
<mx:Metadata>
[Event(name="homeButtonClicked")]
</mx:Metadata>
<mx:HBox width="100%" horizontalAlign="right" height="100%"
paddingRight="5"
verticalAlign="middle">
<mx:LinkButton label="<>"
click="dispatchEvent(new Event('homeButtonClicked'));"
/>
</mx:HBox>
</CanvasButtonAccordionHeader>
Then I instantiate the custom componant at the bottom of the Accordian as a Header Renderer:
............................................
<mx:headerRenderer>
<mx:Component>
<applicationLayout:AccordionNavHeaderRenderer
homeButtonClicked="outerDocument.dispatchEvent(new Event('homeClick'))"/>
</mx:Component>
</mx:headerRenderer>
</mx:Accordion>
Hope this is of use.
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 have two questions.
How do I change the corner radius of a Label component in Flex. Tried applying style name, and the setStyle('cornerRadius',9) methods, but doesn't work.
How can I change the arrow image in the combo box control to a different image?
Please give your suggestions.
Ok, I've edited my answer.
Looks like the only way to do it is wrap the Label in a container like an HBox
<mx:HBox width="100%" horizontalAlign="right" id="hbox1" cornerRadius="16" borderStyle="solid">
<mx:Label label="{stuff}" id="opLabel" />
</mx:HBox>
Using Spark components use the BorderContainer control
<s:BorderContainer id="brdr"
cornerRadius="6"
width="80" height="30"
horizontalCenter="0" verticalCenter="0">
<s:Label id="lblFoo"
text="Bar"
width="100%" height="15"
horizontalCenter="0" verticalCenter="0"/>
</s:BorderContainer>
To change the combobox arrow you need to change the following skins:
upSkin
overSkin
downSkin
disabledSkin
For an editable combobox you need to change the following skins:
editableUpSkin
editableOverSkin
editableDownSkin
editableDisabledSkin
If you coding on actionScript try this one, first you have to create in your css file attribute, for example:
CSS-File
.lineCorner{ corner-radius: 20; }
And in your main mxml app you have to set styleName to your Label like this example:
var myLabel:Label = new Label();
myLabel.text = "Bla-Bla-Bla";
myLabel.styleName = "lineCorner";
this.addChild(myLabel);