FlexStore Revisited: Building an Animated Spark Layout

Six years ago, I wrote the FlexStore sample application for Flex 1.0 (code name Royale at the time). The original version is still running here and shows the progress we have made in six years! Two years later, I rewrote the application for Flex 2. One major difference in the Flex 2 version was that the product Tile List was animated to visually represent the items being filtered out or filtered back in. The animations were helpful, but I was never too happy with the code: the layout animation logic was tightly coupled to the container logic and therefore wasn’t very reusable.

In Flex 4, the new Spark component architecture cleanly separates containers from their layouts: You declare a container and plug a layout into it. You can use existing Layout classes (VerticalLayout, HorizontalLayout, TileLayout, LayoutBase), or create your own custom layout classes. So, I thought it would be nice to revisit the AnimatedList component I had written for the FlexStore 2 and take advantage of this new architecture. I created a custom layout class called “FilteredTileLayout” that you can plug in Flex 4 list classes. i.e. List or DataGroup.

<s:DataGroup dataProvider="{items}" itemRenderer="renderers.PhoneRenderer" top="50" left="0" right="0" horizontalCenter="0">
	<s:layout>
		<layouts:FilteredTileLayout id="filterLayout" filteredItems="{filteredItems}" />
	</s:layout>
</s:DataGroup>

The application also provides a simple example of the new two-way data binding feature in Flex 4:

<s:HSlider id="priceSlider" minimum="0" maximum="1000" snapInterval="100" value="@{_maxPrice}" change="selectionChange()"/>
<s:CheckBox label="Camera" selected="@{_camera}" change="selectionChange()"/>
<s:CheckBox label="Video" selected="@{_video}" change="selectionChange()"/>
<s:CheckBox label="Triband" selected="@{_triband}" change="selectionChange()"/>

Here is the running application. The phones are old, but the code is fresh.

More Information

You can view the complete source code for the application here.

You can download the source code here.

For more information on Spark layouts, read Evtim Georgiev article on Devnet:
Spark layouts with Flex 4 beta.

  • Said

    Thank for your nice work, I see that you love your Job,
    I am yonger in Adobe, and expert in sap. I am learning from you.

    Good Luck
    Said

  • Great example.

    Quick note: if you double-click a checkbox, the items stay hidden and the layout doesn’t change.

  • Djam

    FlexStore v2 is one of the reasons I started paying attention to Flex. It was a game changer at that time. We are at v4, and it still looks cool, love the separation in the new version… Should see the performance for bigger data sets (performance was what everyone was complaining about when trying to convert it to the real store).

  • Chanuwan

    I will develop Flex Store with RUBY from sample application.
    http://www.adobe.com/devnet/flex/samples/flex_store/

    I am building a shopping cart, i dont know what function or script
    should define to button for adding products to cart.
    I have a problem data transfer shopping cart to RUBY file.

    Best Regards,

  • laplaze

    Bonjour Christophe,

    Ayant visionné tes différentes videos techniques sur Adobe TV, et consultant régulièrement ton blog technique, je me permets de te contacter, car je souhaiterais t’envoyer un mail, afin de te faire part de mon analyse argumentées concernant :
    1) la contradiction entre
    – les succès des RIAs Adobe en entreprise
    – l’hostilité manifeste d’une partie de la blogosphère (une forme de divorce) contre flash

    Je pense que l’analyse ( notamment le regard extérieur) peut t’intéresser
    Je précise que je suis un fan de l’éco-système d’Adobe (Flash/Flex/Air/LiveCycle/Catalyst..)

    Très cordialement

    Merci de me répondre

    A propos de moi :
    ———————-
    44 ans
    – Frenchie de Paris
    – entrepreneur récidiviste
    http://archives.lesechos.fr/archives/2001/LesEchos/18411-570-ECH.htm
    – DESS d’informatique, DESS de Gestion, License de Sociologie
    – Consultant certifié flex/air, en cours de certification LiveCycle ES2 (training)

  • This sounds very intresting, Still learning Adobe at the moment, but there is so much more potiental. Great Blog!

  • Jesus Alvarez

    I AM STUDYING THE POSSIBILITY OF TAKING AS TOOL OF DEVELOPMENT FLEX 3 OR FLASH BUILDER. YOU HAVE EXCELLENT EXAMPLES ARE YOUR SALES APPLICATIONS AND FLEXSTORE. DOWNLOAD both that not only can I run them by that not are the “Lib” directory…. YOU COULD SEND ME INFORMATION…. Thank you… SORRY FOR MY ENGLISH. THANKS AGAIN…

  • Zero

    Hi Christophe,

    Thanks for your example, it’s very nice. Do you have the flexstore in flex 3? It would be very helpful to my project.

    Thanks,

    Zero

  • anon

    While this is a nice example, it does not work at all with the concepts of virtual layouts and keyboard navigation in filtered list. Any way to extend this to support that ?

  • @anon – I just wrote a post that describes how to create a virtual layout (that also supports keyboard navigation in List) here:
    http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/

    It shouldn’t be too hard to modify FilteredTileLayout to add this functionality.

  • Private Lessons: EXACT is the BEST EFFICIENCY GRANTS … BogaziciDers.com, Turkey’s first private lessons classifieds site that is not. 5 years experience and extensive private lessons consisting only Bogazici residents with their teaching staff in private tutoring has proved challenging.
    A large and experienced team of educators …
    Most of Turkey’s most prestigious private tuition teachers received training in high school and all of them or is a student of Bogazici University Graduates. Our team of educators with extensive private tutoring, you can easily find the teacher you are looking for private tutoring in the profile.
    24 Hours Counseling and Guidance Support for families
    Private Lessons: ASSISTANCE GRANTS ANINDA student’s family is informed immediately. Private lesson instructors, provides support to families 24 hours a FREE guide. That may occur between families and teachers for private lessons are the responsibility BogaziciDers’in problems. In such cases, as soon as possible BogaziciDers is engaged consultants and provide a reliable special course continuity.
    Extensive teacher-Search Engine …
    BogaziciDers Turkey’s most sophisticated private lessons teacher “has a search engine. Thanks to the search system educators, to free time, his private lesson, section, known languages, giving private lessons where the age and gender, private tutoring experience, age range, and training video depending on whether you can browse.

    Special computer programs course PHP JAVA, ASP … BogaziciDers.com can be found at

  • Ourian

    Dear Christophe,
    There is a little bug in fadeInTiles function. It’s just a bad copy/past from moveTiles function… You have moveTiles.addListener() in it, instead of fadeInTiles .addListener() . This prevents the last call of fadeInTilesEnd and the _target.autoLayout is not reset to true. (=> updateDisplayList not called anymore).

    Thank for your nice work ! This is my poor contribution (with my poor english) in appreciation of your dedication. ;-)

  • kpo

    I think that this is one of the coolest thing. Thank you for sharing your knowledge to us.

  • andre

    please help me…i’m going crazy ..i can’t drag and drop the itemrenderd in other drag group or data grid…..( flex 4 relised) have same right way to give me?? or it’s a bug of flex 4 relise??

  • andre

    it’s not supported…..use s:list ( this is the aswer of bug.adobe.com)..thank again for share your code ..see you…

  • Pingback: FlexStore Revisited with i18n | GridLinked to RUX()

  • The FlexStore is a classic application. Thanks for upgrading the Phone catalog to Flex4. I recently modified your application to provide i18n support for French, Spanish, and Chinese: Flex Store Revisited (with i18n). Those changes were made to demonstrate a new mini-framework for i18n / l10n called: l10nInjection. You can see these

  • Nice demo Christophe. The price slider is great. A very neat way of implementing search-by-value. My only concern with Flex is that so many people are now using iPhones and now the iPad. Unless Apple do an about-face and start supporting Flash it could leave a lot of users in the dark.

  • Charlie Kelly

    Where is the source code for the Flex4 version of FlexStore?

    Thanks

    Charlie

  • Pingback: The good times keep coming: general musings of leonard()

  • thank you very good post news

  • Tolis

    Thanks for sharing this great layout!
    There is a problem though with the Scroller. When I close my datagroup in a Scoller tag it doesn’t appear scrollbars. Any ideas why?

    • prahalad jake – India

      Guys just add s:Scroller before Datagroup…….

  • What a great layout example, but can I ask if where do I get the source code for this Flex4 at Flexstore? I have the same question with the above comment but then I didn’t find any answer. Please..

  • Anybody found the source code for the Flex4 version of FlexStore?

    I keep looking but to no avail…

  • Tolis

    I’ve modified the updateDisplayList function a little in order to support scrollbars.

    Here is the code:


    override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
    {
    trace("updateDisplaylist");

    _target = target;
    _containerWidth = containerWidth;

    var count:int = target.numElements;
    var maxWidth:Number = 0;
    var maxHeight:Number = 0;

    if (count == 0) return;

    var x:int=0;
    var y:int=0;

    for (var i:int = 0; i containerWidth)
    {
    x = 0;
    y += _tileHeight + _verticalGap;
    }
    itemRenderer.setLayoutBoundsPosition(x, y);
    itemRenderer.alpha = 1;
    x += _tileWidth + _horizontalGap;
    }
    else
    {
    itemRenderer.alpha = 0;
    }

    maxWidth = Math.max(maxWidth, x + elementWidth);
    maxHeight = Math.max(maxHeight, y + elementHeight);

    }

    target.setContentSize(maxWidth, maxHeight);
    }

    It may need some more tweaking.

    • Santanu Karar

      Hello Tolis,

      Can you suggest with some codebase that you’ve did to make this example scroll (?) It seems the code excerpts that you’ve pasted creating compiler errors. I’m also having the problem not having scroll this beautiful example.

      Can you please help (?)

      Thank you.

  • DavidR

    Beautiful work.

    I’m also having a problem with getting scrollbars to appear. Unfortunately, the above updateDisplayList code produces errors for me. Any advice? Thanks.

  • Thanks this is wonderful technology.

    Graduation>

  • lmp

    Hey this a great stuff. I really like how the check boxes move the displayed items around.

  • Bonjour, j’ai découvert un nouveau siteweb actualité informatique pour s’informer!

  • Dan MacLeod

    Your example looks great. I’m new to Flex and trying create a simple project based on your example. I can get everything to work except for one thing. My products don’t seem to know the vertical limits. For example, I have a spark panel that uses the DataGroup like in your example. However, the products will display below the panel boundaries. Horizontally works great, it’s just the vertical issue. Can you explain to me what causes this?

    thanks

  • im hungry for fresh news to visit. now i found yours, i will definitely add it on my list. definitely i will follow on your post.

  • Choice! Just teaching myself Flex animations now. Being self taught it’s taking a long time to get used to decoupling class so they’re reuseable. Studying your layout to help myself understand Flex layouts a little better :)

  • If you’re having problem with getting scroller to work with this layout, just tweak updateDisplayList a little by setting contentSize or you can paste mine already tweaked:

    override public function updateDisplayList(containerWidth:Number, containerHeight:Number):void
    {
    trace(“updateDisplaylist”);

    _target = target;
    _containerWidth = containerWidth;

    var count:int = target.numElements;
    if (count == 0) return;

    var x:int=0;
    var y:int=0;

    var maxWidth:Number = 0;
    var maxHeight:Number = 0;

    for (var i:int = 0; i containerWidth)
    {
    x = 0;
    y += _tileHeight + _verticalGap;
    }
    itemRenderer.setLayoutBoundsPosition(x, y);
    itemRenderer.alpha = 1;
    x += _tileWidth + _horizontalGap;
    }
    else
    {
    itemRenderer.alpha = 0;
    }

    }

    maxWidth = Math.max(maxWidth, x + _tileWidth);
    maxHeight = Math.max(maxHeight, y + _tileHeight);

    target.setContentSize(maxWidth,maxHeight);

    }

    • alias

      i have added a hbox :

      the scroll appears but all items are not getting scrolled till the bottom…..can someone fix the scroll

  • Obviously those maxHeight and maxWidth lines are garbage from my other approach, somehow i haven’t removed them when i was pasting the code here.

    Really all you need to do is to add one line at the end of updateDisplayList method

    target.setContentSize(_contentWidth,y + _tileHeight);

    • Santanu Karar

      @Radek, the particular line worked like a charm – it has a scroller now! great! though for some reason the scroller is unstable – specially when you filter by clicking on any checkbox and again revert back to old state. Any immediate idea why its happen or any probable way to overcome this (?)

      • prahalad jake – India

        Hay Guys, I got it after trying this several times. I was really tired of fixing this.. but i cant believe myself it is dead easy to fix the scroll…..here is what i did atlast….Dont touch actionscript code, just modify mxml code….add add

  • Obviously those maxHeight and maxWidth lines are garbage from my other approach, somehow i haven’t removed them when i was pasting the code here.

    Really all you need to do is to add one line at the end of updateDisplayList method

    target.setContentSize(_contentWidth,y + _tileHeight);

  • Farnetani

    Hello, my name is Junior and I’m from Brazil, starting in Flex and I wonder if you have the application source code http://examples.adobe.com/flex3app/flex15/flexstore/flexstore.mxml?versionChecked=true and can provide the same for purposes of study and understanding to me that here I am starting. The principle seems simple enough, have some states (checkout, list, itens), it was very good, I really liked and found very clean and straightforward. Congratulations!

  • xie

    i download the source ,but it can not run in flex4,why ???
    please tell me how to run it.thanks.

  • alias

    can anyone tell how to manage the same functionality with static buttons () instead of checkbox.

    I mean i want to handle the event with buttons instead of check boxes,///any help would be great…

  • alias

    I want to add a button separately, and if we click on the button, i want all the images(thumbnails) to be resized little bigger, how can it be possible,, can anyone help………

  • Santanu Karar

    After spending sometime on this component.. I think I gave up. It’s hard to maintain a scroller for a large number of data set well at least for me. I couldn’t able to scroll the dataGroup with a scroll properly. Any suggestion (?) workaround (?)

    • prahalad jake – India
  • prahalad jake – India

    Hay Guys, I got it after trying this several times. I was really tired of fixing this.. but i cant believe myself it is dead easy to fix the scroll…..here is what i did atlast….Dont touch actionscript code, just modify mxml code….add add before Datagroup

    • prahalad jake – India

      Guys just add s:Scroller before Datagroup…….

  • Mitesh Sharma

    Thanks a lot !
    Wonderful work !

  • en iyi şekilde özel ders almak için http://www.sistembirebir.com eğitim kurumuna başvurunuz.

  • thanks for posting such type of article

  • I love this kind of post.Keep posting

  • An impressive share!
    thank you!!

  • Hikmet DOKUMACI

    En Özel Ders Merkezi; ilkokul, ortaokul ve lise öğrencileri için uzman ders öğretmenlerini bir çatı altında buluşturan bir eğitim merkezidir. Öğrencilerin başarılı olmasına odaklanan deneyimli eğitmenlerden ders alabileceğiniz bir kuruluştur.
    http://enozelders.com/

css.php