Saturday, February 20, 2010

Dynamic Flying Dashboard UI Shell

My today post is next in ADF integration series - Integration. Sample application, I'm going to describe, is based on Dynamic Dashboard Demo code from Oracle ADF Faces Components demo (see Visual Designs).

In one of my projects, I got a design requirement to develop entire application with regions, practically using only one JSPX page. Different regions were implemented in separate applications and integrated into main application using ADF JAR libraries. Logically thinking, I should not develop any Dynamic Dashboard UI Shell, and just use ADF Dynamic Regions functionality. Unfortunately, in current JDev 11g PS1 release, we have problems with Dynamic Regions rendering and usage - see SR 3-1354209241 Oracle Metalink request logged by fellow developer. I decided to implement UI Shell that renders static ADF Regions, but in dynamic way.

Download sample application -, this sample contains main application called DynamicDashboard, where ADF Regions from separate applications are integrated. I developed four separate applications with JSF Fragments and packaged them into ADF JAR libraries:

Those libraries are imported into DynamicDashboard application:

You can see that Model project in DynamicDashboard is empty, thats correct - because I'm using it only to integrate content from another applications. ViewController contains one JSPX page, where Dynamic Dashboard is implemented, and Toolbar declarative component with toolbar elements. You will find DemoDashboardBean there as well, its where all drag and drop logic is implemented. Same bean controls minimize, maximize and restore operations applied for Dynamic Dashboard elements.

I'm not going to describe all technical specifics for Dynamic Dashboard, its code is quite straightforward. I took Oracle example from Oracle ADF Faces Components demo and removed things I didn't wanted to have, now it is more lightweight and optimized for ADF Regions integration. I rather will focus on functionality.

Here you can see main Dynamic Dashboard screen - four integrated ADF Regions, placeholder to keep minimized regions on the left and New Job, Job Distribution, Assigned Jobs, Show All and Shown None links on the top. These links allow to show predefined sets of regions.

If user wants to hide any available region, he can just take it and drop on the left. Locations and Employees regions are minimized now, only Departments and Jobs are available:

User can maximize displayed region and then restore to original view:

Depending on a use case, Dynamic Dashboard potentially can replace UI design with different tabs.


Unknown said...

Wow, that's a really nice integration facility...

Thanks for sharing.

HusainD said...

On the same lines I had created a declarative component for dashboard a few weeks ago.

Andrej Baranovskij said...

Great - it will be powerful combination, thanks for link.


Hasim said...

If we can create portlet using dashboard using ADF then why do we need WebCenter.

We can create taskflow for dashboard and make it reusable.
We can do much more sort of combination like this.



Andrej Baranovskij said...

First, because licence cost and development effort - it will cost you much much more to develop custom portlets.

WebCenter Spaces is preconfigured environment, it gives lots of Web 2.0 services out of the box. And it can be customized with custom ADF Task Flows according cutomer need.


Luis Paolini said...

Hi, I used your dashboar sample as a starting point to create a demo. In one of the Panel Boxes I'm displaying a map using the ADF DVT component. Using the DVT I have a basemap (mapcache) and over it I add a dynamic theme (FOI). The problem happens when I maximize this PanelBox. It seens that the pagefragment is reloaded and the FOI theme is not being keeped. Is there any alternative to avoid the page reload when the user hit the maximize button?

Unknown said...

Hi. I have the same problem. But, I saw that the reload only occurs in the dvt:map component. How to solve or handle this? (Obs: I'm sorry about my poor English, but I do my best.)

Anonymous said...

In WebCenter, can you use this code and use a portlet instead of the panelboxes?

I would like an interface like iGoogle in Webcenter with the maximize Canvas option like iGoogle.

Andrej Baranovskij said...


WebCenter is based on ADF, so yes - you can use same.


Anonymous said...

I am trying to implement the same functionality. But when I am trying to build an expression for switcher's facet name using the expression builder, i am not getting

the item methods defined in the backing bean. Is there anything that i am missing? I am using jdev 11.1.2.


Andrej Baranovskij said...

You can type expression manually, it should work.


Balaji Kamepalli said...

Wow, this is really good.

But Drag and Drop not working from MyDashboard to panel dashboard.

Please help..