Thursday 23 July 2015

Use of af:panelTabbed and navigate to different tab

This blog we will get the below information
1. Use of af:panelTabbed.
2. Use of af:showDetailItem
3. Get the selected tab information.
4. Navigate to different tab.
Now create a panelTabbed and inside the panelTabbed needs to add 4 showDetailItems named as First Tab, Second Tab, Third Tab and Fourth Tab. Now run your page and it will display like the below screen
To get the clicked tab name, we need to add the below code
disclosureEvent.getComponent().getAttributes().get("text").
Generally if you click the tab then all tab events will fire. So need to check which tab user we want to open. The below code we need to check for checking expand or collapse.


        if (disclosureEvent.isExpanded()) {
            // The below code will return the selected tab name.
            System.out.println(disclosureEvent.getComponent().getAttributes().get("text"));
            String selTab =
                disclosureEvent.getComponent().getAttributes().get("text").toString();
            if (selTab.equalsIgnoreCase("First Tab")) {
                firstTabBind.setDisclosed(true);
                secondTabBind.setDisclosed(false);
                thirdTabBind.setDisclosed(false);
                fourthTabBind.setDisclosed(false);
            } else if (selTab.equalsIgnoreCase("Second Tab")) {
                firstTabBind.setDisclosed(false);
                secondTabBind.setDisclosed(true);
                thirdTabBind.setDisclosed(false);
                fourthTabBind.setDisclosed(false);
            } else if (selTab.equalsIgnoreCase("Third Tab")) {
                firstTabBind.setDisclosed(false);
                secondTabBind.setDisclosed(false);
                thirdTabBind.setDisclosed(true);
                fourthTabBind.setDisclosed(false);
            } else if (selTab.equalsIgnoreCase("Fourth Tab")) {
                firstTabBind.setDisclosed(false);
                secondTabBind.setDisclosed(false);
                thirdTabBind.setDisclosed(false);
                fourthTabBind.setDisclosed(true);
            }
            AdfFacesContext.getCurrentInstance().addPartialTarget(panelTabBind);
        }
NOTE: disclosureEvent.isExpanded() : return true for clicked tab and rest all tab will return false.
Selected tab will set disclosed to true and rest all to false.
After run the application the below images are some screens




You can download the code : Download

Thanks..

No comments:

Post a Comment