Weather Forecast documentation

This wiki page describes the design and implementation of the example on a general level. For detailed porting notes, see the porting story and for the "how to" on internationalisation see this wiki page.

Design and implementation

UI

UI Wireframe.

Animated splash screen

Weather Forecast features an animated splash screen. The main purpose of the splash screen is to improve the user experience during app launch - displaying a screen immediately makes the app appear responsive, while the attractive animations distract the user from the wait time for full application boot. The splash screen is also an opportunity to promote app (or company ) branding, and to provide other basic information like versioning.

The splash screen must be displayed quickly in order to be effective. In this app we've done this by setting the splash screen QML file to ​the declarative view, e.g. in "main.cpp" as one of our first operations:

QDeclarativeView view;
...
view.setSource(QUrl("qrc:///SplashScreen.qml"));
view.showFullScreen();

The splash screen QML element should only contain graphics and animations that can be loaded and displayed quickly. The animation in the Weather Forecast splash screen element is done by using a ​list model containing few weather icons with a ​path view, and a background ​gradient. Note: You shouldn't use Qt Quick Components in a splash screen since loading the Components takes a long time. Use only the general QML elements.

For loading the main application content a small helper class, ComponentLoader, is used. It simply creates the main.qml component:

m_component = new QDeclarativeComponent(m_view.engine(), QUrl(MainQMLPath), this);

...

m_item = qobject_cast<QDeclarativeItem*>(m_component->create());

When the component is created, the splash screen is deleted and the main component is set as the root object of the declarative view:

QObject *splashScreen = dynamic_cast<QObject*>(m_view.rootObject());
delete splashScreen;
m_view.scene()->addItem(m_item);

See main.cpp, componentloader.cpp and SplashScreen.qml for more details.

Logic

The weather data is retrieved from the network with Javascript code and then parsed using ​XmlListModel element:

XmlListModel {
    id: xmlModel
    xml: xmlData
    query: "/data/weather"

    XmlRole { name: "date"; query: "date/string()" }
    XmlRole { name: "weatherCode"; query: "weatherCode/string()" }
    XmlRole { name: "tempMax"; query: "tempMaxC/string()" }
    XmlRole { name: "tempMin"; query: "tempMinC/string()" }
    XmlRole { name: "windspeed"; query: "windspeedKmph/string()" }
    XmlRole { name: "precip"; query: "precipMM/string()" }
}

The XML list model can be used directly by view elements. The view element used in this example is ​ListModel:

ListView {
    id: listView	
    model: xmlModel
    ...

Application settings

The language setting is stored using a very convenient ​QSettings class. In appsettings.cpp:

mSettings = new QSettings("settings.ini", QSettings::IniFormat, this);
setCurrentLanguageByIndex(mSettings->value("currentLanguage").toInt());

For more information on how to utilise different languages with Qt internationalisation, see the this wiki page.

Available cities

A feature for editing the list of cities was not implemented in order to keep the example simple. In the current implementation the list of cities is defined in CityModel.qml file. If you like using the application and your city is missing from the list, simply edit the CityModel.qml file, recompile and install, and the city you added will now be included in the list. Note that the weather information is retrieved by using only the name of the city.

Example: Paris added to the list of cities. Note that the country property is not required; it is used only by the UI, and will be shown as a subtitle in the list item if available.

ListModel {
    id: cityModel

    ListElement { city: "Paris"; country: "France" }
    ...
}

Weather service

The weather service used in this example is provided by ​World Weather Online, which offers a free API for developers to use. However, the API can only be used with a personal API key, which can be obtained by registering to the service. Learn more at ​http://www.worldweatheronline.com/free-weather.aspx.

Since the API key is for personal use only, it is not shared with this example. The example can, however, be tested by using the test mode, which is enabled by default. In the test mode the weather data, which is in XML format, is loaded from a static file deployed with the application. This means that no network is used.

To disable the test mode, simply comment out the following line in the ​project file:

DEFINES += TEST_MODE

Then insert your own, personal API key into the ​qml/common/Constants.js file:

var API_KEY = "<insert your key here>"

Finally, run qmake, rebuild, and deploy!

In-App Analytics (IAA)

​In-App Analytics API (Proof-of-Concept) will move to open beta during spring 2012. In the meantime, we have "proof-of-concept" system available for Qt-based apps at ​nokia.motally.com.

For more information about usage of IAA in this application, see the IAA wiki page.

All downloads

ID	File	Description	Size	Uploaded	Dls	Uploader	Component	Version	Platform	Type
4	weatherforecast_v1_0.zip	Project source with binaries	2.2 MB	22 Dec 2011	2405	Tomi_		1.0	Project	Source
3	WeatherForecast_v1_0_installer_anna.sis	Symbian Anna smart installer binary	412.3 KB	22 Dec 2011	349	Tomi_		1.0	Symbian	Binary
2	WeatherForecast_v1_0_anna.sis	Symbian binary	374.9 KB	22 Dec 2011	392	Tomi_		1.0	Symbian	Binary
1	weatherforecast_1.0.0_armel.deb	Harmattan binary	377.3 KB	22 Dec 2011	508	Tomi_		1.0	Harmattan	Binary