Friday, December 10, 2010

Page Navigation using JavaScript in ADF Faces

Recently I posted a question on the Oracle ADF forum asking if there is Javascript API for page navigations in ADF faces and the simple answer is NO.

My Original Post:

I have a UI user case that has a af:menu which contains mutiple af:goMenuItem. When user click on the menu, the menu slides down and shows up the af:goMenuItem. As we know, you could define the page destinations in af:goMenuItem to go to another page when user clicked, but af:menu itself cannot be redirected to another page. Well, the user case wants the menu itself could be redirected if user click on it. 

So I am thinking using JavaScript to do this: when the af:menu gets clicked, redirect to another page. BUT, I looked over the ADF Faces Javascript API and was not able to find that piece of code to do this. Any help???


Frank's Response:

1 - you can have a hidden command item to do the navigation based on a control flow case. In this case, you access the command component from JavaScript create a new ActionEvent and queue it
2 - JavaScript can use an af:serverListener to call into a server side managed bean method to perform the navigation

there is no JavaScript API for navigation in ADF Faces because navigation in JavaServer Faces is an event driven framework and we don't support developers fighting the framework.

Steps to solve the problem:

Step 1: Create a CommandMenuItem under the af:menu component. Note goMenuItem is not working in this case because later we will use AdfActionEvent.queue method to simulate CommandMenuItem action while GoMenuItem doenn't have the action property.

Step 2: Drag and Drop af:ClientListener tag to af:menu component. Set the method as "onMenuClick" and the type is "click".

Step 3: Create a new JavaScript file and add the following codes into the file:


function onMenuClick(evt) {
    var source = evt.getSource();
    var component = source.findComponent('::pt_cmi1');
    AdfActionEvent.queue(component, component.getPartialSubmit());
}

pt_cmil1 is id name of the created commandMenuItem.

Step 4: Add af:resouce tag to af:document and set the source to the created javascript file and type is "javascript".

2 comments:

Dallas Web Design said...

Thanks it was interesting.

Olya Olegovna said...

Good information here. I will post these information to my facebook page. It is really very informative for others.