Handheld Designer Blog

Tutorial: The Obligatory Weather App, Part 2

April 1, 2013

In part one of this tutorial, we created the main page of our weather app, and added code to query a weather web-service, process the returned forecast, and display it in a list view. In part two, we’ll create a “detail” page that displays the detail from an individual day’s forecast.

(You can follow along with the tutorial, or download a fully-functional version of the weather app from the sample gallery within Handheld Designer.)

Detail Page

The “detail” page will be shown when the user taps an individual day in the forecast listview, and will display more detail on that day’s forecast. We’ll display the forecast description (“Sunny”, “Partly Cloudy”) along with an appropriate icon image, the high and low temperatures, and the forecasted wind speed and direction, with a icon illustrating the compass direction of the wind.

To begin building the page, click the “New Page” button and change its id property to detail.

Page Objects, Top Section

The top section of the detail page will contain a header with a “back” button, an icon image and the forecast description:

Add the objects to the page as follows:

  • Add a JQMHeaderToolbar object to the page and configure as follows:
    • leftButtonLabel property: “Back”
    • leftButtonIcon property: “arrow-l”
    • leftButtonGotoPage property: “(back)”. This will cause the user to navigate back to the main page when tapping the button.
  • Add an HDLabel object beneath the header. This label will be set in code to the date of the forecast. Configure the label as follows:
    • Size the label so it covers most of the width of the page.
    • id property: “dateLabel”
    • fontWeight property: “bold”
    • borderBottomStyle property: “solid”
    • borderBottomWidth property: “1”
  • Add an HDImage object beneath the label. This object will display the forecast icon image. Configure it as follows:
    • id property: “iconImage”
    • width and height properties: “60”
  • Add an HDLabel object to the right of the image. This label will display the forecast description (“Partly Cloudy”, “Sunny”). Configure the label as follows:
    • Size the label so it covers most of the width between the iconImage object and the right edge of the page.
    • id property: “descriptionLabel”
    • fontSize property: “24”

Page Objects, Center Section

The center section of the detail page will display the high and low temperatures of the forecast:

Add the following objects to the center section of the page:

  • Add an HDLabel object to the page. This object will label the Temperature section. Configure the label as follows:
    • Size the label so it covers most of the width of the page.
    • id property: “dateLabel”
    • value property: “Temperature”
    • fontWeight property: “bold”
    • borderBottomStyle property: “solid”
    • borderBottomWidth property: “1”
  • Add two HDLabel objects to the page, with the values “High” and “Low” as shown.
  • Add the two HDLabel objects that will display the actual “High” and “Low” temperature values to the page. Set the id property to “highTempLabel” or “lowTempLabel” as appropriate, and set the fontSize property to “58”.

Page Objects, Bottom Section

The bottom section of the detail page will display the wind direction and speed, along with an icon that will be rotated to show the wind direction graphically.

Add the following objects to the bottom section of the page:

  • Add an HDLabel object to the page to label the Temperature section, configured as follows:
    • Size the label so it covers most of the width of the page.
    • id property: “dateLabel”
    • value property: “Wind”
    • fontWeight property: “bold”
    • borderBottomStyle property: “solid”
    • borderBottomWidth property: “1”
  • Add an HDImage object beneath the label to display the wind direction image. Configure it as follows:
    • id property: “windDirImage”
    • width and height properties: “44”
    • src property: “wind-dir.png”
  • Add an HDLabel object to the right of the wind direction image to display the wind speed. Set the id property to “windLabel”.

Note that you’ll need to add the image “wind-dir.png” to your project by using the File/Import Resource menu, or dragging it from the Finder into the Resources section of the project pane. (If you’ve opened the app from the Handheld Designer sample gallery, your project should already contain the image.)

The onLoad Function

Finally, create the page’s onLoad event handler that will be responsible for getting the forecast data for an individual day and updating the objects we’ve added above with the appropriate values.

To create the onLoad event handler, select the page object by clicking the design-view background (or selecting it from the popup menu above the property editor), open the “Events” group in the property editor, locate the onLoad property and click the arrow.

Populate the handler with the following code:

function detail_onLoad(event) {

	/* The weather data will have been cached by the "main" page,
	so retrieve it here. */
	var data = JSON.parse(sessionStorage.getItem("weatherData"));

	/* Get the individual forecast for the day in question. 
	The "main" page will have passed the index of the day for which
	detail is to be shown in the "itemIndex" parameter, passed to
	the "application.gotoPage()" function that loaded this page. */
	var dayData = data.weather[page.parameters.itemIndex];

	/* As with the render() function in the main page, we want to 
	transform the date received in the forecast (in YYYY-MM-DD format)
	into more user-friendly forms.  We'll use the jQuery plug-in provided
	by the JavaScript file "date.format.js". */
	var date = new Date(dayData.date);

	// Put the day (Monday, Tuesday, etc) in the header's title
	header1.title = date.format("dddd");
	
	// Set the date label to a formatted date.
	dateLabel.value = date.format("mmmm dd, yyyy");

	/* Set the weather icon image's source to the URL of the 
	image from the forecast. */
	iconImage.src = dayData.weatherIconUrl[0].value;

	// Description ("Cloudy", "Sunny", etc)	
	descriptionLabel.value = dayData.weatherDesc[0].value;


	/* Set the high and low temperature labels using the values from
	the forecast. */	
	var tempMax = dayData.tempMaxF;
	var tempMin = dayData.tempMinF;

	// See if the user wants us to use Celcius instead:
	var appSettings = JSON.parse(localStorage.getItem("appSettings"));
	if(appSettings.units == "C")
	{
		tempMax = dayData.tempMaxC;
		tempMin = dayData.tempMinC;
	}

	// String.fromCharCode(0xB0) gives us the degree symbol
	highTempLabel.value = tempMax + String.fromCharCode(0xB0);
	lowTempLabel.value = tempMin + String.fromCharCode(0xB0);


	// set the wind label to the wind direction and speed.
	windLabel.value = dayData.winddirection + ", " + 
		dayData.windspeedMiles + "mph";

	/* Since the forecast gives us the wind direction in compass degrees,
	use that to rotate the wind direction image. This is accommplished by
	using a CSS transform, set through the HDImage's jQuery 
	object property "$". */
	var r = "rotate(" + dayData.winddirDegree + "deg)";
	windDirImage.$.css("transform", r);
}

Once the handler has been added, you should now be able to run your app, click an individual forecast day and see your “detail” page load. Clicking the “Back” button in the “detail” page header should return you to the “main” page.

Part 2: Conclusion

Now that we can display the week’s forecast and view an individual day’s detail, we’re almost done. In the final part of the tutorial, we’ll create a “settings” page that will allow the user to personalize the forecast location.

As always, your feedback is welcome. Please use the Handheld Designer contact form for any questions, comments, or suggestions.

Copyright © 2010-2017, Handheld Designer, LLC, All Rights Reserved.
Made by hand in New England, USA.