The Magic of a Better Book Shelf
The Magic of a Better Book Shelf
Written by James Ward, Technical Evangelist for Adobe Systems.
In this current state of the economy, every business is looking for ways to get better results while reducing costs. Rich Internet Applications (RIAs) are playing an important role in helping businesses accomplish these goals. For example, Borders, a leading retailer of books, music and movies, was able to increase their online order conversion ratio by 62 percent by adding a more engaging way for users to browse popular book and DVD titles through their Magic Shelf application. If you visit the borders.com website you will see their Magic Shelf displayed in the middle of the page. Allurent built the Magic Shelf for Borders, using Adobe Flex Builder in addition to a proprietary technology. The Magic Shelf provides Borders’ customers with an online experience similar to what they would experience if they were physically shopping in the store. For Borders, it’s this user experience that translates into more sales. Check out this video to learn more about how Allurent created the application: http://tv.adobe.com/#vi+f15816v1000
Building a Flex application that allows users to have a more engaging experience is pretty simple. This article will walk through the steps necessary to create a similar online shopping experience using data from the Amazon.com website as an example. Following the Magic Shelf concept, this article will demonstrate how to create a "book shelf" type of RIA that lets users search for titles found on Amazon.com. To follow along, you will need to download Adobe Flex Builder 3, which can be found here.
The first thing that you will need to do is start Adobe Flex Builder and create a new Flex Project. To watch a demonstration of how to do this, please go here.
Then copy and paste the following code into your application. A detailed explanation of the code will follow. Also be sure to replace “YOUR AMAZON WEB SERVICES ACCESS KEY” with an AWS access key that you can obtain from the aws.amazon.com website.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" styleName="plain" verticalAlign="middle" horizontalAlign="center">
<mx:Script>import mx.effects.easing.Quintic;</mx:Script>
<mx:applicationComplete>
var req:Object = new Object();
req.Version = "2008-08-19";
req.Service = AWSECommerceService";
req.Operation = "ItemSearch";
req.AWSAccessKeyId = "YOUR AMAZON WEB SERVICES ACCESS KEY";
req.Keywords = "Flex";
req.SearchIndex = "Books";
req.ResponseGroup = "Medium,Images";
s.send(req);
req.Keywords = "Java";
s.send(req);
</mx:applicationComplete>
<mx:HTTPService id="s" url="http://ecs.amazonaws.com/onca/xml" method="POST">
<mx:result>
for each (var i:Object
ins.lastResult.ItemSearchResponse.Items.Item)
{
items.addItem(i);
}
</mx:result>
</mx:HTTPService>
<mx:ArrayCollection id="items"/>
<mx:Move id="myMove" duration="650" easingFunction="Quintic.easeOut"/>
<mx:Canvas width="500" height="170" horizontalScrollPolicy="off"
verticalScrollPolicy="off" borderStyle="solid" borderColor="#cccccc"
backgroundColor="#eeeeee">
<mx:HBox id="h" width="100%" height="160" horizontalGap="10"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
moveEffect="{myMove}" paddingLeft="5">
<mx:Repeater id="r" dataProvider="{items}">
<mx:Image source="{r.currentItem.MediumImage.URL}" width="90"
maintainAspectRatio="true" bottom="0" verticalAlign="bottom"
buttonMode="true" useHandCursor="true">
<mx:click>
var req:URLRequest = new URLRequest();
req.url = event.currentTarget.getRepeaterItem().DetailPageURL;
navigateToURL(req);
</mx:click>
</mx:Image>
</mx:Repeater>
</mx:HBox>
<mx:Button label="<" fontSize="22" width="25" paddingLeft="0" paddingRight="0" fontWeight="bold" verticalCenter="0" left="5" click="h.x += 500" fillAlphas="[1, 0.8]" enabled="{h.x < 0}" buttonMode="true" useHandCursor="true"/>
<mx:Button label=">" fontSize="22" width="25" paddingLeft="0" paddingRight="0" verticalCenter="0" right="5" click="h.x -= 500" fillAlphas="[1, 0.8]" buttonMode="true" useHandCursor="true" enabled="{h.x > (Math.floor((items.length - 1) / 5) * -500)}"/>
</mx:Canvas>
</mx:Application>
You should now be able to run the code and see something like: http://ar-edelman.com/img/home/PeC_image.jpg
You can see a live demonstration of this at: http://www.jamesward.com/BookShelf/BookShelf.html.
The application simply searches amazon.com for “Flex” books and “Java” books. To do this it uses the HTTPService library:
<mx:HTTPService id="s" url="http://ecs.amazonaws.com/onca/xml"
method="POST">
When the response returns from Amazon.com the result event handler adds the items to an ArrayCollection. The ArrayCollection is defined with the following line:
<mx:ArrayCollection id="items"/>
The result event handler is specified inside the HTTPService by the following lines:
<mx:result>
for each (var i:Object in s.lastResult.ItemSearchResponse.Items.Item)
{
items.addItem(i);
}
</mx:result>
When the application has initialized the applicationComplete event handler makes the requests to Amazon.com:
<mx:applicationComplete>
var req:Object = new Object();
req.Version = "2008-08-19";
req.Service = "AWSECommerceService";
req.Operation = "ItemSearch";
req.AWSAccessKeyId = "YOUR AMAZON WEB SERVICES ACCESS KEY";
req.Keywords = "Flex";
req.SearchIndex = "Books";
req.ResponseGroup = "Medium,Images";
s.send(req);
req.Keywords = "Java";
s.send(req);
</mx:applicationComplete>
The object with the “req” identifier contains the parameters that Amazon.com needs to do the search. The “s.send(req);” lines use the HTTPService to send the request to Amazon.com.
The rest of the code displays the images for the items returned from Amazon.com. The first part is the Canvas which will contain the shelf of book images. Inside the Canvas is and HBox and two buttons. The HBox contains a Repeater:
<mx:Repeater id="r" dataProvider="{items}">
The Repeater will repeat whatever it contains for each of the items specified in the dataProvider. The dataProvider uses the braces around the “items” property to tell it that it will use the “items” ArrayCollection as it’s source of data. Since the Repeater contains an Image each item returned from the Amazon.com searches will be displayed inside the HBox (side-by-side). The source of the Image will be the MediumImage URL of the item:
<mx:Image source="{r.currentItem.MediumImage.URL}" width="90"/>
Each Image also has a click event handler which opens the details page of the clicked item:
<mx:click>
var req:URLRequest = new URLRequest();
req.url = event.currentTarget.getRepeaterItem().DetailPageURL;
navigateToURL(req);
</mx:click>
The Buttons which are also inside the Canvas simply move the HBox left or right by adjusting its x position. The HBox uses an moveEffect to make the move look nice. The Move effect is defined with:
<mx:Move id="myMove" duration="650" easingFunction="Quintic.easeOut"/>
The Quintic.easeOut easingFunction means that the move will not happen linearly which makes the effect seem more natural.
That is all that is takes to build your own Book Shelf! As Borders.com has shown, adding these types of interactive elements to your e-commerce site can make a significant difference. And best of all they are easy to build with Adobe Flex Builder!
This post is filed under Tools, Tips and Suggestions and has the following keyword tags: Adobe, rich internet applications, Flex.
