<s:SkinnableContainer styleName="top" width="1458" height="131" >
<s:VGroup left="50" verticalAlign="middle" height="131" styleName="profile_info">
<s:Image source="#Embed(source='images/logo.png')"/>
</s:VGroup>
</s:SkinnableContainer>
in my application I have this:
<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"
width="800" height="600" addedToStage="stretchHandler()">
private function stretchHandler():void{
stage.scaleMode = StageScaleMode.SHOW_ALL;
stage.align = StageAlign.TOP;
this.width = stage.stageWidth;
this.height = stage.stageHeight;
}
but the SkinnableContainer and the image inside doesn't scale, how to scale them?
To have your content scale to it's container you must set height and width as a percentage EG:
<s:SkinnableContainer styleName="top" width="100%" height="100%"/>
This would make your container always be the same size of its parent. However content of your container would still follow its own sizing settings.
Layout settings are also important, in a Group two object set to 100% would overlap each other and which ever is higher in the z order will be on top. However in a VGroup the two items at 100%/100% would each take 50% of the height and 100% width.
Note 1: Spark Image acts like a container arround the source image, while "the container" will scale to the parent container, the source image will follow slightly different rules, you have to use Image.fillMode and Image.scaleMode to control it (I recommend reading the docs on this)
Note 2: All UIComponents have min/max hieght/width properties as well as the standard size props
Try this,
All container width and height should be percentage(%) based and Image aswell also for image need to give scaleMode="stretch" fillMode="scale".
<s:SkinnableContainer left="300" styleName="top" width="90%" height="40%">
<s:Image source="#Embed(source='images/logo.png')" width="100%" height="100%" scaleMode="stretch" fillMode="scale"/>
</s:SkinnableContainer>
This will work.
Related
My group component lying inside main application, can change height from 340 to 300 without spoiling the layout. So I set minHeight to 300.
Now if application is resized below the height of 700, this group start spoiling the layout (as it stop reducing in the size as expected).
As a solution I added Scroller control around the group so that scrollbars appear after size goes lower than the scroller control continues to reduce in size. The code for the scroller control is as below:
<s:Scroller id="scrlAnswer" top="220"
bottom="55" x="0" width="600">
<s:Group id="grpAnswers" x="0" y="0" minHeight="300" height="340" width="600">
But the problem is Scroller is not resizing with application.
So my question is is there some other parameter I need to set to make scroller change its size? Is there any other control in Flex for this situation?
=== UPDATE ====
Added resize event to the parent of the scroller control, there manually changed the size of the scroller. Even though the size changed in code but acutual size on screen do not seem to change.
protected function bcMain_resizeHandler(event:ResizeEvent):void
{
scrlAnswer.height = event.target.height* 338/609;
trace("Main:"+event.target.height);
trace("Scroller: "+scrlAnswer.height);
}
Finally figured out the issue. I need to declare the height of the internal group to 100% not a fixed number.
<s:Group id="grpAnswers" x="0" y="0" height="100%" width="600">
The resize event on the scroller is not required.
I have an HGroup that has 7 child Groups in it. Each of the first 6 child Groups has width/height set to specific values. I'd like the 7th element to fill the remaining width of the HGroup so I've given it a value of 100%. This works but only when the app starts up. After the HGroup in question has it's width initially set, it won't resize. If I listen for the ResizeEvent from it and trace out the width, when it goes larger than the original width, it will trace the width out and it does go up (though the content doesn't resize), but when I resize to below the original width, the ResizeEvent stop firing.
Every parent of the HGroup has it's width set to 100% too. None are explicitly set to a number. I feel like I have other components that do this.
I have "hacked" it by taking the last element out of the group and then setting it's right, top, bottom, and binding its left side to the last element in the HGroup's x plus width properties. This works... but I feel like I shouldn't have to do it that way.
<WindowedApplication>
<Group width="100%">
<Group width="100%">
<Group width="100%">
<Group width="200" />
<VGroup width="100%">
<Group width="100%">
<HGroup width="100%">
<Button width="60" />
<Button width="60" />
<Button width="60" />
<Button width="60" />
<Button width="60" />
<ButtonWithProblem width="100%" />
</HGroup>
</Group>
<Group width="100%" />
</VGroup>
<VGroup width="270" />
</Group>
</Group>
</Group>
</WindowedApplication>
The problem is with ButtonWithProblem, it's width gets set when the app loads and whatever it's width is set to at that point seems to be it's new minimum width and if i resize teh screen smaller it just starts croppring rather than shrinking. If I resize the app larger, then it also won't stretch to fill the HGroup size.
So I've hacked it by taking ButtonWithProblem out of the HGroup and have it as a sibling to HGroup and set it's top, right and bottom to 5 and then binding the left property to the width of the HGroup (which works, just seems hackish)
I have a multi-line Label, with user-defined text, that must fit inside some given dimensions.
<s:HGroup width="400" height="250">
<s:Label id="myText" width="100%"/>
</s:HGroup>
I would like to adjust the font size of myText at runtime, depending on the content of myText.text. What is the best way to do this?
Unfortunately there is no API call or even a straightforward way of doing this. The only way to do this is to iterate over font sizes and check if the text fits within bounds.
My component has lots of inner components.
When i resize the container component (panel), i want all inner components resize with same ratio. Which function should i use?
Set the width and height to a percentage instead of a hard-coded value.
<s:Panel title="Flexible Container" backgroundColor="0x00FF00"
width="75%" height="75%">
<s:TextArea id="mTA" height="100%" width="100%"
text="Text Area Resize" />
</s:Panel>
I have an Image object that gets resized to the containers size when the image loads.
The images that it will load are dynamic in size so after resize I end up with a sliver of the image object's white background showing.
How can I make the Image object not have a white background and be transparent.
Parts of the PNG's have transparent parts but show up as white due to the white background of the object is it loaded into.
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >
<mx:Script>
<![CDATA[
public function set source( val:String ):void{
this.img.source = val;
}
private function onLoad( e:Event ):void{
// resize image on load to fit
var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
this.img.scaleX = scale;
this.img.scaleY = scale;
}
]]>
</mx:Script>
<!-- how do I make this image object have a transparent background -->
<mx:Image id="img" complete="onLoad(event)" />
</mx:Panel>
[EDIT]
In the screen shot visible are 2 of the objects made from the code I posted above.
As you can see there is a white border.
and here is one of the PNGs
This png has a transparent 1 inch border at 350#PPI this is 72 PPI So a tad smaller
You can not see the the border here obviously but if you drag it to your desktop and open in photoshop you will see it
[EDIT]
As SuperSaiyen suggested I added backgroundColor="#000000" to the panel and I got this result. As you can see I got a black border now.
So i went ahead and added backgroundAlpha="0" along with backgroundColor="#000000" to the panel and got this.
So now I almost have it but there is still that bluish color around it. Its not quite 100% transparent yet.
I really have no idea why the panel background would change the image tag.
I guess some kind of inheritance from the parent is going on.
Still need to get rid of the blue.
Instead of setting the scale, try this:
<mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />
I attempted to recreate your issue, and even with the scale I did not see the white borders.
I have a black border because that is the background of the panel...
<mx:Panel id="thePanel" headerHeight="20"
horizontalAlign="center" verticalAlign="middle"
height="200" width="150"
backgroundColor="#000000">
<!-- how do I make this image object have a transparent background -->
<mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />
</mx:Panel>
Edit:
So the background you're seeing is the background of the box behind the panel, not the image (see opaqueBackground prop on panel). What you want then is to set the background of the panel to be the same color as the borders of the panel. Is panel the right container to use? How about a HBox with roudned corners?
<mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
horizontalAlign="center" verticalAlign="middle"
height="200" width="150"
paddingBottom="5" paddingLeft="5" paddingTop="5">
<mx:Label text="Bind to title String" />
<mx:Image id="img" width="100%" height="100%"/>
</mx:VBox>