I am trying to determine the height of a Spark label that becomes multiline at runtime (due to width property being set), to account for text overflow.
(For a spark label named Title) I have tried:
Title.measureText(Title.text).height - this seems to return only the height of one line. (Due to differing screen-sizes and font rendering, I don't know in advance how many lines the text would overflow to...)
Title.height - this seems to return the height of the label size (before being re-adjusted at runtime for multiline text flow)
Both properties above return an unchanging value even when different text lengths/multiple lines long are filled in .text
Is there really no way to determine the exact height of an overflow Spark label?
I am admittedly not that familiar with the Flex API but after scouring the manual for quite some time, I am still unable to place this title label with the proper spacing. Any help would be appreciated.
I think resize event of Spark label will be usefull.
just try this example application This may Help You
<?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" >
<fx:Script>
<![CDATA[
public var Height:String="";
public function Resize():void
{
Height=lblLabel.height.toString();
txtText.text="Label Height: "+Height;
}
public function AddText():void
{
lblLabel.text += lblLabel.text;
}
]]>
</fx:Script>
<mx:Text id="txtText" x="46" y="44" width="200"/>
<s:Label id="lblLabel" text="Label Text " x="46" y="99" width="200" resize="Resize()"/>
<s:Button id="btnClick" label="AddText" click="AddText()" x="199" y="43"/>
</s:Application>
If I understood your question correctly, you can listen to mx.events.FlexEvent.UPDATE_COMPLETE
Related
I'm experiencing a very strange behavior with a spark list with TileLayout placed inside a scroller. Basically, I want to have a title area above my list that scrolls away when the user scrolls down the list. To do this I put the title and the list inside a Group and wrapped the group inside a scroller with width and height = 100%. I also set the verticalScrollPolicy to off on the list to make sure everything scrolls together.
The problem is that if the list has the default VerticalLayout everything works fine but if you assign a TileLayout to the same list it only partially renders the items (about 30 items when testing on iPhone 4).
Here's the fully functioning code. Try it like this first, then try removing the <s:layout> part to confirm that it works well with VerticalLayout:
<?xml version="1.0" encoding="utf-8"?>
<s:View
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.collections.ArrayCollection;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
"01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"
]);
]]>
</fx:Script>
<s:Scroller width="100%" height="100%">
<s:VGroup>
<s:Label text="TITLE" width="100%" height="200" backgroundColor="#333333" color="#EEEEEE"/>
<s:List
id="list"
width="100%"
verticalScrollPolicy="off"
dataProvider="{myAC}" >
<s:layout>
<s:TileLayout
columnWidth="200"
rowHeight="200"
useVirtualLayout="true" />
</s:layout>
</s:List>
</s:VGroup>
</s:Scroller>
</s:View>
What am I doing wrong? Or is this a bug?
You need to calculate and set the height of the list. You can easily calculate it by figuring out the number of rows times the height of a row as below:
private function listHeight():Number {
// In this example you had 3 items to a row on the iPhone4 emulator
var numRows:Number = Math.ceil(myAC.length / 3);
// The height of the row (200) plus the gap between rows (6)
var rowHeight:Number = 200 + 6;
return numRows * rowHeight;
}
This is not a perfect solution, especially if you are targeting multiple screen densities (as the number of items per row will differ from device to device), but it might get you on the right track.
A better solution would be to extend the list component in an ActionScript class and add a header which you can set.
Am working in flex 4 the sample mxml is
<?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[
protected function button1_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
trace(hgroup.width ,hgroup.height);
hgroup.scaleX = 1.5;
hgroup.scaleY = 1.5;
trace(hgroup.scaleX, hgroup.scaleY);
trace(hgroup.width ,hgroup.height);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:HGroup id="hgroup" width="85%" height="85%" clipAndEnableScrolling="true">
<s:Button click="button1_clickHandler(event)" label="Click to Scale"/>
</s:HGroup>
</s:Application>
If i debug
on a first button click the trace shows like this
870 535
1.5 1.5
870 535
on second click of button the trace shows like this
580 356.6666666666667
1.5 1.5
580 356.6666666666667
on the perpendicular clicks it shows as like the second click
my question is does the scaleX scaleY affects the width height??
please guide me i need increase in width height perpendicular
with the scaleX scaleY
Yes, scaling does affect width and height. I'm a little surprised that isn't reflected immediately in the third trace statement but my guess is it has something to do with the invalidation and redrawing of flex components. I double checked on a simple non-flex app and the properties for width and height updated immediately.
=============
Finally i got Answer the scaling will not change width height. but what the thing is i used the percent width height so it get reduced. I double checked with the static width height i does not get increased but when the width height increased the scaleX scaleY increases simultaneously.Keep this in the Mind
Thanks all for the support
by Sudharsanan
~~~~Happy Coding~~~~~
Scaling effects the width or height of the object you scaled.
The contents of hgroup ( aka myBTN )will be unchanged.
What would be the point of scaling something if it didn't get bigger or smaller
protected function button1_clickHandler(event:MouseEvent):void{
// TODO Auto-generated method stub
trace( hgroup.width ,hgroup.height);//52 22
trace( myBTN.width ,myBTN.height);//52 22
hgroup.scaleX = 1.5;
hgroup.scaleY = 1.5;
hgroup.validateNow()
trace( hgroup.scaleX, hgroup.scaleY);//1.5 1.5
trace( hgroup.width ,hgroup.height);//78 33 // notice the scaling changed the container
trace( myBTN.width ,myBTN.height);//52 22 // here is where you see the sizes unchanged
}
<mx:Canvas id="hgroup" >
<mx:Button id="myBTN" label="Click" click="button1_clickHandler(event)" />
</mx:Canvas>
And to answer HotN on why there isn't an immediate update is because this is a display object and as such will follow the uiComponent framework.
To make the changes immediately you have to call "validateNow" To update the display list instead of waiting for the next frame.
I need to set the text of a spark label and then position such label along the x axis depending on its width. Unfortunately, it seems that the width of the label does not update right away and thus the positioning will fail. I can listen to updateComplete events on the label and update its position then, but that means repositioning the label a lot more often than I would like (updateComplete fires off a lot more often than upon changing width). Any ideas on how to properly handle what would appear to be a trivial task?
Here's a code snippet that shows what I described above. If you press the button you will see 3 traces: the label width before changing its text, right after setting its text, and when the label is done updating itself. Would love to know if there's a way to get the correct width without having to listen to updateComplete events... The button and the VGroups are just there to run the example
<?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.events.FlexEvent;
protected function button1_clickHandler(event:MouseEvent):void
{
trace("label width = ", lb.width);
lb.addEventListener(FlexEvent.UPDATE_COMPLETE, lb_updateCompleteHandler);
lb.text = "hello world!";
trace("label width post change= ", lb.width);
}
protected function lb_updateCompleteHandler(event:FlexEvent):void
{
lb.removeEventListener(FlexEvent.UPDATE_COMPLETE, lb_updateCompleteHandler);
trace("label width post update complete = ", lb.width);
}
]]>
</fx:Script>
<s:VGroup>
<s:Button label="go" click="button1_clickHandler(event)"/>
<s:Label id="lb" text="h" x="10" y="10" />
</s:VGroup>
</s:Application>
The following worked for me. Simple yet works.
var l:Label = new Label();
l.text = "That'll do";
var tlm:TextLineMetrics = l.measureText( l.text);
Alert.show( tlm.width + " is what you are looking for");
VGroup is a Group with VerticalLayout. It doesn't allow to have custom positioning inside group (with x and y). To have this possibility use Group with (default) BasicLayout.
If you use a callLater(), you can "capture" variables in the current scope, but also have it execute after the change in the width has been propagated. For example:
callLater(function():void
{
trace("label width in callLater = ", lb.width);
});
UPDATE: I think I should elaborate a little more to make clear what I meant by "capturing" values. This can be done with the following simple illustration:
callLater(function(prevWidth:Number):void
{
trace("previous label width in callLater = ", prevWidth); // 8
trace("label width in callLater = ", lb.width); // 64
}, [lb.width]);
As the example demonstrates, the parameters that you pass in through the args Array (, i.e., the [lb.width] which becomes prevWidth) take the current value (ie., they pass by value), whereas, the variables you make direct reference to in the function are actually in the scope when the function gets executed (ie., a closure).
You could do this with the event listener also, but with the callLater() it's a little simpler.
looks like listening to resize events does the trick and is not quite as general as updateComplete events, so I'm calling that the "correct answer". There may be a better way to do this when you're trying to position stuff by hand due to performance optimization, although I'm not sure what it is yet.
You can call lb.validateNow() after setting text, this way you will get new width right away. But suggest you to read about components lifecycle not to have such trivial questions.
And yes, as people pointed out already, no repositioning will work with such layout.
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 am adding a flex image component to a mx:canvas component with a fairly large image. I have the horizontal and vertical scroll policies set to "on", but when I add the image to the canvas, it doesn't expand to show the whole image (the scrollbars aren't activated).
Anybody else have this issue.
The code is pretty straightforward:
<mx:Canvas id="myCanvas" minWidth="0" minHeight="0" horizontalScrollPolicy="on" verticalScrollPolicy="on">
</mx:Canvas>
and the script adding the image
var newImg:Image = new Image();
newImg.source = $value.sourceImg;
newImg.x = $value.positionX;
newImg.y = $value.positionY;
newImg.scaleX = $value.scaleX * _scaleRatio ;
newImg.scaleY = $value.scaleY * _scaleRatio;
newImg.rotation = $value.rotation;
myCanvas.addChild(newImg);
Ok, So I had to use clipCOntent = true. I had clipContent="false", I thought the meant that it would clip the image and anything outside the bounds could just be scrolled, buut it actually just clips it and doesn't offer a scroll.
It would be helpful if you posted your code, but without seeing it I would recommend setting minWidth="0" on the canvas. This is an old trick to force a re-measure of the canvas so it shows the scroll bars properly. Hope that helps.
Try using canvas.rawChildren.addChild(img) instead of canvas.addChild(img). That's worked for me before, otherwise you'll need to hook into the Flex component measuring system - but this is very seldomly necessary.
Cheers
Create a first canvas (viewCanvas) and place another canvas inside it (imageCanvas).
Set the scroll policies on the imageCanvas to 'off'. This should work, and the viewCanvas should have scrollbars. Note that no width/height are specified on the imageCanvas or image in code below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Canvas id="viewCanvas" x="95" y="65" width="169" height="159">
<mx:Canvas id="imageCanvas" x="0" y="0" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image x="0" y="0">
<mx:source>http://www.beach-holiday.cn/beach-holiday/pics/2009/09/florida-fort-lauderdale.jpg</mx:source>
</mx:Image>
</mx:Canvas>
</mx:Canvas>
</mx:Application>