Flex Examples
The following example shows how you can create a simple, custom item renderer to display thumbnails in a Spark List control in Flex 4 by setting the itemRenderer property.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:List id="lst" itemRenderer="skins.CustomItemRenderer" width="{lst.height}" horizontalCenter="0" verticalCenter="0" useVirtualLayout="false"> <s:layout> <s:VerticalLayout gap="0" requestedRowCount="3" horizontalAlign="justify" /> </s:layout> <s:dataProvider> <s:ArrayList> <fx:Object name="Adobe Illustrator" src="@Embed('assets/ai_appicon-tn.gif')" /> <fx:Object name="Adobe AIR" src="@Embed('assets/air_appicon-tn.gif')" /> <fx:Object name="ColdFusion" src="@Embed('assets/cf_appicon-tn.gif')" /> <fx:Object name="Dreamweaver" src="@Embed('assets/dw_appicon-tn.gif')" /> <fx:Object name="Flash CS4" src="@Embed('assets/fl_appicon-tn.gif')" /> <fx:Object name="Fireworks" src="@Embed('assets/fw_appicon-tn.gif')" /> </s:ArrayList> </s:dataProvider> </s:List> </s:Application>
And the custom item renderer, skins/CustomItemRenderer.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/29/displaying-images-in-a-spark-list-control-using-a-custom-item-renderer-in-flex-4/ --> <s:ItemRenderer name="CustomItemRenderer" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" focusEnabled="false"> <s:states> <s:State name="normal" /> <s:State name="hovered" /> <s:State name="selected" /> <s:State name="normalAndShowsCaret" /> <s:State name="hoveredAndShowsCaret" /> <s:State name="selectedAndShowsCaret" /> </s:states> <s:BitmapImage source="{data.src}" /> <s:Rect left="0" right="0" top="0" bottom="0"> <s:fill> <s:SolidColor color="black" alpha="0" alpha.hovered="0.4" alpha.selected="0.4" alpha.selectedAndShowsCaret="0.4" /> </s:fill> </s:Rect> <s:Label color="white" maxDisplayedLines="1" backgroundAlpha="0.3" backgroundColor="black" width="100%" bottom="0" paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" includeIn="hovered,hoveredAndShowsCaret,selected,selectedAndShowsCaret"> <s:text>{data.name}</s:text> </s:Label> </s:ItemRenderer>
View source is enabled in the following example.
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
hi, i have some problems to use your examples:
1. you use some tags, which are not supported in Flex SDK do you referencing for example Label or text, i can not find this tags under the namespace prefix s or die property useVirtualLayout is also not available in this build
2. Data-Bindung doesn´t work
warning: unable to bind to property ‘name’ on class ‘Object’ (class is not an IEventDispatcher)
warning: unable to bind to property ‘src’ on class ‘Object’ (class is not an IEventDispatcher)
this points are not working with the stable build: 4.0.0.6898
so could you please explain how is your example work ?
greetings roland
@Roland,
You need to download a recent Flex 4 SDK build. You’re using build 6898, which was released on Thu May 14, 2009. There have been quite a few major API changes since that point (naturally), and I believe I was using build 4.0.0.10640+/-. So to run the example you’ll need to download a recent nightly build of the Flex 4 SDK.
As for the binding warnings… you’ll probably still get those using the latest Flex SDK as well, but the application still works.
Peter
ok, i did this,
i used the nightly build, copied the netmon.swc file into the frameworks/libs directory and tried debugging. i got this error.
>VerifyError: Error #1014: Klasse IVisualElement wurde nicht gefunden.
I am a fan of you but it is very hart to learn from your examples when they are not working for different reasons.
I have to spend a lot of time for searching why the examples not work, so this is a very ineffective way for me.
you do a great work, keep on going this way.
@Roland,
I’ve never seen that error myself (but then again I’m using a recent internal build of Flash Builder 4 with a very recent nightly version of the Flex 4 SDK). I believe others have been seeing this error, but I was never able to reproduce it. For more information see the following forum thread: http://forums.adobe.com/thread/487444
Peter
Hi jdesko had a solution that worked for me.
Its in the forum that Peter suggested.
http://forums.adobe.com/thread/487444
“In the Project properties / Flex Build Path / Library Path / under the SDK I moved framework.swc up to the top of the .swc list (I don’t know if the top or first in the list was necessary)”
That fixed it form me.
Hi, How i use this example to make event PopUp TitleWindow on click image and display large image in TitleWindow
Thank you
bOynOiz
Peter, this site is such a great reference. Just installed the release SDK into Flex Builder 3 and have been happily running and learning ’til I hit this one. Obviously a lot of the extended IDE features not working – don’t really care right now – but this example just draws the progress bar and the a blank page. Keep wondering if it’s a namespace issue, will keep looking and report if I can.
Are you by chance running 4 under FB3 and have any tips?
@Greg,
My only Flex 4+Flex Builder 3 tip is to stop it and download the Flash Builder 4 Premium trial immediately. It rocks!
As for the example, the s:BitmapImage class was changed at some point and it currently only supports embedded assets. I updated the above example, but I tested it locally and it worked for me.
Peter