OpenUI5 : Type de donnée personnalisé

Si les types de donnée standards ne vous conviennent pas, vous avez la possibilité de définir vos propres types de donnée via la méthode « sap.ui.model.SimpleType.extend ».

Ainsi, reprenez le projet SimpleApplication que nous allons modifier pour ajouter un champ E-Mail implémentant un contrôle de validité de l’adresse mail. Pour ce faire, procédez de la façon suivante :


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 *********************
//Creation d’un nouveau type de donnees « E-mail » avec controle du format :
sap.ui.model.SimpleType.extend(« sap.test.eMail », {
formatValue: function(oValue){
return oValue;
},
parseValue: function(oValue){
return oValue;
},
validateValue: function(oValue){
//Expression reguliere de controle du format d’une adresse e-mail :
var mailregex = /^\w+[\w-\.]*\@\w+((-\w+)|(\w*))\.[a-z]{2,3}$/;
//Controle de l’adresse e-mail :
if (!oValue.match(mailregex)) {
//L’adresse e-mail n’est pas valide, on leve une exception :
throw new sap.ui.model.ValidateException(« L’adresse e-mail n’est pas valide »);
}
}
});

//Attachement evenement erreur validation :
sap.ui.getCore().attachValidationError(function(ex){
//On met le champ en erreur :
ex.getParameter(« element »).setValueState(sap.ui.core.ValueState.Error);
// On assigne un message d’erreur au champ :
ex.getParameter(« element »).setValueStateText(ex.getParameter(« exception »).message);
});

//Attachement evenement succes validation :
sap.ui.getCore().attachValidationSuccess(function(evt){
//On met le champ en succes :
evt.getParameter(« element »).setValueState(sap.ui.core.ValueState.Success);
});

//JSon data – Liste des utilisateurs :
var dataList = { « email »:«  », « 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 :
var oNomVal = new sap.ui.commons.TextField(« nomVal »);
//Text Or pick a username :
var oPickUserName = new sap.ui.commons.Label(« Pick »);
//Label e-mail :
var oMail = new sap.ui.commons.Label (« email »);
//Text field e-mail :
var oMailVal = new sap.ui.commons.TextField(« eMail », { //ou sap.m.Input
placeholder:« Saisir une adresse e-mail valide »,
width:« 400px »,
value: {
path: « /email »,
type: new sap.test.eMail(), //Type e-mail créé plus haut
}});
//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(« 550px »);
//Longueur de chaque colonne du layout :
oLayout.setWidths(« 150px »,« 400px »);

//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 label du Select :
oMail.setText(« E-mail »);
//Creation du select :
oLayout.createRow(oMail, oMailVal);

//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 »);
}


Testez, votre application, vous devriez obtenir quelque chose comme ça :

2015-04-02_145207

Saisir une adresse e-mail au format erroné et validez. Celle-ci se retrouve en erreur :
2015-04-02_145405

Modifiez l’adresse dans un format correct et cliquez à nouveau. Celle-ci se retrouve en succès :
2015-04-02_145547

Il est également possible d’associer un message d’erreur à la zone en erreur, mais pour cela il est nécessaire de remplacer le type d’objet correspondant à l’adresse e-mail (sap.m.Input au lieu de sap.ui.commons.TextField). En effet, pour ce faire il faut utiliser la propriété setValueStateText qui n’existe pas pour le contrôle sap.ui.commons.TextField :


//Text field e-mail :
var oMailVal = new sap.m.Input(« eMail », { //ou sap.ui.commons.TextField
placeholder:« Saisir une adresse e-mail valide »,
width:« 400px »,
value: {
path: « /email »,
type: new sap.test.eMail(), //Type e-mail créé plus haut
}});


Ce qui devrait maintenant vous donner ceci :
2015-04-02_150440

2015-04-02_150500

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