Problem with mx:Tile and mx:Image - Possible Bug

[webninja]

Hi Everyone...

I have run accross some odd behavior when using the Tile container with the Image class and I think this is a bug in the mx:Image class. I tested this by starting with the Tile sample (which lays out 9 buttons) and it worked fine. I then added code to resize the buttons, both width and height, and it worked fine.

I then replaced the Buttons with Images. The Image is set to preserve aspect ratio. When I change the height of the image, the tile container knows that the height changed but it does not seem to know that the width changed.

I suppose I could manually set the width parameter, but I'm not sure how to do that. I have to figure out how to assign the height to a var, then do a little math to caculate the width to keep the aspect ratio correct. Still, it seems that the mx:Image should handle this.

Am I missing something, or is this really a bug?

Test code here:


<?xml version="1.0"?>
<!-- Simple example to demonstrate the Tile layout -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">

<mx:Panel title="Tile Panel">

<mx:HSlider value="180" tickInterval="10" allowTrackClick="true" dataTipPlacement="bottom" width="100%" height="20"
explicitMaxHeight="20" x="0" y="0" minimum="50" maximum="180" snapInterval="10" id="hsldThumbs"/>

<mx:Tile paddingBottom="10" borderStyle="inset" verticalGap="15" id="myFlow"
paddingLeft="10" backgroundColor="#FFFFCC" paddingTop="10" paddingRight="10"
horizontalGap="10" direction="horizontal">

<mx:Image id="tn1" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_1_0.jpg"/>
<mx:Image id="tn2" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_2_0.jpg"/>
<mx:Image id="tn3" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_6_0.jpg"/>
<mx:Image id="tn4" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_10_0.jpg"/>
<mx:Image id="tn5" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_1_0.jpg"/>
<mx:Image id="tn6" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_2_0.jpg"/>
<mx:Image id="tn7" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_6_0.jpg"/>
<mx:Image id="tn8" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_10_0.jpg"/>
<mx:Image id="tn9" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_1_0.jpg"/>
<mx:Image id="tn10" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_2_0.jpg"/>
<mx:Image id="tn11" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_6_0.jpg"/>
<mx:Image id="tn12" scaleContent="true" maintainAspectRatio="true" height="{hsldThumbs.value}" source="c:\zanalyzer\test-thumbnails\TSRExport\tsr_export_10_0.jpg"/>
</mx:Tile>
</mx:Panel>
</mx:Application>

[hangalot]

ok i see where you are coming from.
changing one image to look like this

<mx:Image id="tn1" scaleContent="true" maintainAspectRatio="true" width="{hsldThumbs.value}" height="{hsldThumbs.value}" source="closeImage.png"/>

solves the issue. i will post a bug about this however today, as i think if aspect ratio is set to true i should be allowed to either set the width or the height and it should work

[webninja]

ok i see where you are coming from.
changing one image to look like this

<mx:Image id="tn1" scaleContent="true" maintainAspectRatio="true" width="{hsldThumbs.value}" height="{hsldThumbs.value}" source="closeImage.png"/>

solves the issue. i will post a bug about this however today, as i think if aspect ratio is set to true i should be allowed to either set the width or the height and it should work

I tried that and it does solve the issue, if the image is square. My images are rectuangular, so I end up with squished images :(

The plus side is that my images all have the same aspect ratio, so I should be able to caculate the width relative to the new height and set it manually. In concept, I need to assign the result of the slider setting to a varible, and then multiply by the aspect ratio to get the other dimension, then use those varibale to set the properties in the image class.

What's eluding me is the syntax for that. I think I need to use the mx:script tag, I'm working through issues of scope and such. If it's easy I would apprciate a suggestion, but I don't want to waste your time either. You have been a great help and I appreciate it!

[hangalot]

yes i used a square image.
what you should do is bind to a getter for the moment and write your own logic.

[hangalot]

a code example would help. this is something simmiliar but not the same, illustrtaing a viewstack binding to a getter

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
xmlns:view="org.lennel.blog.example1.view.*"
>
<mx:Script>
<![CDATA[
private var __displayIndex:int = 0;
private var __screen2IsCreated:Boolean = false;
[Bindable (ChangeEvent='updateView')]
private function get displayIndex():int
{
return __displayIndex;
}
private function set displayIndex(v:int):void
{
var topIndexInViewStack:int = __vs.childDescriptors.length -1;
if(v <= topIndexInViewStack && v >= 0)
{
__displayIndex = v;
dispatchEvent(new Event("updateView"));
}
}
private function prevScreen():void
{
displayIndex--;
}
private function nextScreen():void
{
if(!__screen2IsCreated)
{
createComponentFromDescriptor(__screen2.descriptor ,true);
}
displayIndex++;
}
]]>
</mx:Script>
<mx:HBox>
<mx:Button label="previous screen" click="prevScreen()"/>
<mx:Button label="next screen" click="nextScreen()"/>
</mx:HBox>
<mx:Label width="60%" height="50" text="The screens are being toggled via a viewstack, while each screen itself is a state implementation. one in AS one in mxml."/>
<mx:ViewStack id="__vs" selectedIndex="{displayIndex}">
<view:MyComponent id="__screen1"/>
<view:UsesExternalHelper id="__screen2" creationPolicy="none"/>
</mx:ViewStack>
</mx:Application>




there is some goodies in there like creationpolicy as well, but specifically look at how i bind to a getter including the meta tag and changeEvent

if things get hairy drop me a msg, and i can help you a bit more.

[hangalot]

this is not a bug. you have to use binding to solve the issue or set bot the width and height. a bit stoopid imp.

[webninja]

this is not a bug. you have to use binding to solve the issue or set bot the width and height. a bit stoopid imp.

Thanks for the followup. What do you mean by "binding" ??

[webninja]

Thanks for the followup. What do you mean by "binding" ??

DUH! Never mind, I got it.

[webninja]

Wow, that was a pain in the butt, but I got it working and it's a totally cool feature! For anyone who is interested, here is the magic code snippit. Don't forget to call the function that enables the listener in your Application tag up top (like I did at first).

I really think they should make the maintainAspectRaion() method handle this for us, but it's their product :(

<mx:Canvas width="100%" height="100%" backgroundColor="0xEEEEEE" >
<mx:Button id="btnThumbsDetach" label="Detach" x="0" y="0" width="60" height="20" toolTip="Detach the thumbnail images to a seperate window" />

<mx:Label text="Image Size" x="80" y="0" height="20" explicitMaxHeight="20" width="80" toolTip="The slider to the right adjusts the thumbnail image size" />

<mx:HSlider value="180" tickInterval="5" allowTrackClick="true" showDataTip="false" width="100%" height="20"
explicitMaxHeight="20" x="150" y="0" minimum="50" maximum="180" snapInterval="5" id="hsldThumbs"
liveDragging="true" toolTip="Adjust the size of the thumbnail images" />

<mx:Tile backgroundColor="0xEEEEEE" x="0" y="20" height="100%" direction="vertical" horizontalGap="1" verticalGap="1" width="100%">

<mx:Script>
<![CDATA[
public function createImgListener():void
{
hsldThumbs.addEventListener("change", controlVal);
}

private var _imgWidth:int = 240;
private var _imgHeight:int = 180;
// private var _hslideVal:int;

[Bindable (ChangeEvent='updateTnImageSize')]
private function get imgWidth():int
{
return _imgWidth;
}

[Bindable (ChangeEvent='updateTnImageSize')]
private function get imgHeight():int
{
return _imgHeight;
}

public function controlVal(e:Event):void
{
var _tmp:int = hsldThumbs.value;

// Caculate dimensions necessary to maintain correct aspect ratio
_imgHeight = _tmp;
_imgWidth = _tmp * 1.333;

dispatchEvent(new Event("updateTnImageSize"));
}
]]>
</mx:Script>

<mx:Image id="tn1" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb1.jpg"/>
<mx:Image id="tn2" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb2.jpg"/>
<mx:Image id="tn3" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb3.jpg"/>
<mx:Image id="tn4" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb4.jpg"/>

<mx:Image id="tn5" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb1.jpg"/>
<mx:Image id="tn6" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb2.jpg"/>
<mx:Image id="tn7" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb3.jpg"/>
<mx:Image id="tn8" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb4.jpg"/>

<mx:Image id="tn9" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb1.jpg"/>
<mx:Image id="tn10" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb2.jpg"/>
<mx:Image id="tn11" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb3.jpg"/>
<mx:Image id="tn12" scaleContent="true" height="{imgHeight}" width="{imgWidth}" source="./images/thumb4.jpg"/>
</mx:Tile>
</mx:Canvas>

[webninja]

<sarcasm>
And I see from my last post that it only took about 3 hours!
</sarcasm>