Open UI5 : Les champs calculés

Les champs calculés permettent le binding de plusieurs propriétés d’un ou plusieurs models à une seule et même propriété d’un contrôle. On pourra ainsi, par exemple, binder la valeur d’un contrôle à une propriété « prénom » d’un model et à une propriété « nom » d’un autre model.

Associé à ce que l’on appelle un formatter, on pourra ainsi définir la façon dont les différentes propriétés seront traitées et assignées à la valeur du contrôle (via par exemple une concaténation).

Nous allons pour cet exemple afficher une table de sportifs affichant pour chacun d’entre eux : son nom, son prénom, et un intitulé du type « <prénom> <nom> est un champion de <discipline> ».

Pour ce faire, commençons par créer un nouveau projet, « CalculatedFields » par exemple (de type mobile, pour changer) :
2015-04-07_163730

Alimenter la méthode createContent comme suit pour créer la table basée sur le model JSon correspondant à notre liste de sportifs (le champ calculé correspondant à la dernière colonne, « description ») :


createContent : function(oController) {
//Donnees de la table :
var tableData = { « data » : [
{« nom »:« Bolt »,« prenom »:« Usain »,« discipline »:« Athletisme »},
{« nom »:« Jordan »,« prenom »:« Michael »,« discipline »:« Basketball »},
{« nom »:« Tyson »,« prenom »:« Mike »,« discipline »:« Boxe »},
{« nom »:« Kournikova »,« prenom »:« Anna »,« discipline »:« Tennis »},
{« nom »:« Lee »,« prenom »:« Chong Wei »,« discipline »:« Badminton »}
]};

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

oModel.setData(tableData);

//Creation de la table :
var oTable = new sap.ui.table.Table({
width: « 100% »,
columns: [
//Colonne Nom :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Nom »}),
template: new sap.ui.commons.TextView({ text: « {nom} »}),
}),
//Colonne Prenom :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Prenom »}),
template: new sap.ui.commons.TextView({ text: « {prenom} »}),
}),
//Colonne discipline :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Discipline »}),
template: new sap.ui.commons.TextView({ text: « {discipline} »}),
}),
//Colonne Description :
new sap.ui.table.Column({
label:new sap.ui.commons.Label({ text : « Description »}),
template: new sap.ui.commons.TextView({ text: {
parts: [
{path: « nom », type: new sap.ui.model.type.String()},
{path: « prenom », type: new sap.ui.model.type.String()},
{path: « discipline », type: new sap.ui.model.type.String()} ],
formatter: function(nom, prenom,discipline){
if( discipline != null){
if( discipline.charAt(0) == « A »){
return prenom +  » «  nom +  » est un champion d' » + discipline;
}
else{
return prenom +  » «  + nom +  » est un champion de «  + discipline;
}
}
}
}}),
}),
],
visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
visibleRowCount:oModel.getData().data.length,
});

oTable.setModel(oModel);
oTable.bindRows(« /data »);

return new sap.m.Page({
title: « Calculated fields Demo »,
content: [
oTable
]
});
}


Ce qui donne le résultat suivant :

2015-04-07_165459

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