UI5 Référence

Bonnes pratiques et exemples de code pour les développements UI5

Index

Liens de base
Bonnes pratiques
- Structure d'un projet
- Organisation du code
Nommages
Trucs et astuces
Exemples de code

Liens de base

UI5 > Liens de base

Bonnes pratiques

UI5 > Bonnes pratiques

Structure projet

UI5 > Bonnes pratiques > Structure projet

La structure visée est la suivante :

Formatter, Models, et autres classe utilitaires de traitement des données dans le répertoire model
Fragments dans un sous-répertoire des vues
Les éventuels models locaux JSON également dans le répertoire model
Les éventuelles annotations dans un fichier nommé suivant le nom du service et dans le répertoire model ou localService

Exemple :

Organisation du code

UI5 > Bonnes pratiques > Organisation du code

Classe d'accès au données

Créer une classe Models.js qui contiendra toutes les opérations liées aux modèles de l'application (CRUD...)

Exemple de Models.js :

sap.ui.define([
	"sap/ui/base/Object",
	"sap/ui/model/json/JSONModel"
], function(Object, JSONModel ) {
	"use strict";

	return Object.extend("<mon_package>/model/Models", {

		oComponent: null,

		constructor: function(oComponent) {
			this.oComponent = oComponent;
		},
		[...]
	});
});

Pour y accéder facilement on peut instancier cette classe dans le composant et créer un getter correspondant

[...]
modelHelper: null,
[...]
init: function() {
	[...]
	this.modelHelper = new Models(this);
	[...]
},
getModelHelper: function() {
	return this.modelHelper;
}

Pour simplifier le code des controllers, on pourra dans le BaseController créer une méthode d'accès

getModelHelper: function() {
	return this.getOwnerComponent().getModelHelper();
}

Template standard d'un controller

Utiliser l'événement onRouteMatched pour les traitements initiaux. Ensuite effectuer les éventuels appels oData sous forme de promesses chainées après la chargement des métadonnées du modèle.

onInit: function() {
	this.getRouter().getRoute("<ma_route>").attachMatched(this.on<ma_route>Matched);
},

on<ma_route>Matched: function(event) {
	this.getView().setBusy(true);
	this.getModel().metadataLoaded()
		.then(this.getModelHelper().<lecture_du_modèle>)
		.then(this._<maj_de_l_ui>);
}

Nommages

UI5 > Nommages

Application : Z_ (ex : ZSD_LISTE_CMDS) (15 char max)
Namespace : ch.rolex.. (Ex : ch.rolex.sd.liste_cmds)
Vues : .view.xml (Ex : main.view.xml)
Fragments : .fragment.xml (Ex : table.fragment.xml)
Controlleurs : .controller.js (Ex : Main.controller.js)
Model local : .json
Fichiers d’annotations : <Nomdumodèle>.anno.xml

Trucs et astuces

UI5 > Trucs et astuces

Passer du letterbox au plein écran

Dans component.js :

metadata: {
	manifest: "json",
	config: {
		fullWidth: true
	}
},

Dans index.html :

sap.ui.getCore().attachInit(function() {
	new sap.m.Shell({
		app: new sap.ui.core.ComponentContainer({
			height : "100%",
			name : "ch.rolex.pm.demandemobilier-createdemandemobilier"
		}),
		appWidthLimited: false
	}).placeAt("content");
});

Utiliser ES6 dans Webide

Dans les project settings -> Code checking -> Javascript -> Validator configuration

Ajouter "es6" : true

Exemples de code

UI5 > Exemples de code

Promesses : utilisation des promesses (exemple de chainage)
Classe : utilisation des class (ES6)
ES6 : exemples de nouvelle syntaxe ES6 (déclarations, fonction fléchées, template, class...)
Validation Form : routine pour validation des champs obligatoires d'un form

jberthe/UI5