Flex: Binding to the Height of the UITextField - apache-flex

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.

Related

Flex : Unable to rotate header text in Datagrid

I'm having trouble in rotating the header text in my datagrid. I don't know understand the reason why its failing.Can someone help?
Datagrid column AS3 code:
dgc=new DataGridColumn();
dgc.dataField=columnName.gene;
dgc.labelFunction=gridLabelFunction
dgc.headerText=columnName.gene;
//dgc.headerWordWrap=true;
dgc.headerRenderer=new ClassFactory(VDGHeader);
dgc.width=20;
_datagridColumnsArray.push(dgc);
Please find my Header Renderer component below
import mx.controls.dataGridClasses.DataGridColumn;
import mx.managers.SystemManager;
[Bindable] private var text:String;
[Bindable] private var src:String;
override public function set data(value:Object):void{
var col:DataGridColumn = value as DataGridColumn;
text = col.headerText;
}
]]>
</fx:Script>
<mx:Label id="txtLbl" text="{text}" rotation="10" width="100%" />
This actually doesn't have anything to do with column headers.
To rotate text in Flex you must embed the font. Otherwise the rotation will simply be ignored.
See Adobe's docs on Embedding Fonts

Is there a way to show the errorTip (error ToolTip) to the left of the target?

I'm creating an errorTip that gets displayed when the user mouses over an image. I would like the popup to appear to the left of the image, but the only properties I can pass to create the toolTip are "errorTipRight", "errorTipAbove" and "errorTipBelow".
Any thoughts?
Sample code:
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox 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:Script>
<![CDATA[
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
[Embed(source="assets/some_image.png")]
[Bindable]
private var myIcon:Class;
private var myToolTip:ToolTip;
private function showToolTip(evt:MouseEvent, text:String):void
{
var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y);
pt = evt.currentTarget.parent.contentToGlobal(pt);
// I WANT TO POP THE ERRORTIP UP TO THE LEFT HERE INSTEAD OF ABOVE.
myToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip;
var yOffset:int = myToolTip.height + 5;
myToolTip.y -= yOffset;
}
// Remove the tooltip
private function killToolTip():void
{
ToolTipManager.destroyToolTip(myToolTip);
}
]]>
</fx:Script>
<mx:Image source="{myIcon}" mouseOver="showToolTip(event, 'My ToolTip Message Goes Here')" mouseOut="killToolTip()" />
</mx:HBox>
You'll need to create a replacement for the ToolTipBorder class and assign that as the skin for your ToolTip. I would do this by copying the ToolTipBorder source and modifying the updateDisplayList and borderMetrics methods to include a new "errorTipLeft" style to the switch statements in those methods. Then assign that skin class to the ToolTip class in CSS. Hope that helps.
Why can't you subtract the width of the tooltip from the pt.x when you give the coordinates to the ToolTipManager?
myToolTip = ToolTipManager.createToolTip(text, (pt.x - somewidth), pt.y, "errorTipAbove") as ToolTip;

How do I change the size of an HBox in Flex to fit its container?

I create an HBox, fill it with a grid of buttons, and set the scroll policy. When I resize the window, the stage changes size, and so does the HBox ... to a point. Once it reaches the height of the Grid it contains, it stops shrinking, like it has a "min-height". This ruins the scrollbar that I'm trying to establish in this case.
I've set the height to 100%, shouldn't it always take the height of the stage, its parent?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init();" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="100%">
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.containers.Grid;
import mx.containers.GridRow;
import mx.containers.GridItem;
protected function init():void {
for (var i:int = 0; i < 3; i++) {
var gRow:GridRow = new GridRow();
gRow.percentWidth = 100;
gRow.height = 100;
var gItem:GridItem = new GridItem();
gItem.percentWidth = 100;
var btn:Button = new Button();
btn.label = "BUTTON";
btn.percentWidth = 100;
btn.percentHeight = 100;
gItem.addChild(btn);
gRow.addChild(gItem);
mainGrid.addChild(gRow);
}
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="on" id="main" clipContent = "true">
<mx:Grid id="mainGrid" width="100%" height="100%" />
</mx:HBox>
</mx:Application>
So it looks like I managed to mention the eventual answer in my question. It's the "minHeight" property folks, looks like it gets set to the contained grids height, and will shrink no smaller. Set it to 0, and your good to go.
I hope this dialog I'm having with myself helps someone else. :)
you can try to give it the heigh of the HBox, as height="{hb.height}" ,hb as id

detect the size of swf. flex/as3

I'm creating a map that has points of interest. (POI) When a user mouses over the POI an info bubble pops onto the screen and it loads an swf. I currently have 3 problems. My 4th problem is that this is due Monday 21st! so any help would be greatly appreciated!
I can't detect the size of the swf so that my infobubble will size itself to the size of the swf.
When I mouse over my swf file, it disappears.
I would love to have the my swf file pop up in a layer on its own instead of being on the stage of my main flex file...but i have no clue how to do this.
package com.modestmaps
{
import flash.display.Graphics;
import flash.display.Loader;
import flash.display.Shape;
import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import flash.text.TextField;
public class InfoBubble extends Sprite
{
public var textField:TextField;
public var background:Shape;
public var shadow:Shape;
public function InfoBubble(text:String)
{
//I name the instance of my POI marker on my map to the url link of my swf file. So whatever marker i click on the correct url will
this.name = urlLink;
this.mouseEnabled = true;
this.mouseChildren = false;
//this creates a shadow behind my infobubble
shadow = new Shape();
shadow.filters = [ new BlurFilter(16, 16) ];
shadow.transform.matrix = new Matrix(1, 0, -0.5, 0.5, 0, 0);
addChild(shadow);
background = new Shape();
addChild(background);
textField = new TextField();
textField.selectable = true;
textField.multiline = true;
textField.wordWrap = true;
//textField.text = urlLink;
textField.width = textField.textWidth+300;
textField.height = textField.textHeight+288;
//addChild(textField);
var request:URLRequest = new URLRequest(urlLink);
var loader:Loader = new Loader();
loader.load(request);
addChild(loader);
//marker clips are positioned with (0,0) at the given location
//current measurements of swf file w432 h288
//if i could dynamically determine the size of the loaded swf file its position would be automatically calculated
loader.y = -288 - 37;
loader.x = -8;
//marker clips are positioned with (0,0) at the given location
textField.y = -textField.height - 35;
textField.x = -10;
//currently my rectangle's size is determined by the textField size. I don't even use the textfield. I want the rectangle to be drawn using the dimensions of the swf file instead.
var rect:Rectangle = textField.getRect(this);
// get your graph paper ready, here's a "speech bubble"
background.graphics.beginFill(0x12345);
shadow.graphics.beginFill(0x000000);
for each (var g:Graphics in [ background.graphics, shadow.graphics ] ) {
g.moveTo(rect.left, rect.top);
g.lineTo(rect.right, rect.top);
g.lineTo(rect.right, rect.bottom);
g.lineTo(rect.left+15, rect.bottom);
g.lineTo(rect.left+10, rect.bottom+15);
g.lineTo(rect.left+5, rect.bottom);
g.lineTo(rect.left, rect.bottom);
g.lineTo(rect.left, rect.top);
g.endFill();
}
}
}
}
I hope you more skilled coders can help me out. I'm new to flex and as3
Edit: There is no javascript in this file. All of it is AS3.
Edit2: This is the temporary site I am testing it on http://cjbutchershop.com/temp/adtypes/mapTest.swf
You can get the size of your application by doing:
var width:int = Application.application.width;
var height:int = Application.application.height;
With regards to the text disappearing when you hover over the info bubble; you might want to reconsider your approach. Rather than loading an external swf, I have implemented info bubbles for modest maps by adding/removing child objects (like a TextField) to my marker object (which extends Sprite) in response to the appropriate mouse events.
I am new to Flex myself, but i have done something similar while trying out an example while learning.
Basically what i suggest is Open the bubble in a new popup window using the PopUpManager class on MouseOver event on the parent window (on your map).
And show the popup in a TitleWindow Component,also tap the close event on Title window component.That way you will come back to the same page.Hope this helps.
Posting code here
< ? xml version="1.0" encoding="utf-8" ? >
< mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.managers.PopUpManager;
import mx.rpc.events.ResultEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var photoFeed:ArrayCollection;
public function searchFlickr():void {
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
params.tags = srchTxtId.text;
photoService.send(params);
}
public function resultHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
public function openPanel(levent:ListEvent):void {
var panelCmpObj:panelcomp = new panelcomp();
panelCmpObj.source = levent.itemRenderer.data.content.url;
PopUpManager.addPopUp(panelCmpObj,this,true);
}
public function test():void {
Alert.show('testtest');
}
]]>
</mx:Script>
<mx:HTTPService id="photoService" url="http://api.flickr.com/services/feeds/photos_public.gne" result="resultHandler(event)"/>
<mx:HBox width="362" height="24">
<mx:TextInput id="srchTxtId"/>
<mx:Button label="Search for pics" id="srchBtnId" click="searchFlickr()"/>
</mx:HBox>
<mx:TileList id="imgTileList" dataProvider="{photoFeed}" width="100%" height="100%" itemClick="openPanel(event)">
<mx:itemRenderer>
<mx:Component>
<mx:VBox width="125" height="125"
paddingBottom="5"
paddingLeft="5"
paddingTop="5"
paddingRight="5">
<mx:Image width="75" height="75" source="{data.thumbnail.url}"/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
CODE FOR THE COMPONENT shown on PopUP
< ? xml version="1.0" encoding="utf-8" ? >
< mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
showCloseButton="true"
styleName="noPadding"
creationComplete="init();"
close="titleWindow_close(event);" >
< ![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.controls.Alert;
import mx.core.IFlexDisplayObject;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
public var source:String;
private function init():void {
PopUpManager.centerPopUp(this);
}
private function titleWindow_close(evt:CloseEvent):void {
PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
}
]] >
< /mx:Script>
< mx:Image width="379" height="261" id="imgId" source="{source}"/>
<mx:ControlBar horizontalAlign="right" width="100%">
</ mx:ControlBar>
< /mx:TitleWindow >
"So you are trying to get the application size from within the info bubble swf? Why is the info bubble in a separate swf? If you have the info bubble source code, I suggest adding it into your map application and directly instantiate the info bubble object. – elevine 2 hours ago"
I have three different type of infoBubbles (only static bubble is shown). Some of my info bubbles have moving content. I am not looking for the application size of the external swf in the bubble, i am looking for the physical size. The height and width of the external swf that is populating the bubble. If I knew the height and width, I can have the infobubble match the height and width. Right now I have the info bubble hardcoded to the size of the current info bubble; however, i will have different sizes of info bubbles swf files.

Not include component size in measure

I have a custom component that is basically a VBox with a Label and a TextField.
<mx:VBox width="50%">
<mx:Label width="100%"/>
<mx:TextField width="100%"/>
</mx:VBox>
What I want, basically, is to have two of these VBoxes layed out on a HBox and each would take exactly 50% - their children Label and TextField should just obey that.
If I set both Label and TextField's width to 100%, and the Label text doesn't fit, the default behaviour is to expands the VBox width - I don't want that to happen. The TextField should always take 100% of the width, and I'd want the Label to be explicitly set to the width of the TextField, so the text would be truncated and not expand the VBox width.
Is there a way to tell the Label to just obey the VBox (or TextField) width and not be included in the measurement of the VBox width?
Not sure if I was clear. :)
Thanks in advance.
it wasn't that easy as I thought. At the beginning I wanted to suggest maxWidth but it doesn't work correctly with label. However I just tested this:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.controls.Label;
private function onTextChanged(event:Event):void {
var currentText:String = TextInput(event.target).text;
var shortened:Boolean = false;
// adding 30 to leave some space for ...
while ( lbl.measureText(currentText).width > (lbl.width-30) ) {
currentText = currentText.substr(0,currentText.length-1);
shortened = true;
}
lbl.text = currentText + ((shortened) ? "..." : "" );
}
]]>
</mx:Script>
<mx:VBox width="50%">
<mx:Label id="lbl" width="100%" />
<mx:TextInput width="100%" change="onTextChanged(event);" />
</mx:VBox>
</mx:WindowedApplication>
It probably isn't written in a way (just attributed) you expected but it does what you need.
If this isn't a solution you could think of extending the Label in the following manner.
Crete custom Label:
radekg/MyLabel.as
package radekg {
import mx.controls.Label;
public class MyLabel extends Label {
public function MyLabel() {
super();
}
private var _myText:String;
override public function get text():String {
return _myText;
}
override public function set text(value:String):void {
if ( value != null && initialized ) {
// store the copy so the getter returns original text
_myText = value;
// shorten:
var shortened:Boolean = false;
while ( measureText(value).width > (width-30) ) {
value = value.substr(0,value.length-1);
shortened = true;
}
super.text = value + ((shortened) ? "..." : "");
}
}
}
}
And use it like that:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:controls="radekg.*">
<mx:VBox width="50%">
<controls:MyLabel width="100%" id="lbl" text="{ti.text}" />
<mx:TextInput width="100%" id="ti" />
<mx:Button label="Display label text" click="mx.controls.Alert.show(lbl.text)" />
</mx:VBox>
</mx:WindowedApplication>
This can be used simply with binding. Once you type very long text into the text input and the Label displays ... click on the button. You'll notice that text() getter returns original text.
Hope this helps.

Resources