Project

General

Profile

Actions

Feature #7909

closed

Supprimer l'utilisation des balises <frameset> et <frame> au niveau du front-end

Added by Yohann Chastagnier over 5 years ago. Updated over 5 years ago.

Status:
Closed
Priority:
Normal
Category:
Look
Target version:
Start date:
05/19/2016
Due date:
% Done:

100%

Estimated time:
Livraison en TEST:
Livraison en PROD:

Description

Tout est dans le titre...

Il ne s'agit pas ici de mettre en place une nouvelle interface utilisateur, mais de changer le mécanisme de chargement de la page afin de ne plus utiliser la structure avec les balises <frameset> et <frame> qui ne font plus partie des spécifications à partir de HTML5.

Les effets attendus sont notamment :
  • ne plus avoir de scintillement lors de rechargement des pages
  • pouvoir de nouveau regarder les vidéos en streaming en plein écran
  • que les différents plugins javascript utilisés ou réalisés par Silverpeas puissent bénéficier du mode plein écran (diaporama par exemple)
  • augmenter la rapidité de chargement des pages
  • maîtriser plus précisément le (re)chargement des différentes parties qui constituent une page Silverpeas
  • etc.

Seuls les navigateurs permettant l'utilisation d'API JavaScript récentes et de CSS3 seront compatibles.


Files

structure_page.png (24.6 KB) structure_page.png Yohann Chastagnier, 06/08/2016 04:37 PM

Related issues

Related to Silverpeas Core - Feature #9796: Améliorer la fluidité de l'affichage des pages de SilverpeasClosedYohann Chastagnier05/14/2018

Actions
Actions #1

Updated by Yohann Chastagnier over 5 years ago

  • Status changed from Assigned to In progress...
  • % Done changed from 0 to 80
Actions #2

Updated by Nicolas Eysseric over 5 years ago

  • Project changed from 142 to Silverpeas Core
  • Category set to Look
  • Target version changed from 6.0 to Version 6
Actions #3

Updated by Yohann Chastagnier over 5 years ago

Au niveau du front-end, la structure basée sur les balises <frameset> et <frame> n'est plus.

Ces deux balises ont été remplacées par de simples balises <div>.
Seule la balise <frame> dédiée à l'affichage d'une application est devenue une balise <iframe>.
(La balise <iframe> est celle retenue dans les spécifications HTML5)

Les balises <div> sont populées via des requêtes AJAX et les effets attendus sont bien au rendez-vous, notamment :
  • chargement des pages plus fluide, sans scintillement
  • les fonctionnalités d'affichage en plein écran, gérées en Javascript, sont de nouveau valides (lecteur Youtube présenté dans la Médiathèque par exemple). Quelques outils, comme CKEditor (dans la version actuellement utilisée) ne s'affiche pas encore en plein écran. Une mise à jour de ces derniers devrait permettre un bon fonctionnement.

Cette structure par <div> permet également de supprimer une contrainte d'affichage, et non des moindres : il est maintenant possible d'avoir des éléments d'une zone de la page qui empiètent sur une autre zone.
Par exemple, des éléments de la zone de navigation (zone où les espaces et applications sont affichés) peuvent s'afficher en partie au dessus de la zone de l'application.
Ou encore, des éléments de l'entête de page peuvent aussi se déplier au dessus de la zone de navigation et la zone de l'application.
Par contre, les élements de la zone de l'application, eux, ne peuvent pas s'afficher au dessus des autres zones de la page.

Dans le cadre de ce travail a été créé un outillage de gestion de la structure de la page.
Il permet notamment de contrôler plus finement le rechargement des différentes zones.

A l'occasion de ce REDMINE, il a aussi été ajouté un mécanisme de minification des sources JAVASCRIPT et CSS.
La minification permet notamment d'alléger le poids des données qui transitent entre le serveur et le client WEB.

Dans le cadre de cette fiche, très peu de remaniements ont été effectués autour de l'enchaînement des opérations de chargement des différentes zones.
Ces travaux d'optimisation et de refactorisation seront réalisés petit à petit au cours des prochains développements.

Pour terminer, les navigateurs suivants sont compatibles :
  • Chrome 21+
  • Firefox 4+
  • Internet Explorer 11+ (IE10, malgré une vieille implémentation incompatible des flexbox CSS semble fonctionner, mais c'est sans garantie)
PR :

Informations techniques

Outillage de gestion de la struture de la page

Cet outillage est un plugin JavaScript : Silverpeas Layout (silverpeas-layout.js).

La structure d'une page peut être vue de la manière suivante :

Il existe toujours les pages JSP suivantes :
  • MainFrameSilverpeasV5.jsp : page principale contenant la structure de base (c'est à dire la zone de gauche sur l'image ci-dessus).
    La structure HTML du layout doit être la suivante :
    <div id="sp-layout-main">
      <!-- Zone 1 -->
      <div id="sp-layout-header-part"></div>
      <!-- Zone 2 -->
      <div id="sp-layout-body-part"></div>
      <!-- Zone 3 -->
      <div id="sp-layout-footer-part" style="display: none"></div>
    </div>
    
  • TopBarSilverpeasV5.jsp : contient les éléments affichés dans l'entête (la zone 1)
  • bodyPartSilverpeasV5.jsp (anciennement nommée frameBottomSilverpeasV5.jsp) : contient la structure du corps de la page (la zone 2).
    Cette page permet de produire la partie HTML qui doit être affichée dans la zone (ne contient donc ni la balise head ni la balise body).
    Sa structure HTML doit être la suivante :
    
    <div id="sp-layout-body-part-layout">
      <!-- Zone 4 -->
      <div id="sp-layout-body-part-layout-navigation-part"></div>
      <!-- Zone 5 -->
      <div id="sp-layout-body-part-layout-content-part">
        <iframe src="[URL de la page à présenter]" marginwidth="0" id="MyMain" name="MyMain" marginheight="0" frameborder="0" scrolling="auto" width="100%" height="100%"></iframe>
      </div>
    </div>
    
  • le bas de page (la zone 3) est lui populé par pdcSearchSilverpeasV5.jsp

Remarque : il n'y a pas encore eu de renommage des suffixes V5, cela sera sûrement réalisé lors de prochaines actions ;-)

Quel que soit l'endroit depuis lequel un traitement Javascript est exécuté, l'instance unique spLayout est disponible.
(A condition que <view:looknfeel ... /> soit bien appelé dans la page JSP d'une application qui est affichée dans la balise <iframe>)

Le plugin permet d'accéder facilement aux différentes zones de la page finale et pour chacune des zones un ensemble de fonctionnalités est proposé.
Il propose un accesseur pour chaque zone indiquée dans le schéma plus haut. Chacun de ces accesseurs retourne une instance Javascript qui représente la zone. Chacune de ces instances propose plus ou moins de fonctionnalités.

La minification des JavaScript et Css

Ici, le compresseur YUICompressor de Yahoo est utilisé au travers d'un plugin MAVEN.
Lors de la compilation des sources de Silverpeas, tous les fichiers Javascript et Css sont minifiés, sauf quelques exceptions et ceux déjà minifiés (c-à-d ceux qui comportent déjà dans leur nom .min., .min-, -min. ou -min-).

Tous les fichiers sollicités par WebCommonLookAndFeel.java et ceux des plugins référencés par SupportedJavaScriptPlugins.java sont gérés.
Pour que les sources minifiées soient celles utilisées, depuis une page JSP, il faut passer par les TAG suivants :
  • <view:script src="/script.js"/> : la page HTML produite contiendra en réalité une référence vers script-min.js
  • <view:link src="/css.js"/> : la page HTML produite contiendra en réalité une référence vers css-min.js

A noter que chacun des deux TAGs précédents ajoute implicitement le contexte de l'application.
Par exemple, <view:script src="/script.js"/> correspond en réalité à /silverpeas/script-min.js

Ils permettent aussi de gérer d'autres points, comme l'ajout d'un paramètre associé à la version de Silverpeas pour forcer le rechargement sur les postes clients des plugins javascripts (notamment) lors de la mise à jour d'une version.

Deux paramètres ont été ajoutés dans le fichier de propriétés $SILVERPEAS_HOME/properties/org/silverpeas/general.properties :
  • web.resource.js.get.minified.enabled (booléen) : permet d'activer l'appel aux fichiers Javascript dans leur version minifiée (activé par défaut)
  • web.resource.css.get.minified.enabled (booléen) : permet d'activer l'appel aux fichiers Css dans leur version minifiée (activé par défaut)

Ces deux paramètres permettent, dans un environnement de développement par exemle, de pouvoir basculer sur les sources non minifiées rapidement (sans redémarrer le serveur).

Actions #4

Updated by Miguel Moquillon over 5 years ago

  • Status changed from Resolved to Closed
Actions #5

Updated by Yohann Chastagnier over 3 years ago

  • Related to Feature #9796: Améliorer la fluidité de l'affichage des pages de Silverpeas added
Actions

Also available in: Atom PDF