Pós Processamento de HTML

O LumisPortal dispõe de uma API client-side para centralizar o pós processamento do HTML.

O uso básico dessa API é:

Uma função JavaScript fn⁽¹⁾ é registrada na API através de uma chamada LumisPortal.HtmlProcessor.register(fn);
Um componente que altere o HTML da página notifica a API através de LumisPortal.HtmlProcessor.process(element)⁽²⁾;
A API invoca cada função registrada, na ordem que foram registradas, passando o parâmetro element, ou seja, no caso da função fn, invocaria fn(element);

Motivação e exemplo

Imagine que temos uma situação onde uma interface de um serviço necessite alterar um trecho do HTML gerado, injetando, por exemplo, um botão (representado pela imagem lumis/portal/client/images/Edit.gif).

Uma solução poderia ser fazer, no XSL da interface, um javascript que injetasse o HTML desejado no ready do document, como no exemplo abaixo:

Essa solução funciona, como nas imagens abaixo:

Navegando para a segunda página, teríamos:

O funcionamento aparentemente está correto. Agora, habilitaremos a renderização client-side da instância de interface, como abaixo:

Após isso, ao renderizar a página novamente, teríamos:

Repare que o ícone sumiu. Isso ocorre pois a interface não é injetada durante a renderização da página e quando o script que injeta o ícone roda o HTML da interface ainda não está pronta.

Para resolver esse problema poderíamos alterar o XSL para injetar o ícone através da API de pós processamento de HTML, como abaixo:

Renderizando a página novamente, vemos:

O problema foi corrigido, uma vez que o LumisPortal invoca automaticamente a API de pós processamento de HTML ao renderizar uma instância de serviço.

Agora suponha, por exemplo, que a interface de lista atualiza suas informações (adicionando um novo elemento, por exemplo) através de uma chamada AJAX. Para exemplificar esse cenário, alteraremos o XSL para incluir um botão que adiciona um novo elemento no HTML, como abaixo:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
         ${lum_beforeWrite('<xsl:text disable-output-escaping="yes"><script type="text/javascript" src="lumis/tool/jquery/jquery.js"></script></xsl:text>', 'jquery.js')}
         <script type="text/javascript">
                 <xsl:text disable-output-escaping="yes"><![CDATA[
                         
                         LumisPortal.HtmlProcessor.register(function(element){
                                 $(element).find(".lum-content-title").each(function(){
                                         $(this).append($("<img src=\"lumis/portal/client/images/Edit.gif\" />"));
                                 });
                         });
                         
                         $(document).ready(function(){
                                 $("#addItem").click(function(){
                                         $(".lum-list-item").removeClass("lum-first").removeClass("lum-last");
                                         
                                         $(".lum-list-item:first").parent().append("<li class=\"lum-list-item\"><article class=\"lum-content\" data-lum-entityid=\"FF808081490B1AD601490B22DE1E00E9\" data-lum-title=\"N2\" data-lum-url=\"\" data-lum-serviceinstanceid=\"FF808081490B1AD601490B2235F40088\"><header class=\"lum-content-header\"><h1 class=\"lum-content-title\">N2</h1><ul class=\"lum-content-meta-information\"><li class=\"lum-first lum-last\"> em <time datetime=\"2014-10-13T17:11:00\">13/10/14 17:11</time></li></ul></header></article></li>");
                                         $(".lum-list-item:first").addClass("lum-first");
                                         $(".lum-list-item:last").addClass("lum-last");
                                         
                                 });
                         });
                         
                         
                 ]]></xsl:text>
         </script>
         <div id="addItem">
                 Adicionar item
         </div>
 </xsl:template>
</xsl:stylesheet>

Ao renderizar novamente a página e clicar no botão, teríamos o seguinte efeito:

Note que o ícone não foi introduzido no item adicionado pelo javascript. Nessa situação, o código responsável pela adição do novo elemento deve ser responsável pela invocação da API, como demonstrado abaixo:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:template match="/">
         ${lum_beforeWrite('<xsl:text disable-output-escaping="yes"><script type="text/javascript" src="lumis/tool/jquery/jquery.js"></script></xsl:text>', 'jquery.js')}
         <script type="text/javascript">
                 <xsl:text disable-output-escaping="yes"><![CDATA[
                         
                         LumisPortal.HtmlProcessor.register(function(element){
                                 $(element).find(".lum-content-title").each(function(){
                                         $(this).append($("<img src=\"lumis/portal/client/images/Edit.gif\" />"));
                                 });
                         });
                         
                         $(document).ready(function(){
                                 $("#addItem").click(function(){
                                         $(".lum-list-item").removeClass("lum-first").removeClass("lum-last");
                                         
                                         $(".lum-list-item:first").parent().append("<li class=\"lum-list-item\"><article class=\"lum-content\" data-lum-entityid=\"FF808081490B1AD601490B22DE1E00E9\" data-lum-title=\"N2\" data-lum-url=\"\" data-lum-serviceinstanceid=\"FF808081490B1AD601490B2235F40088\"><header class=\"lum-content-header\"><h1 class=\"lum-content-title\">N2</h1><ul class=\"lum-content-meta-information\"><li class=\"lum-first lum-last\"> em <time datetime=\"2014-10-13T17:11:00\">13/10/14 17:11</time></li></ul></header></article></li>");
                                         $(".lum-list-item:first").addClass("lum-first");
                                         $(".lum-list-item:last").addClass("lum-last");
                                         
                                         LumisPortal.HtmlProcessor.process($(".lum-list-item:last"));
                                         
                                 });
                         });
                         
                         
                 ]]></xsl:text>
         </script>
         <div id="addItem">
                 Adicionar item
         </div>
 </xsl:template>
</xsl:stylesheet>

Repare que agora o clique do botão faz, após a injeção do HTML, uma invocação LumisPortal.HtmlProcessor.process(elemento);. Dessa forma, ao renderizar novamente a página e clicar no botão, teríamos o seguinte efeito:

Repare que agora o novo elemento foi processado corretamente e teve seu ícone injetado.

De forma geral, todo o código javascript que altera o DOM e deseja ser compatível com funcionalidades que utilizam este pós processamento de HTML, deveria invocar LumisPortal.HtmlProcessor.process(elemento); passando o elemento incluído/alterado.

De forma semelhante, todo o código javascript que altere o DOM genericamente (como a inclusão do ícone, por exemplo), para ser compatível com a renderização client-side ou outras modificações de HTML que usam esta API, deveria fazê-lo registrando uma função na API de pós processamento de HTML, chamando LumisPortal.HtmlProcessor.register(function(element){ /* código da função */ });.