Alta UI in ADF 12c provides great options for dashboard implementation. You can use so called 'info tiles' as blocks displaying summary information. These blocks are clickable and based on active tile, content can be rendered. It looks not only modern, but also user friendly.
I have implemented sample application - ADFAltaApp_v11.zip with Alta UI dashboard, based on code examples from Oracle WorkBetter application. You could download and run my sample, it renders two vertically aligned info tiles with summarised information:
Click on second info tile, main content will be changed:
Info tile block is implemented as ADF declarative component with a set of properties to make it generic and reusable:
Each info tile is defined as declarative component in the dashboard:
Declarative component requires to set several properties. Property 'selected' returns true/false if current tile should be rendered as selected. Each tile should be assigned with unique index, client listener method based on this index identifies selected tile:
Tile content is surrounded with panel group layout component. By default this component doesn't provide click support. However, click support can be implemented with client listener method (I will not go here into client listener implementation details, because this code is well documented in Oracle WorkBetter sample application referenced above):
Client listener invokes server listener method to pass user click request to the server:
Server listener method updates selected tile index and generates partial target refresh. This is how tile selection works:
Content area is rendered with ADF Faces deck component. This component allows to invoke transition between different UI blocks, based on currently selected tile:
DisplayedChild property identifies UI block to display. This property value is calculated from selected tile index:
First UI block contains ID = infd0. This corresponds to index of first tile:
I have implemented sample application - ADFAltaApp_v11.zip with Alta UI dashboard, based on code examples from Oracle WorkBetter application. You could download and run my sample, it renders two vertically aligned info tiles with summarised information:
Click on second info tile, main content will be changed:
Info tile block is implemented as ADF declarative component with a set of properties to make it generic and reusable:
Each info tile is defined as declarative component in the dashboard:
Declarative component requires to set several properties. Property 'selected' returns true/false if current tile should be rendered as selected. Each tile should be assigned with unique index, client listener method based on this index identifies selected tile:
Tile content is surrounded with panel group layout component. By default this component doesn't provide click support. However, click support can be implemented with client listener method (I will not go here into client listener implementation details, because this code is well documented in Oracle WorkBetter sample application referenced above):
Client listener invokes server listener method to pass user click request to the server:
Server listener method updates selected tile index and generates partial target refresh. This is how tile selection works:
Content area is rendered with ADF Faces deck component. This component allows to invoke transition between different UI blocks, based on currently selected tile:
DisplayedChild property identifies UI block to display. This property value is calculated from selected tile index:
First UI block contains ID = infd0. This corresponds to index of first tile:
Hi Andrejus,
ReplyDeleteThe tooltip stretches the entire height of the window, i tweeted a photo - https://twitter.com/andrejusb/status/652817104333369344
Any idea how to stop it from doing that?
Regards
Hi,
ReplyDeleteThis is chart component issue, I'm aware about it. Same can be reproduced in downloaded WorkBetter application. However, this behaviour is not reproduced in Oracle hosted WorkBetter application. Must be different ADF version of something. Once I will find workaround - I will post it. If you find any solution, also welcome to post :)
Andrejus
Hi Stefan,
ReplyDeleteIssue with the chart tooltip is fixed in upcoming ADF 12.2.1 release.
Regards,
Andrejus
can please explain in detail how you have created 'af:declarativeComponent'. how you created infoTile.jsff . is this a jar file or how you created this declarative component
ReplyDeleteYou have source code, please study it :)
ReplyDeleteAndrejus
rest all is clear for me but this tiles and af:declarativeComponent is not clear.
ReplyDeletekindly guide me i will be very thankful