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

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