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

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