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.
Related
I'm trying to hide overflow elements in the list. Example is present below.
I'd like to hide elements that do not fit inside the red container, but i dont have any idea how to do that and how to count them.
I tried use ViewChild and ViewChildren, but it did not work.
One time I had implemented a pagination for cards, and there I need to show the number of cards which fits inside the available width for handling the responsive mode. That task was quite easy comparing this as the card width was same.
I guess you can try, registering the window:resize listener and then calculate the available width and width of cards to be shown and show only which gets fits.
in my game I have a solar system with many bodies, they're all the same class/movie clip and their size is determined by their mass. When assigned a target that target becomes a child of the body. The body moves towards the target and the target is removed when reached.
This approach is essential as it means waypoints can be set and the targets can orbit the solar system: because everything around the target is moving it also needs to move to keep relative motion otherwise you'd end up in the wrong place.
The problem is having the target a long distance away makes the body's bounding box huge and the body is shrunk down to fit the required dimensions. What I need is to make the target's position not affect the body's size but I can't find the required method/property and visible = false isn't doing the trick. If anybody has a solution that's be great.
I believe includeInLayout may help you with this. visible=false will not display the object, but it's still used in the layout calculations. includeInLayout=false will remove the object from the layout calculations.
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 developing a paint board application using flash builder. User can draw some shapes objects(ellipse, circle, rectangle). I want to implement grouping/un grouping feature some like ms-word in my application. I group multiple objects by putting them inside a container(UIComponent). Now i apply resizing to container and it resize well. I am using a free object handler API to apply selection handle over the container. I want to resize and reposition all children with respect to container changed size. Every thing goes well until all children inside container are having rotation = 0. But if there is any child which is having rotation >0 and <0 things goes worse. The child resize but not in a proper manner. I stretch the parent container width and it increase the height of rotated child. Is there any way using Matrix class or something else to transform all children in same direction and same ratio respective to container?
Are you using Flash Professional? In my experience, placing objects within a symbol is the best route has been easiest to achieve this for me.
Select all the objects you want to link together (can also include existing symbols)
Right click and select 'Create Symbol'
Name the symbol what you'd like, then click okay
You can then freely transform any instance of that symbol, which retains the relationship between the objects within (including rotation).
There is a div element I have complete control over, including its contents, associated JS event handlers and style options. This div will be inserted into some web page template I don't know anything about, i.e. it may be inserted into a table cell, or into complex div-based markup, etc. I need to be able to build this div in such a way that would allow it to occupy a predictable area inside the parent elements it's being inserted into.
How many positioning schemes for do I need to support for different use cases?
Are there any restrictions on the web page templates I'd better set so that my div construction subroutine doesn't turn into an unmaintainable mess?
What would be more natural, expanding the div to take 100% of available area, or resizing to the given width and height?
Personally, I would simply set it to fill the parent container (which can be a task in itself in CSS2).
This way, whomever is controlling the template can decide the eventual size of your div by influencing the parent container. If they want it to fill the container, they just leave is as-is - if they want to restrict it or position it in some way, they can place it in a block element and dictate the size/shape/positioning of the block.