mercredi 20 mai 2015

Extension Fiori et Tissage d'aspect

Ne présentons plus les applications Fiori qui sont devenues le nouveau fer de lance de SAP (avec HANA) et dont Internet regorge d'articles et intéressons nous directement à la façon dont on peut les étendre.

Les extensions Fiori

SAP a publié des applications Fiori au sein desquels se trouvent un nombre croissant de points d'extension (consultez "Demande de congé v2" par exemple).
Effectivement, nos clients sont toujours friands de personnaliser, ajuster, étendre leurs applications toujours plus loin... tant en restant dans une zone de maintenabilité et de performances !

Étudions un cas très courant : l'affichage des vacances scolaires dans l'application "Demande de congé v2"

Web IDE vs Eclipse

Pour cela, nous nous sommes appuyés sur l'éditeur en ligne SAP Web IDE sur SAP HANA Cloud Platform. Il existe également un plugin pour Eclipse (SAP Fiori Toolkit) mais SAP a décidé de ne plus le maintenir et de proposer le SAP Web IDE (qui sera payant à terme d'après les informations que j'ai pu glanées)

Notre extension "Vacances scolaires"

La fonctionnalité ajoutée est tout simplement d'être en mesure de visualiser les vacances scolaires (pour les parents qui doivent s'occuper des enfants, comme pour les "non-parents" qui peuvent partir en congés à moindre frais) lors de la sélection de la période de pose.

Voici le résultat :


Comme vous pouvez le voir, les vacances scolaires sont représentés au pied de chaque jour de calendrier. (1 couleur pour chaque zone : A, B ou C)

Même si l'application dispose de nombreux hooks (points d'extension au niveau du contrôleur qui pilote la logique métier de l'écran), il n'en existe pas qui soit déclenché à chaque navigation entre les mois. Le seul hook approchant (extHookInitCalendar) est celui qui permet de configurer le paramétrage du calendrier (affichage de 1 à n mois, etc...)

Tissage d'aspect à la rescousse

Par conséquent, nous avons eu recours à des mesures drastiques ... la Programmation Orientée Aspect qui permet (pour faire court) l'injection de code dans les méthodes standards.
Nous utilisons la librairie jquery-aop sur GitHub: https://github.com/gonzalocasas/jquery-aop

Le cœur de la solution est le suivant :


Nous avons enrichi la méthode de l'instance _renderDay this.cale du calendrier (et juste cette instance) en ajoutant une after method qui modifie le DOM en insérant un span dans la div existante pour chaque date du calendrier concernée.
Ensuite, cette balises est transformé en décoration par simple CSS.

Cette approche est très puissante car elle nous a permis d'aller modifier le comportement interne d'un composant, sans avoir à intervenir sur le code de celui-ci (SAP peut être amené à le faire évoluer par la suite)

PS : Merci à Pierre B. pour m'avoir initié au Tissage d'Aspect... il y a 7 ou 8 ans