Birth of a Flex Project - Updated Oct 22 2006

I just thought I would take the time to share with everyone the birth of flex project. The project is an online store that will sell wristbands. These wristbands are the type of bands you would get to show proof admission or legal drinking age. Currently the application uses place holder products source from an xml file. Over time this will change, as we near completion. From here on in I will chronicle the development of the project, starting with today's build.

Awrist Build 0.1 Oct 17, 2006

Complete:

  • Product Display List
  • Product Display Item Renderer
  • Product Details View

Short list of Todos:

  • Create Product Filter to ask visitors questions about their band needs and show them bands that match selected criteria
  • CheckOut items grid needs remove properties
  • CheckOut items grid needs Item Renderer to show item details possibly make expandable?
  • Refined Expand Grid concept in CheckOut Grid
  • Create a value object for calculated total's fields.
  • Fill in About Us panel
  • Fill in Contact Us panel .
  • Contact Panel needs form validation and server side handler.

Feel free to ask questions about how parts of this application work and i'll do my best to share relevant code.

UPDATE Oct 18 2006


View Source is Enabled

By Request here (view source enabled) is stripped down portion of the app to demonstrate how to animate the product detail view. In the application root you'll notice a code block I reserved called Effect Group. Within it are the effects tags; I wrapped the actual effects in the <mx:Parralel/> tag for now because I may want to add addition effects like blur down the road. In addition take into consideration this code has not yet been re-factored so I'm certain there is room for improvement.

UPDATE Oct 22 2006

Take a look at the progression on the Cart View of this app. Using a customer ItemRenderer in the quantity column of the cart data grid I've allowed the user to modify their quantities and receive cost updates in real time. Also note the "Expand Grid" button (the label for this button will change in the future) when the cart becomes over crowded for the default view the user can expand it out full screen. This is simply a transitioning to a new state and back. Additionally I've begun to test filtering the product catalog, so far i'm filtering on a boolean value to decided if a band is waterproof or not. Eventually the filter will have about 5 or 6 variables. If anyone wants to see some code on the stuff in the update let me know and i'll post a simplified example.

UPDATE Jan 22, 2007 Site Launching

Sorry for the radio silence, been super busy with this project and several others that has kept me from posting more frequently. Well Awrist is about to launch and is currently up at https://www.awrist.com By all means give it a try and if there are parts of it you guys have questions about just ask. Note the current link is really just a soft launch, you can place orders but they will only bill to a testing credit card "4242424242424242", untill the end of the week. So feel free to try the application out keeping that in mind.

Comments
The beauty of Flex, great user experience very good looking API.
I like the transitions a lot and user friendly and simple display.
--Are you connecting to the XML file using MXML and AS only or are you using Coldfusion.



~cheeers
# Posted By Rob | 10/17/06 10:59 PM
Currently the app is connecting to an xml data source directly. I have found it to be very usefull to use static xml data as stand ins for live coldfusion returned data. As the UI begins to wrap up I will be replacing the xml data source with a remote object from coldfusion.
# Posted By Ryan Favro | 10/17/06 11:06 PM
Wow $90 for a wrist band! No wonder bars have such high cover charges.

Joking aside, this looks great. I look forward to following your progress. What are you planning to use on the backend?
# Posted By Adrock | 10/17/06 11:12 PM
Backend will be CF and MySQL. As well there will be a seperate administration app for running the site's content and managing incoming orders. Of course Flex seems to be the natural fit for the said scenario.
# Posted By Ryan Favro | 10/17/06 11:21 PM
Very Good !!

I would like to know, how do you made those effect, "moving...",
coul you publish any tips,

Thanks for this great idea
# Posted By Guillermo | 10/18/06 3:24 AM
Great stuff,
Are you using Cairngorm or just the Flex 2 framework?
# Posted By Hilary Bridel | 10/18/06 5:42 AM
Hi, Guillermo

I have just updated this entry to show a stripped down version of the product listing. Here you will be able to see how the panels are animated. Just right click on the example to view source.

Hilary, for this project i've opt'd not use Cairngorm although it may end being re-factor'd down the road for Cairngorm.
# Posted By Ryan Favro | 10/18/06 4:10 PM
Thanks for sharing the code Ryan
# Posted By Raj | 10/18/06 8:39 PM
Thanks Ryan for sharing,
absolute Great !!!!
# Posted By Guillermo | 10/19/06 6:54 AM
I've always wanted to do somethin like this, but worried I was wasting my time because google can't gobble up the site. If google cant grab it, my client is screwed.

Really cool site!

Will
# Posted By Will | 10/19/06 10:39 AM
If you build/present your app correctly in combination with a SEO plan such as AdWords and cross linking you can still achieve the rankings your client needs. The eventual strategy I'll be employing is having the flash player listen to a URL variable to decide where to start the user off in the site. An html site index will accompany the site. Each link on the site index will dynamically link to the same page (containing the flash) but all the pages will have dynamically generated (via CF) Meta information and hidden DIVS containing the information to be spidered.
# Posted By Ryan Favro | 10/19/06 11:05 AM
# Posted By Ryan Favro | 10/22/06 3:52 AM
Nice piece of Flex design going on there. Quite an inspiration for a Flex newbie like me!
# Posted By Peer Quaide | 11/16/06 11:55 AM
Ryan, What about the Project?.

Do you have any news?, was really interesting see the evolution of the project, but long time that I didn't see any news.

Thanks,

Guillermo
# Posted By Guillermo Pared | 11/28/06 7:05 AM
Yes, there is major update coming in about 5 days.
# Posted By Ryan Favro | 11/29/06 12:30 PM
That's Great.
# Posted By wedding dresses | 4/4/08 11:56 PM
# Posted By zoloft | 4/5/08 1:04 AM
BlogCFC was created by Raymond Camden. This blog is running version 5.1.004.