ADF Skinning: Increase width, Change color of a tab in af:panelTabbed

We can change appearance of ADF Application by applying CSS and changing style properties of ADF Faces Component
Here i am writing a simple CSS to increase tab width of af:panelTabbed component

I hope you all know how to create a skin for ADF Application , If don't know then look at this post
ADF Basics: Using CSS to change appearance of application (Skins and Styles in ADF Faces) 

ADF Basics: Creating Bounded Task Flow Train using af:train component

This post is about using bounded task flow as train
A train presents a whole cycle and it's every stop presents a particular step of cycle
From the docs -

The train component presents a user with a series of stops, each stop representing a step in a multi-step process. The train walks the user through these steps, in a suggested order (the order being dictated by the underlying model). Each step is rendered as a train stop consisting of an image and a textual link indicating if they are in visited, current, unvisited and disabled states. Train can also be rendered in a vertical layout - the default being a horizontal layout. Trains are not rendered on printable pages. 

Navigating to (open) specific tab in af:panelTabbed programmatically -Oracle ADF

Hello All,
This post is about a development requirement - how to move (navigate or open) to a specific tab in panel tabbed  in Oracle ADF?
Suppose i have to open second tab of af:panelTabbed on a button click, so see how to do this using ADF Faces

• Create a Fusion Web application and a page to drop panel tabbed and a button





• now bind panel tabbed and it's showDetailItem to managed bean, in order to use disclosed property and to get client id
See the code to open (disclose) a specific tab of af:panelTabbed


    //Binding of Panel Tabbed
    private RichPanelTabbed panelTabBind;

    public void setPanelTabBind(RichPanelTabbed panelTabBind) {
        this.panelTabBind = panelTabBind;
    }

    public RichPanelTabbed getPanelTabBind() {
        return panelTabBind;
    }

    /**
     * @Method to disclose (open) specific tab
     * Pass the binding of af:showDetailItem that you want to open
     */
    public void setDisclosedFirstTab(RichShowDetailItem tabBind) {
        RichPanelTabbed richPanelTabbed = getPanelTabBind();
        for (UIComponent child : richPanelTabbed.getChildren()) {
            RichShowDetailItem sdi = (RichShowDetailItem) child;
            if (sdi.getClientId().equals(tabBind.getClientId())) {
                sdi.setDisclosed(true);
            } else {
                sdi.setDisclosed(false);
            }
        }
        AdfFacesContext.getCurrentInstance().addPartialTarget(panelTabBind);
    }



• Now see the code written on button action- here i have checked that which tab is currently disclosed? and based on that i have passed next tab binding to this method





    /**Method to be called on Navigate Button
     * @param actionEvent
     */
    public void naviGateButtonAction(ActionEvent actionEvent) {
        if (firstTabBind.isDisclosed()) {
            setDisclosedFirstTab(secTabBind);
        } else if (secTabBind.isDisclosed()) {
            setDisclosedFirstTab(thirdTabBind);
        } else {
            setDisclosedFirstTab(firstTabBind);
        }
    }



• now run your page and see navigation in af:panelTabbed

 Cheers Happy Learning :) Sample ADF Application