Using af:deck component to animate content in ADF 12c(12.1.3)

Hello all,
af:deck is new component introduced in ADF 12.1.3, see more detail on Oracle Docs
af:deck-Tag Referance
http://docs.oracle.com/middleware/1213/adf/tag-reference-faces/tagdoc/af_deck.html
ADF Faces Demo Server (deck demo)

As per oracle docs-
The deck component is a container that shows one child component at a time. When changing which child is displayed, the transition can be animated.
This component does not provide any built-in controls for choosing which child is displayed. Instead, you use some other component to control it. For example, you might use an external navigationPane tab bar or perhaps some external commandImageLinks to represent page progress dots. You are not limited to external controls, your deck might be displaying a series of images and you may want to put a link around each image to trigger advancing to the next image. In all of these cases, you will need to use an event handler function to change the displayed child.

So in this post i am going to show - how to use af:deck component with some animation effect?
in this post i am using 6 images to display on 6 different links

• so designed page like this, inside deck there is 6 images, and there are 6 image links outside deck , each link is associated with managed bean actionListener 



<af:panelGroupLayout id="pgl4" layout="horizontal" halign="center">
          <af:link id="l1" icon="#{resource['images:circle-lblue.png']}"
                   actionListener="#{viewScope.DynamicDeckBean.link1Action}" partialSubmit="true"/>
          <af:link id="l2" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link2Action}"/>
          <af:link id="l3" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link3Action}"/>
          <af:link id="l4" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link4Action}"/>
          <af:link id="l5" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link5Action}"/>
          <af:link id="l6" icon="#{resource['images:circle-lblue.png']}"
                   hoverIcon="#{resource['images:circle-lred.png']}" partialSubmit="true"
                   actionListener="#{viewScope.DynamicDeckBean.link6Action}"/>
        </af:panelGroupLayout>

• created binding for deck in managed bean , and added af:transition for back and forward animation for images



<af:deck id="d1" displayedChild="i1" binding="#{viewScope.DynamicDeckBean.deckBind}">
          <af:transition triggerType="forwardNavigate" transition="flipLeft"/>
          <af:transition transition="flipRight" triggerType="backNavigate"/>
          <af:image source="#{resource['images:1.jpg']}" shortDesc="Wild Life 1" id="i1"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:2.jpg']}" shortDesc="Wild Life2" id="i2"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:3.jpg']}" shortDesc="Wild Life3" id="i3"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:4.jpg']}" shortDesc="Wild Life4" id="i4"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:5.jpg']}" shortDesc="Wild Life5" id="i5"
                    inlineStyle="height:300px;width:500px;"/>
          <af:image source="#{resource['images:6.jpg']}" shortDesc="Wild Life6" id="i6"
                    inlineStyle="height:300px;width:500px;"/>
        </af:deck>



• Now page looks like this





• Refer the above links- there is a method to animate deck's child , i have used same method

See managed bean code for links and to animate deck child


    // Animate the display of a deck child.
    private void _animateDeckDisplayedChild(UIComponent eventComponent, int newDisplayedChildIndex) {
        // Find the nearest deck ancestor:
        RichDeck deck = null;
        String eventComponentId = eventComponent.getId();
        while (deck == null) {
            if (eventComponent == null) {
                System.err.println("Unable to locate a deck ancestor from id " + eventComponentId);
                return;
            } else if (eventComponent instanceof RichDeck) {
                deck = (RichDeck) eventComponent;
                break;
            }
            eventComponent = eventComponent.getParent();
        }
        System.out.println("Child is-" + eventComponent.getId());
        String newDisplayedChild = deck.getChildren().get(newDisplayedChildIndex).getId();

        // Update the displayedChild:
        System.out.println("Display Child-" + newDisplayedChild);
        deck.setDisplayedChild(newDisplayedChild);

        // Add this component as a partial target:
        RequestContext.getCurrentInstance().addPartialTarget(deck);
    }


Code to change image and calling method to animate, here 0,1,2 are index no. of deck's children



/**Methods to be called on different links to show different images*/
    public void link1Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 0);// 0 for first child of deck
    }
    public void link2Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 1);// 1 for second child of deck
    }
    public void link3Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 2);
    }
    public void link4Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 3);
    }
    public void link5Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 4);
    }
    public void link6Action(ActionEvent actionEvent) {
        UIComponent eventComponent = deckBind;
        _animateDeckDisplayedChild(eventComponent, 5);
    }



• Now run application and click on links :) see how deck works

See live -how af:deck works

So Happy Learning Sample ADF Application

Using Star Rating component (dvt:ratingGauge) in ADF 12c (12.1.3 new component)

Hello all
As ADF 12.1.3. is out , there is lot of enhancement in UI layer, component for Rating is available in this release i;e rating gauge (dvt:ratingGauge)
see how this rating gauge look like-

1.XML Source- Simple Rating Gauge with Star Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"/>

2. XML Source- Rating Gauge with Circular Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"
                     shape="circle" inputIncrement="half" readOnly="false"/>

2. XML Source- Rating Gauge with Circular Symbol, Rectangular Unselected Symbol

<dvt:ratingGauge id="ratingGauge2" value="2" minimum="1" maximum="5" inlineStyle="width:300px;height:80px;"
                     shape="circle" inputIncrement="half" readOnly="false" unselectedShape="rectangle"/>

Sample Application Based on Departments Table of Default HR Schema

• Added a column in HR's Departments table for Rating





• now create model using Departments table and drop on page (page fragment in bounded taskflow)as table and form, select Rating attribute from Data Control and drop as Gauge-->Rating Gauge(Minimum-0 Maximum-9)
• see on page it is ready to show Rating of Department, but still not able to take input





• By default rating gauge is readonly means it doesn't take input from user, set readonly to false and set increment (full or half) values
• So i have tried this, but when i select any rating and commit data, it doesn't reflect changes in Database table, it is still showing previously saved value
• i don't know why this is happening, so i have used valueChangeListener and set new rating in current row of Department, in this way it is working fine



    /**ValueChange Listener to SetRating
     * @param vce
     */
    public void ratingVCE(ValueChangeEvent vce) {
        if (vce.getNewValue() != null) {
            System.out.println("New Rating -" + vce.getNewValue());
            DCIteratorBinding iter = (DCIteratorBinding) getBindings().get("Departments1Iterator");
            iter.getViewObject().getCurrentRow().setAttribute("Rating", vce.getNewValue());
        }
    }



• Now run and enjoy new rating gauge :)

Happy Learning :) Download- Sample ADF Application

Oracle JDeveloper and Oracle ADF 12c (12.1.3.0.0) out (bug fixed and lots of new features introduced)

hello all
ADF & Jdeveloper 12c (12.1.3.0) released with lots of new features and previous (12.1.2.0) bugs are fixed

Bugs Fixed in 12c (12.1.3.0)-

related to af:query, af:tabel filter and scrolling, property inspector, inputlistofvalues, radioGroup, af:message, checkbox, table pagination, context menu, autosuggest in inputlistofValues, shuttle component
Check out complete list of fixed bugs- Bug Fix List

New Features introduced in 12c (12.1.3.0)-

Enjoy some very cool ADF Faces components

• 30+ chart types, thematic map with zoom and rotation feature
• new gauge and awaited rating gauge
• new component af:deck ,like CSS image slider to show multiple child details one by one with slide and fade effect
• CSS rule for changing button's color and width
• Export to CSV feature, mouse hover in list view

Check out complete list of features- New In This Release

Happy Learning , Enjoy new Jdev :)

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

Detect browser & platform information (name,version), server and client IP details in Oracle ADF

Hello All,
This is post is about getting browser details (version, name ) , platform details (Operating System details) ,server and client IP addresses in Oracle ADF Application
sometimes we need these small but important details -

Code to get this information-

        RequestContext requestCtx = RequestContext.getCurrentInstance();
        Agent agent = requestCtx.getAgent();
        String version = agent.getAgentVersion();
        String browser = agent.getAgentName();
        String platform = agent.getPlatformName();
        String platformVersion = agent.getPlatformVersion();
        FacesContext fctx = FacesContext.getCurrentInstance();
        HttpServletRequest request = (HttpServletRequest) fctx.getExternalContext().getRequest();
        StringBuilder detailMsg = new StringBuilder("<html><body><b>Browser Agent and Ip address details</b><br>");
        detailMsg.append("<ul><li><b>Browser-</b>" + browser + "</li><li><b>Version-</b>" + version +
                         "</li><li><b>Plateform-</b>" + platform + "</li>");
        detailMsg.append("<li><b>Plateform Version-</b>" + platformVersion + "</li><li><b>Server IP-</b>" +
                         request.getLocalAddr() + "</li><li><b>Client IP-</b>" + request.getRemoteAddr() +
                         "</li></ul>");
        detailMsg.append("</body></html>");
        FacesMessage errMsg = new FacesMessage(detailMsg.toString());
        errMsg.setSeverity(FacesMessage.SEVERITY_INFO);
        fctx.addMessage(null, errMsg);

See the output-
Application running on Mozilla-

Application running on Chrome-

Application running on Internet Explorer-

Cheers :) Happy Learning

Post by Oracle JDeveloper.