How to clear the explicit width and height of a Group - apache-flex

I have a group that sizes to the contents it contains but to perform a transition using Tweener I have to set the width and height properties. After the animation is done how would I clear the explicit width and height properties so that the Group goes back to sizing based on it's contents?
Before:
<s:Group ><content.../></s:Group>
Code:
width = 250;
height = 250;
Tweener.addTween(this, {width:500, height:500, time:0.25, onComplete:openAnimationComplete});
After the tween the Group is effectively set to 500x500 as if it were this:
<s:Group width="500" height="500" ><content /></s:Group>
I want it to return to this:
<s:Group ><content /></s:Group>
UPDATE
Test code using solution from Flextras:
<fx:Script>
<![CDATA[
protected function button1_clickHandler(event:MouseEvent):void
{
var w:Object = myGroup.width;
var h:Object = myGroup.height;
if (myGroup.width!=300) {
myGroup.width = 300;
myGroup.height = 300;
}
else {
myGroup.width = NaN;
myGroup.height = NaN;
w = myGroup.width; // NaN
h = myGroup.height; // NaN
//myGroup.validateNow()
if (myGroup.parent is IInvalidating) {
IInvalidating(myGroup.parent).validateNow();
}
w = myGroup.width; // 600
h = myGroup.height; // 100
}
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group id="myGroup" minHeight="0" minWidth="0" clipAndEnableScrolling="true">
<s:Button width="600" height="100" label="here is a button" click="button1_clickHandler(event)"/>
</s:Group>

Set the height and width to NaN; which would effectively tell the Flex Framework "I have no idea what this value is" and will then execute the measure() event during the next time the component renders itself; causing it to update the measuredHeight and measuredWidth properties; which will in turn be used by the parent container to size the group.

Related

resize video child of VideoDisplay to the same size

i have the following code to play a video stored in the media server:
<?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="592" height="372">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.ResizeEvent;
private var ns:NetStream;
private var nc:NetConnection;
private var video:Video;
private var meta:Object;
private function ns_onMetaData(item:Object):void {
trace("meta");
meta = item;
// Resize Video object to same size as meta data.
video.width = item.width;
video.height = item.height;
// Resize UIComponent to same size as Video object.
myVid.width = video.width;
myVid.height = video.height;
}
private function fetch_rec():void {
var nsClient:Object = {};
nsClient.onMetaData = ns_onMetaData;
nc = new NetConnection();
nc.connect(null);
ns = new NetStream(nc);
ns.client = nsClient;
video = new Video();
video.attachNetStream(ns);
video.smoothing=true;
myVid.addChild(video);
ns.play("http://localhost:5080/oflaDemo/recordings/firstattempt.flv");
}
]]>
</fx:Script>
<mx:VideoDisplay id="myVid" bottom="0" width="100%" height="100%"
/*??how to make the progressbar work???*/ playheadUpdate="progBar.setProgress(myVid.playheadTime,myVid.totalTime)"/>
<s:HGroup right="10" top="7">
<mx:Button id="button4" x="498" y="250" label="Play/Reload" click="fetch_rec();"/>
<mx:Button id="button5" x="512" y="279" label="Pause" click="ns.pause()"/>
</s:HGroup>
<mx:ProgressBar id="progBar" left="10" right="10" bottom="7" height="10" label="" mode="manual"/>
</s:Group>
and i would like to know
1)how to make the video follow the resizing of the myVid VideoDisplay and does not show small inside it as it does and
2)how to make the progressbar work with the streamed video...
Thanks in advance for your help!
I can't answer for progress bar. For scaling video to video display I use Transform and Matrix, when VideoDisplay size is changed I just replace old Matrix with new scaled one. If your video will be smaller then target then it should expand.
Here are snippets of code (I skip creation, etc):
<!-- language: lang-xml -->
protected function scaleVideoToDisplay():void {
var ratio:Number;
if (video == null) {
return;
}else if (video.width == 0 || video.height == 0) {
ratio = 0.0;
}else {
ratio = Math.min(
videoDisplay.width / video.width,
videoDisplay.height / video.height);
}
video.transform.matrix = new Matrix(ratio, 0, 0, ratio);
}
<s:VideoDisplay width="100%" height="100%" resize="scaleVideoToDisplay()"/>
<!-- langugae:lang-none -->
For video creation I use:
<!-- language: lang-xml -->
video.transform = new Transform(video);
In addition to this You will probably need to scale video after creation.

Does the ScaleX scaleY makes the Width and height change?

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.

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

Adjusting Component size in flex

I have a viewstack with 3 items in it. Now my problem is that I want all these components to be of the same size. Its simply enough to do this manually but is there any other way of setting the size for all the components at once?
You can probably set the 'left/right/top/bottom' styles for that items.
There are (roughly) two big-time ways to go about this that I see right off the bat:
Basically you bind those components' width values to one variable, and their height values to another variable. Use the same two variables for all of your components. For example:
<mx:Script>
<![CDATA[
[Bindable]
private var m_nWidth:Number = 50;
[Bindable]
private var m_nHeight:Number = 50;
private function someFunc():void
{
m_nWidth = 100;
m_nHeight = 200;
// uic1, uic2, and uic3 are all now 100 x 200
}
]]>
</mx:Script>
<mx:ViewStack id="vs">
<mx:UIComponent id="uic1" width="{m_nWidth}" height="{m_nHeight}"/>
<mx:UIComponent id="uic2" width="{m_nWidth}" height="{m_nHeight}"/>
<mx:UIComponent id="uic3" width="{m_nWidth}" height="{m_nHeight}"/>
</mx:ViewStack>
You could also set percentage-style strings on their width and height attributes, making them scale with regards to the size of the ViewStack. For example:
<mx:Script>
<![CDATA[
private static const WIDTH:String = "50%";
private static const HEIGHT:String = "25%";
private function someFunc():void
{
vs.width = 200;
vs.height = 800;
// uic1, uic2, and uic3 are all now 100 x 200
}
]]>
</mx:Script>
<mx:ViewStack id="vs">
<mx:UIComponent id="uic1" width="{WIDTH}" height="{HEIGHT}"/>
<mx:UIComponent id="uic2" width="{WIDTH}" height="{HEIGHT}"/>
<mx:UIComponent id="uic3" width="{WIDTH}" height="{HEIGHT}"/>
</mx:ViewStack>
not sure if you already got the answer
but what i read was that you could set the main application to be 100% for bott height and width. for the viewstack you set it as 100% also. it should resize the children accordingly
or you can use actionscript percentHeight and percentWidth to set the property

Flex container transform matrix problems

I have a Box container that has a label element inside it. When the box is transformed using a Matrix the label element is not visible anymore. How do I make the elements visible?
<mx:Script>
<![CDATA[
private function onBoxClick(event:MouseEvent):void
{
var transformMatrix:Matrix = this.box.transform.matrix;
transformMatrix.c = Math.PI * 2 * -15 / 360;;
this.box.transform.matrix = transformMatrix;
}
]]>
</mx:Script>
<mx:HBox id="box"
x="100" y="100"
width="100" height="100"
backgroundColor="0x000000"
click="onBoxClick(event)">
<mx:Label id="textLabel" text="This is a test" color="#FFFFFF" visible="true"/>
</mx:HBox>
I'm guessing the TextField inside the Label component doesn't have the font embedded. If you plan to use .rotation or .alpha on a dynamic text you must embed the font.
You can easily test this with a regular TextField:
var t:TextField = new TextField();
t.defaultTextFormat = new TextFormat('Verdana',12,0x000000);
t.embedFonts = true;
t.rotation = 10;
t.text = 'rotated';
addChild(t);
That is assuming you have the Verdana font embedded in this example. If you comment out the 3rd line you will see the text disappear.

Resources