Set a PanelTab height dynamically using JavaScript

It's not a common scenario but interesting to note down what's the use case and how to implement it.

The use case is to get the view port height on the ADF page and set height to the PanelTab or other component related to the view port height. Most sites are still designed with flow layout on fixed width of the page. Users would have all kinds of different desktop resolutions so that their browser would render the ADF pages a bit differently. Some with large resolution would have large blank space. To make the site more appealing (or even readable at least) and fit into different browser window sizes, we can definitely control the heights of ADF components using JavaScript. In this example, we will look at the PanelTab component but it can be applied to any other ADF components. There is actually a web design - responsive web design - supposed to solve these kind of problems and render the site in multiple platforms. But the solution in this blog is more or less a fix/workaround to an existing ADF application designed with flow layout that requires such effects.

First, we want to get the browser window size (height) when the page is rendered/refreshed. Using the following JavaScript to get the view port height for the ADF page.

function getViewPortHeight(evt) {
    var topComp = evt.getSource();
    var height = topComp.getProperty("viewPortHeight");
    if (height == null) {
        var vpHeight = document.documentElement.clientHeight;
        AdfCustomEvent.queue(evt.getSource(), "getHeightEvent",
        {
            height : vpHeight
        },
        true);
        evt.cancel();
    }
}

The JavaScript is called from the af:document component of your jspx page. Only af:document supports the 'load' type clientListener so we can get the heights when page loads.

The ClientListener will get the height and pass it to the managed bean for further processing. That's how the serverListener is used here.

    public void storeViewPortalHeight(ClientEvent clientEvent) {
        Double height = (Double)clientEvent.getParameters().get("height");
        log.debug("The view Portal height is : {}", height);
        getSessionScope().put("vpHeight", height);
    }

In storeViewPortHeight() method, it gets the height from the clientListener and save it into session scope.

    public void setConfigurationPanelTab(RichPanelTabbed panelTab) {
        String heightStyle = null;
        Double vpHeight = 650.0;
        if (this.getSessionScope().get("vpHeight") != null) {
            vpHeight = (Double)this.getSessionScope().get("vpHeight");
        }
        heightStyle = "height:" + vpHeight + "px;";
        if (hightStyle != null) {
            configurationPanelTab.setInlineStyle(hightStyle);
        } else {
            log.info("View Port is not available");
        }
        this.panelTab= panelTab;
    }

In the above method, we get the height from session scope and set it as inline style on the component setter method.