OpenUI5 : Simple application

Nous allons ici créer un nouveau projet UI5 pour lequel on aura Panel composé d’un champ « Prénom », un champ « Nom » et un bouton « Submit ».

1 – Création d’un nouveau projet SAPUI5 « SimpleApplication » basé sur la librairie sap.ui.commons

2 – Création de la vue initiale « UserDetails » Javascript

3 – Ouvrir le fichier « UserDetails.view.js » et insérer le code suivant dans la fonction createContent pour ajouter un Panel composé d’un champ « Prénom », un champ « Nom » et un bouton « Submit » affichant une alerte reprenant les informations saisies. La méthode createContent est appelée automatiquement par UI5 et permet de créer l’interface utilisateur :

createContent : function(oController) {
//**************** DECLARATION DES VARIABLES *********************
//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 prénom :
var oPrenom = new sap.ui.commons.Label(« prenom »);
//Label nom :
var oNom = new sap.ui.commons.Label(« nom »);
//Text field prénom :
var oPrenomVal = new sap.ui.commons.TextField(« prenomVal »);
//Text field nom :
var oNomVal = new sap.ui.commons.TextField(« nomVal »);
//Bouton submit :
var oButton = new sap.ui.commons.Button;
//****************************************************************
//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(« 80px »,« 150px »);
//Texte du label prénom :
oPrenom.setText(« Prénom »);
//Label associé au text field prénom :
oPrenom.setLabelFor(oPrenomVal);
//Création de la ligne dans le layout :
oLayout.createRow(oPrenom,oPrenomVal);
//Texte du label nom :
oNom.setText(« Nom »);
//Label associé au text field nom :
oNom.setLabelFor(oNom);
//Création de la ligne dans le layout :
oLayout.createRow(oNom,oNomVal);
//Titre du panel :
oPanel.setTitle(oTitle);
//Ajout du layout au panel :
oPanel.addContent(oLayout);
//Ajout du panel au layout :
oPanel.placeAt(« content »);
//Texte du bouton :
oButton.setText(« Submit »);
//Fonction du bouton :
oButton.attachPress(oController.openAlert);
//ColSpan de la cellule :
oCell.setColSpan(2);
//Alignement de la cellule :
oCell.setHAlign(« End »);
//Ajout du bouton dans la cellule :
oCell.addContent(oButton);
//Création de la ligne dans le layout :
oLayout.createRow(oCell);
}

Capture d’écran 2015-03-24 à 23.40.17

4 – Ouvrir le fichier « UserDetails.controller.js » et insérer le code suivant pour créer la fonction openAlert affichant une MessageBox reprenant le prénom et le nom saisie :

openAlert : function () {
//Initialisation du texte :
var txt = « Hello « ;
//Récupération du prénom :
var prenom = sap.ui.getCore().byId(« prenomVal »).getValue();
//Récupération du nom :
var nom = sap.ui.getCore().byId(« nomVal »).getValue();
//Construction du message :
var oMessage = txt.concat(prenom,  » « , nom, » ! »)
//Affichage du message :
sap.ui.commons.MessageBox.alert(oMessage,«  », « Welcome »);
}

Capture d’écran 2015-03-24 à 23.40.34

5 – Test de l’application (click droit sur le projet > Run As > Run on Server) :

Capture d’écran 2015-03-24 à 23.43.05

Capture d’écran 2015-03-24 à 23.43.24

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