Vue Mobile pour des applications EsupCommons V1 avec vue JSF 1.1

Cette page wiki a pour but ici de traiter de la "mobilisation" des vues des applications EsupCommons V1. On s'intéresse notamment aux applications portlet esup-agent et mon-dossier-web* que l'on souhaite pouvoir afficher joliment sur un mobile.

?(* pour mon-dossier-web, une vue mobile est en train d'être réalisée par ESUP (UNR NPDC), cette application ne sera pas traitée ici - pas de besoin donc)

JSF 1.1 en EsupCommons V1, problématique vue mobile et évolutions ESUP.

Les développements portlet en EsupCommons V1 utilisent en technologie de vue JSF 1.1.

Cette version de JSF est assez contraignante, notamment au niveau de l'intégration d'outils tiers (non JSF) devenus maintenant classiques (notamment dans les développements Jasig/uPortal) tels que JQuery et JQuery Mobile.

L'ajout d'attributs ou de tags HTML avec JSF 1 étant en effet assez problématique (cela même si tomahawk avec sa balise htmlTag peut permettre de faire des choses), il est alors délicat d'utiliser JQueryMobile de manière classique (ajout d'attributs spécifiques dans des tags html) sur une vue codée en JSF 1.1.

A terme, on note dès à présent que l'évolution des vues et de la technologie associée à ces portlets serait l'idéal. Pour ce faire, on opterait alors si possible plutôt pour une technologie de vue utilisant Spring MVC et donc du JSP/JSTL classique (et non du JSF), cela étant maintenant une recommandation au niveau ESUP pour les développements des portlets (l'idée étant notamment de suivre la tendance/feuille de route clairement définie par Jasig sur le développement des portlets).

Ce travail d'évolution des vues est un travail lourd qui demande du temps de réalisation. Dès à présent, cependant, les ENT en ESUP/uPortal version 3 ou 4 proposent déjà une vue mobile et la vue non-mobile des applications comme esup-agent et mon-dossier-web est aujourd'hui-même un manque.

"Mobilisation" d'une appli sans intrusion dans le code

Rappel : cette solution est à considérer comme temporaire.

Au même titre que l'on relooke les portlets et l'ENT en général en fonction de la charte graphique de l'établissement, on propose ici un relookage des vues mobiles des portlets EC1 avec vue JSF, cela sans intrusion dans le code des portlets.

La vue mobile pourrait correspondre ainsi simplement à 1 fichier CSS à appliquer en plus. Cependant, si l'on souhaite aller plus loin dans la mobilisation et notamment avoir une ergonomie semblable aux autres portlets ESUP/uPortal en vue mobile, l'idée est d'utiliser également JQuery Mobile de manière dynamique * => en plus d'une CSS spécifique à appliquer, on ajoutera également 1 javascript au niveau de la vue mobile dans l'ENT.

* pour plus d'informations sur cette technique JQuery Mobile, voir la documentation"jQuery Mobile and Dynamic Page Generation".

esup-agent

Valable pour la version 1.0.1

Les fichiers esup-agent-mobile.js et esup-agent-mobile.css sont à rajouter pour accéder à une vue mobile de cette portlet.

Avec un ENT ESUP/uPortal en V4

• décommenter les thèmes jquery dans ../uportal-war/src/main/webapp/media/skins/muniversality/common/jquerymobile/jqm.theme.css
• faire un lien symbolique vers les fichiers dans ../uportal-war/src/main/webapp/media/skins/muniversality/common/javascript/
• éditer ../uportal-war/src/main/webapp/media/skins/muniversality/common/common_skin.xml
• enlever (si présente) l'ancienne feuille de style d'esup-agent
• rajouter les lignes <css>esup-agent-mobile.css</css> et <js>../common/javascript/esup-agent-mobile.js</js>
• faire un ant deploy-war
• redémarrer

En ce qui concerne ESUP/uPortal V3, cela n'a pas été testé (il faudra également embarquer jquery mobile)

Copies d'écran vue mobile.