One of the last projects I worked with Mindblossom, Dan Aykroyd Wines, has gone live on the web. The site was built using a combination of HTML and JavaScript, Grails and Flex.
You can see the site at http://www.danaykroydwines.com/
This project was a combination of Grails, HTML/JavaScript and Flex. It was my proof of concept of Grails as a glue architecture to overcome many of the shortcomings of pure DHTML and pure Flex approaches.
For the parts of the site that we wanted search engines to index, such as the blog, the media section and about US we used JavaScript and HTML to show this content. It allows this information to become indexable by search engines.
For sections with higher interactivity, such as the Wine Browser, Wine Wisdom videos and the ‘Create a Postcard‘ functionality of the site, we used the REST-based Flex architecture I have discussed elsewhere in this blog. Using Flex for videos allowed for a deeper level of UI customization, and I was able to integrated a video player ( with rounded corners ! ) very quickly. It also allowed us to embed fonts. images and videos with little thought, something Flex does extremely well.
Traditionally, JavaScript can lead to a lot of noise in the structure of the underlying HTML ( such as uls for navigation menus, etc ). With Flex, this can be reduced to a few lines of includes using the SWFObject library, with specially placed alternative content tags for SEO and graceful page degradation. By breaking the app into HTML pages that embed Flex, we overcome Flex and Flash’s inability to properly embed HTML while still being able to access the proper URL parameters via the BrowserManager.
With Grails as the backend, we were able to quickly build a security framework, CMS, blog engine with commenting, image upload/resize and REST service provider.
Overall, with this project I was able to prove how Flex, Grails and Dynamic HTML can all play nicely together while optimizing SEO, performance and rich media integration. Proving a much more flexible approach than either a pure DHTML or a pure Flex approach.
This was a very interesting project for me, as I was able to both create this proof of concept architecture and code most of the Flex pieces in the site, including doing about 80% of the skinning. It was neat to build a map selector in pure Flex and explore deeper level graphic transformations with Tweener and the Flash GraphicTransform library. It really allowed me to deepen my understanding of Flex CSS support and rich features like Scale-9 image slicing.
Credit goes out to Zack, Jakob, Brad, Rob and Miguel for making the site look so sweet.
Tomás Lin's Programming Brain Dump 
Hi Tomas,
This blog rocks and I really appreciate your insight into making Grails, Flex, HTML/AJAX play nice.
Question about the map selector: how did you do that? Where did you get the map from (Google?), and did you use any Degrafa or just the other libs you mentioned–Tweener and Flash GraphicTransform library?
Did you do the scale-9 image slicing in Flash or Flex, btw?
Any further enlightenment will be appreciated.
Thanks,
Tami
Hiya Tami,
The map itself was a custom implementation. I started off with an SVG map of the world in Wikipedia, and cut out the top 30 wine producing countries. Each image was then placed on the map using a combination of the Flex Canvas ( for selection area ), Image and Button tags.
Tweener was used to fade the image in and out, but not to change the selected / unselected state. This was done in Photoshop.
The site is pure flex, so the Scale-9 slicing was done in the Flex Css files. One of the examples of the use of scale-9 was the country name and the number of postcards available, where the button used was scale-9’d.
Hope that helps…
you missed thailand on your wine producing map 😉 http://www.thaiwine.org/