How to set tab index > 0 in TabNavigator control at initilize, flex
There is a property selectedIndex which you can set. Look here
There is a bug in Flex 3, extend the TabNavigator and make a component with the following. After that selectedIndex works.
<mx:TabNavigator xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
override protected function commitSelectedIndex(newIndex:int):void
{
super.commitSelectedIndex(newIndex);
tabBar.selectedIndex = newIndex;
}
]]>
</mx:Script>
</mx:TabNavigator>
Related
I am new in flex. Currently i am going to build a flex album, but I get a problem about
the render in image by spark list.
the problem is this last 2~3 thumbs can not be properly displayed, as you can see as follows:
http://www.j-rich.com/Problem
and it will look like:
http://www.j-rich.com/Problem/show.jpg
for the source code, you can right click and choose view source in the demo
Any suggestion will be appreciated, thank you very much.
Sincerely,
Yuan-Hsu Liao
Add cachePolicy="on" to your Image control in ItemRenderer. But I don't recomend to use this kind of huge images as thumbnails. Looks like Flash has some limitations in this field.
This is correct for me, my resolution is 1920*1080. I use FLEX SDK4.5.1, flashplayer 11.8.
By the way, you should better override the set data function in the ItemRenderer, and set img source in the function, like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
override public function set data(value:Object):void {
super.data = value;
var url:String = value as String;
img.source = url;
positionImg();
}
private function positionImg():void
{
this.ima.width = 136;
this.ima.height = 105;
this.ima.x = 0;
this.ima.y = 0;
}
]]>
</fx:Script>
<s:Group id="group" x="0" y="0" width="170" height="85">
<s:Image id="img" x="0" y="0" scaleMode="letterbox"/>
</s:Group>
</s:ItemRenderer>
ItemRenderer is recycled, so it's better to do some stuff in the set data()
Check whether ur Padding given is Correct...or else Adjust the same.
I have a problem with the AdvancedDataGrid in Flex.
I have a AdvancedDataGrid with a Bindable ArrayCollection as DataProvider. When I set the ArrayCollection (by Clicking on Button 1) the AdvancedDataGrid will represent 4 Columns.
After that i click on Button 2. In this case the AdvancedDataGrid still shows 4 columns instead of the expected 3 columns.
Scenario 2
First clicked Button2 -> AdvancedDataGrid shows 3 columns
Clicking Button1 -> AdvancedDataGrid still shows 3 columns instead of the expected 4 columns
How can I tell the AdvancedDataGrid to adjust the Column count?
Snippet:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
[Bindable]
private var dataProv:ArrayCollection;
protected function button1_clickHandler(event:MouseEvent):void {
dataProv = new ArrayCollection([
{country:"USA", year2004:3.5, year2005:4.2, year2006:3.7},
{country:"UK", year2004:1.7, year2005:3.1, year2006:3.6},
{country:"Canada", year2004:2.8, year2005:2.9, year2006:3.4},
{country:"Japan", year2004:2.6, year2005:2.3, year2006:2.8},
{country:"France", year2004:1.4, year2005:2.1, year2006:2.6},
{country:"Brazil", year2004:2.6, year2005:4.9, year2006:4.4},
{country:"Russia", year2004:6.4, year2005:7.2, year2006:6.7},
{country:"India", year2004:8.0, year2005:7.1, year2006:6.6},
{country:"China", year2004:9.9, year2005:10.1, year2006:10.6}
]);
adg.validateNow();
adg.dataProvider.refresh();
}
protected function button2_clickHandler(event:MouseEvent):void{
dataProv = new ArrayCollection([
{country:"USA", year2004:3.5, year2005:4.2},
{country:"UK", year2004:1.7, year2005:3.1},
{country:"Canada", year2004:2.8, year2005:2.9},
{country:"Japan", year2004:2.6, year2005:2.3},
{country:"France", year2004:1.4, year2005:2.1},
{country:"Brazil", year2004:2.6, year2005:4.9},
{country:"Russia", year2004:6.4, year2005:7.2},
{country:"India", year2004:8.0, year2005:7.1},
{country:"China", year2004:9.9, year2005:10.1}
]);
adg.validateNow();
adg.dataProvider.refresh();
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:AdvancedDataGrid
id="adg"
width="100%"
height="100%"
dataProvider="{dataProv}"/>
<mx:Button label="change" click="button1_clickHandler(event)"/>
<mx:Button label="changeBack" click="button2_clickHandler(event)"/>
</mx:HBox>
</mx:Application>
You need to extend the AdvancedDataGrid class and override the collectionChangeHandler. You need to set the protected var generatedColumns to true in order for the dynamic column code to execute more than once.
override protected function collectionChangeHandler(event:Event):void
{
generatedColumns = true;
super.collectionChangeHandler(event);
}
It's interesting. If you set stage.scaleMode = StageScaleMode.EXACT_FIT; all components are resized when you resize the window, BUT there is a grey stripe at the bottom of the window that is not.
What does that mean?
By the way, is it possible to take that grey line/stripe off from the window?
Try to resize this window and you'll see what happens:
<?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" xmlns:local="*"
applicationComplete="initApplication(event)" width="800" height="600" preloaderChromeColor="#FFFCFC">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function initApplication( evt:FlexEvent):void{
stage.scaleMode = StageScaleMode.EXACT_FIT;
var timer:Timer = new Timer(3000);
timer.addEventListener( TimerEvent.TIMER, onTimer );
timer.start();
}
private function onTimer( evt:TimerEvent ):void{
this.width = 600;
trace(this.stage.stageWidth, this.stage.stageHeight);
}
]]>
</fx:Script>
<s:Button x="185" y="245" label="Button" width="112" height="61"/>
</s:WindowedApplication>
There is also a timer just for checking if the Stage's size is the same as the application window's one.
The gray stripe is the statusBar property of the WindowedApplication class. Turn it off by setting showStatusBar="false" inside the WindowedApplication tag.
That grey stripe at the bottom is the statusbar from the windows chrome, you need to set the 'systemChrome' tag to false in the app xml descriptor file to remove it or do showStatusBar="false".
I have a UIComponent (tried it also with Canvas) and some icons in it (sub views). On the UIComponent I defined some extra ContextMenuItems.
Now when I'm testing it, the context menu appears only on the subviews (icons) with a right-click.
I've checked the documentation but found nothing about required properties for using context menus.
Do you have any ideas why it's only on subviews?
This is probably happening because your UIComponent's (or Canvas') graphics are clean/empty. If the component doesn't have any "content" it will act as transparent, which means the click event will not be caught.
If you are using a Canvas there's a simple way to check this out, try to add some background color and it should work:
<mx:Canvas backgroundColor="#FFFFFF" backgroundAlpha="0.001"/>
I think this is what you're looking for:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
creationComplete="onCreationComplete()">
<fx:Script>
<![CDATA[
private function onCreationComplete():void
{
var menu:ContextMenu = new ContextMenu();
menu.customItems.push(new ContextMenuItem('weee'));
menu.customItems.push(new ContextMenuItem('weee2'));
menu.hideBuiltInItems();
canvas.contextMenu = menu;
}
]]>
</fx:Script>
<mx:Canvas id="canvas" backgroundColor="#000000" height="50%" width="50%" >
<s:Button label="blarg" />
</mx:Canvas>
</s:Application>
Notice how I'm creating a menu, then adding items, which then replaces the contextMenu property. This should work on any object that extends InteractiveObject.
What the problem was is the mouseEnabled="{false}" property in one of the parent-parent containers. I removed it and it works now.
I'm having problems binding the height of a UITextField to the y of a VBox and the height of the TitleWindow. I'm trying to adjust the height of the TitleWindow and the height of the VBox so, that the UITextField doesn't overlap the other content.
Alternatively, I've tried setting the height of the UITextField to an explicit height, but I haven't been able to get it to work.
I have to use a UITextField instead of Text, because I'm using Flash Eff2.
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="520"
height="{tf.height + 380}">
<mx:Script>
<![CDATA[
import mx.core.UITextFormat;
import mx.events.ItemClickEvent;
import mx.controls.RadioButton;
import mx.controls.RadioButtonGroup;
import mx.core.UITextField;
import mx.managers.PopUpManager;
[Bindable]
public var tf:UITextField = new UITextField;
[Bindable]
public var myText:String;
[Embed(source="../libs/arial.ttf", fontFamily="ArialEmbedded")]
public const ArialEmbedded:Class;
public function createEffect2():void{
tf.autoSize = TextFieldAutoSize.LEFT;
//tf.height=150;
tf.embedFonts = true;
tf.multiline = true;
tf.text = myText;
tf.width = 400;
tf.wordWrap = true;
var myFormat:TextFormat = new TextFormat;
myFormat.size = 25;
myFormat.blockIndent=50;
this.addChild(tf);
tf.validateNow();
tf.setTextFormat(myFormat);
}
]]>
</mx:Script>
<mx:VBox x="180" y="{tf.height + 140}" width="480" >
<mx:RadioButtonGroup id="choicesRadioButtonGroup" />
<mx:RadioButton groupName="choicesRadioButtonGroup" label="A" horizontalCenter="150"/>
<mx:RadioButton groupName="choicesRadioButtonGroup" label="B" horizontalCenter="150"/>
<mx:RadioButton groupName="choicesRadioButtonGroup" label="C" horizontalCenter="150"/>
</mx:VBox>
</mx:TitleWindow>
I'm getting: Data Binding will not be able to detect assignments to "height".
Any suggestions?
Thank you.
-Laxmidi
If I had to guess, Binding is a Flex construct, not an "ActionScript' construct. Height is a made Bindable in UIComponent, but UITextField does not extend UIComponent. Instead it extends, FlexTextField, which extends TextField (A Closed source Flash class).
You can either extend UITextField and override height to make it Bindable or just use a Flex TextInput class, which does extend UIComponent.