View Full Version : Using the FlexStore sample in Flex2

10-23-2006, 08:01 AM
Hi guys.I think u all know the flexstore sample.In that sample the search form is not available.How can i make that work? I need to add a function to the Go button or do i need to make an .as file that search the catalog.xml??If some1 could explain step by step i'd appreciate.Thx in advance.

11-06-2006, 06:17 AM
hmmm..no flex guru around?

11-06-2006, 10:36 AM
Hi there.What it the best way that i can use the flexstore sample to make an online store: as it is(using xml,ex: catalog.xml) or with database??
Btw i'm newb with flex and try to learn.I expect some useful advices.Thx in advance.

11-06-2006, 11:38 AM
Hi Laur,

I'm certainly no guru but maybe I can give you an idea or two of where to look. First off to gain a better understanding for the flexstore and how it's structured you want to look over: A Step-by-Step Guide to Building an Application with Flex (http://www.adobe.com/devnet/flex/articles/getting_started_02.html)

I'm not 100% sure I understood your question. Were you asking what's the best data source to use? The answer to that is what kind do you have available. You can use any of those mentioned. The answer to that question is based on the answer to another question, that being how is the data currently being stored?
As far as how to retrieve and display data and use the HTTPService and such you might want to check Retrieve and Display Data (http://livedocs.macromedia.com/flex/2/docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00000069.html) in the Flex 2 Help. It uses the BlogReader I believe but the principles are reasonably the same.

If that wasn't what you were really asking, let's clarify that and see if I or someone around can better answer the question.

Hope that helps at least a bit,

11-06-2006, 11:57 AM
Thx for ur reply.
Ok so i customized the flexstore sample to suit my need(i have only the products page,i have my own logo,i edited the xml and changed the pics).And i want to use the search form but i dont know how to do that.What must i do to make that work.Where i must implement a search function etc.The second element i need is when the customer select the producs in cart and submit the order to display a form with the checkout like this store: http://flexapps.macromedia.com/flex15/flexstore/flexstore.mxml?versionChecked=true

And i dont know if i can do that using the xml model,the default model of flexstore or do i need to use database.
PS: if i must use database,i want to use mysql+php not coldfusion

11-06-2006, 12:37 PM
So LOL you wanna implement the two features that they haven't implemented Huh? ;-)

Gimme a bit, I've got some of my own stuff to do but I will take a look at it and in the mean time if anyone else can come up with something maybe we both can learn from it. But I will take a look at it sometime today. I promise.


11-06-2006, 12:38 PM
Btw the flex store sample i am customizing is this one:http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html NOT this one:http://flexapps.macromedia.com/flex15/flexstore/flexstore.mxml?versionChecked=true
Just to let u know.

11-07-2006, 11:43 AM
Here's a couple of quick questions for you. First off are you working from a pre-existent set up? By that I mean are you trying to convert a pre-existent web store, or is this "from scratch"? If it's the latter then we have a bit of infrastructure to work on huh? ;-)

So let's go off the basis of the latter. Oh, and let me say that I haven't really looked at the flexstore example myself so if it's one of those "it's already in there" kinda things. Please just let me know and I'll try and get a chance to do a quick read up on it.

Anyway, so you're going to need a customer db right? I'm calling it customer for a purpose for if it's a true "store" then it's only one part of the overal system. You're going to need to advertize and do analysis and such eventually so that ya can get the darn stuff out of inventory LOL. So the first thing that will be needed is "DB Design" for a customer db of sort.
So let's try and map that out (this is totally coming off the top of my head so feel free to make any adjustments you see for my stupidity and/or lack of coffee)

Ok so let's try and map out the customer table first off:
Customer Table
Cust.ID - An ID to use for the Customer
Cust.BillAddr - The street address for the billing purposes.
(This info is very USA specific really and it might be better in the long run to have a separate table holding the above info. But that should do for now, I think)

So now let's layout the table that has shipping info for the customers.
Cust Ship Info Table
CustShip.ID – Key Field
CustShip.CustID – Foreign Key reference to the Customer table entry.
CustShip.Addr - The street address to shipto
This table will allow us to get a list of the ship to choices the user has set up and let them choose which one it will go to.

Then we need a support table for the US States (Again to make this non-USA specific we’d need some other tables). This is a simple one
US States Table
USStates.ID – Primary Key
USStates.Abbrv – The abbreviation for the state.
USStates.Name – The name of the state in full

Then another support table will be needed to hold the Shipping Options and the info for them. Let’s make it simple for now.
Shipping Options Table

Let me stop there for a bit and just say that a UI model like the one presented in the Flex 1.5 example looks nice in my opinion. The one that uses the Accordion. And let me also say that I don’t know how much “preexistent” stuff you have and all. So let’s go from there and then move forward. Sound good to you?

Oh you'll notice I've not got any CC info in the customer table. That's on purpose because just as they might have a number of places they might want to ship to, they might have a number of cards they want to use. But the Credit Cards will mean another set of tables such as CustCCInfo to hold the choices, an underlying support table to hold the names and other necessary data for the Options as far as the type of Credit Card, etc. Also of course the Order Table will be needed.

So maybe next step would be to make that Order View one that looks like the 1.5 model.

I know this is not a complete answer by any means but the parts your speaking of are not few and not trivial so it'll have to be done step by step and recursively.


11-07-2006, 01:18 PM
Hi again and thx for ur reply.Can we 1st focus on the search form pls?At this moment i dont know exactly what customer info will fill in the database,but i can do the database myself,making some tables is not hard :).When i'll know exactly what info,i'll post my sql info for creating that tables and u can check it out.

11-07-2006, 01:33 PM
Ok LOL Well I'm a good bit further on my %$#%$%$% chart stuff so I'll see what I can come up with there ok? So just to make sure I understand your data is in xml format pretty much like catalog.xml, right? I'll go off that concept and see what I can come up with. Hmm this could end up as a good tutorial of sorts at the end huh? ;-)

I'll take a look for a bit right now,

11-07-2006, 02:15 PM
Yes we can first try to develop the store using xml and after mb we could do an example with database.

11-08-2006, 10:15 AM
This is my code from ProductFilterPanel.mxml:

<?xml version="1.0" encoding="utf-8"?>
// Copyright (C) 2003-2006 Adobe Macromedia Software LLC and its licensors.
// All Rights Reserved.
// The following is Sample Code and is subject to all restrictions on such code
// as contained in the End User License Agreement accompanying this product.
// If you have received this file from a source other than Adobe,
// then your use, modification, or distribution of it requires
// the prior written permission of Adobe.
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

[Event(name="filter", type="samples.flexstore.ProductFilterEvent")]

import mx.collections.Sort;
import mx.controls.sliderClasses.Slider;
import mx.controls.Alert;
import samples.flexstore.ProductFilterEvent;

private var thumbBeingPressed:Boolean;

private function dispatchFilter():void
var event:ProductFilterEvent =
new ProductFilterEvent(filter, thumbBeingPressed);
currentState = "showingThumbnails";

private function sliderValue(values:Array, index:int):Number
return values[index];

private function productRemoved():void
if (currentState == "showingComparison")
if (productList.items.length == 0)

private function attemptCompare():void
if (productList.items.length > 0)
dispatchEvent(new Event("compare"));
currentState = "showingComparison";
Alert.show("Selectati produsele pe care doriti sa le comparati", "Compara produse");

private function searchProduct():void
if (searchInput.text != "")

Alert.show('Introduceti numele produsului cautat', 'Cautare');


<flexstore:ProductFilter id="filter">
<flexstore:minPrice>{sliderValue(priceSlider.values, 0)}</flexstore:minPrice>
<flexstore:maxPrice>{sliderValue(priceSlider.values, 1)}</flexstore:maxPrice>

<mx:CurrencyFormatter currencySymbol="RON " id="cf"/>

<mx:Label text="Cauta" styleName="sectionHeader"/>

<mx:HBox width="100%">
<mx:TextInput styleName="glass" width="100%" id="searchInput"/>
<mx:Button styleName="glass" label="Go" click="searchProduct()"/>

<mx:Spacer height="18"/>

<mx:Spacer height="8"/>

<mx:Spacer height="8"/>

<mx:Label text="Produse" id="label1" fontWeight="bold" fontSize="12"/>
<mx:ComboBox id="series" styleName="glass" width="200" dropdownWidth="200" rowCount="10" change="dispatchFilter();">
<mx:String>Toate produsele</mx:String>
<mx:String>Hrana uscata catei</mx:String>
<mx:String>Hrana umeda catei</mx:String>
<mx:String>Hrana uscata pisici</mx:String>
<mx:String>Hrana umeda pisici</mx:String>
<mx:String>Accesorii catei</mx:String>
<mx:String>Accesorii pisici</mx:String>
<mx:String>Hrana si accesorii pesti</mx:String>
<mx:String>Hrana si accesorii pasari</mx:String>
<mx:String>Hrana si accesorii rozatoare</mx:String>

<mx:Spacer height="18" id="spacer1"/>

<mx:Label text="Pret"/>

<mx:HSlider id="priceSlider" styleName="glassSlider" minimum="0" maximum="5000" tickInterval="200" snapInterval="100"
width="100%" thumbCount="2" values="[0,5000]" labels="[0 RON,5000 RON]" liveDragging="true" dataTipFormatFunction="{cf.format}"

<mx:Spacer height="18" id="spacer4"/>

<mx:Spacer height="18" id="spacer2"/>

<mx:Spacer height="8"/>

<mx:HBox id="hbox1">
<mx:Label text="Compara" styleName="sectionHeader" id="label2"/>

<mx:Spacer height="4" id="spacer3"/>

<!-- height is maxItems * ProductListItem.HEIGHT + 2px border -->
<productsView:ProductList id="productList" height="{productList.maxItems * ProductListItem.HEIGHT + 2}" width="100%"
newItemStartX="300" newItemStartY="-100" maxItems="4"

<mx:Spacer height="8"/>

<mx:Button id="compareButton" styleName="glass" />

<mx:State name="showingThumbnails">
<mx:SetProperty target="{compareButton}" name="label" value="Compara produse" />
<mx:SetStyle target="{compareButton}" name="icon" value="@Embed('/assets/icon_compare.png')" />
<mx:SetEventHandler target="{compareButton}" name="click" handler="attemptCompare()" />
<mx:SetStyle target="{label1}" name="fontSize" value="12"/>
<mx:SetStyle target="{label1}" name="fontWeight" value="bold"/>
<mx:AddChild relativeTo="{spacer3}" position="before">
<mx:Text text="Adaugati aici produsele pe care doriti sa le comparati." styleName="instructions" width="200"/>
<mx:State name="showingComparison">
<mx:SetProperty target="{compareButton}" name="label" value="Inapoi la catalog" />
<mx:SetStyle target="{compareButton}" name="icon" value="@Embed('/assets/icon_tiles.png')" />
<mx:SetEventHandler target="{compareButton}" name="click" handler="dispatchFilter()" />
<mx:SetStyle target="{label1}" name="fontWeight" value="bold"/>
<mx:SetStyle target="{label1}" name="fontSize" value="12"/>


Now how can i do the sorting and displaying stuff?
I need to complete the function
private function searchProduct():void
if (searchInput.text != "")
//help me with this part
Alert.show('Introduceti numele produsului cautat', 'Cautare');

11-08-2006, 10:22 AM
To get a better response to your question i would advise making a small App to islolate it. Pasting a load of code that isn't required for the actually problem puts many people off (well it does me :)).

I would suggest you make a file that loads XML and add a TextInput for searching, and a TextArea to display results.

11-08-2006, 11:51 AM
I'm doing some work on kinda what Tink said just dealing majorly with a design decision or two. I'll do my best to have something to show everyone today.

11-08-2006, 01:53 PM
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="doInit();">
import mx.collections.XMLListCollection;
import mx.rpc.events.*;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import mx.collections.IViewCursor;

private var catalog:ArrayCollection;
private var results:ArrayCollection;

// Initialization
private function doInit() : void


private function productServiceResultHandler(event:ResultEvent):voi d
//HTTPService returns an ArrayCollection for nested arrays
var products:ArrayCollection = event.result.catalog.product;
var temp:ArrayCollection = new ArrayCollection();
results = new ArrayCollection();
var cursor:IViewCursor = products.createCursor();
while (!cursor.afterLast)
var product:Product = new Product();
catalog = temp;

private function faultHandler(event:FaultEvent):void
Alert.show("Fault occured");

// Search handler code
private function onGoClicked() : void
// Step 1: Get the search string
var strSearch:String = txtSearch.text;

if (strSearch.length == 0)
Alert.show("You must enter a search string");

private function SearchInCatalog(strSearch : String) : void
var strPattern : String = "*" + strSearch + "*";
for (var i:int = 0; i < catalog.length; i++)
// Look in name, description, and highlights for the string
// var product:Product = new Product();
// product.fill(catalog[i]);
if ((catalog[i].name.indexOf(strSearch) != -1)
|| (catalog[i].description.indexOf(strSearch) != -1)
|| (catalog[i].highlight1.indexOf(strSearch) != -1)
|| (catalog[i].highlight2.indexOf(strSearch) != -1)
|| (catalog[i].featureString.indexOf(strSearch) != -1)

<mx:HTTPService id="productService" url="catalog.xml"
<mx:TextInput id="txtSearch" x="67" y="44"/>
<mx:Button x="255" y="44" label="Go" id="btnStartSearch" click="onGoClicked()"/>
<mx:DataGrid x="1" y="101" height="100%" width="99%" dataProvider="{results}" >
<mx:DataGridColumn headerText="ProdID" dataField="productId" width="50"/>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
<mx:DataGridColumn headerText="Highlight 1" dataField="highlight1"/>
<mx:DataGridColumn headerText="Highlight 2" dataField="highlight2"/>

This is just some quickie code but really all it's doing is going thru the catalog and looking in the text fields that exist in it and then for the matches putting them into the result set. That's kinda what you were thinking of as far as a search right? Try looking for Pink and for Nokia that's a good quickie test set.


11-08-2006, 01:59 PM
Ooops! Forgot to mention that catalog.xml is the sample xml file from flexstore and Product is a class that exists in product.as in the flexstore sample.


11-08-2006, 06:07 PM
Thx for your time, but it doesn't work.And i had something else in mind: when the client type something in the text input,lets say he is typing nokia or pink,after he hits the Go button,on the panel will be displayed the products that have in their name nokia or pink,without using other components(i.e datagrid).i'll see what can i do tonight regarding that.
Thx again for ur time and if u have other ideas i'll be glad to hear them.

11-08-2006, 06:38 PM
yeah it's really the same basic concept..just needs to be hooked up into the panel view as you called it. It shows the basic concept of searching thru the catalog for the matches.

11-08-2006, 07:14 PM
Where did you guys download the FlexStore example from?

I poked around here: http://www.adobe.com/devnet/flex/articles/getting_started.html, and it doesn't have the files you're talking about (Product.as or catalog.xml). Did I download the wrong flex store?

11-08-2006, 07:21 PM
if you go here: http://examples.adobe.com/flex2/inproduct/sdk/flexstore/flexstore.html and then right click on the app you can choose view source and that has a link for a zip file..that's how I did it.


11-09-2006, 06:29 AM
This is a totally off the main subject comment but I was fiddling around with some things and looking around and this: OpenLaslo Amazon Store Demo (http://www.laszlosystems.com/lps/sample-apps/amazon/amazon2.lzx?lzt=html) looks like a really nice UI, at least in my mind. A) It looks "Rich" it doesn't look "Internetty" like some parts of the flexstore example do. B) All your functionalities are there for you, just a click away. C) Though the parts are "right there" and easy to get to, they are relatively unobtrusive.

This demo is accessible, along with a few others that are interesting (I really like the dashboard demo (http://www.laszlosystems.com/lps/sample-apps/dashboard/dashboard.lzo?lzt=html), at OpenLaszlo's Demo Page (http://www.openlaszlo.org/demos)


08-05-2008, 06:51 AM
I have web site degsinged by Felxstore but when you brows the website it taks time till the images display on the screen. I mean the website display is slow. we reduce the image size but still the website is slow.

Plz, I need help to solve this problem.