Integrating Polymer/Dart and Symfony – Part 2

This entry is part 2 of 2 in the series Integrating Polymer/Dart and Symfony

In the previous article, we implemented a Dart widget in our Symfony app. Let's handle the rest now. This might get advanced, so grab a cup of coffee and pay close attention – I recommend you follow along only after completing Part 1!

Get around JSONP and display an Object's member in the template

If the server (and thus the configuration, the programming) is managed by ourselves, the process to get data from a RESTful API from that same server will be simple. We can enable CORS in the returned response header. Done! But if the remote server's RESTful API does not set that header, we will face a CORS error when we try to invoke that API call from within the Dart app.

One commonly discussed technique is to use JSONP. Dart also has a few packages serving jsonp functionality. You can find these packages here by searching for "jsonp".

However, in our implementation, we will do it another way due to the "hacky" nature of JSONP.

It is a fair assumption to say that anyone who is doing web site development should have at least one site under his/her own jurisdiction.

In my 2nd Dart widget to be integrated into my homepage, I try to grab some weather information from two different remote servers (and none of them enabled CORS). Obviously I have no control over these two servers, so I do the following:

First, create a controller in Symfony to grab the data from these two remote servers:

    public function WeatherAction($type, $param)
    {
        if ($type == 1) // Local weather info
        {
            $weather = file_get_contents("http://m.weather.com.cn/data/$param.html"); //101190401 for Suzhou, my hometown
        }
        else
        {
            $weather = file_get_contents("http://api.openweathermap.org/data/2.5/weather?q=$param&units=metric"); //suzhou,china
        }
        $response = $this->render('trrsywxBundle:Default:json.html.twig', array('res' => $weather));
        $response = $this->setExtraHeader($response);

        return $response;
    }

These two sites all return JSON strings upon calling but neither has set the CORS header. In Dart, such an API call will fail but in Symfony's environment, it is successful – only JavaScript is restricted by CORS, server side languages can still consume resources on other domains. Also note that by wrapping the returns from the remote servers by providing extra headers, we can enable CORS.

Next, in Dart, we create another Polymer app to get the information grabbed by Symfony and do further processing:

  void getWeather()
  {
    var path1='http://rsywx/app_dev.php/json/weather/1/$code';
    var path2='http://rsywx/app_dev.php/json/weather/2/$city';


    HttpRequest.getString(path1).then((String res)=>processWeather1(res));
    HttpRequest.getString(path2).then((String res)=>processWeather2(res));

    if(one)
      one=false;
    else
      one=true;
  }

  void processWeather1(String res)
  {
    w1=new Weather1.created(res);    
  }

  void processWeather2(String res)
  {
    w2=new Weather2.created(res);
  }
}

After retrieving the data from our own Symfony site, the process is straightforward.

In this implementation, every "Refresh" will grab weather info from both servers. It can be fine tuned to eliminate redundant API calls by determining what we are to show for the "Refresh" click (variable one toggles its Boolean status every time we calls the getWeather function, which is invoked by every "Refresh" request).

one is also used in our Dart Polymer template to decide which weather information is to be displayed as these two pieces of information will share a same slot in our html flow. The html template to show weather information is something like this:

<polymer-element name="weather-tag" attributes="city code">
  <template>
    <meta charset="utf-8">
    <template if='{{!one}}'>
        <div class="ui message">
          //Display local weather information
        </div>
    </template>
    <template if='{{one}}'>
        <div class="ui message">
        //Display local weather information from another source
        </div>

    </template>

Truncated by Planet PHP, read more at the original (another 8412 bytes)

more