Sticky Tabs (showOneDetail) with JSF/ADF

Working with JDEV 10.13 and JSF is a lot better than the old version and UIX. One of the new features that I have found useful is the ShowOneTab and ShowDetailItem components of ADF Faces. One area that that I could not find built into the ShowDetailItem was the ability to have it automatically store the state of what detail item was being shown. Any time you navigated off the page and came back it would reset to the default first detail item. This article will show you a way to store the state and make the pages sticky.

1. First Step is to create your JSF page, check the option to have it automatically hook into a backing bean.

2. Drop a ADF Faces Panel Page onto your page.

3. Drop a ShowOneTab onto your page

4. Drop two ShowDetailItems onto your page inside of the ShowOneTab

5. Your page should look like this:

6. The next step is to create a backing bean for holding the page status for you. Go to your JSF controller page and click on the overview tab. Click on the managed beans and then select new. Fill out the dialog as shown below:

7. Open your new class and enter your code for storing and getting the page state:

package demo.view;

public class pageStatus

{

private String _stickyActiveTab;

public pageStatus()

{

_stickyActiveTab = “”;

}

public String getStickyActiveTab()

{

return (String) _stickyActiveTab;

}

public void setStickyActiveTab(String Value)

{

_stickyActiveTab =Value;

}

}

8. Select the first ShowDetailItem in the structure panel, right click and select Create method binding for disclosurelistener:

9. In the disclosure listener you place your code to set the bean value for the page. There are probably better ways to handle this then the way I worked it. However, I needed to get this done in a hurry and my way is working just fine in my app. For those of you that have a better method please drop me a note. In face using the disclosure event date would probably be the best way to work it.

public void showDetailItem1_disclosureListener(DisclosureEvent disclosureEvent)

{

if (this.showDetailItem1.isDisclosed() )

setManagedBeanValue(”pageStatus.stickyActiveTab”, “TAB1″);

if (this.showDetailItem2.isDisclosed() )

setManagedBeanValue(”pageStatus.stickyActiveTab”, “TAB2″);

}

10. The setManagedBeanValue is from the SRDEMO that the oracle guys put together. You can place that file in your project or use the snippets from this article.

public static void setExpressionValue(String expression,

Object newValue) {

FacesContext ctx = FacesContext.getCurrentInstance();

Application app = ctx.getApplication();

ValueBinding bind = app.createValueBinding(expression);

Class bindClass = bind.getType(ctx);

if (bindClass.isPrimitive() || bindClass.isInstance(newValue)) {

bind.setValue(ctx, newValue);

}

}

public static void setManagedBeanValue(String beanName,

Object newValue) {

StringBuffer buff = new StringBuffer(”#{”);

buff.append(beanName);

buff.append(”}”);

setExpressionValue(buff.toString(), newValue);

}

10. Next open your JSF page and point the second detail item to the disclosure listener you just created for item one, the example is below:

11. Last step, added the disclosure tag to your showDetailItems like the example below.

12. Now when you run the page, the tabs will be sticky. You can test this by setting up a second page to navigate to and then navigate back.

Figure 1 - Selected Second Tab then moved to next Page

Figure 2 - On Second page

Figure 3 - Navigate back to the first page and our tab is still set.

13. That’s the end of this little article on how to make the tabs sticky. If you have any comments please post them on the site here.

This entry was posted on August 24, 2006 at 7:13 pm and is filed under JSF / ADF. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response or trackback from your own site.

| Print