Tutorial - Part 2

In this part of the tutorial, we'll explore one way to take the raw weather data and display it in a HTML interface.

Goal

This part of the tutorial is intended to:

  • Embed external scripts
  • Display dynamic data using jQuery and Mustache templating

Adding external libraries

Goal: Embedding jQuery and Mustache libraries

jQuery provides a lot of helpful functionality, and in order to display the forecast information we will use Mustache Templates.

Download the jQuery and Mustache from their project pages and save them in the js directory.

To use these libraries in your app simply append the following script tags in the head of index.html before the js/weather.js script tag:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/mustache.min.js"></script>

It's that simple. You can now access jQuery using "$" or "jQuery" inside index.html and weather.js.

Displaying the Data

Goal: Displaying dynamic data

Using Mustache, it is quite simple to display the data.

Note: To prevent attempts to parse Mustache or other templates as HTML, we recommend wrapping them in script tags with custom type attributes

  • Open index.html
  • Remove "Weather forecast here." from the body tag
  • Append to the body tag a Mustache template to represent the forecast information:

    <script type="x-mustache-template" id="forecast_information_tmpl">
        <h1>Forecast for {{display_location.full}}</h1>
        <p>{{observation_time}}</p>
    </script>
    
  • Next we need a template to render the current conditions object:

    <script type="x-mustache-template" id="current_conditions_tmpl">
        <table>
            <tr>
                <td><img src="{{icon_url}}" /></td>
                <td>
                    <div>{{weather}}</div>
                    <div>{{temp_f}}&deg;F</div>
                    <div>Humidity: {{relative_humidity}}</div>
                    <div>Wind: {{wind_string}}</div>
                </td>
            </tr>
        </table>
    </script>
    
  • And finally add a template for the daily forecast data. Here, we're using Mustache's Enumerable syntax to loop through a few days' conditions:

    <script type="x-mustache-template" id="forecast_conditions_tmpl">
        {{#forecastday}}
        <td>
            <h2>{{date.weekday_short}}</h2>
            <img src="{{icon_url}}">
            <div>{{conditions}}</div>
            <div>Low: {{low.fahrenheit}}&deg;F</div>
            <div>High: {{high.fahrenheit}}&deg;F</div>
        </td>
        {{/forecastday}}
    </script>
    
  • Next we need designated elements where the templated information will be appended. Add the following tags following the templates inside the body element:

    <header id="forecast_information"></header>
    
    <section id="current_conditions"></section>
    
    <section id="forecast_conditions">
        <table>
            <tr>
            </tr>
        </table>
    </section>
    
  • Now open weather.js and add the following JavaScript code which will template and append the data:

    function populateWeatherConditions (weather) {
        var tmpl, output;
        forge.logging.log("[populateWeatherConditions] beginning populating weather conditions");
    
        tmpl = $("#forecast_information_tmpl").html();
        output = Mustache.to_html(tmpl, weather.current_observation);
        $("#forecast_information").append(output);
        forge.logging.log("[populateWeatherConditions] finished populating forecast information");
    
        tmpl = $("#current_conditions_tmpl").html();
        output = Mustache.to_html(tmpl, weather.current_observation);
        $("#current_conditions").append(output);
        forge.logging.log("[populateWeatherConditions] finished populating current conditions");
    
        tmpl = $("#forecast_conditions_tmpl").html();
        output = Mustache.to_html(tmpl, weather.forecast.simpleforecast);
        $("#forecast_conditions table tr").append(output);
        forge.logging.log("[populateWeatherConditions] finished populating forecast conditions");
    
        forge.logging.log("[populateWeatherConditions] finished populating weather conditions");
    };
    
  • Finally add a jQuery.ready listener inside weather.js which will kick things off when the page finishes loading:

    $(function () {
        populateWeatherConditions(weather);
    });
    

Important: Any code that modifies the page should only be run when the page is finished loading. The above achieves this using jQuery's document ready listener $(function () { /* code here */ }).

Adding CSS

You can make the display a bit more pleasant by adding some custom CSS. Create a css directory and download style.css into it. Link this file in the head element of index.html to add some basic styling to the Weather App:

<link rel="stylesheet" type="text/css" href="css/style.css">

Build the code and run the app and you should see the dummy static weather data for San Francisco, CA when it is opened:

Weather App - part 2

Reference app

See the part-2 tag in the Github repository for a reference app for this stage of the tutorial.

part-2.zip

What next?

Continue on to part 3!