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

Open UI5 : Consommation de web service JSON

Dans les exemples précédents, nous avons utilisé des modèles de données basés sur des données JSON écrites directement en dures dans le code. C’est sympa pour les exemples et pour comprendre comment ça marche, mais aurez compris que ce n’est évidemment pas la finalité 😉

Un web service c’est en gros, une url avec tout plein de paramètres (c’est mieux pour préciser ce que l’on souhaite récupérer ;-)) qui retourne les données correspondantes à notre requête dans un certain format (généralement XML ou JSON).

Admettons que vous souhaitiez développer une application qui affichera les prévisions météo d’une ville donnée, vous pourrez alors vous tourner vers le site OpenWeatherMap qui met à disposition une API répondant parfaitement à ce besoin.

Vous voulez par exemple récupérer les prévisions météo sur 7 jours, vous pouvez pour cela utiliser l’API avec l’url suivante :  api.openweathermap.org/data/2.5/forecast/daily?q=London&mode=xml&units=metric&cnt=7.

Ainsi on retrouve dans cette url :
– La ville (q) : ici « London »
– Le type de données à retourner (mode) : ici « XML »
– L’unité de mesure (units) : ici « metric »
– Le nombre de jours (cnt) : ici « 7 »

Vous pouvez charger cette url directement dans votre navigateur préféré, vous devriez alors obtenir quelque chose comme cela :
2015-04-09_105736

On peut ainsi voir les prévisions météo sur 7 jours pour la ville de Londres dans un format XML.

De même en demandant du format JSON (en spécifiant simplement mode=json au lieu de mode=xml) :
2015-04-09_110028

Bon comme ça c’est moins compréhensible, mais pas de panique notre ami Google regorge de JSON Viewer, par exemple http://jsonviewer.stack.hu/. Collez ainsi la chaîne JSON obtenue et cliquez sur Viewer :
2015-04-09_110510

Vous devriez obtenir cela (tout de suite c’est plus clair) :
2015-04-09_110816

Dans UI5, c’est presque comme ce que l’on a pu voir précédemment. En effet, à la place d’assigner les données en dures via la méthode sap.ui.model.json.JSONModel.setData(<JSON en dur>), on utilisera la méthode sap.ui.model.json.JSONModel.loadData(<url API>).

Adobe Interactive Forms : validation via Webservices

Les formulaires interactifs Adobe peuvent être utilisés de deux façons différentes :

  • Online : intégré par exemple dans une application Web Dynpro
  • Offline : renvoyé par exemple au serveur SAP par le biais d’un mail ou d’un Web Service

Nous verrons ici comment renvoyer au serveur SAP les données renseignées au sein du pdf via l’utilisation d’un Web Service.

Soit par exemple la table spécifique YTADOBE_FROM_WS qui contiendra un ensemble de noms/prénoms et qui sera alimentée par un pdf interactif :

La première étape consiste en la création d’une bapi  permettant la mise à jour de cette table :

Cette bapi devra être accessible à distance :

On retrouve en entrée le nom et le prénom à enregistrer :

On retourne le code retour de l’opération :

Mise à jour de la table :

La bapi étant maintenant créée et opérationnelle, la seconde étape consiste en la génération du Web Service correspondant :

Spécifier un nom de service :

Activer le mapping des noms :

Sélectionner le profil de sécurité en fonction du besoin :

Spécifier les options de transport :

Votre Web Service est créé :

On peut retrouver le service créé en SE80 :

La troisième étape consiste en la récupération du WSDL correspondant au service, pour cela lancer la transaction SOAMANAGER, sélectionner le second onglet « Communication inter-applications/-scénarios » et cliquer sur « Admin. de services individuels » :

Rechercher votre service :

Après avoir sélectionné votre service parmi les résultats retournés et cliqué sur « Apply Selection », cliquer sur « Ouvrir document WSDL pour liaison sélectionnée » :

Le WSDL apparait :

Enregistrer le en local sur votre machine :

Entrer ensuite en édition sur votre formulaire Adobe afin d’y ajouter une nouvelle connexion aux données :

Spécifier qu’il faut récupérer la description des données d’un fichier WSDL :

Récupérer ensuite votre fichier WSDL :

Valider la nouvelle connexion :

La nouvelle connexion apparaît dans la hiérarchie :

En dépilant cette dernière on retrouve nos paramètres de bapi (nom et prénom) :

Glisser/déposer le bouton au sein de la mise en forme :

Télécharger le formulaire en local sur votre machine puis entrer en modification dessus :

En cliquant sur le bouton, une popup de demande d’autorisation peut apparaitre :

Renseigner ensuite vos paramètres de connexion au système SAP (suivant le niveau de sécurité appliqué au web service précédemment) :

On peut voir que la bapi a bien été exécutée via le web service et que les données saisies dans le formulaire interactif ont bien été intégrées :