Rails on the Run » xml builder http://railsontherun.com Rails experiments by Matt Aimonetti Tue, 23 Feb 2010 07:28:00 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 How to test a XML builder view http://railsontherun.com/2007/10/31/how-to-test-a-xml-builder-view/ http://railsontherun.com/2007/10/31/how-to-test-a-xml-builder-view/#comments Wed, 31 Oct 2007 08:32:00 +0000 Matt Aimonetti http://railsontherun.com/2007/10/31/how-to-test-a-xml-builder-view As a good Rubyist, I do TDD and even BDD.

Since I’ve started using RSpec I’ve started writing tests against my views. RSpec makes things really easy and I’ve been enjoying testing my views.

I’m not the only one having fun, check this great post from Mr Planet Argon aka Robby Russel

Recently I was working on implementing some Sexy Charts and I was using a XML builder to create an XML view of for a controller. Since I wanted to be a good Rails Ninja and obey the BDD rules, I figured I needed to test my XML view. Making sure that the nodes and the attributes were properly created. Turned out that is wasn’t too hard, there was many options but none were very well documented so I decided to write this quick tutorial.

UPDATE 31 Oct 2007: After a comment from Josh Knowles, I updated the tests to test with have_tags (built in RSpec) and hpricot.

Hpricot

hpricot is a awesome HTML parser perfect for screen scraping. But wait, there’s more to this awesome library, hpricot can also parse XML.

If you watched the excellent RSpec peepcasts you probably noticed that topfunky aka Geoffrey Grosenbach uses hpricot to test a remote API.

In our case, we’ll use hpricot to test that our generated XML follows our expectations.

XML Builder + RSpec

Let’s write a quick test to make sure our controller uses a XML builder view:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  describe AveragesController, "handling GET /averages.xml" do

    before do
      Average.stub!(:find).and_return(@average)
    end
  
    def do_get
      @request.env["HTTP_ACCEPT"] = "application/xml"
      get :index
    end
  
    it "should render the action using the XML builder" do
      do_get
      response.should render_template('averages/index.xml.builder')
    end

  end

To make this example pass, we need to modify our rspec generated controller.

1
2
3
4
5
6
7
8

  def index
    @averages = Average.find(:all)
  
    respond_to do |format|
      format.html # index.html.erb
      format.xml  { render :action => "index.xml.builder", :layout => false }
    end
  end

(Please note that I’m using Rails 2.0 and that’s why I’m not using a .rxml view)

Here is what our XML file should end up looking like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

  <?xml version="1.0" encoding="UTF-8"?>
  <chart>
    <series>
      <value xid="0">January</value>
      <value xid="1">February</value>
      <value xid="2">March</value>
      <value xid="3">April</value>
      <value xid="4">May</value>

      <value xid="5">June</value>
      <value xid="6">July</value>
      <value xid="7">August</value>
      <value xid="8">September</value>
      <value xid="9">October</value>
      <value xid="10">November</value>

      <value xid="11">December</value>
    </series>
    <graphs>
      <graph fill_alpha="50" color="#FF0000" fill_color="#CC0000" title="high">
        <value xid="0">65.1</value>
        <value xid="1">65.7</value>
        <value xid="2">64.9</value>

        <value xid="3">66.7</value>
        <value xid="4">67.1</value>
        <value xid="5">69.3</value>
        <value xid="6">73.0</value>
        <value xid="7">74.8</value>
        <value xid="8">75.4</value>

        <value xid="9">73.4</value>
        <value xid="10">68.9</value>
        <value xid="11">65.3</value>
      </graph>
      <graph fill_alpha="50" color="#0000CC" fill_color="#0000CC" title="low">
        <value xid="0">48.9</value>
        <value xid="1">50.7</value>

        <value xid="2">52.9</value>
        <value xid="3">55.6</value>
        <value xid="4">59.2</value>
        <value xid="5">61.9</value>
        <value xid="6">65.7</value>
        <value xid="7">67.3</value>

        <value xid="8">65.7</value>
        <value xid="9">61.0</value>
        <value xid="10">54.0</value>
        <value xid="11">48.7</value>
      </graph>
    </graphs>
  </chart>

Let’s write some tests to make sure our view is ok:

index.xml.builder_spec.rb

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

require File.dirname(__FILE__) + '/../../spec_helper'
require 'hpricot'

describe "/averages/index.xml.builder" do
  include AveragesHelper
  
  before do
    average_1 = mock_model(Average)
    average_1.stub!(:month).and_return("January")
    average_1.stub!(:high).and_return("74.5")
    average_1.stub!(:low).and_return("61.5")
    average_2 = mock_model(Average)
    average_2.stub!(:month).and_return("February")
    average_2.stub!(:high).and_return("82.5")
    average_2.stub!(:low).and_return("71.5")

    assigns[:averages] = [average_1, average_2]
  end

  it "should render the months in the series" do
    render "/averages/index.xml.builder"
    response.should have_tag("value", 'January')
    response.should have_tag("value", 'February')
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:value).first.inner_html.should == 'January'
    (doc/:value)[1].inner_html.should == 'February'
  end
  
  it "should set the xid attributes for the series" do
    render "/averages/index.xml.builder"
    response.should have_tag("value[xid=0]:first-child")
    response.should have_tag("value[xid=1]:last-child")
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:value).first["xid"].should == '0'
    (doc/:value).last["xid"].should == '1'
  end
  
  it "should have 2 graphs and they should have a title" do
    render "/averages/index.xml.builder"
    response.should have_tag("graph[title=high]:first-child")
    response.should have_tag("graph[title=low]:last-child")
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph).size.should == 2
    (doc/:graph).first["title"].should == 'high'
    (doc/:graph).last["title"].should == 'low'
  end
  
  it "should have a color set by graph" do
    render "/averages/index.xml.builder"
    response.should have_tag("graph[color]:first-child")
    response.should have_tag("graph[color]:last-child")
    response.should have_tag("graph[fill_color]:last-child")
    response.should have_tag("graph[fill_alpha]:last-child")
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph).first["color"].should_not be_nil
    (doc/:graph).last["color"].should_not be_nil
    (doc/:graph).last["fill_color"].should_not be_nil
    (doc/:graph).last["fill_alpha"].should_not be_nil
  end
  
  it "should have an xid for each graph value" do
    render "/averages/index.xml.builder"
    response.should have_tag("graph > value[xid=0]:first-child")
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph/:value).first["xid"].should == "0"
  end
  
  it "should have the high average as values of the first graph" do
    render "/averages/index.xml.builder"
    response.should have_tag("graph > value:first-child", "74.5")
    # Same thing but with Hpricot
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph/:value).first.inner_html.should == "74.5"
  end
  
end

The first thing you must do (after installing the hpricot gem) is to require hpricot in your test:



  require 'hpricot'

Now that hpricot is created we can use it to parse the response and check against our expectations.

(we create mock objects to pass to the view so we know exactly what to expect and we separate Model/Controller/Views tests)

To check against our response we have to use hpricot parser syntax. It might look at bit funny at first, but believe me it’s really easy once you get it.

But first, let’s parse the view:

1
2
3
4

# Render the mocked up data using the xml view
render "/averages/index.xml.builder"
# Load and parse the view response body:
doc = Hpricot.XML(response.body.to_s)

Let’s look at the first test:

1
2
3
4
5
6

  it "should render the months in the series" do
    render "/averages/index.xml.builder"
    doc = Hpricot.XML(response.body.to_s)
    (doc/:value).first.inner_html.should == 'January'
    (doc/:value)[1].inner_html.should == 'February'
  end

(doc/:value) returns all the value nodes, we take the first one and extract its content. We expect that it would match the name of the month for the first average.

Let’s now look at another test:

1
2
3
4
5
6
7

  it "should have 2 graphs and they should have a title" do
    render "/averages/index.xml.builder"
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph).size.should == 2
    (doc/:graph).first["title"].should == 'high'
    (doc/:graph).last["title"].should == 'low'
  end

The thing to look at here is the fact that we are checking on the node’s attribute “title”. Really simple syntax and clean test, isn’t it?

Finally let’s look at the last example:

1
2
3
4
5

  it "should have the high average as values of the first graph" do
    render "/averages/index.xml.builder"
    doc = Hpricot.XML(response.body.to_s)
    (doc/:graph/:value).first.inner_html.should == "74.5"
  end

We are checking that the content of the first value node nested inside a graph node is equal to 74.5 which is the high average for the first month.

In practice, you probably won’t write all these tests at once, but anyway, let’s look at our XML builder which will make all these tests pass:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

xml.instruct!  :x ml, :version=>"1.0", :encoding=>"UTF-8"
xml.chart do
  xml.series do    
    @averages.each_with_index do |average, index|
      xml.value average.month,  :x id => index
    end
  end
  
  xml.graphs do
    xml.graph :title => 'high', :color => "#FF0000", :fill_alpha => "50", :fill_color => "#CC0000" do
      @averages.each_with_index do |average, index|
        xml.value average.high,  :x id => index
      end
    end
    
    xml.graph :title => 'low', :color => "#0000CC", :fill_alpha => "50", :fill_color => "#0000CC" do
      @averages.each_with_index do |average, index|
        xml.value average.low,  :x id => index
      end
    end
  end
  
end

Hpricot is a really nice tool which can make your BDD life much easier. And even if you don’t do BDD/TDD yet, it’s a great way to verify that any XML data you receive/generate is valid.

Happy testing

]]> http://railsontherun.com/2007/10/31/how-to-test-a-xml-builder-view/feed/ 8 Sexy charts in less than 5 minutes http://railsontherun.com/2007/10/04/sexy-charts-in-less-than-5-minutes/ http://railsontherun.com/2007/10/04/sexy-charts-in-less-than-5-minutes/#comments Thu, 04 Oct 2007 03:06:00 +0000 Matt Aimonetti http://railsontherun.com/2007/11/05/sexy-charts-in-less-than-5-minutes NOV 04 Update: demo app now available there. Sexy charts BDD style presentation at the SDRuby group to be posted soon on video podcast

Last time, in our ‘do it in less than 5 minutes’ series, we saw how to add quickly and simply add Ajax pagination.

This time we’ll see how to add some sexy/fancy charts to your rails app.

The goal is to end up with something like:

chart

charts2

Various options

You might have heard or even tried solution such as Gruff or JFreeChart.

While these solutions are great, they are certainly a pain in the butt. Gruff requires RMagick (avoid RMagick as much as can) and creates static files (a real pain when your graphs change all the time) JFreeChart on the other hand requires Java, Java skills and I hate the way you create graphs:

1
2
3
4
5

  def CreateChart
         pipe = IO.popen "java -cp C:\\InstantRails\\rails_apps\\project\\jfree\\src;C:\\InstantRails\\rails_apps\\project\\jfree\\lib\\jcommon-1.0.0-rc1.jar;C:\\InstantRails\\rails_apps\\project\\jfree\\lib\\jfreechart-1.0.0-rc1.jar; CreateChart" 
         pipe.close
         redirect_to "/graph/report" 
      end

Anyway, none of these solutions would let us create our charts in less than 5 minutes so let’s cut the story short. The best solution IMHO is to use Flash. But wait, you don’t need to know ActionScript or to own a license of Flash or Flex, we have libraries available for us to use without any Flash knowledge :)

XML/SWF is cool Flash library which should fulfill our needs, you can even find a rails plugin to make things easier.

amCharts

But, to be honest I’d like to have something a bit “cleaner/sexy/fancy” and easier to setup. So we’re going to use amCharts Don’t get me wrong, XML/SWF is a great library and you can make your graphs look nice (but you have to pay for support).
Since we are running out of time let’s see how to implement a nice graph using *my* favorite library.

amcharts

[DISCLAIMER: amCharts is NOT open source and NOT free. But, it's cheap (85 euros per site) especially when you think of how much time you will save. AND there is a FREE version. The Free version is the same as the full version but with a link back to amcharts.com]

Setup

Let’s go ahead and download one of the package: http://www.amcharts.com/column/download/ for instance.

Unpack the files and put them in their own folder in your public folder.
Make sure you have the .swf file (amcolumn.swf for instance), a XML settings file and the fonts folder.
(You might want to also create an empty amcharts_key.txt in the same folder since the plugin tries to load the key and you don’t want to pollute your logs.)

Usage

Now you need to understand how amCharts works.

After being loaded, amCharts expects a datastream. The datastream is then parsed and displayed as a chart.
You can modify the aspect of any chart by changing its settings.
Settings are set at runtime and/or in a setting file.

Great! I won’t cover the settings file. It’s a well documented XML file you just copied in your public folder. (or check the documentation)

What we want to focus on, is the datastream. Basically we just need to create a XML file that can be parsed by amCharts.

Let’s imagine that we have a reports_controller.rb file We want to display the population of the cities in California.

let’s add a new action to render our XML file:

1
2
3
4
5
6
7
8

  def population
    @cities = City.find(:all)
    @population_data_link = formatted_population_reports_url( :x ml)
    respond_to do |format|
      format.html
      format.xml  { render :action => "population.xml.builder", :layout => false }
    end
  end

(notice that I’m using rails 2.0 and that’s why my XML template is not RXML)

As you can see, we have 2 values: @cities and @populationdatalink

@cities contains all the City records, including their population etc..

@populationdatalink contains the url to retrieve the datastream.

If you wonder how I got this url? I’m simply using a named route defined in my routes.rb:



  map.resources :reports, :collection => {:population => :get}

(note that you don’t need to create a restful route for that, a simple named route would have worked too)

Flash detection

Since we are going to use Flash, we want to make sure that people have the Flash plugin installed on their browser. For that we will use swfobject. Simply make sure to add swfobject.js (available in any amChart package) to your public/javascript folder. Then make sure you linked the javascript in your header:



  <%= javascript_include_tag 'swfobject' %>

We now need to create our 2 views: population.html.erb and population.xml.builder

population.html.erb

Basically, this view only loads amCharts and provides it with the details of the datastream:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  <div id="population_chart" class='chart'>
    <strong>Text displayed when the user doesn't have Flash. You might want to display a simple table with the population, search engines and visitor without flash would love that.</strong>
    <p> To see this page properly, you need to upgrade your Flash Player, please visit the Adobe web site</p>
  </div>

  <script type="text/javascript">
    // <![CDATA[    
    var so = new SWFObject("/amcolumn/amcolumn.swf", "population_chart", "800", "380", "8", "#000000");
    so.addVariable("path", "/amcolumn/");
    so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));
    so.addVariable("data_file", escape("<%= @population_data_link %>"));
    so.addVariable("additional_chart_settings", "<settings><labels><label><x>250</x><y>25</y><text_size>18</text_size><text><![CDATA[<b>California Population as of <%= Time.now.to_s(:db) %></b>]]></text></label></labels></settings>");
    so.addVariable("preloader_color", "#000000");
    so.write("population_chart");
    // ]]>
  </script>

As you can see, we have a div called population_chart. This div is replaced at load time by the Flash object if the visitor has Flash setup locally. Think about providing some data in case the user doesn’t have Flash.

The rest is simple Javascript. I unpacked the amchart column lib in mypublic/amcolumn folder and that’s why I setup the path as “amcolumn”



  so.addVariable("path", "/amcolumn/");

My settings file is called column_settings.xml :



  so.addVariable("settings_file", escape("/amcolumn/column_settings.xml"));

and the most important part:



  so.addVariable("data_file", escape("<%= @population_data_link %>"));

Finally, I added some dynamic settings just to show you how easy it is:

1
2

  so.addVariable("additional_chart_settings",
  "<settings><labels><label><x>250</x><y>25</y><text_size>18</text_size><text><![CDATA[<b>California Population as of <%= Time.now.to_s(:db) %></b>]]></text></label></labels></settings>");

Ok, let’s now create our XML view:

population.xml.builder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

  xml.instruct!  :x ml, :version=>"1.0", :encoding=>"UTF-8"
  xml.chart do
    # xml.message "You can broadcast any message to chart from data XML file", :bg_color => "#FFFFFF", :text_color => "#000000"
    xml.series do    
      @cities.each_with_index do |city, index|
        xml.value city.name,  :x id => index
      end
    end

    xml.graphs do
     #the gid is used in the settings file to set different settings just for this graph
      xml.graph :gid => 'population' do
        @cities.each_with_index do |city, index|
          population = city.population
          case population
            # When the population is > 1 million, show the bar in red/pink
            when > 100000
              xml.value value,  :x id => index, :color => "#ff43a8", :gradient_fill_colors => "#960040,#ff43a8", :description => level
            else
              xml.value value,  :x id => index, :color => "#00C3C6", :gradient_fill_colors => "#009c9d,#00C3C6", :description => level
            end
        end
      end
    end

  end

Nothing fancy, we first created a series with all the city names:

1
2
3
4
5

  xml.series do    
    @cities.each_with_index do |city, index|
      xml.value city.name,  :x id => index
    end
  end

Then we created another node with the values for each city.
Since it would be cool to display some bars in a different color, we used a case-switch statement:

1
2
3
4
5
6
7
8
9
10
11
12

    xml.graph :gid => 'population' do
      @cities.each_with_index do |city, index|
        population = city.population
        case population
          # When the population is > 1 million, show the bar in red/pink
          when > 100000
            xml.value value,  :x id => index, :color => "#ff43a8", :gradient_fill_colors => "#960040,#ff43a8", :description => level
          else
            xml.value value,  :x id => index, :color => "#00C3C6", :gradient_fill_colors => "#009c9d,#00C3C6", :description => level
          end
      end
    end

Depending on what you want to display, you might need to have different colors or a different tooltip text, or load an animation or image… and as you can see, it’s REALLY easy.

Got to http://yoursite.com/reports/population to enjoy your new fancy graph.

That’s it, you are done!

Time to tweak your settings file to make your graph look awesome.
Since you now have a lot of free time, you can start re-factoring your code and make sure you have a good test coverage.

Good luck!

]]> http://railsontherun.com/2007/10/04/sexy-charts-in-less-than-5-minutes/feed/ 35