Loading in steps for application index page

Question

Loading in steps for application index page

Navigation

#1 by (0 votes)

1

I have a commercial application that has an extremely time consuming login for the user. The connection to the Database to validate user and password, as well as the initialization of Spring Security take around 0.8 seconds, which is great.

The problem is the loading of the main page, which displays graphs and tables and the connection to the Bank reaches more than 20 seconds. The query is made at the Bean startup and only after the return, the displayed page changes. For the user, there is no feedback while this is done and gets the impression that the application has crashed.

Calling the Home Page method:

<f:metadata>
    <f:viewAction action="#{paginaInicialBean.inicializar()}"/>
</f:metadata>

I have already tested with @PostConstruct , javascript methods like window.onload or with the word " defer ", but all have the same behavior already offered by the core schema of JSF (f :).

I thought about doing a step load as Gmail does, but I was not successful in the implementation. Another option would be to display my template (Top Menu) and only then call the Home Page method, so the user knows that something is being loaded and if you do not want to wait, you can exit by browsing the menu.

Has anyone had this difficulty yet?

jsf

asked by anonymous 22.07.2017 / 04:06

1 answer

Delete a row in DB Accessing webservice with SOAP Headers and Node.js

score 0 · Answer 1

To do this I suggest that you open the page without running the #{paginaInicialBean.inicializar()} method, and only after the page is loaded do you run an Ajax that initializes the data and updates the contents of the screen.

To do this follow these steps:

Remove <f:viewAction> initialization from tag <f:metadata>
Create a <h:commandLink> with a id any and with style="display:none" (to be invisible) that executes the #{paginaInicialBean.inicializar()} method on the <f:ajax>
In the <f:ajax> tag, indicate which screen elements should be updated in the render attribute and call the #{paginaInicialBean.inicializar()} method in the listener
Finally, execute a JavaScript function that clicks on <h:commandLink> when the page has been fully loaded.

By doing this the page will be accessed quickly, and after the content will be loaded. Here is a snippet for better analysis:

<h:head>
    <script>
        //Este é o código JavaScript que irá executar e chamar o clique no seu h:commandLink quando a página tiver sido carregada
        //Note que o id do botão precisa ser o id form, dois pontos e id do botão 'idDoForm:idDoBotao'
        window.onload = function() {
            document.getElementById('pagina:botaoCarregarDados').click();
        }
    </script>
</h:head>
<h:body>
    <h:form id="pagina">
        <h:panelGroup id="conteudoDaPagina">
            <!-- Aqui ficaria o conteúdo dinâmico de sua página -->
        </h:panelGroup>            

        <!-- Abaixo fica o botão que irá carregar os dados da sua página de forma dinâmica -->
        <h:commandLink id="botaoCarregarDados" style="display: none;">
            <f:ajax listener="#{paginaInicialBean.inicializar()}" render=":conteudoDaPagina"/>
        </h:commandLink>
    </h:form>
</h:body>

You can also perform some JavaScript function that blocks the screen while the content is loaded, but it is up to you.

This question has already been answered in the "original" StackOverflow. Here is the link below the question: Run managebean method from javascript onload event