How to know the index value selected / opened tab Flex (TabNavigator) - actionscript-3

I have a mx Tab navigator and added several childs...I can use selectedindex(int) to open/select the respective (int) tab but How do I know the value of a selected/open tab???
Any Ideas.
Please help

You mean the navigator content?
<?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:Script>
<![CDATA[
import mx.core.INavigatorContent;
import mx.events.IndexChangedEvent;
protected function tabNavigator_changeHandler(event:IndexChangedEvent):void
{
var obj:INavigatorContent = tabNavigator.selectedChild;
}
]]>
</fx:Script>
<mx:TabNavigator id="tabNavigator"
change="tabNavigator_changeHandler(event)" />
</s:Application>

You need selectedIndex property (it is readable/writable). Also see Event.CHANGED to catch tab change.

Related

"null object reference" error in ActionScript 3

I used my app's resize handler to resize my component but it is throwing this error :
TypeError: Error #1009: Cannot access a property or method of a null object reference
Here is my code :
<?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"
resize="application2_resizeHandler(event)" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.events.ResizeEvent;
private var employeeName:String = 'ravi';
protected function application2_resizeHandler(event:ResizeEvent):void
{
mainGroup.width = stage.width - 10;
mainGroup.x = 5;
}
]]>
</fx:Script>
<s:Group width="100%" height="100%">
<s:VGroup id="mainGroup" >
<s:Label id="employeeNameLabel" text="{employeeName}" />
<s:Label id="departmentLabel" />
</s:VGroup>
<s:Button id="getData" />
</s:Group>
</s:Application>
You got the #1009 error because your resize event is fired before the creation of your objects. So, you should wait for that and that your app is added to the stage to be able to use the stage object.
For that, I think that the best event is the applicationComplete event, then you can add a resize event to resize your component ...
So you can do like this for example :
<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"
applicationComplete="application2_applicationCompleteHandler(event)" >
then
protected function application2_applicationCompleteHandler(event:FlexEvent):void
{
// if you want you can resize your component for the 1st time
// by calling the application2_resizeHandler() function
application2_resizeHandler(new ResizeEvent(ResizeEvent.RESIZE));
// add the resize event listener to your app
event.target.addEventListener(ResizeEvent.RESIZE, application2_resizeHandler);
}
Hope that can help.

Binding is not happening on Object Property and text Input

I am trying bind an Object property value to a text field. (Well I have taken this as an example ... I have no.of form fields and to be bound by other values)
But when change its value on button click the text field is not getting updated?
Below is the example code,
<?xml version="1.0" encoding="utf-8"?>
<s:Application
minHeight="600"
minWidth="955"
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>
</fx:Declarations>
<fx:Script>
<![CDATA[
[Bindable]
var currentFormItem:Object = new Object();
public function changeName():void
{
currentFormItem.name = "hello";
}
]]>
</fx:Script>
<s:HGroup>
<s:TextInput id="test"
text="{currentFormItem.name}"/>
<s:Button click="changeName()"/>
</s:HGroup>
Thanks
I got the solution for this. I can just wrap this object in ObjectProxy.

Flex 4 Change Main Application Background Color at Runtime

Is it possible within Flex 4 to change the background color of an <s:Application> at runtime? I've seen examples of how to do this with the MX version of the Application component, but not the spark version.
I cannot bind the backgroundColor property to a variable and modify that. However, I am thinking that I should use the styleManager property of the component to perform this change.
Could anyone explain how to do this?
Thank you for your time.
I recommend you go through this:
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7fee.html
The video tutorial steps through using CSS and using skins in Flex 4 which are the primary means of changing visual components.
Application has a backgroundColor style still:
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html
<?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)">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
setStyle('backgroundColor',0xCCCCCC);
}
]]>
</fx:Script>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
A Better way to go IMO
<?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">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
s|Application{
backgroundColor:#CCCCCC;
}
</fx:Style>
<s:Button click="setStyle('backgroundColor','0xff0000');" label="turn red"/>
<s:Button click="setStyle('backgroundColor','0x0000ff');" label="turn blue"/>
<s:Button click="setStyle('backgroundColor','0x00ff00');" label="turn green"/>
</s:Application>
Better still pull the CSS out into it's own file and just reference it with a
<fx:Style source="myStyle.css"/>
You may try it with
FlexGlobals.topLevelApplication.setStyle("backgroundColor", 0xff0000); // that would turn it into bright red
FlexGlobals.topLevelApplication.setStyle("backgroundAlpha", 1); // Sometimes background color is ignored when background alpha is zero
If the background color does not change, that means one of your component might be dictating the background color.

Flex - RichTextEditor losing styling after view change

It seems like there is a bug in flex's RichTextEditor that on change of view(view state change) the RTE loses its formatting. Has anyone encountered this issue before and know how to solve it. Any help is much appreciated.
<?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" xmlns:base="ui.components.base.*" xmlns:ui="ui.*" xmlns:local="*">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function click_clickHandler(event:MouseEvent):void
{
trace(this.rte.htmlText);
this.currentState = "other";
}
protected function clickother_clickHandler(event:MouseEvent):void
{
this.currentState = "normal"
}
]]>
</fx:Script>
<s:states>
<s:State name="normal"/>
<s:State name="other"/>
</s:states>
<s:VGroup includeIn="normal">
<mx:RichTextEditor id="rte">
</mx:RichTextEditor>
<s:Button id="click" x = "500" y = "500" click="click_clickHandler(event)">
</s:Button>
</s:VGroup>
<s:VGroup includeIn="other" >
<s:Label>
test
</s:Label>
<s:Button id="clickother" click="clickother_clickHandler(event)">
</s:Button>
</s:VGroup>
</s:Application>
i have faced that issue and solution is applying style external.
means when view is changed apply that css to rte.
Have a nice day....

pass variable from a component to TitleWindow in Flex4

I am trying to access a variable defined in an mxml component from a TitleWindow but I cannot get it. I also declared a variable in my titleWindow which references to the component. And I also tried using parentDocument to access the variable but in vain.
Any precious help on this. Thanks.
See my codes below:
This is my component (Comp.xml) where I have declared the variable testVar.
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="100%" height="100%">
<fx:Script>
<![CDATA[
public var testVar:String = "Testing";
]]>
</fx:Script>
</s:Group>
This is my titleWindow code:
<?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" left="10"
creationComplete="titlewindow1_initializeHandler(event)"
width="100%" height="100%"
>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import com.Comp;
public var varComp:Comp;
public function titlewindow1_initializeHandler(event:FlexEvent):void
{
//Alert.show(new String(Application));
Alert.show(new String(varComp.testVar));
}
]]>
</fx:Script>
</s:TitleWindow>