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.
18 Comments
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.
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).
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,
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!
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…
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
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
Dear Christophe,
There is a little bug in
fadeInTilesfunction. It’s just a bad copy/past frommoveTilesfunction… You havemoveTiles.addListener()in it, instead offadeInTiles .addListener(). This prevents the last call offadeInTilesEndand 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. ;-)
I think that this is one of the coolest thing. Thank you for sharing your knowledge to us.
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??
it’s not supported…..use s:list ( this is the aswer of bug.adobe.com)..thank again for share your code ..see you…
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.
Where is the source code for the Flex4 version of FlexStore?
Thanks
Charlie
2 Trackbacks
[...] Coenraets published a Flex4 update to the classic FlexStore application in his recent blog FlexStore Revisited. The Phone catalog data is actually loaded from an external XML file and a Filter bar allows users [...]
[...] to make my grid act a little crazy, which is why I added a few methods. They are below. Check out Christophe Coenraet’s tutorial on adding animation to a Layout for more [...]