I am new to flex, how do you change the text inside of a text control when a user has clicked a button. I could not find a way to do this. I used an event handler to input a .xml to a string and then to the text control. This doesn't seem to work. Any suggestions?
let's see if I can do this off the top of my head:
<mx:Button [all your button properties] onClick"buttonClick()"/>
<mx:Script>
<![CDATA[
public function buttonClick():void{
myText.text = "My new String";
}
]]>
yeah, that should do it.
Related
Quick background. I have a series of editable text areas in which I want to be able to add a variable on the click of a button.
If I click the button the textarea loses focus and so I cant code which textarea I need to add the variable into. Can anyone think of a way of keeping focus on the textbox, inserting the variable and then allowing the user to carry on typing.
I'm not sure if this is part or fully possible but any help would be much appreciated. I've been playing around with the setFocus function trying to get this to work with no success.
Here is a snippet of my code:
public function addFirstName(myText:string):void{
myText = myText + "<<firstname>>";
}
<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true"/>
<mx:Button label="Insert First Name" click="addFirstName(focusedtextarea)"/>
its the focusedtextarea part Im stuck on
Thanks in advance!
Write some code using the focus out event to store which text area needs to be changed. Conceptually something like this:
var textAreaToBeChanged : TextArea;
protected function onTextAreaLoseFocus(event:FocusEvent):void{
// I'm pretty sure Target is the right property to use here; but didn't test
textAreaToBeChanged = target;
}
Later in your MXML, add the event listener.:
<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
Sorted!
public var textAreaToBeChanged : Object;
public var textposition:int
//when leaving focus on a textbox, record the textarea and text position. If a button is clicked to add a variable, it needs to be added at this position
protected function onTextAreaLoseFocus(event:FocusEvent):void{
textAreaToBeChanged = event.target;
textposition = textAreaToBeChanged.caretIndex;
}
//split the text from the recent textbox at the position the cursor has just been. The restructure the text with the firstname variable in the middle.
public function addFirstName():void{
var firstbit:String = textAreaToBeChanged.text.substr(0,textposition);
var myString:String = firstbit;
myString = myString + firstnameVar;
var lastbit:String = textAreaToBeChanged.text.substr(textposition);
myString = myString + lastbit;
textAreaToBeChanged.text = myString;
//set the focus back to the textarea.
textAreaToBeChanged.setFocus();
//place the cursor after the variable we just added.
textAreaToBeChanged.setSelection(textposition + firstnameVar.length, textposition + firstnameVar.length);
}
and the MXML:
<mx:TextArea id="txt1" change="text1=txt1.text" text="{text3}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:TextArea id="txt2" change="text2=txt2.text" text="{text2}" editable="true" focusOut="{onTextAreaLoseFocus(event)}"/>
<mx:Button label="Insert First Name" click="addFirstName()"/>
I have a mxml flex application where I have to launch a VideoPlayer on button click event. Any idea what solutions I can use to open a new "frame" or "view" (I'm not sure what the right terminology is) with the VideoPlayer playing a media clip so that it wouldn't interfere with the original "view"?
What I would do is create a component (like a TitleWindow, Group, Panel, etc.) that has your VideoPlayer added to it and then use the PopUpManager to display it on screen when your button is clicked. Make sure you add a method to close the pop up when you're done with it.
Some links on the PopUpManager to get you started:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html
http://blog.flexexamples.com/category/popupmanager/
http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/
A (really) rough example:
<fx:Script>
<![CDATA[
private var myVideoPlayerComponent:VideoPlayer;
protected function btnHistory_clickHandler(event:MouseEvent):void
{
myVideoPlayerComponent = PopUpManager.createPopUp(this, VideoPlayer, false);
PopUpManager.centerPopUp(myVideoPlayerComponent);
}
]]>
</fx:Script>
<s:Button label="Play" id="myButton" click="myButton_clickHandler(event)" />
i am new to flex. I want to create some buttons and when v click on that button, it should open some images. how to give this functionality in flex builder 3. Thanks for ur time
Try this example if it helps.
The important thing is embedding the image before you use it.Another way of embedding is inline in the mx:Image tag.Please be careful with the path to the location of the image.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
/*in the source put the absolute path(like directory:/folder/image.gif) or the relative path (../image.gif where ../ is your project directory )to the location of your image
*/
[Embed (source="../src/assets/images/image.gif")]
[Bindable]
//this variable of type Class is used to refer to the aboveimage..
public var img:Class;
public function buttonClickHandler():void{
if(image.visible)
image.visible = false;
else
image.visible = true;
}
]]>
</mx:Script>
<mx:Image source="{img}" visible="false" id="image"/>
<mx:Button x="172" y="225" label="Button" id="button" click="buttonClickHandler()"/>
</mx:Application>
hi have a click handler for the button. in the function of click handler handle displaying of image by switching visibilities.have the image embedded in the design before itself. then play with its visibilities on button click.
try going through the examples here.explains about all kind of asset embedding,including sound
http://livedocs.adobe.com/flex/3/html/help.html?content=04_OO_Programming_09.html
I am trying to programmatically pass focus to a newly created TextField, but for some reason setSelection and setFocus do not work. For example, see my test code below:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="_init()">
<mx:Button click="{tf.setSelection(1,2)}" />
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var tf:TextField
private function _init():void{
tf = new TextField();
tf.text = "abcdefghijk";
tf.type = TextFieldType.INPUT;
tf.autoSize = TextFieldAutoSize.LEFT;
var ui:UIComponent = new UIComponent();
ui.addChild(tf);
addChild(ui);
tf.setSelection(0,1);
ui.setFocus();
ui.addEventListener(MouseEvent.MOUSE_DOWN, function():void{
tf.setSelection(0,3);
});
}
]]>
</mx:Script>
</mx:Application>
The only setSelection that does anything is the 0,3 one on MOUSE_DOWN. I assume this all has something to do with the text field receiving focus with the mouse click, but I cannot for the life of me figure out how to do this manually.
setFocus works on components that implement the mx.managers.IFocusManagerComponent. Textfield is not a Flex component and doesn't implement this interface, that's why it doesn't work. If I were you, I would use a TextInput instead seeing that you need an input control
On investigating other classes, motivated by Florian's suggestion, I came across UITextField which subclasses TextField. Though it does not implement the IFocusManagerComponent interface, it does have a setFocus method, which at this moment in time seems to be working.
As an added benefit, it can be added to a container directly, that is, without having to construct a UIComponent parent first.
I have text input boxes. There is validation for each of the boxes using numberValidator.
Now, the thing is that am using alert box to show if any error occurs.
Flowchart ::
1> Insert value in textBox.
2> NumberValidator validates the input on "trigger=change".
3> If error, alert message is displayed. The user clicks OK to go back to form.
4> Focus set back to the TextBox.
5> But, alert box makes the text input value blank / null. i.e. Both the previous error value entered by user and the default correct value will not be displayed now.
Goal : Display the most recent correct value that was entered in the text box. Not the default of any other, but the most recent correct value entered by the user.
can anyone help ??
Here is a complete answer. I used the "enter" event of the text box to do validation since the "change" event fires after only a single character is entered
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert
// set last correct value to a default
private var lastCorrectValue:String="411"
function handleInvalid(event:Event)
{
Alert.show("invalid");
textInput.text=lastCorrectValue
}
function handleValid()
{
Alert.show('Validation Succeeded!')
lastCorrectValue=textInput.text
}
]]>
</mx:Script>
<mx:TextInput id="textInput"
text="{lastCorrectValue}"/>
<!-- Use the enter event of the text box to do validation. The change event fires after a single character-->
<mx:NumberValidator source="{textInput}"
property="text"
integerError="Enter Integer value"
domain="int"
trigger="{textInput}"
triggerEvent="enter"
invalid="handleInvalid(event)"
valid="handleValid();"/>
</mx:Application>
You will need to store the most recent correct answer in a variable and have the click/close handler of the alert replace the value with the stored var.
here is an example of listening for alert event:
<?xml version="1.0"?>
<!-- controls\alert\AlertEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
private var lastKnownCorrectAnswer:String = "Some Answer";
private function alertListener(eventObj:CloseEvent):void {
// Check to see if the OK button was pressed.
if (eventObj.detail==Alert.OK) {
myText.text = lastKnownCorrectAnswer;
}
}
]]>
</mx:Script>
<mx:TextInput id="myAnswer"
width="150"
text="" />
<mx:Button id="myButton"
label="Copy Text"
click='Alert.show("Copy Text?", "Alert",
Alert.OK | Alert.CANCEL, this,
alertListener, null, Alert.OK);'/>
</mx:Application>
You will need to add your validation logic in there, but you get the idea. The above is from the Alert docs.
Fire a event on the Text Input FocusIn() and store whatever text value in a variable. (That would be your last correct answer). Reset the inputbox text to this value after validation... Hope I made sense :)