FROM THE BLOG

ADF Tips: How to implement a kind of responsive af:panelDashboard?

Oracle JDeveloper & ADF Team have made a great job with the latest release of Oracle ADF including the new out of the box skin and patterns – Alta UI. The concept of having a responsive ADF Application has become something that we can now actually see instead of dream. Whether you agree or not, for some people the look and feel is as important as the functional requirements in a web application. I agree.

In this post, I will show how, getting a little creative, one can find workarounds to make some af components, kind of responsive. You can download the sample here. The logic behinds is simple; if the browser width is more than 1024 then we want the panelDashboard to have 3 columns;

adf_panelDashboard_responsive_1

Between 1024 and 600 then should have 2 columns;

adf_panelDashboard_responsive_2

Less than 600 then 1 column;

adf_panelDashboard_responsive_3

This is how the application would behave;

PanelDashboardResizing

Did you realize that the responsiveness needs a request to the server and a PPR? Unfortunately, because the panelDashboard relies in a component attribute rather than a style class to position the boxes, then a request to the server needs to be done in order to update the component accordingly based on the new browser dimensions. This is the reason why is not 100% responsive but a kind of responsive implementation.

In order to get the browser dimensions we use JQuery based on

adf_panelDashboard_responsive_4

We used a dummy inputText with visible -> false in order to be able to attach a serverListener and queue it in our javascript;

adf_panelDashboard_responsive_5

Feel free to propose other alternatives or a cleaner implementation (e.g how to invoke a method from a managed bean without having to use the dummy inputText).

Leave a comment

Your email address will not be published. Required fields are marked *

Social Media

Stay up-to-date with our latest ADF and related technical posts via your favourite social network services.