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.
12 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
Thank for your nice work, I see that you love your Job
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 ?
Шаг 10. Для того, чтобы добавить пламя на капюшон вставляем новый слой «Front fire_2». С помощью контекстного меню добавляем альфа-канал. После этого обрезаем нижнюю часть изображения, т.к. нас интересует только та часть изображения, которая находиться над капюшоном и с помощью инструмента «Размазывание» делаем капюшону красноватую подсветку по краям.
@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.