OpenUI5 : Type Date

Nous allons maintenant reprendre l’application précédente et modifier le titre du Panel pour y afficher la date du jour. Pour cela nous allons typer la propriété text en Date.

1 – Modification de la méthode createContent comme suit :

createContent : function(oController) {
//****************** DECLARATION DES VARIABLES *********************
//JSon data – Liste des utilisateurs 1 :
var dataList1 = { « data »: [
{« id »: « hsimpson », « nom »: « Simpson », « prenom »: « Homer », « text »: « Homer Simpson »},
{« id »: « msimpson », « nom »: « Simpson », « prenom »: « Marge », « text »: « Marge Simpson »},
]};

//JSon data – Liste des utilisateurs 2 :
var dataList2 = { « data »: [
{« id »: « bsimpson », « nom »: « Simpson », « prenom »: « Bart », « text »: « Bart Simpson »},
{« id »: « lsimpson », « nom »: « Simpson », « prenom »: « Lisa », « text »: « Lisa Simpson »},
{« id »: « msimpson2 », « nom »: « Simpson », « prenom »: « Maggie », « text »: « Maggie Simpson »}
]};

//Creation de l’instance du model JSON :
var oModel = new sap.ui.model.json.JSONModel();

//Assignation des donnees au modele :
oModel.setData(
{date: new Date()}
);

//Creation de l’instance du modele JSON 1 :
var oModel1 = new sap.ui.model.json.JSONModel();

//Creation de l’instance du modele JSON 2 :
var oModel2 = new sap.ui.model.json.JSONModel();

//Assignation des donnees au modele 1 :
oModel1.setData(dataList1);

//Assignation des donnees au modele 2 :
oModel2.setData(dataList2);

//Assignation du modèle 1 :
sap.ui.getCore().setModel(oModel1, « Model1 »);
//Assignation du modèle 2 :
sap.ui.getCore().setModel(oModel2, « Model2 »);
//Assignation du modele :
sap.ui.getCore().setModel(oModel, « Model »);
//Panel :
var oPanel = new sap.ui.commons.Panel(« Panel »);
//Titre du Panel :
var oTitle = new sap.ui.core.Title(« Title »);
//Layout :
var oLayout = new sap.ui.commons.layout.MatrixLayout(« layout »);
//Text Pick a username :
var oPickUserName1 = new sap.ui.commons.Label(« Pick1 »);
//Text Pick a username :
var oPickUserName2 = new sap.ui.commons.Label(« Pick2 »);
//Liste d’utilisateurs 1 :
var oSelect1 = new sap.m.Select(« listSelect1 »);
//Liste d’utilisateurs 2 :
var oSelect2 = new sap.m.Select(« listSelect2 »);

//****************************************************************
//Texte du titre du panel :
oTitle.bindProperty(« text », {path:« Model>/date », type: new sap.ui.model.type.Date({pattern:« dd.MM.YYYY »})});
//Assignation du titre du panel :
oPanel.setTitle(oTitle);

//Layout fixe :
oLayout.setLayoutFixed(true);
//Longueur totale du layout :
oLayout.setWidth(« 700px »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 150px »,« 200px »,« 150px »,« 200px »);

//Ajout des utilisateurs dans le Select :
oSelect1.bindAggregation(« items », « Model1>/data », new sap.ui.core.Item(« user1 », {text: « {Model1>text} », key: « {Model1>id} » }));
//Texte du label du Select :
oPickUserName1.setText(« Pick a user name »);
//Ajout des utilisateurs dans le Select :
oSelect2.bindAggregation(« items », « Model2>/data », new sap.ui.core.Item(« user2 », {text: « {Model2>text} », key: « {Model2>id} » }));
//Texte du label du Select :
oPickUserName2.setText(« Pick a user name »);
//Creation du select :
oLayout.createRow(oPickUserName1, oSelect1, oPickUserName2, oSelect2);

//Ajout du layout au panel :
oPanel.addContent(oLayout);
//Ajout du panel au layout :
oPanel.placeAt(« content »);
}

2 – Testez l’application :

2015-03-31_174708

Publicités

OpenUI5 : Models multiples

Comme vu précédemment, les models permettent de contenir des sources de données et peuvent être mappés à différents contrôles. On distingue ainsi 3 types de models : JSONModel, XMLModel et ODataModel. Ceux-ci peuvent être assignés à un contrôle (un panel, un layout, une liste, une table, etc.) ou au Core.

Quelque soit l’élément, il est possible d’assigner plusieurs models, en prenant soin de préciser le nom du modèle.

Exemple :
sap.ui.getCore().setModel(oModel1, « Model1 »);
sap.ui.getCore().setModel(oModel2, « Model2 »);

Pour l’utilisation il faudra simplement utiliser la syntaxe suivante : « Model1>xxx » où « xxx » correspond à la source de données (par exemple « Model1>/data », à la place de « /data »).

1 – Créez un nouveau projet « MultipleModelsDemo » avec une vue « main » de type Javascript :
2015-03-31_160808

2 – méthode createContent :

createContent : function(oController) {
//****************** DECLARATION DES VARIABLES *********************
//JSon data – Liste des utilisateurs 1 :
var dataList1 = { « data »: [
{« id »: « hsimpson », « nom »: « Simpson », « prenom »: « Homer », « text »: « Homer Simpson »},
{« id »: « msimpson », « nom »: « Simpson », « prenom »: « Marge », « text »: « Marge Simpson »},
]};

//JSon data – Liste des utilisateurs 2 :
var dataList2 = { « data »: [
{« id »: « bsimpson », « nom »: « Simpson », « prenom »: « Bart », « text »: « Bart Simpson »},
{« id »: « lsimpson », « nom »: « Simpson », « prenom »: « Lisa », « text »: « Lisa Simpson »},
{« id »: « msimpson2 », « nom »: « Simpson », « prenom »: « Maggie », « text »: « Maggie Simpson »}
]};

//Creation de l’instance du modele JSON 1 :
var oModel1 = new sap.ui.model.json.JSONModel();

//Creation de l’instance du modele JSON 2 :
var oModel2 = new sap.ui.model.json.JSONModel();

//Assignation des donnees au modele 1 :
oModel1.setData(dataList1);

//Assignation des donnees au modele 2 :
oModel2.setData(dataList2);

//Assignation du modèle 1 :
sap.ui.getCore().setModel(oModel1, « Model1 »);
//Assignation du modèle 2 :
sap.ui.getCore().setModel(oModel2, « Model2 »);

//Panel :
var oPanel = new sap.ui.commons.Panel(« panel »);
//Titre du Panel :
var oTitle = new sap.ui.core.Title;
//Layout :
var oLayout = new sap.ui.commons.layout.MatrixLayout(« layout »);
//Text Pick a username :
var oPickUserName1 = new sap.ui.commons.Label(« Pick1 »);
//Text Pick a username :
var oPickUserName2 = new sap.ui.commons.Label(« Pick2 »);
//Liste d’utilisateurs 1 :
var oSelect1 = new sap.m.Select(« listSelect1 »);
//Liste d’utilisateurs 2 :
var oSelect2 = new sap.m.Select(« listSelect2 »);
//****************************************************************
//Titre du panel :
oPanel.setTitle(oTitle);

//Texte du titre :
oTitle.setText(« User details »);

//Layout fixe :
oLayout.setLayoutFixed(true);
//Longueur totale du layout :
oLayout.setWidth(« 700px »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 150px »,« 200px »,« 150px »,« 200px »);

//Ajout des utilisateurs dans le Select :
oSelect1.bindAggregation(« items », « Model1>/data », new sap.ui.core.Item(« user1 », {text: « {Model1>text} », key: « {Model1>id} » }));
//Texte du label du Select :
oPickUserName1.setText(« Pick a user name »);
//Ajout des utilisateurs dans le Select :
oSelect2.bindAggregation(« items », « Model2>/data », new sap.ui.core.Item(« user2 », {text: « {Model2>text} », key: « {Model2>id} » }));
//Texte du label du Select :
oPickUserName2.setText(« Pick a user name »);
//Creation du select :
oLayout.createRow(oPickUserName1, oSelect1, oPickUserName2, oSelect2);

//Ajout du layout au panel :
oPanel.addContent(oLayout);
//Ajout du panel au layout :
oPanel.placeAt(« content »);
}

2015-03-31_161105

3 – Testez l’application :
2015-03-31_162103

2015-03-31_162118

OpenUI5 : Debug de la console Javascript

Vous venez de terminer de développer votre application et là vous vous rendez compte que cela ne fonctionne pas vraiment comme attendu (il manque la moitié des infos sur l’écran voire la totalité, des zones ne sont pas alimentées… bref rien ne va) ? Pas de panique ! La plupart du temps vous pourrez trouver tout seul votre erreur dans la console Javascript de votre navigateur.

Exemple sur Google Chrome :
2015-03-31_151714

1 – Reprenez l’exemple précédent et supprimez y par exemple l’utilisation de la librairie « sap.m » :
2015-03-31_110902

Vous devriez donc avoir ceci :
2015-03-31_152035

2 – En testant l’application, vous devriez avoir le résultat suivant :
2015-03-31_152149

L’écran apparaît vide.

3 – Pour savoir ce qu’il se passe, il va falloir accéder à la console Javascript (Ctrl+Maj+J sur Google Chrome) :
2015-03-31_151714

On peut voir l’erreur suivante (attention il vous faudra peut-être rafraîchir la page une fois la console Javascript ouverte pour voir l’erreur) :
2015-03-31_152525

En effet, la librairie « sap.m » n’étant plus inclus dans le projet, le contrôle « sap.m.select » n’a pas été trouvé.

4 – Si on le rajoute, l’application fonctionne à nouveau :
2015-03-31_110902

2015-03-31_112633

OpenUI5 : Simple application – Sélection utilisateur par liste de type Select

Nous allons maintenant faire évoluer notre application pour sélectionner l’utilisateur à partir d’une liste, ce qui devrait à la fin vous donner le résultat suivant :
2015-03-31_110431

Ainsi, à la sélection de l’utilisateur dans la liste, les champs « Prenom » et « Nom » devraient reprendre le prénom et nom correspondant.

1 – La liste des utilisateurs correspond en réalité au composant « sap.m.select ». Il convient donc dans un premier temps de modifier le fichier « index.html » pour y ajouter la librairie « sap.m » :
2015-03-31_110902

2 – Nous allons ensuite modifier le fichier « UserDetails.view.js » pour ajouter la liste :

openAlert : function (oEvent) {
sap.ui.getCore().byId(« prenomVal »).setValue(
oEvent.oSource.getSelectedItem().getBindingContext().getProperty(‘prenom’));

sap.ui.getCore().byId(« nomVal »).setValue(
oEvent.oSource.getSelectedItem().getBindingContext().getProperty(‘nom’));
},

createContent : function(oController) {
//****************** DECLARATION DES VARIABLES *********************
//JSon data – Liste des utilisateurs :
var dataList = { « data »: [
{« id »: « hsimpson », « nom »: « Simpson », « prenom »: « Homer », « text »: « Homer Simpson »},
{« id »: « msimpson », « nom »: « Simpson », « prenom »: « Marge », « text »: « Marge Simpson »},
{« id »: « bsimpson », « nom »: « Simpson », « prenom »: « Bart », « text »: « Bart Simpson »},
{« id »: « lsimpson », « nom »: « Simpson », « prenom »: « Lisa », « text »: « Lisa Simpson »},
{« id »: « msimpson2 », « nom »: « Simpson », « prenom »: « Maggie », « text »: « Maggie Simpson »}
]};

//Creation de l’instance du modele JSON :
var oModel = new sap.ui.model.json.JSONModel();

//Assignation des donnees au modele :
oModel.setData(dataList);

//Panel :
var oPanel = new sap.ui.commons.Panel(« panel »);
//Titre du Panel :
var oTitle = new sap.ui.core.Title;
//Layout :
var oLayout = new sap.ui.commons.layout.MatrixLayout(« layout »);
//Cellule :
var oCell = new sap.ui.commons.layout.MatrixLayoutCell;
//Label prenom :
var oPrenom = new sap.ui.commons.Label(« prenom »);
//Label nom :
var oNom = new sap.ui.commons.Label(« nom »);
//Text field prenom :
var oPrenomVal = new sap.ui.commons.TextField(« prenomVal »);
//Text field nom :
oNomVal = new sap.ui.commons.TextField(« nomVal »);
//Text Or pick a username :
var oPickUserName = new sap.ui.commons.Label(« Pick »);
//Bouton submit :
var oButton = new sap.ui.commons.Button;
//Liste d’utilisateurs :
var oSelect = new sap.m.Select(« listSelect »);

//****************************************************************
//Assignation du modele au panel :
oPanel.setModel(oModel);
//Titre du panel :
oPanel.setTitle(oTitle);

//Texte du titre :
oTitle.setText(« User details »);

//Layout fixe :
oLayout.setLayoutFixed(true);
//Longueur totale du layout :
oLayout.setWidth(« 200px »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 150px »,« 200px »);

//Texte du label prenom :
oPrenom.setText(« Prenom »);
//Label associe au text field prenom :
oPrenom.setLabelFor(oPrenomVal);

//Creation de la ligne dans le layout :
oLayout.createRow(oPrenom,oPrenomVal);

//Texte du label nom :
oNom.setText(« Nom »);
//Label associe au text field nom :
oNom.setLabelFor(oNom);

//Creation de la ligne dans le layout :
oLayout.createRow(oNom,oNomVal);

//Ajout des utilisateurs dans le Select :
oSelect.bindAggregation(« items », « /data », new sap.ui.core.Item(« user », {text: « {text} », key: « {id} » }));
//Methode appelee lors d’un changement du Select :
oSelect.attachChange(this.openAlert);
//Texte du label du Select :
oPickUserName.setText(« Or pick a user name »);
//Creation du select :
oLayout.createRow(oPickUserName, oSelect);

//Texte du bouton :
oButton.setText(« Submit »);
//ColSpan de la cellule :
oCell.setColSpan(2);
//Alignement de la cellule :
oCell.setHAlign(« End »);
//Ajout du bouton dans la cellule :
oCell.addContent(oButton);

//Creation de la ligne dans le layout :
oLayout.createRow(oCell);

//Ajout du layout au panel :
oPanel.addContent(oLayout);

//Ajout du panel au layout :
oPanel.placeAt(« content »);
}

3 – Test de l’application

Au chargement les champs Prénom et nom sont vides :
2015-03-31_112633

Dès lors que l’on sélectionne un utilisateur dans la liste, les informations Nom et Prénom sont reprises dans les champs correspondants :
2015-03-31_110431

OpenUI5 : Simple application – Initialisation par modèle JSON (suite)

Pour aller plus loin dans la démarche de l’initialisation par modèle JSON, nous allons maintenant utiliser ce même modèle JSON pour récupérer les valeurs saisies et affichées via la popup lors du click sur le bouton (jusqu’à présent on récupère les valeurs saisies directement depuis les champs).

1 – Modifier la méthode openAlert comme ceci :
openAlert : function () {
//Initialisation du texte :
var txt = « Hello « ;
//Récuperation du prenom :
//var prenom = sap.ui.getCore().byId(« prenomVal »).getValue();
var prenom = sap.ui.getCore().getModel().getProperty(« /prenom »);
//Récuperation du nom :
//var nom = sap.ui.getCore().byId(« nomVal »).getValue();
var nom = sap.ui.getCore().getModel().getProperty(« /nom »);
//Construction du message :
var oMessage = txt.concat(prenom,  » « , nom, » ! »);
//Affichage du message :
sap.ui.commons.MessageBox.alert(oMessage,«  », « Welcome »);
}

2015-03-30_155128

Pour rappel celle-ci est appelée ici :
2015-03-30_155330

2 – Test de l’application (click droit sur le projet > Run As > Run on Server) :
2015-03-30_155922

On modifie la valeur des champs (oui je kiffe les Simpson :)) :
2015-03-30_160018

On soumet la saisie :
2015-03-30_160156

OpenUI5 : Simple application – Initialisation par modèle JSON

1 – Reprenez votre projet Simple Application vu précédemment.

2 – Reprenez le code de la méthode createContent (UserDetails.view.js) et y ajouter le chargement d’un modèle JSON qui sera utilisé via un Data Binding sur les deux inputs fields :

Capture d’écran 2015-03-29 à 16.17.18

//JSON data :
var data = {
nom: « Simpson »,
prenom:« Bart »,
};
//Création de l’instance du modèle JSON :
var oModel = new sap.ui.model.json.JSONModel();
//Assignation des données au modèle :
oModel.setData(data);
//Assignation du modèle au Core :
sap.ui.getCore().setModel(oModel);

//Text field prénom :
var oPrenomVal = new sap.ui.commons.TextField(« prenomVal », {value: « {/prenom} »});
//Text field nom :
var oNomVal = new sap.ui.commons.TextField(« nomVal », {value: « {/nom} »});

Capture d’écran 2015-03-29 à 16.35.36

Au chargement de l’application, les input fields sont initialisés :
Capture d’écran 2015-03-29 à 16.43.57

OpenUI5 : Data Binding

Le Data Binding permet de mapper un contrôle à une source de données, permettant ainsi au contrôle d’être mis à jour automatiquement à chaque modification de la source de données.

On distingue 3 types de modèles d’implémentations : JSON, XML et OData.

  • JSON : utilisé pour mapper des contrôles à des données sérialisées au format JSON. Il s’agit d’un modèle côté client qu’on utilisera pour manipuler de petits enregistrements de données entièrement chargés sur le client en un seul appel.
  • XML : utilisé pour mapper des contrôles à des données au format XML. Il s’agit d’un modèle côté client qu’on utilisera pour manipuler de petits enregistrements de données entièrement chargés sur le client en un seul appel.
  • OData : utilisé pour mapper des contrôles à des données à partir de services OData. Il s’agit d’un modèle côté serveur que l’on pourra utiliser pour manipuler de larges enregistrements de données via des requêtes, un peu comme si l’on interrogeait une base de données mais sur le web.

Plus d’infos sur la Data Binding.

OpenUI5 : Gestion de zones de contenu multiples (DIV) sur un écran

Lorsque l’on créé un nouveau projet UI5, par défaut n’est créé qu’une seule zone de contenu DIV, content (que l’on peut bien sûr renommer en prenant le soin de renommer partout où celle-ci est utilisée) :
Capture d’écran 2015-03-28 à 08.31.43

Il est donc possible de définir des zones de contenu multiples (ici on créé une zone de contenu header) :
Capture d’écran 2015-03-28 à 08.38.53

On va maintenant pouvoir l’alimenter de la façon suivante :
//Création du header :
var oHeader = new sap.ui.commons.ApplicationHeader(« header1 »);
oHeader.setLogoText(« This is my header »);
oHeader.setDisplayWelcome(true);
oHeader.setDisplayLogoff(false);
oHeader.placeAt(« header »);

Capture d’écran 2015-03-28 à 09.03.45

Ce qui donne ceci :
Capture d’écran 2015-03-28 à 09.04.28

OpenUI5 : Simple application

Nous allons ici créer un nouveau projet UI5 pour lequel on aura Panel composé d’un champ « Prénom », un champ « Nom » et un bouton « Submit ».

1 – Création d’un nouveau projet SAPUI5 « SimpleApplication » basé sur la librairie sap.ui.commons

2 – Création de la vue initiale « UserDetails » Javascript

3 – Ouvrir le fichier « UserDetails.view.js » et insérer le code suivant dans la fonction createContent pour ajouter un Panel composé d’un champ « Prénom », un champ « Nom » et un bouton « Submit » affichant une alerte reprenant les informations saisies. La méthode createContent est appelée automatiquement par UI5 et permet de créer l’interface utilisateur :

createContent : function(oController) {
//**************** DECLARATION DES VARIABLES *********************
//Panel :
var oPanel = new sap.ui.commons.Panel(« panel »);
//Titre du Panel :
var oTitle = new sap.ui.core.Title;
//Layout :
var oLayout = new sap.ui.commons.layout.MatrixLayout(« layout »);
//Cellule :
var oCell = new sap.ui.commons.layout.MatrixLayoutCell;
//Label prénom :
var oPrenom = new sap.ui.commons.Label(« prenom »);
//Label nom :
var oNom = new sap.ui.commons.Label(« nom »);
//Text field prénom :
var oPrenomVal = new sap.ui.commons.TextField(« prenomVal »);
//Text field nom :
var oNomVal = new sap.ui.commons.TextField(« nomVal »);
//Bouton submit :
var oButton = new sap.ui.commons.Button;
//****************************************************************
//Texte du titre :
oTitle.setText(« User details »);
//Layout fixe :
oLayout.setLayoutFixed(true);
//Longueur totale du layout :
oLayout.setWidth(« 200px »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 80px »,« 150px »);
//Texte du label prénom :
oPrenom.setText(« Prénom »);
//Label associé au text field prénom :
oPrenom.setLabelFor(oPrenomVal);
//Création de la ligne dans le layout :
oLayout.createRow(oPrenom,oPrenomVal);
//Texte du label nom :
oNom.setText(« Nom »);
//Label associé au text field nom :
oNom.setLabelFor(oNom);
//Création de la ligne dans le layout :
oLayout.createRow(oNom,oNomVal);
//Titre du panel :
oPanel.setTitle(oTitle);
//Ajout du layout au panel :
oPanel.addContent(oLayout);
//Ajout du panel au layout :
oPanel.placeAt(« content »);
//Texte du bouton :
oButton.setText(« Submit »);
//Fonction du bouton :
oButton.attachPress(oController.openAlert);
//ColSpan de la cellule :
oCell.setColSpan(2);
//Alignement de la cellule :
oCell.setHAlign(« End »);
//Ajout du bouton dans la cellule :
oCell.addContent(oButton);
//Création de la ligne dans le layout :
oLayout.createRow(oCell);
}

Capture d’écran 2015-03-24 à 23.40.17

4 – Ouvrir le fichier « UserDetails.controller.js » et insérer le code suivant pour créer la fonction openAlert affichant une MessageBox reprenant le prénom et le nom saisie :

openAlert : function () {
//Initialisation du texte :
var txt = « Hello « ;
//Récupération du prénom :
var prenom = sap.ui.getCore().byId(« prenomVal »).getValue();
//Récupération du nom :
var nom = sap.ui.getCore().byId(« nomVal »).getValue();
//Construction du message :
var oMessage = txt.concat(prenom,  » « , nom, » ! »)
//Affichage du message :
sap.ui.commons.MessageBox.alert(oMessage,«  », « Welcome »);
}

Capture d’écran 2015-03-24 à 23.40.34

5 – Test de l’application (click droit sur le projet > Run As > Run on Server) :

Capture d’écran 2015-03-24 à 23.43.05

Capture d’écran 2015-03-24 à 23.43.24

OpenUI5 : HelloWorld

1 – Création d’un nouveau projet SAPUI5 « Hello World » basé sur la librairie sap.ui.commons

2 – Création de la vue initiale « Main » Javascript

3 – Ouvrir le fichier « index.html » et y insérer le code suivant pour ajouter un bouton « Click me » pour afficher une alerte « Hello World! » lorsque l’on clique dessus :

//Déclaration du bouton :
var btn = new sap.ui.commons.Button;
//Libellé du bouton :
btn.setText(« Click me »);
//Evénement Press:
btn.attachPress(function(){alert(« Hello! »)});
//Placement du bouton dans la zone de contenu :
btn.placeAt(« content »);

Capture d’écran 2015-03-22 à 21.12.04

Documentation du Button : https://sapui5.hana.ondemand.com/sdk/docs/api/symbols/sap.ui.commons.Button.html

4 – Test de l’application (click droit sur le projet > Run As > Run on Server) :
Capture d’écran 2015-03-22 à 21.14.17