Thursday 30 July 2015

Autosuggest Behavior programmatically in ADF

This blog we will see how programmatically achieve the autosuggest behavior.
The below steps we will follow to achieve the autosuggest behavior
1. Create an af:inputText in your page.
2. Add af:autoSuggestBehavior inside the af:inputText with suggestItems. The code should looks like the below

<af:inputText label="Enter First Name : ">
            <af:autoSuggestBehavior suggestItems="#{AutosuggestPageBean.getSuggestedFirstName}"/>
 </af:inputText>

3. The below code needs to write for autosuggest

    public List getSuggestedFirstName(FacesContext facesContext,
                                      AutoSuggestUIHints autoSuggestUIHints) {
        // Add event code here...
        List<String> firstNameUpList = new ArrayList<String>();
        firstNameUpList.add("prabhat");
        firstNameUpList.add("Steven");
        firstNameUpList.add("Neena");
        firstNameUpList.add("Lex");
        firstNameUpList.add("Alexander");
        firstNameUpList.add("Bruce");
        firstNameUpList.add("David");
        firstNameUpList.add("Valli");
        firstNameUpList.add("Diana");
        firstNameUpList.add("Nancy");
        firstNameUpList.add("Daniel");
        firstNameUpList.add("John");
        firstNameUpList.add("Ismael");
        firstNameUpList.add("Jose Manuel");
        firstNameUpList.add("Luis");
        firstNameUpList.add("Den");
        firstNameUpList.add("Alexander");
       
        List suggestedFirstNames = new ArrayList<SelectItem>();

        List<String> firstListval = firstNameUpList;
        Iterator frstItr = firstListval.iterator();
        String inputValue = null;
        String fstNm = null;
        inputValue = autoSuggestUIHints.getSubmittedValue();

        while (frstItr.hasNext()) {
            String inputValueLower = inputValue.toLowerCase(Locale.ENGLISH);
            fstNm = (String)frstItr.next();
            String tempFn = fstNm.toLowerCase(Locale.ENGLISH);
            if (tempFn.startsWith(inputValueLower)) {
                javax.faces.model.SelectItem selectItem =
                    new javax.faces.model.SelectItem();
                selectItem.setLabel(fstNm);
                selectItem.setValue(fstNm);
                suggestedFirstNames.add(selectItem);
            }
        }
        return suggestedFirstNames;
    }

Now run your application it will looks like the below
You can download the code: Download

Thanks..

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..

Monday 13 July 2015

How to show/hide af:popup on mouse hover


This blog we will see, how to show/hide af:popup on mouse hover.
In real time scenario you will get the requirement on mouse over we need to display the popup and mouse out needs to close the popup.
To achieve the same functionality we need to add af:showPopupBehavior with triggerType=”mouseOver” property. But the problem is on mouse over we will display the popup but mouse out popup will not close automatically. To close the popup we need to click outside of the popup or need to press escape key on keyboard.
But we can resolve the same problem, by changing the property triggerType=”mouseHover” of af:showPopupBehavior.

NOTE: If you press ctrl + space on triggerType=”” then mouseHover will not display. So you need to type triggerType=”mouseHover”.

Thanks..

Friday 10 July 2015

How to Use CAPTCHA in ADF application


This blog we will see, how to use CAPTCHA in ADF application.
CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a challenge-response system test designed to differentiate humans from automated programs. The sample of CAPTCHA is like below                                                

   We need to follow the below steps for enabling CAPCHA in ADF application
    1. Create a fusion middleware web application. 
    2.  Download the simplecaptcha-1.2.1.jar. This jar file you can download from internet. 
    3.  Add the same jar file into the project. Now right click on the viewcontroller project and select project properties. Then select “Library and Classpath” and click on “Add JAR/Directory…” and the jar file.


            4.       Add the following code in web.xml file.


<servlet>
    <servlet-name>CaptchaServlet</servlet-name>
    <servlet-class>nl.captcha.servlet.SimpleCaptchaServlet</servlet-class>
    <init-param>
            <param-name>width</param-name>
            <param-value>250</param-value>
    </init-param>
    <init-param>
       <param-name>height</param-name>
       <param-value>75</param-value>
    </init-param>
  </servlet>

<servlet-mapping>
    <servlet-name>CaptchaServlet</servlet-name>
    <url-pattern>/captchaservlet</url-pattern>
  </servlet-mapping>


      5.       Add the following code in your page(.JSPX/.jsff)


<af:panelFormLayout id="pfl1">
          <f:facet name="footer"/>
          <af:outputText value="Captcha Demo" inlineStyle="font-size:22pt;"/>
          <af:image source="/captchaservlet" id="i1"
                    inlineStyle="width:200px; height:60.0px;"/>
          <af:commandButton text="Refresh" id="cb2"
                            partialSubmit="false"/>           
             <af:panelLabelAndMessage label="Enter the Text : " id="plam1">
            <af:panelGroupLayout id="pgl1" layout="horizontal" halign="left">
              <af:inputText id="it1" value="#{requestScope.enterTxt}"/>
              <af:commandButton text="try" id="cb1"
                                actionListener="#{backingBeanScope.backing_CapchDemoTest.verifyAnswer}"
                                partialSubmit="true" immediate="false"/>
            </af:panelGroupLayout>
            <af:message id="m1" for="it1"/>
          </af:panelLabelAndMessage>
        </af:panelFormLayout>
 
      6.       Add the below code into your bean.


    public void verifyAnswer(ActionEvent actionEvent) {
        // Add event code here...
        FacesContext fctx = FacesContext.getCurrentInstance();
        ExternalContext ectx = fctx.getExternalContext();
        HttpServletRequest request = (HttpServletRequest)ectx.getRequest();
        Captcha captcha = (Captcha)ectx.getSessionMap().get(Captcha.NAME);
        try {
            request.setCharacterEncoding("UTF-8");
        } catch (UnsupportedEncodingException e) {
            System.out.println("UTF not supported !");
        }
        String answer = (String)ectx.getRequestMap().get("enterTxt");
        if (answer != null && captcha.isCorrect(answer)) {
            message("You are correct boss.");
        } else {
            message("You are wrong.Please try again.");
            UIComponent panelLabelAndMessage =
                ((UIComponent)actionEvent.getSource()).getParent().getParent();
            UIComponent panelFormlayout = panelLabelAndMessage.getParent();
            AdfFacesContext.getCurrentInstance().addPartialTarget(panelFormlayout);
        }

    }

    private void message(String str) {
        FacesContext fctx = FacesContext.getCurrentInstance();
        fctx.addMessage("it1", new FacesMessage(str));
    }
 
      7.       Now run your application. It will display like the below.


You Can Download the code: Download

Thanks..