Comment by Reguel Wermelinger on Reguel Wermelinger's answer

Reguel Wermelinger — Mon, 20 Nov 2017 08:33:39 -0500

From the ivy.core we want to lower the pain of these refactorings by solving the following issues:

Comment by SupportIvyTeam on Reguel Wermelinger's answer

SupportIvyTeam — Mon, 20 Nov 2017 08:09:04 -0500

one of our customers has 24 modal dialogs in multiple tabs. by applying the rendered attribute as shown above, the memory usage on the engine side could be lowered from 80 MB to 25 MB.

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?

Comment by Reguel Wermelinger on Reguel Wermelinger's answer

Comment by SupportIvyTeam on Reguel Wermelinger's answer

Answer by Reguel Wermelinger