Personnalisation du balisage de chargement pour le rendu de contenu Web asynchrone

Pour ajuster le balisage de chargement en fonction de l'acquis utilisateur, vous pouvez le personnaliser. Par exemple, vous pouvez utiliser une icône ou un texte de chargement spécifique à une société.

Pourquoi et quand exécuter cette tâche

Pour cela, utilisez les instructions suivantes :

Procédure

  1. Créez un composant HTML HCL Web Content Manager dans une bibliothèque Web Content Manager.
    Le corps de ce composant HTML Web Content Manager nouvellement créé sert de balisage de chargeur personnalisé et est fourni par le portlet d'affichage de contenu Web.
  2. Pour avertir le portlet qu'il doit utiliser un balisage personnalisé plutôt que le contenu par défaut, définissez le paramètre de page wcm.custom.asynchronous.rendering.loader. Pour la valeur, spécifiez le chemin d'accès au composant HTML. Une fois ce paramètre défini, tous les portlets d'affichage de contenu Web sur cette page utilisent le balisage personnalisé provenant du composant HTML.
  3. Pour la prise en charge du contenu Web configuré, créez l'URL de ressource compatible avec JSR 286. Pour cela, utilisez le plug-in de rendu PortletResourceURL.
    Cette URL de ressource déclenche la méthode serveResource du portlet d'affichage de contenu Web et renvoie le contenu Web rendu.
  4. Utilisez ce balisage pour mettre à jour le modèle d'objet de document HTML.
    Le plug-in de rendu PortletResourceURL prend en charge les attributs que vous pouvez utiliser avec des URL de ressource, tels que l'identificateur de ressource id ou cacheability. Dans le cadre du rendu de contenu Web asynchrone personnalisé, il est inutile de définir des attributs. Dans la mesure où il est possible d'avoir plusieurs instances de ce balisage de chargement personnalisé sur une page, utilisez l'attribut namespace du plug-in de rendu de portlet afin de créer des identificateurs uniques.

Exemple

Le contenu suivant est un exemple de balisage de chargeur personnalisé :
<div>
   <a href="[Plugin:PortletResourceURL]" id="[Plugin:Portlet key="namespace"]customAsyncRenderingHook"></a>
   <div style="width: 100%; text-align: center; padding-top: 5em;">
      <span>Loading web content...</span>
   </div>
</div>

<script type="text/javascript">
(function() {
   var hook = document.getElementById("[Plugin:Portlet key="namespace"]customAsyncRenderingHook");
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
      if (xhr.readyState==this.DONE) {
         if (xhr.status==200) {
            hook.parentNode.innerHTML = xhr.responseText;
         } else if (xhr.status==0) {
            // implement timeout handling here ...
         } else {
            // implement error handling here
         }
      }
   };

   xhr.open("GET", hook.href);
   xhr.timeout = 5000;
   xhr.ontimeout = function() { console.error('Asynchronous rendering timed out.'); };
   xhr.send();
}());
</script>