Using Partial Page Templates
In real life, you would probably have to display product thumbnails in different parts of the application. In fact, we will need product thumbnails in the filter module described in the next section. To avoid code duplication, we will isolate the HTML fragment used to render a product thumbnail in a partial page template.
1.  Create a file named _product.rhtml (the partial page template) in c:\rails\flexstore\app\views\store
2.  Open index.rhtml in c:\rails\flexstore\app\views\store
3.  Copy the HTML fragment corresponding to the thumbnail div and paste it in _product.rhtml
4.  In index.rhtml:

• Delete the content of the catalog div (both the for loop and the thumbnail div)
• Add the following line of code as the sole content of the catalog div:

<%= render(:partial => "product", :collection => @products) %>

Because we are passing a collection (the list of products) as a parameter, the partial page template will be repeaded for each item in the collection.

5.  Test the application. The product catalog should look the same as in the previous section.

http://localhost:3000/store

Filtering with AJAX
In this section, we provide the product catalog with filtering capabilities to allow the user to specify a price range. In response to the user's selection, the product catalog is refreshed to display the phones in the selected price range only. For a better user experience, the product catalog is refreshed without refreshing the entire page. This is accomplished using Rails' built-in support for Ajax.
1.  Add a filter action to the store controller

• Edit store_controller.rb in c:\rails\flexstore\app\controllers
• Define a filter action as shown in Figure 5.

2.  Modify the index view to allow the user to enter a price range

• Edit index.rhtml in c:\rails\flexstore\app\views\store
• Add the following JavaScript include tag immediately after the stylesheet link tag

  <%= javascript_include_tag "prototype" %>

• Add the following html fragment immediately before the catalog div.

<div id="left">
<%= form_remote_tag(:update => "right", :url =>
{:action => :filter}, :loading => "$(Ôright').innerHTML=''") %>
Select your price range:<br />
<br />
From:<br />
<%= text_field_tag("from", "0") %>
<br />
<br />
To:<br />
<%= text_field_tag("to", "1000") %><br />

<br />
<%= submit_tag "Filter" %>
<%= end_form_tag %>
</div>

3.  Change the id of the catalog div to "right". This will allow the stylesheet to position the product catalog to the right of the filter panel.
4.  Test the application

http://localhost:3000/store

Builder Templates
Using Builder templates, you can dynamically generate XML documents. This provides an integration point that allows other technologies to integrate with Rails, and leverage productivity features of the framwework. In this section, we create a template that generates an XML document for the product catalog.
1.  Add a productlist action to the store controller

• Edit store_controller.rb in c:\rails\flexstore\app\controllers
• Define a productlist action as shown in Figure 6.

2.  Create the builder template

• Create a file called productlist.rxml in c:\rails\flexstore\app\views\store
• Edit productlist.rxml as follows:

xml.list do
@products.each do |product|
xml.product do
xml.name(product.name)
xml.description(product.name)
xml.image(product.image)
xml.camera(product.camera)
xml.video(product.video)
xml.triband(product.triband)
xml.price(product.price, :currency => "USD")
end end
end

3.  Test the Builder template by accessing the following URL in a browser:

http://localhost:3000/store/productlist

You should see an XML document similar to the as shown in Figure 7.

Putting a Flex Front-End on Top of the Rails Application
In this section, we use Flex to improve the user experience of the product catalog. The user interface to capture the filtering criteria is still implemented in HTML.

The Flex-based product list uses the Builder template created in the previous section to retrieve the catalog data. Contrary to our current version, the Flex-based list handles product filtering at the client-side. Combined with the use of rich effects and transparency, this provides the user with smoother transitions between selections. These transitions implement the User Interface Design best practise of "visual continuity", and include visual cues indicating which products are being filtered out and filtered in.
1.  Define a Flex action

• Edit store_controller.rb in c:\rails\flexstore\app\controllers
• Define a flex action as shown in Figure 8.

2.  Deploy catalog.swf (the compiled version of the Flex-based product catalog).

• Download flexcatalog.zip at http://coenraets.com/tutorials/flexonrails/resources/flexcatalog.zip.
• Extract flexcatalog.zip in c:\rails\flexstore\public
  Notes:
  
• This application was built using the Flex XML-based framework. You can download the source code at http://coenraets.com/tutorials/flexonrails/resources/flexstore_source.zip.
• The application was built with Flex 2 beta and requires Flash Player 8.5 beta 2 available at http://labs.adobe.com.

3.  First Cut
In our first iteration, the user interface of the application remains very similiar to the HTML version. We simply replace the HTML-based product list with a Flex-based version.

• Create a file named flex.rhtml in c:\rails\flexstore\views\store
• Copy the code below in the flex.rhtml (Figure 9)
  

  <html>
  <head>
  <title>Flexstore on Rails</title>
  <%= stylesheet_link_tag "flexstore", :media => "all" %>
  <script type="text/javascript" src="/flex/embedflash.js" ></script>
  <script type="text/javascript" src="/flex/FABridge.js" ></script>
  <script>
  function filter() {
  var from = document.getElementById("from").value;
  var to = document.getElementById("to").value;
  var flexApp = FABridge.store.root();
  flexApp.filter(from, to);
  }
  </script>
  </head>
  <body>
  <div id="left">
  Select your price range:<br />
  <br />
  From:<br />
  <input type="text" id="from" value="0"/>
  <br />
  <br />
  To:<br />
  <input type="text" id="to" value="1000"/><br />
  <br />
  <input type="submit" value="Filter" onclick="filter()"/>
  </div>
  <div id="flex">
  <script>embedFlash("flexApp", "/flex/catalog.swf", 690, 510, "bridgeName=store");</script>
  </div>
  </body>
  </html>

• Test the application

  http://localhost:3000/store/flex

4.  Optimizing the user experience
In this second iteration, we optimize the filtering experience: We use sliders (from the Yahoo UI library) to select the price range. The Flex-based product list reacts to the user's selection as the sliders are dragged.

• Install the Yahoo sliders. Download slider.zip at http://coenraets.com/tutorials/flexonrails/resources/slider.zip, and unzip the file in c:\rails\flexstore\public.
• Overwrite the content of flex.rhtml with the code in right side bar.

Resources

• Ruby on Rails web site
• Flex on Adobe Labs

Note: Provide values for userid (-u) and password (-p) as appropriate if the above values don't match your installation.

Notice the use of the partial page template to return a list of thumbnails for the products in the selected price range.

• Source Code