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

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 )

Connexion à %s