Answer by Reguel Wermelinger

Reguel Wermelinger — Mon, 20 Nov 2017 07:56:00 -0500

Why so much memory is used

Invisible parts on the UI take memory on the engine because normally the HTML of these dialogs and tabs are eagerly loaded. The whole HTML code is generated and the view state is held on the engine. This requires processing power and memory. One can quickly identify such parts in a JSF dialog by using the Firefox + Inspect the page content. Loaded but not visible parts are shown as grayed out HTML in the console:

How to solve it

Use the rendered attribute to avoid eager loading of large UI parts that are not visible on the initial dialog. Load them on demand with Ajax requests.

A lightweight solution for modal dialogs: In this example we have a button that controls the rendered attribute of a <p:dialog />.

<h:form id="form">
    <p:outputPanel id="address">
        <p:commandButton value="Add Address" icon="fa fa-list-alt"
            actionListener="#{logic.showAddress(true)}" oncomplete="PF('addressDialog').show()"
            update="form:address" />
        <p:dialog id="dialog" widgetVar="addressDialog" 
            header="Large sample component" 
            modal="true" visible="true" rendered="#{data.showAddress}" closable="false" >
                <ic:ch.ivyteam.htmldialog.demo.component.AddressComponent id="input" >
                    <p:commandButton value="close" 
                    actionListener="#{logic.showAddress(false)}" onclick="PF('addressDialog').hide()"
                    update="form:address"/>
                    <br/>
                </ic:ch.ivyteam.htmldialog.demo.component.AddressComponent>
        </p:dialog>
    </p:outputPanel>
</h:form>

With the Weisshorn Sprint 3 release of Axon.ivy the full sample can be analyzed in the HtmlDialogDemos. Import > Axon.ivy > Sample Project > Html Dialog Demos > Component/lazyLoadComponent.ivp

Answers to: Best practices to reduce the memory that is used by a single Html Dialog?

Answer by Reguel Wermelinger