Open UI5 : Création d’une application de prévisions météo

Pour faire suite au précédent article sur la consommation de web services JSON, nous allons maintenant développer une application de prévisions météo basée sur l’API de OpenWeatherMap. Celle-ci sera composée d’une zone de recherche (pour saisir la ville pour laquelle on souhaite récupérer les prévisions météo), d’un panel avec les prévisions du jour et d’une table contenant les prévisions sur une plage de 7 jours.

Aperçu du résultat final :
2015-04-09_145244

Commençons par créer un nouveau projet avec une vue main :
2015-04-09_114737

Modifiez le controller afin d’y ajouter une fonction de chargement des données à partir d’une ville passée en paramètre. Cette fonction sera appelée lors de la validation de la zone de recherche.

LoadWeather : function(ville){
//Instanciation du model JSON :
var jsonModel = new sap.ui.model.json.JSONModel();
//Construction de l’URL :
var apiUrl = « http://api.openweathermap.org/data/2.5/forecast/daily?q= » + ville + « &mode=json&units=metric&cnt=7 »;
//Chargement des donnees :
jsonModel.loadData(apiUrl);
//Assignation des donnees :
sap.ui.getCore().setModel(jsonModel);
//Mise a jour de l’image de la journee :
jsonModel.attachRequestCompleted(function() {
var icon = jsonModel.getProperty(« /list/0/weather/0/icon »);
var image = sap.ui.getCore().byId(« imageCurrent »);
image.setSrc(« http://openweathermap.org/img/w/ » + icon + « .png »);
});
}

On distingue ainsi :

Le chargement de données pour la ville passée en paramètre :
2015-04-09_120321

Assignation du modèle :
2015-04-09_120729

Actions à effectuer une fois les données complètement chargées (mise à jour de l’icone de la prévision du jour) :
2015-04-09_120809

Modifier ensuite la vue (fonction createContent) comme suit :

createContent : function(oController) {
//Barre de recherche :
var oSearch = new sap.ui.commons.SearchField(« simpleSearch », {
enableListSuggest: false,
search: function(oEvent){
oController.LoadWeather(oEvent.getParameter(« query »)); //Fonction a appeler
}});

//Table des previsions a 7 jours :
var weatherTable = new sap.ui.table.Table({
title : « Previsions a 7 jours »,
rows : {
path : « /list »,
sorter : new sap.ui.model.Sorter(« dt »)
},
visibleRowCount:7
});

//Colonne Jour :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Jour »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « dt », type: new sap.ui.model.type.String()} ],
//Formatage de la date au format JJ/MM/YYYY
formatter: function(dt){
var date = new Date(dt*1000); //dt est un timestamp
var dd = date.getDate();
var mm = date.getMonth()+1; //Janvier = 0
var yyyy = date.getFullYear();

if(dd<10){
dd=‘0’+dd;
}
if(mm<10){
mm=‘0’+mm;
}

return dd+‘/’+mm+‘/’+yyyy;
}
}})
}));

//Colonne Temps (icone) :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Temps »}),
template: new sap.ui.commons.Image().bindProperty(« src », {
parts: [
{path: « weather/0/icon »} ],
//Formatage de l’url de l’icone a charger :
formatter: function(icon){
return « http://openweathermap.org/img/w/ &raquo; + icon + « .png »;
}})}));

//Colonne Observations :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Observation »}),
template: new sap.ui.commons.TextView({ text: « {weather/0/description} »})}));

//Colonne Temperature moyenne :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Temperature moyenne »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « temp/day », type: new sap.ui.model.type.String()} ],
formatter: function(day){

return day + « \u00b0 » ;
}
}})
}));

//Colonne Temperature minimum :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Temperature min »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « temp/min », type: new sap.ui.model.type.String()} ],
formatter: function(min){

return min + « \u00b0 » ;
}
}})
}));

//Colonne Temperature max :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Temperature max »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « temp/max », type: new sap.ui.model.type.String()} ],
formatter: function(max){

return max + « \u00b0 » ;
}
}})
}));

//Colonne Vent :
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : « Vent »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « speed »} ],
formatter: function(speed){
return ((speed * 3.6).toFixed(2)) +  » Km/h »;
}
}})
}));

//Label de la barre de recherche :
var oLbl = new sap.ui.commons.Label(« search »);
oLbl.setLabelFor(oSearch);
oLbl.setText(« Ville »);
//Current weather panel :
var oImage = new sap.ui.commons.Image(« imageCurrent »);
var oPanelCurrent = new sap.ui.commons.Panel(« panelcurrent », {title:new sap.ui.core.Title(« title1 », {text:« Previsions du jour »})});
var oLayout01 = new sap.ui.commons.layout.MatrixLayout(« layout01 »);
oLayout01.createRow(oImage);
var oLayout02 = new sap.ui.commons.layout.MatrixLayout(« layout02 »);
oLayout02.createRow(« Ville : « , « {/city/name} », « {/city/country} » );
oLayout02.createRow(« Observation : « , « {/list/0/weather/0/description} » );
oLayout02.createRow(« Temp. moyenne : « , « {/list/0/temp/day} » );
oLayout02.createRow(« Temp. min : « , « {/list/0/temp/min} » );
oLayout02.createRow(« Temp. max : « , « {/list/0/temp/max} » );
var oLayout00 = new sap.ui.commons.layout.MatrixLayout(« layout00 »);
oLayout00.setWidth(« 400px »);
oLayout00.setWidths(« 40px »,« 300px »);
oLayout00.createRow(oLayout01, oLayout02);
oPanelCurrent.addContent(oLayout00);
//Barre de recherche et Current weather panel :
var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell;
oCell1.addContent(oLbl);
oCell1.setVAlign(sap.ui.commons.layout.VAlign.Top);
var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell;
oCell2.addContent(oSearch);
oCell2.setVAlign(sap.ui.commons.layout.VAlign.Top);
var layout = new sap.ui.commons.layout.MatrixLayout(« layout »);
layout.setWidth(« 800px »);
layout.setWidths(« 25px »,« 70px »,« 200px »);
layout.createRow(oCell1, oCell2, oPanelCurrent);
//Placement de tous les elements :
var oPanel = new sap.ui.commons.Panel(« panel », {title:new sap.ui.core.Title(« title », {text:« UI5 Live Meteo »})});
oPanel.addContent(layout);
oPanel.addContent(new sap.ui.commons.HorizontalDivider());
oPanel.addContent(weatherTable);
oPanel.placeAt(‘content’);
}


Voilà, notre application météo est développée 😉 :

2015-04-09_145244

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

w

Connexion à %s