May be you are thinking to add some fresh looking element into your ADF app? I would propose JQuery menu. Advantage of such menu - it is purely client side implementation and it allows user to navigate through items really fast. Besides fast navigation, it looks great too and can be easily customized.
In this post I will describe how to achieve JQuery menu integration into ADF Faces and provide sample ADF application. I'm using JQuery menu from here - Animated Responsive Drop Down Menu. There is no need to implement JQuery menu component, we can use one of the existing implementations.
I have recorded short example, you can see how convenient is client side menu navigation. Each menu item loads ADF region:
JQuery menu integrated into my ADF sample:
It can display menu items for multiple levels:
Integration into ADF Faces is very simple, you need to copy JS and CSS files into ADF application:
Define JS and CSS resources in ADF main page, make sure to reference JQuery too:
Menu structure is defined in ADF fragment using HTML tags. Once menu item is selected, call to ADF is made through combination of client/server listeners (check WBClient.menuNavigation method). In my future posts I will describe how to construct similar menu structure dynamically. If your application is secured, make sure to define ADF Security permissions to TF's properly, any unprotected TF can be loaded from the menu:
Client listener method menuNavigation constructs params with target TF address and calls server listener, which in turn displays ADF dynamic region:
Menu fragment with HTML tags is integrated into ADF page template:
Download sample application - ADFJQueryMenuApp.zip.
In this post I will describe how to achieve JQuery menu integration into ADF Faces and provide sample ADF application. I'm using JQuery menu from here - Animated Responsive Drop Down Menu. There is no need to implement JQuery menu component, we can use one of the existing implementations.
I have recorded short example, you can see how convenient is client side menu navigation. Each menu item loads ADF region:
JQuery menu integrated into my ADF sample:
It can display menu items for multiple levels:
Integration into ADF Faces is very simple, you need to copy JS and CSS files into ADF application:
Define JS and CSS resources in ADF main page, make sure to reference JQuery too:
Menu structure is defined in ADF fragment using HTML tags. Once menu item is selected, call to ADF is made through combination of client/server listeners (check WBClient.menuNavigation method). In my future posts I will describe how to construct similar menu structure dynamically. If your application is secured, make sure to define ADF Security permissions to TF's properly, any unprotected TF can be loaded from the menu:
Client listener method menuNavigation constructs params with target TF address and calls server listener, which in turn displays ADF dynamic region:
Menu fragment with HTML tags is integrated into ADF page template:
Download sample application - ADFJQueryMenuApp.zip.
No comments:
Post a Comment