Open the menu

    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(1) é 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)(2);
    • 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:

    post_processing_of_html_000

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

    post_processing_of_html_001

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

    post_processing_of_html_002

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

    post_processing_of_html_003

    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:

    post_processing_of_html_004

    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:

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

    post_processing_of_html_005

    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:

    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:

    post_processing_of_html_006

    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 */ });.