Friday, June 5, 2015

Attractive ADF.

Imho, attractive functionality is better than just functionality. In this post I'm going to show how you can use jQuery in ADF applications.


Some time ago I was creating a dashboard for our project. And I wanted to make it's editor intuitive and easy to use. I surfed the Internet and found gridster. It is a great jQuery plugin which allows building intuitive draggable layouts. So I thought, why not?
To add jQuery in ADF application is as easy as in usual site development. Just download it with needed plugins and put them in the project. Add scripts and css files to document's metaContainer facet.


Create a fragment with components and add script which will be called when the fragment is loaded.

The only way I have found is to use trinidad script tag which is in Trinidad HTML Components tag library.


After that you should bind jQuery callbacks with your server listeners for adf components.


The sample application is here. The fragment's code is just an example. Never place css, javascript and faces tags in one place.
This video demonstrates how gridster runs in our real ADF application.

1 comment:

  1. Hi nicely done!! can you provide access to this sample application, i am not able to download that. I think Masonry Layout introduced in 12c is simillar to this. but would like to try this out for sure.

    Thanks for nice post.

    ReplyDelete