How to set a public var in a popup window? - apache-flex

I am trying to set a variable in a titlewindow pupup and use it in a script section. The variable is not being set and I don't know why.
Here is my Main.mxml file:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var test:TestWindow = TestWindow(PopUpManager.createPopUp(this,TestWindow,true));
PopUpManager.centerPopUp(test);
test.testText = 'test 2';
test.bol = true;
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</s:Application>
Here is my titleWindow file:
<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
close="PopUpManager.removePopUp(this);" creationComplete="titlewindow1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.managers.PopUpManager;
[Bindable] public var testText:String = 'test 1';
public var bol:Boolean = false;
protected function titlewindow1_creationCompleteHandler(event:FlexEvent):void
{
if(bol){
trace('Boolean is true');
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label text='{testText}'/>
</s:TitleWindow>
The problem is the label does change from 'test 1' to 'test 2' but the bol variable will not be set, why is that?

The creationComplete event fires when your TitleWindow has been completely created and only fires once (see component lifecycle).
In your case this happens in your Main.mxml file when you add the pop up with PopUpManager.centerPopUp(test);. bol is getting updated, you're just not seeing that from a trace statement because the creationComplete event has already fired.
If you want to to change the value for bol with your current setup you'll need to do that prior to opening the pop up.
In general I feel that a better way of doing this would be by using getters and setters and data binding (or Flex's invalidation methods which is described in that first link).
Note: these links provided are for Flex 3 but so far as I know all this holds true in Flex 4.

NoobsArePeople2 is 100% correct about what's going on with the lifecycle. A quick and dirty workaround for this is to use PopUpManager.addPopUp() instead of createPopUp():
var test:TestWindow = new TestWindow();
test.testText = 'test 2';
test.bol = true;
PopUpManager.addPopUp(test, this, true);
PopUpManager.centerPopUp(test);
This should allow you to set the values on TestWindow before it actually gets initialized.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html

Related

How do you set ByteArray to IconItemRenderer in Flex 4?

I am having problems setting a ByteArray image to the "iconField" in IconItemRenderer. I think I'm halfway there as to use the "iconFunction", however what should I call to set the image in "iconField"?
Please help! Thank you in advance.
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
iconFunction="initializeIcon"
iconWidth="45"
iconHeight="45">
<fx:Script>
<![CDATA[
import mx.utils.Base64Decoder;
private function initializeIcon(data:Object):void
{
var imageName:String = data.image; //image is Base64 encoded data from a dynamic array
var byteArr:ByteArray;
var base64Dec:Base64Decoder = new Base64Decoder();
base64Dec.decode(imageName);
byteArr = base64Dec.toByteArray();
//set iconField? what should I do from here on.
}
]]>
</fx:Script>
</s:IconItemRenderer>
This code will solve your problem.
<?xml version="1.0"?>
<s:IconItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:component="spark.components.*"
iconField='byteArray'>
<fx:Script>
<![CDATA[
import mx.utils.Base64Decoder;
override public function set data(value:Object):void {
super.data = value;
var imageName:String = data.image;
var base64Dec:Base64Decoder = new Base64Decoder();
base64Dec.decode(imageName);
data.byteArray = base64Dec.toByteArray();
}
]]>
</fx:Script>
</s:IconItemRenderer>
Just fyi I think it's not best practice to put decoder into item renderer. I would recommend keep it level above.
Also keep in mind that IconItemRenderer is only available for mobile applications.

Flex PopUpAnchor created manually not showing up

I need to create a component using ActionScript. Can't use mxml in this case.
In my component I need to create PopUpAnchor using new operator and addElement to the stage. Unfortunatelly when I'm doing it, the PopUpAnchor's displayPopUp property does not respond to any values.
Here is my the 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"
initialize="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.components.Label;
import spark.components.PopUpAnchor;
protected function init(event:FlexEvent):void
{
var anchor:PopUpAnchor = new PopUpAnchor();
var label:Label = new Label();
label.text = 'ABC';
anchor.addChild(label);
addElement(anchor);
anchor.displayPopUp = true;
}
]]>
</fx:Script>
</s:WindowedApplication>
I'm using Flex SDK 4.5 with AIR SDK 2.6.
What am I doing wrong?
I figured it out. The problem is that i connot use addChild on anchor. I should use popUp property instead.
So, this line is WRONG:
anchor.addChild(label);
and should be corrected to this form:
anchor.popUp = label;

How to pass a string from .mxml to .as class in adobe air flex?

I want to pass a string from .mxml to a .as class..For that i tried using[Bindable]..But i
get only null value.How can i get the string from mxml?
I have given the link to show u what i have tried:
http://192.150.16.67/devnet/flex/articles/databinding_pitfalls.html
Please find below code this may help you for your question.
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
private var stringReaderObject:StringReader;
private function clickHandler():void
{
if(!stringReaderObject)
{
stringReaderObject = new StringReader();
}
stringReaderObject.readString = inputTextID.text;
}
]]>
</fx:Script>
<s:Group x="50" y="50">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:TextInput id="inputTextID"/>
<s:Button label="Click" click="clickHandler()"/>
</s:Group>
</s:Application>
Class Name: - StringReader.as
package
{
public class StringReader
{
private var _readString:String;
public function StringReader()
{
}
public function set readString(value:String):void
{
_readString = value;
trace(_readString);
}
public function get readString():String
{
return _readString;
}
}
}
trace will identify how you can pass value from MXML to .as class.
it can be achievable by another 2 ways those are as below: -
1) By creating public variable in you class.
2) By creating global in your application and access it in your class.
hope this may help you.

function parameter with FLEX code

I have a code in MXML and ActionScript that I found in a Flex manual. The problem is with "val" variable that should be passed to the updateMyString() function calling statement as a parameter but it doesn't happen in the code. Why is that?
<?xml version="1.0"?>
<!-- binding/BindSetterAS.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.binding.utils.*;
import mx.events.FlexEvent;
// Method called when myTI.text changes.
public function updateMyString(val:String):void {
myTA.text = val.toUpperCase();
}
<!-- Event listener to configure binding. -->
public function mySetterBinding(event:FlexEvent):void {
var watcherSetter:ChangeWatcher =
BindingUtils.bindSetter(updateMyString, myTI, "text");
}
]]>
</fx:Script>
<s:Label text="Bind Setter using setter method"/>
<s:TextInput id="myTI"
text="Hello Setter" />
<s:TextArea id="myTA"
initialize="mySetterBinding(event);"/>
</s:Application>
The documentation says that BindingUtils.bindSetter expects a setter function with one argument:
setter:Function — Setter method to invoke with an argument of the current value of chain when that value changes
In this case the val parameter will be set to the current value of chain. You can read about it here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/binding/utils/BindingUtils.html#bindSetter
Hope this helps!
var watcherSetter:ChangeWatcher = BindingUtils.bindSetter(updateMyString, myTI, "text");
the function is like this:
bindSetter(functionToCall, objectToBind, PropertyToBind)
So, you are actually binding myTI.text. This is passed as an argument to functionToCall, i.e. updateMyString. Got it?

change button appearance on click

I wahnt to change button appearance when it was clicked.
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()">
<fx:Script>
<![CDATA[
public var _clicked:Boolean = false;
public function init():void{
addEventListener(MouseEvent.CLICK, changeButtonClickStatus);
}
public function changeButtonClickStatus(event:MouseEvent):void{
var that:TopMenuButton = event.currentTarget as TopMenuButton;
that._clicked = !(that._clicked);
if(that._clicked == true){
//change button appearance
}else{
//change button appearance
}
}
]]>
</fx:Script>
</s:Button>
Is there a method using states? I could then use the skin convention.
Thanks in advance for Your help.
If you are looking for a ToggleButton that you can skin the different states of then it already exists in Flex 4.
Check out the source code for ToggleButtonSkin.mxml to see how to skin the different states.
Have a look on the following example:
Applying styles to different states on a Spark Button control in Flex 4

Resources