I have a simple flash component that is just a rectangle with a border around it. This component represents my chat box. I then create 20 TextFields that will be overlapped on the component to display text.
The odd thing that is happening is that my components height is originally 200, but with each textfield i add as a child to the component the height data of the component increases by the height of the textfield.
Let me clarify that the height of the object in pixels is not changing, but simply the this.height of the component. I can make a static const that I can use for the original height of the component, but I find this behavior strange.
Could anyone comment on why this is happening?
Thanks!
This is expected behavior. The height property of a parent will include all of its children, same with the width property.
Any graphics drawn inside of this parent will not change, you would have to update this manually by creating a nested clip and adjusting its size.
Related
I am trying to dynamically change the width of a Scrollpane so its width matches the size of its child element. The Scrollpane is within a Window. The problem is that I don't know the width of the child until after the ScrollPane is added to the Window and .width() is already called.
Is there a way to change the ScrollPane's width after it has been added?
P.S. scrollPane.setWidth() does not work.
I am working with panel sliding effects and stuck with situation like,
I have panel of width 150px with some content inside it, at some point if I reduce it's size by 70px for which I need to add sliding effect to that panel.
I wrote a code for this as,
VerticalPanel myPanel=new VerticalPanel();
myPanel.setWidth(150+"px");
// here I do some operations
myPanel.addStyleName("animated slideOutLeft");
myPanel.setWidth(80+"px");
when I reduce it's size it should automatically inherit "animated slideOutLeft" style with the inner content shown as it is. But in my case, "slideOutLeft" gets applied but inner contents doesn't remain visible and myPanel slidesOut.
It should slide out partially i.e. from 150px to 80px should be visible which is not currently taking place, instead it is sliding out full.
What is wrong in this.? How can I solve this issue.?
you can refer an example in https://agileui.com/demo/monarch/demo/admin-angular/index.html#/ where I want that same logoSliding at upper left corner effect which slidesIn and slidesOut.
When you reduce the width of a panel, children elements within that panel will reflow within the new width.
The example you point to hides some children elements when the panel's width is reduced.
So your code will work if the panel always contained children that fit within a smaller width. Alternatively, you can try setting overflow: hidden on your panel and settings children's width explicitly.
Long time ago I asked something similar. I would suggest you this topic in which you could find a possible solution combining percentage width and px min-width.
I'm trying to simulate window behavior in AS3, so I have a sprite I named "container" which contains children. One of them is a TextField, others are Sprites.
When I add the textfield in my container I'm glad to see this one's width is re-calculated. So, if my textField width is set to 50px, my container too. So my window simulation is working well.
But, when I add the others sprites, the width of my container does not change, so my window simulation is no more working well... Why is that please ? I can't find no explanation.
Thanks a lot.
This should not be a problem, as the width and height are always calculated based on the children position and sizes. This is taken from the ActionScript documentation:
DisplayObject > width:
Indicates the width of the display object, in pixels. The width is
calculated based on the bounds of the content of the display object.
When you set the width property, the scaleX property is adjusted
accordingly
There must be another problem, so maybe try posting your code, or reducing the problem down to a simple example.
I am having a movieclip container that needs change in it's dimensions. However it contains a bitmap, that needs to be preserved. So that it remains intact no matter how i change the dimension of it's container.
I know, that one way is to change the scale of "bitmap" accordingly. So say, container goes twice in width, then bitmap can be adjusted to scale = 0.5 ( compensating thus).
However i am doubtful, if this method would be visibly good for the bitmap, in case the dimension changes are in decimals. Like scale = 1.2345 etc
Any other good way ?
V.
You could try overriding the scaleX/scaleY setters and getters of your container, so that a change to them results in changing everything inside the container except your bitmap.
That would work, but is a bit strange. Are you sure that you can not organize your objects in a different manner?
If you have items in your container that should not be affected by the containers dimensions, then those items simply do not belong there. It would probably be a good idea to split up the structure.
You could have a Sprite that holds your Bitmap, and then apply your "container" as a mask to that, so that only a part as big as the "container" is visible, or something along those lines.
Apply a matrix to the BitmapData, which will resample it.
I am trying to create a Custom Flex Component using the Flex Component framework:
http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.
All good components allow you to define their dimensions using percentage values using:
MXML:
TextInput width="100%"
or
Actionscript at runtime:
textinp.percentWidth = 100;
My question is how do you implement percentage width/height in the measure() method of your custom component? More specifically, these percentages are converted to pixels values at some stage, how is this done?
The way Flex layouting works is by letting each component lay out its children to a size specified by the parent. "Children" does include the usual children - getChildren(), numChildren - and also those components which makes up borders, handles, etc., which are called "chrome" and are part of getRawChildren().
The Flex framework now does two loops over all components (which are actually part of the display tree). The first is bottom up (deepest nested elements first) and call the measure() method. It should calculate how much space (width/height) the component would take if it can has as much space as it wants, no limits (think: scrollbars) and put it into the measuredWidth and measuredHeight properties. Secondly, it calculates how much space it wants to have as an absolute minimum, put into measuredMinHeight / measuredMinWidth. To calculate this, border thickness, chrome and regular children are asked about their sizes using getExplicitOrMeasuredHeight()/Width(), and added together. That's why it's depth-first.
The second loop is to do the actual layouting. This starts at the top of the tree, and updateDisplayList is called, with x/y parameters telling the component how much size it actually does have. Based on this information the component will tell its direct children where they should be (relative to their parents) and how big they should be - child.move(x,y) and child.setActualSize(w,h)
So it's actually the parent container who takes relative sizes into account. Your component states it's ideal (minimum size so that everything can be displayed) and minimum sizes in measure() and has to deal with whatever it gets in its updateDisplayList(). The parent component takes the available space it has, makes sure that each component gets it's minimum size and will then distribute the rest to all components. In this phase, it will look at the percentWidth/Height properties of its children.
So if you want to put your component in a standard Flex container like HBox, you don't need to do anything special for percentage sizes to work.