I am new in flex. Currently i am going to build a flex album, but I get a problem about
the render in image by spark list.
the problem is this last 2~3 thumbs can not be properly displayed, as you can see as follows:
http://www.j-rich.com/Problem
and it will look like:
http://www.j-rich.com/Problem/show.jpg
for the source code, you can right click and choose view source in the demo
Any suggestion will be appreciated, thank you very much.
Sincerely,
Yuan-Hsu Liao
Add cachePolicy="on" to your Image control in ItemRenderer. But I don't recomend to use this kind of huge images as thumbnails. Looks like Flash has some limitations in this field.
This is correct for me, my resolution is 1920*1080. I use FLEX SDK4.5.1, flashplayer 11.8.
By the way, you should better override the set data function in the ItemRenderer, and set img source in the function, like this:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
override public function set data(value:Object):void {
super.data = value;
var url:String = value as String;
img.source = url;
positionImg();
}
private function positionImg():void
{
this.ima.width = 136;
this.ima.height = 105;
this.ima.x = 0;
this.ima.y = 0;
}
]]>
</fx:Script>
<s:Group id="group" x="0" y="0" width="170" height="85">
<s:Image id="img" x="0" y="0" scaleMode="letterbox"/>
</s:Group>
</s:ItemRenderer>
ItemRenderer is recycled, so it's better to do some stuff in the set data()
Check whether ur Padding given is Correct...or else Adjust the same.
there a better way as this example
to create round corners for dynamic (addChild or addElement) created Images?
ok, here is a custom class http://santobay.blogspot.com/2010/04/rounded-corner-image-in-flex.html . save this code as com/RoundedImage.as , create new mxml file with this code
<mx:Application name="Image_mask_test"
xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="com.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:HBox id="hbox" width="100%">
<custom:RoundedImage source="images/test.jpg" width="250" height="250" cornerRadius="15"/>
</mx:HBox></mx:Application>
and compile. For create images dynamic use this code:
<fx:Script>
<![CDATA[
import com.RoundedImage;
public function createImage():void {
var newImage:RoundedImage = new RoundedImage();
newImage.source = "images/test.jpg";
newImage.cornerRadius = 20;
hbox.addChild(newImage);
}
]]>
</fx:Script>
No, you must use a mask, if you add it dynamically.
However, you could add a 'frame' on top of the image, if the background is solid, you can use this trick.
I'm experiencing a very strange behavior with a spark list with TileLayout placed inside a scroller. Basically, I want to have a title area above my list that scrolls away when the user scrolls down the list. To do this I put the title and the list inside a Group and wrapped the group inside a scroller with width and height = 100%. I also set the verticalScrollPolicy to off on the list to make sure everything scrolls together.
The problem is that if the list has the default VerticalLayout everything works fine but if you assign a TileLayout to the same list it only partially renders the items (about 30 items when testing on iPhone 4).
Here's the fully functioning code. Try it like this first, then try removing the <s:layout> part to confirm that it works well with VerticalLayout:
<?xml version="1.0" encoding="utf-8"?>
<s:View
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myAC:ArrayCollection = new ArrayCollection([
"01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"
]);
]]>
</fx:Script>
<s:Scroller width="100%" height="100%">
<s:VGroup>
<s:Label text="TITLE" width="100%" height="200" backgroundColor="#333333" color="#EEEEEE"/>
<s:List
id="list"
width="100%"
verticalScrollPolicy="off"
dataProvider="{myAC}" >
<s:layout>
<s:TileLayout
columnWidth="200"
rowHeight="200"
useVirtualLayout="true" />
</s:layout>
</s:List>
</s:VGroup>
</s:Scroller>
</s:View>
What am I doing wrong? Or is this a bug?
You need to calculate and set the height of the list. You can easily calculate it by figuring out the number of rows times the height of a row as below:
private function listHeight():Number {
// In this example you had 3 items to a row on the iPhone4 emulator
var numRows:Number = Math.ceil(myAC.length / 3);
// The height of the row (200) plus the gap between rows (6)
var rowHeight:Number = 200 + 6;
return numRows * rowHeight;
}
This is not a perfect solution, especially if you are targeting multiple screen densities (as the number of items per row will differ from device to device), but it might get you on the right track.
A better solution would be to extend the list component in an ActionScript class and add a header which you can set.
It's interesting. If you set stage.scaleMode = StageScaleMode.EXACT_FIT; all components are resized when you resize the window, BUT there is a grey stripe at the bottom of the window that is not.
What does that mean?
By the way, is it possible to take that grey line/stripe off from the window?
Try to resize this window and you'll see what happens:
<?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*"
applicationComplete="initApplication(event)" width="800" height="600" preloaderChromeColor="#FFFCFC">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private function initApplication( evt:FlexEvent):void{
stage.scaleMode = StageScaleMode.EXACT_FIT;
var timer:Timer = new Timer(3000);
timer.addEventListener( TimerEvent.TIMER, onTimer );
timer.start();
}
private function onTimer( evt:TimerEvent ):void{
this.width = 600;
trace(this.stage.stageWidth, this.stage.stageHeight);
}
]]>
</fx:Script>
<s:Button x="185" y="245" label="Button" width="112" height="61"/>
</s:WindowedApplication>
There is also a timer just for checking if the Stage's size is the same as the application window's one.
The gray stripe is the statusBar property of the WindowedApplication class. Turn it off by setting showStatusBar="false" inside the WindowedApplication tag.
That grey stripe at the bottom is the statusbar from the windows chrome, you need to set the 'systemChrome' tag to false in the app xml descriptor file to remove it or do showStatusBar="false".
I have a problem in applying the styles for scroll bar skins through actionscript.
In css we specify as
thumbOverSkin: Embed(source="assets/thumb_over.png",scaleGridLeft="4",scaleGridTop="4", scaleGridRight="5", scaleGridBottom="5");
In actionscript we specify as
setStyle("thumbOverSkin", someImageClass);
How can we specify scaleGrid properties in the above statement?
Thanks for the help in advance.
If you're using Flex 3, that someImageClass, if it's just an image, could just be assigned to a variable. Try this out, it shows two ways of setting simple skins on Flex 3 components:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
Button
{
overSkin: Embed("assets/over_button.png");
}
</mx:Style>
<mx:Script>
<![CDATA[
[Embed(source="assets/up_button.png", scaleGridLeft="15",scaleGridTop="15", scaleGridRight="25", scaleGridBottom="25")]
public static const UP_SKIN:Class;
]]>
</mx:Script>
<mx:Button id="button" click="button.setStyle('upSkin', UP_SKIN)"/>
<mx:HSlider id="sizer"
minimum="100" maximum="1000"
liveDragging="true"
change="{button.width = sizer.value;button.height = sizer.value/2}"/>
</mx:Application>
(the up_button.png was a simple red square shrunken to 40x40 for testing).
If you're using Flex 4, the Group, which extends Skin, has full 9-slice scaling baked in and you can do a lot more with them.
Hope that helps,
Lance